--- title: "Loading Indicator" description: "Customize the loading screen that appears while the CE.SDK editor initializes by adding headings, body text, or removing the spinner." platform: angular url: "https://img.ly/docs/cesdk/angular/-575e91/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/angular/user-interface-5a089a/) > [Customization](https://img.ly/docs/cesdk/angular/user-interface/customization-72b2f8/) > [Loading Indicator](https://img.ly/docs/cesdk/angular/-575e91/) --- Customize the loading screen that appears while the CE.SDK editor initializes by configuring a spinner, heading, and body text. ![Loading Indicator example showing a customized loading screen with spinner and text](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-customization-loading-indicator-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-user-interface-customization-loading-indicator-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-customization-loading-indicator-browser/) The loading indicator fills the editor canvas while the engine initializes and disappears once ready. By default only a spinner is shown, but you can add a heading and body text or remove the spinner entirely. All configuration uses static pre-init APIs that must be called **before** `CreativeEditorSDK.create()`, because the loading screen renders before the editor instance exists. ```typescript file=@cesdk_web_examples/guides-user-interface-customization-loading-indicator-browser/index.ts reference-only import CreativeEditorSDK from '@cesdk/cesdk-js'; import Example from './browser'; const customSpinner = ` `; CreativeEditorSDK.ui.addIconSet('custom-loading-spinner', customSpinner); CreativeEditorSDK.i18n.setTranslations({ en: { 'loading.heading': 'Welcome', 'loading.text': 'Preparing your editor...' }, de: { 'loading.heading': 'Willkommen', 'loading.text': 'Editor wird vorbereitet...' } }); CreativeEditorSDK.ui.setComponentOrder({ in: 'ly.img.loading' }, [ 'ly.img.loading.spinner', { id: 'ly.img.loading.heading', content: 'loading.heading' }, { id: 'ly.img.loading.text', content: 'loading.text' } ]); // To show only text without a spinner, omit the spinner: // CreativeEditorSDK.ui.setComponentOrder({ in: 'ly.img.loading' }, [ // { id: 'ly.img.loading.heading', content: 'Loading' }, // { id: 'ly.img.loading.text', content: 'Please wait...' } // ]); // Apply theme from URL query param (used by hero image capture script) const theme = new URLSearchParams(window.location.search).get('theme'); if (theme === 'dark' || theme === 'light') { CreativeEditorSDK.ui.setTheme(theme); } const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', baseURL: import.meta.env.VITE_IMGLY_LOCAL_ASSETS_URL }; CreativeEditorSDK.create('#cesdk_container', config) .then(async (cesdk) => { // Expose cesdk for debugging and hero screenshot generation (window as any).cesdk = cesdk; // Load the example plugin await cesdk.addPlugin(new Example()); }) .catch((error) => { // eslint-disable-next-line no-console console.error('Failed to initialize CE.SDK:', error); }); ``` ## Loading Components Three component types are available: - **`ly.img.loading.spinner`**: An animated spinner icon. Pass as a plain string ID. - **`ly.img.loading.heading`**: Large heading text. Pass as `{ id: 'ly.img.loading.heading', content: 'text or translation key' }`. - **`ly.img.loading.text`**: Body text below the heading. Pass as `{ id: 'ly.img.loading.text', content: 'text or translation key' }`. We configure them by calling `CreativeEditorSDK.ui.setComponentOrder()` with the area `{ in: 'ly.img.loading' }` and an array of components. They render vertically in the order specified. ```typescript highlight=highlight-configure-loading CreativeEditorSDK.ui.setComponentOrder({ in: 'ly.img.loading' }, [ 'ly.img.loading.spinner', { id: 'ly.img.loading.heading', content: 'loading.heading' }, { id: 'ly.img.loading.text', content: 'loading.text' } ]); ``` We then create the editor as usual. The loading screen displays our custom content while the engine initializes: ```typescript highlight=highlight-create-editor CreativeEditorSDK.create('#cesdk_container', config) .then(async (cesdk) => { // Expose cesdk for debugging and hero screenshot generation (window as any).cesdk = cesdk; // Load the example plugin await cesdk.addPlugin(new Example()); }) .catch((error) => { // eslint-disable-next-line no-console console.error('Failed to initialize CE.SDK:', error); }); ``` To show only text without a spinner, omit the spinner from the array: ```typescript highlight=highlight-text-only // To show only text without a spinner, omit the spinner: // CreativeEditorSDK.ui.setComponentOrder({ in: 'ly.img.loading' }, [ // { id: 'ly.img.loading.heading', content: 'Loading' }, // { id: 'ly.img.loading.text', content: 'Please wait...' } // ]); ``` ## Custom Spinner Animation The spinner renders an SVG icon with symbol ID `@imgly/EditorProgress`. To replace it, register a custom icon set via `CreativeEditorSDK.ui.addIconSet()` before creating the editor. The SVG must contain a `` element with `id="@imgly/EditorProgress"`. Use `currentColor` for stroke and fill values so the spinner adapts to the active theme. ```typescript highlight=highlight-custom-spinner const customSpinner = ` `; CreativeEditorSDK.ui.addIconSet('custom-loading-spinner', customSpinner); ``` ## Translating Loading Text The `content` values support i18n. If a `content` string matches a translation key, the translated value is displayed. Otherwise the literal string is used as a fallback. Register translations via `CreativeEditorSDK.i18n.setTranslations()` before creating the editor, then pass the translation key as the `content` value: ```typescript highlight=highlight-translate-loading CreativeEditorSDK.i18n.setTranslations({ en: { 'loading.heading': 'Welcome', 'loading.text': 'Preparing your editor...' }, de: { 'loading.heading': 'Willkommen', 'loading.text': 'Editor wird vorbereitet...' } }); ``` ## Troubleshooting **Loading indicator not changing.** Ensure `setComponentOrder` is called *before* `CreativeEditorSDK.create()`. Calls made after initialization have no effect on the loading screen. **Text not appearing.** Verify that component objects include the `content` property. A string ID like `'ly.img.loading.heading'` without a content object will not render text. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Customize the Clip Context Menu" description: "Control which actions appear in the video timeline clip context menu, reorder built-in actions, and add custom entries per clip type." platform: angular url: "https://img.ly/docs/cesdk/angular/-f8e7d6/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/angular/user-interface-5a089a/) > [Customization](https://img.ly/docs/cesdk/angular/user-interface/customization-72b2f8/) > [Clip Context Menu](https://img.ly/docs/cesdk/angular/-f8e7d6/) --- Customize the dropdown menu on video timeline clips — control which actions appear, their order, and add custom entries per clip type. ![Customize Clip Context Menu example showing the video editor with clip menu customization](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-customization-clip-context-menu-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-user-interface-customization-clip-context-menu-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-customization-clip-context-menu-browser/) The clip context menu is the dropdown that opens via a dedicated button on each clip in the video timeline. CE.SDK provides a different default menu per clip type: background clips show move, overlay, mute, and trim actions; overlay clips show layering and clip-conversion actions; caption clips show merge, add, and delete actions. All menus are customizable through the `ly.img.video.clip.menu` UI area using the Component Order API. ```typescript file=@cesdk_web_examples/guides-user-interface-customization-clip-context-menu-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; 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'); } // Enable video editing features cesdk.feature.enable('ly.img.video.*'); await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create'); // Retrieve the default clip menu order for background clips const clipOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'clip' } }); // eslint-disable-next-line no-console console.log('Default clip menu order:', clipOrder); // Retrieve the default overlay menu order const overlayOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'overlay' } }); // eslint-disable-next-line no-console console.log('Default overlay menu order:', overlayOrder); // Retrieve the default caption menu order const captionOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'caption' } }); // eslint-disable-next-line no-console console.log('Default caption menu order:', captionOrder); // Replace the overlay menu with a simplified layout cesdk.ui.setComponentOrder( { in: 'ly.img.video.clip.menu', when: { clipType: 'overlay' } }, [ 'ly.img.video.clip.menu.setAsClip', 'ly.img.separator', 'ly.img.video.clip.menu.duplicate', 'ly.img.video.clip.menu.delete' ] ); // Add a custom "Export Clip" action to the background clip menu cesdk.ui.insertOrderComponent( { in: 'ly.img.video.clip.menu', before: 'ly.img.video.clip.menu.delete', when: { clipType: 'clip' } }, { id: 'ly.img.video.clip.menu.action', key: 'export-clip', label: 'Export Clip', icon: '@imgly/Download', onClick: () => { // eslint-disable-next-line no-console console.log('Export Clip action triggered'); } } ); // Remove the placeholder action from the background clip menu cesdk.ui.removeOrderComponent({ in: 'ly.img.video.clip.menu', match: 'ly.img.video.clip.menu.placeholder', when: { clipType: 'clip' } }); // Insert a separator after the trim action in the clip menu cesdk.ui.insertOrderComponent( { in: 'ly.img.video.clip.menu', after: 'ly.img.video.clip.menu.trim', when: { clipType: 'clip' } }, 'ly.img.separator' ); // Disable the custom export action conditionally cesdk.ui.updateOrderComponent( { in: 'ly.img.video.clip.menu', match: { id: 'ly.img.video.clip.menu.action', key: 'export-clip' }, when: { clipType: 'clip' } }, { isDisabled: false } ); } } export default Example; ``` This guide covers reading the default menu order, replacing or modifying the menu per clip type, removing and inserting built-in actions, and adding custom actions with callbacks. ## Default Menu Actions Each clip type has its own default order. The menu renders components in the order defined by `setComponentOrder` or the built-in defaults. **Clip (Background Track):** Move Left, Move Right, Set as Overlay, Mute, Trim, Replace, Placeholder, Duplicate, Delete — with separators grouping related actions. **Overlay (Foreground Track):** Bring Forward, Send Backward, Set as Clip, Mute, Trim, Replace, Placeholder, Duplicate, Delete. **Caption:** Merge Captions, Add Caption, Delete. ### Available Component IDs All built-in component IDs that you can use when configuring menu orders: | Component ID | Purpose | |---|---| | `ly.img.video.clip.menu.moveLeft` | Move clip earlier in the track | | `ly.img.video.clip.menu.moveRight` | Move clip later in the track | | `ly.img.video.clip.menu.bringForward` | Move overlay one layer up | | `ly.img.video.clip.menu.sendBackward` | Move overlay one layer down | | `ly.img.video.clip.menu.setAsOverlay` | Convert clip to overlay | | `ly.img.video.clip.menu.setAsClip` | Convert overlay to clip | | `ly.img.video.clip.menu.mute` | Toggle audio mute | | `ly.img.video.clip.menu.trim` | Open trim controls | | `ly.img.video.clip.menu.caption.merge` | Merge adjacent captions | | `ly.img.video.clip.menu.caption.add` | Add a new caption | | `ly.img.video.clip.menu.replace` | Replace clip media | | `ly.img.video.clip.menu.placeholder` | Toggle placeholder mode | | `ly.img.video.clip.menu.duplicate` | Duplicate the clip | | `ly.img.video.clip.menu.delete` | Delete the clip | | `ly.img.video.clip.menu.action` | Generic custom action slot | | `ly.img.separator` | Visual separator between groups | ## Reading the Current Order We retrieve the current menu order for any clip type using `cesdk.ui.getComponentOrder()`. Pass the `when` option with `clipType` to target a specific clip type. Without a `when` clause, the default `'clip'` type order is returned. ```typescript highlight=highlight-read-order // Retrieve the default clip menu order for background clips const clipOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'clip' } }); // eslint-disable-next-line no-console console.log('Default clip menu order:', clipOrder); // Retrieve the default overlay menu order const overlayOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'overlay' } }); // eslint-disable-next-line no-console console.log('Default overlay menu order:', overlayOrder); // Retrieve the default caption menu order const captionOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'caption' } }); // eslint-disable-next-line no-console console.log('Default caption menu order:', captionOrder); ``` This is useful for inspecting the current state before making modifications, or for building a UI that displays the current configuration. ## Replacing the Entire Order We can override the full menu for a clip type using `cesdk.ui.setComponentOrder()`. Pass an array of component IDs to define the complete new order. Each clip type is configured independently — changing the overlay menu does not affect clip or caption menus. ```typescript highlight=highlight-replace-order // Replace the overlay menu with a simplified layout cesdk.ui.setComponentOrder( { in: 'ly.img.video.clip.menu', when: { clipType: 'overlay' } }, [ 'ly.img.video.clip.menu.setAsClip', 'ly.img.separator', 'ly.img.video.clip.menu.duplicate', 'ly.img.video.clip.menu.delete' ] ); ``` Here we replace the overlay menu with only four items: a "Set as Clip" action, a separator, then duplicate and delete. All other default overlay actions are removed. ## Removing Actions We remove a specific action from a clip type's menu using `cesdk.ui.removeOrderComponent()`. The `match` option accepts a component ID string, an index, or a predicate function. ```typescript highlight=highlight-remove-action // Remove the placeholder action from the background clip menu cesdk.ui.removeOrderComponent({ in: 'ly.img.video.clip.menu', match: 'ly.img.video.clip.menu.placeholder', when: { clipType: 'clip' } }); ``` This removes only the placeholder action from the background clip menu. The overlay and caption menus remain unchanged. ## Inserting Actions We insert a component before or after an existing one using `cesdk.ui.insertOrderComponent()`. The options support `before`, `after`, and `position` (`'start'`, `'end'`, or a numeric index) placement. ```typescript highlight=highlight-insert-action // Insert a separator after the trim action in the clip menu cesdk.ui.insertOrderComponent( { in: 'ly.img.video.clip.menu', after: 'ly.img.video.clip.menu.trim', when: { clipType: 'clip' } }, 'ly.img.separator' ); ``` Here we add a separator after the trim action, visually grouping trim with the actions above it and separating it from the actions below. ## Adding Custom Actions We register a custom action using the `ly.img.video.clip.menu.action` component ID. Pass a `ClipContextMenuCustomAction` object with `key`, `label`, `onClick`, and optionally `icon` and `isDisabled`. ```typescript highlight=highlight-custom-action // Add a custom "Export Clip" action to the background clip menu cesdk.ui.insertOrderComponent( { in: 'ly.img.video.clip.menu', before: 'ly.img.video.clip.menu.delete', when: { clipType: 'clip' } }, { id: 'ly.img.video.clip.menu.action', key: 'export-clip', label: 'Export Clip', icon: '@imgly/Download', onClick: () => { // eslint-disable-next-line no-console console.log('Export Clip action triggered'); } } ); ``` The `key` must be unique across all custom actions in the same menu. The `onClick` handler runs when the user selects the action. You can use any icon from the `@imgly/icons` package. The `ClipContextMenuCustomAction` interface: ```typescript interface ClipContextMenuCustomAction { id: 'ly.img.video.clip.menu.action'; key: string; onClick: () => void | Promise; label: string; icon?: string; isDisabled?: boolean; } ``` ## Updating Existing Actions We modify properties of an existing component using `cesdk.ui.updateOrderComponent()`. The update can be a partial object or an updater function. ```typescript highlight=highlight-update-action // Disable the custom export action conditionally cesdk.ui.updateOrderComponent( { in: 'ly.img.video.clip.menu', match: { id: 'ly.img.video.clip.menu.action', key: 'export-clip' }, when: { clipType: 'clip' } }, { isDisabled: false } ); ``` Use `match` with both `id` and `key` to target a specific custom action. You can update any property including `label`, `icon`, `isDisabled`, and `onClick`. ## Clip-Type-Specific Customization Each of the three clip types (`'clip'`, `'overlay'`, `'caption'`) has its own independent order. Changes to one do not affect the others. Use the `when: { clipType }` option on every operation to target a specific clip type. Omitting it defaults to `'clip'`. This independence lets you tailor each menu to its context. For example, overlays need layering controls while captions need merge actions — and you can customize each without worrying about side effects. ## Troubleshooting - **Action not appearing**: Verify the component ID is included in the order for the correct clip type. Use `getComponentOrder` to inspect the current order. - **Custom action not clickable**: Ensure `isDisabled` is not set to `true` and `onClick` is a valid function. - **Changes affecting wrong clip type**: Always pass `when: { clipType }` to target the intended clip type. Without it, operations default to `'clip'`. - **Separator not showing**: Separators are only rendered between visible actions. If adjacent actions are hidden, the separator may not appear. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Actions API" description: "Learn how to use the Actions API to register and customize action handlers in CE.SDK" platform: angular url: "https://img.ly/docs/cesdk/angular/actions-6ch24x/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Actions](https://img.ly/docs/cesdk/angular/actions-6ch24x/) --- The Actions API provides a centralized way to manage and customize actions for various user interactions in CE.SDK. > **Note:** The Actions API is available after CE.SDK initialization through > `cesdk.actions`. > **Tip:** CE.SDK also provides a Utils API (`cesdk.utils`) with utility functions for > common operations like exporting, file handling, and UI dialogs. These > utilities can be used directly or within your custom actions. ## API Methods The Actions API provides four methods: - `register(actionId, handler)` - Register an action function for a specific event - `get(actionId)` - Retrieve a registered action function - `run(actionId, ...args)` - Execute a registered action with the provided arguments (throws if not registered) - `list(matcher)` - Lists registered action IDs, optionally filtered by wildcard pattern ## Getting Started Register actions after initializing CE.SDK: ```javascript import CreativeEditorSDK from '@cesdk/cesdk-js'; const cesdk = await CreativeEditorSDK.create(container, { // license: 'YOUR_CESDK_LICENSE_KEY', }); // Register an action cesdk.actions.register('actionType', async (...args) => { // Your custom implementation return result; }); // Execute a registered action await cesdk.actions.run('actionType', arg1, arg2); // Or retrieve an action to call it later const action = cesdk.actions.get('actionType'); // List all registered actions const allActions = cesdk.actions.list(); // List actions matching a pattern const exportActions = cesdk.actions.list({ matcher: 'export*' }); ``` ## Default Actions CE.SDK automatically registers the following default actions: ### Scene Creation - `scene.create` - Creates a new scene with configurable layout and page sizes ### Action Handlers - `saveScene` - Saves the current scene (default: downloads scene file) - `shareScene` - Shares the current scene (no default implementation) - `exportDesign` - Exports design in various formats (default: downloads the exported file) - `importScene` - Imports scene or archive files (default: opens file picker) - `exportScene` - Exports scene or archive (default: downloads the file) - `uploadFile` - Uploads files to asset sources (default: local upload for development) - `asset.delete` - Deletes an asset from an asset source via the asset library card (default: built-in confirmation dialog) - `onUnsupportedBrowser` - Handles unsupported browsers (no default implementation) - `video.decode.checkSupport` - Checks video decoding/playback support (shows blocking dialog if unsupported) - `video.encode.checkSupport` - Checks video encoding/export support (shows warning dialog if unsupported) ### Zoom Actions - `zoom.toBlock` - Zoom to a specific block with configurable padding - `zoom.toPage` - Zoom to the current page with auto-fit support - `zoom.toSelection` - Zoom to currently selected blocks - `zoom.in` - Zoom in by one step with configurable maximum - `zoom.out` - Zoom out by one step with configurable minimum - `zoom.toLevel` - Set zoom to a specific level ### Scroll Actions - `scroll.toPage` - Scroll the viewport to center on a specific page with optional animation ### Video Timeline Zoom Actions - `timeline.zoom.in` - Zoom in the video timeline by one step - `timeline.zoom.out` - Zoom out the video timeline by one step - `timeline.zoom.fit` - Fit the video timeline to show all content - `timeline.zoom.toLevel` - Set the video timeline zoom to a specific level - `timeline.zoom.reset` - Reset the video timeline zoom to default (1.0) > **Note:** The `shareScene` and `onUnsupportedBrowser` actions do not have default > implementations and must be registered manually. > **Tip:** CE.SDK provides both an Actions API for handling user actions and a Utils API > for utility functions. See the Utils API section below for details on > available utilities. ### Scene Creation #### `scene.create` Creates a new scene with configurable mode, layout and page sizes. Returns the scene block ID. ```javascript // Create a scene await cesdk.actions.run('scene.create'); ``` **Options:** | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `layout` | `SceneLayout` | `'VerticalStack'` | The scene layout. | | `page` | `PageSpec` | — | A single page specification. Cannot be used together with `pages`. | | `pageCount` | `number` | `1` | Number of pages to create from the single `page` spec. Ignored when `pages` is used. | | `pages` | `PageSpec[]` | — | An array of page specifications, one page per entry. Cannot be used together with `page`. | #### Page Specification Pages can be specified in three ways: **1. Direct dimensions** Specify width, height, and unit directly: ```javascript await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel' } }); // With fixed orientation (prevents rotation from swapping dimensions) await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel', fixedOrientation: true } }); ``` **2. Asset source reference** Reference a page preset from an asset source by its source and asset IDs: ```javascript // Use an Instagram Story preset await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); ``` **3. Asset object** Pass an asset object directly, for example one returned by `engine.asset.findAssets()`: ```javascript const result = await cesdk.engine.asset.findAssets('ly.img.page.presets', { query: '' }); await cesdk.actions.run('scene.create', { page: result.assets[0] }); ``` #### Multiple Pages Create scenes with multiple pages: ```javascript // Multiple pages with different sizes await cesdk.actions.run('scene.create', { pages: [ { width: 1080, height: 1920, unit: 'Pixel' }, { width: 1920, height: 1080, unit: 'Pixel' } ] }); // Multiple identical pages using pageCount await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1080, unit: 'Pixel' }, pageCount: 3 }); ``` > **Tip:** When no `page` or `pages` option is provided, `scene.create` creates a single > page with the default format from the configured page preset asset sources. ### Scene Management Actions #### `saveScene` Handles saving the current scene. Default implementation downloads the scene file. ```javascript // Basic implementation cesdk.actions.register('saveScene', async () => { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene saved:', scene.length, 'characters'); // Production: // await yourAPI.saveScene(scene); cesdk.ui.showNotification('Scene saved successfully'); }); // With loading dialog cesdk.actions.register('saveScene', async () => { const dialogController = cesdk.utils.showLoadingDialog({ title: 'Saving Scene', message: 'Please wait...', progress: 'indeterminate', }); try { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene saved:', scene.length, 'characters'); // Production: // await yourAPI.saveScene(scene); dialogController.showSuccess({ title: 'Saved', message: 'Scene saved successfully', }); } catch (error) { dialogController.showError({ title: 'Save Failed', message: 'Could not save the scene', }); throw error; } }); ``` #### `shareScene` Handles scene sharing. No default implementation. ```javascript // Register share functionality cesdk.actions.register('shareScene', async () => { const scene = await cesdk.engine.scene.saveToString(); const shareUrl = 'https://example.com/shared-scene-placeholder'; console.log('Scene ready to share:', scene.length, 'characters'); // Production: // const shareUrl = await yourAPI.createShareableLink(scene); await navigator.share({ url: shareUrl }); }); ``` #### `importScene` and `exportScene` Handle scene import/export operations with support for both scene files and archives. ```javascript // Import scene or archive cesdk.actions.register('importScene', async ({ format }) => { if (format === 'archive') { console.log('Archive import requested'); // Production: // const archive = await yourAPI.loadArchive(); // await cesdk.engine.scene.loadFromArchiveURL(archive); } else { console.log('Scene import requested'); // Production: // const scene = await yourAPI.loadScene(); // await cesdk.engine.scene.loadFromString(scene); } }); // Export scene or archive cesdk.actions.register('exportScene', async ({ format }) => { if (format === 'archive') { const archive = await cesdk.engine.scene.saveToArchive(); console.log('Archive ready for export:', archive.length, 'bytes'); // Production: // await yourAPI.uploadArchive(archive); } else { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene ready for export:', scene.length, 'characters'); // Production: // await yourAPI.uploadScene(scene); } }); ``` ### Export Operations #### `exportDesign` Handles all export operations (images, PDFs, videos). Default implementation downloads the exported file. ```javascript // Basic implementation cesdk.actions.register('exportDesign', async options => { // Use the utils API to perform the export with loading dialog const { blobs, options: exportOptions } = await cesdk.utils.export(options); console.log('Exported', blobs.length, 'files'); blobs.forEach((blob, i) => console.log(`File ${i + 1}:`, blob.size, 'bytes')); // Production: // await Promise.all(blobs.map(blob => yourCDN.upload(blob))); cesdk.ui.showNotification('Export completed successfully'); }); // Direct engine export with custom loading dialog (bypassing utils) cesdk.actions.register('exportDesign', async options => { const dialogController = cesdk.utils.showLoadingDialog({ title: 'Exporting', message: 'Processing your export...', }); try { const page = cesdk.engine.scene.getCurrentPage(); if (page === null) { throw new Error('No page selected for export'); } let result; if (options?.mimeType?.startsWith('video/')) { // Video export with progress result = await cesdk.engine.block.exportVideo(page, { ...options, onProgress: (rendered, encoded, total) => { dialogController.updateProgress({ value: rendered, max: total, }); }, }); } else { // Static export (image/PDF) result = await cesdk.engine.block.export(page, options); } console.log('File ready for export:', result.size, 'bytes'); // Production: // await yourCDN.upload(result); dialogController.showSuccess({ title: 'Export Complete', message: 'Files uploaded successfully', }); } catch (error) { dialogController.showError({ title: 'Export Failed', message: 'Could not complete the export', }); throw error; } }); ``` ### File Upload Action #### `uploadFile` Handles file uploads to asset sources. Default implementation uses local upload for development. ```javascript // Register production upload handler cesdk.actions.register('uploadFile', async (file, onProgress, context) => { console.log('Uploading file:', file.name, file.size, 'bytes'); onProgress(50); // Simulate progress await new Promise(resolve => setTimeout(resolve, 500)); onProgress(100); // Production: // const asset = await yourStorageService.upload(file, { // onProgress: (percent) => onProgress(percent), // context // }); // Return AssetDefinition return { id: 'local-' + Date.now(), label: { en: file.name }, meta: { uri: URL.createObjectURL(file), thumbUri: URL.createObjectURL(file), kind: 'image', width: 1920, height: 1080, // Production: // uri: asset.url, // thumbUri: asset.thumbnailUrl, // width: asset.width, // height: asset.height }, }; }); ``` You can control which file types users can upload by setting the `upload/supportedMimeTypes` setting: ```javascript // Example 1: Only allow images cesdk.engine.editor.setSettingString( 'upload/supportedMimeTypes', 'image/png,image/jpeg,image/gif,image/svg+xml', ); // Example 2: Allow images and videos cesdk.engine.editor.setSettingString( 'upload/supportedMimeTypes', 'image/png,image/jpeg,image/gif,video/mp4,video/quicktime', ); // Example 3: Allow specific document types cesdk.engine.editor.setSettingString( 'upload/supportedMimeTypes', 'application/pdf,image/png,image/jpeg', ); ``` > **Caution:** The default `uploadFile` implementation uses local upload for development > only. Always register a proper upload handler for production. ### Asset Library Actions #### `asset.delete` Invoked when the user deletes an asset from an asset source via the asset library card. The default implementation opens a confirmation dialog and, on confirm, removes the asset from its source. Register a custom implementation to replace the dialog content, swap in your own dialog, or change the deletion behavior entirely. The handler receives the source id and the full `AssetResult`, so you can derive per-asset context such as metadata or a page number for your custom UI. ```javascript cesdk.actions.register('asset.delete', async ({ sourceId, asset }) => { const pageNumber = asset.meta?.pageNumber; cesdk.ui.showDialog({ type: 'error', content: { title: `Delete page ${pageNumber}?`, message: 'This will also remove the page from your design.', }, actions: [ { color: 'danger', label: 'Delete', onClick: ({ id }) => { cesdk.engine.asset.removeAssetFromSource(sourceId, asset.id); cesdk.engine.asset.assetSourceContentsChanged(sourceId); cesdk.ui.closeDialog(id); }, }, ], cancel: { variant: 'plain', label: 'Cancel', onClick: ({ id }) => cesdk.ui.closeDialog(id), }, }); }); ``` > **Note:** A custom handler is responsible for the deletion itself. To preserve the > default behavior, call `cesdk.engine.asset.removeAssetFromSource(sourceId, > asset.id)` followed by > `cesdk.engine.asset.assetSourceContentsChanged(sourceId)`. ### Unsupported Browser Action #### `onUnsupportedBrowser` Handles unsupported browser detection. No default implementation is provided. ```javascript // Register handler for unsupported browsers cesdk.actions.register('onUnsupportedBrowser', () => { // Redirect to a custom compatibility page window.location.href = '/browser-not-supported'; }); ``` ### Video Support Actions CE.SDK provides actions to detect video capabilities at runtime. These actions help you handle browsers and platforms that lack required video codecs, particularly Linux browsers and Firefox. #### `video.decode.checkSupport` Checks if the browser supports video decoding and playback via the WebCodecs API. If unsupported, displays a blocking error dialog that users cannot dismiss. Returns `true` if video decoding is supported, `false` otherwise. ```javascript // Check video decode support before loading video content const isSupported = cesdk.actions.run('video.decode.checkSupport'); if (!isSupported) { // A blocking error dialog is shown automatically // The user cannot proceed with video editing return; } // Safe to proceed with video content await cesdk.engine.scene.loadFromURL(videoSceneUrl); // You can also disable the dialog and handle feedback yourself: const supportedSilently = cesdk.actions.run('video.decode.checkSupport', { dialog: false }); ``` **Options:** | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `dialog` | `boolean \| { show: boolean; backdrop?: 'transparent' \| 'opaque' }` | `true` (backdrop: `'opaque'`) | Controls dialog display. Use `false` to disable, or an object for fine-grained control. | > **Caution:** The `video.decode.checkSupport` action shows a blocking dialog with no dismiss option > when video is not supported. Only call this action when you intend to work > with video content. #### `video.encode.checkSupport` Checks if the browser supports video encoding/export (H.264 video and AAC audio encoding). If unsupported, displays a warning dialog that users can dismiss to continue editing. Returns a `Promise` - `true` if video encoding is supported, `false` otherwise. ```javascript // Check video encode support before attempting export const canExport = await cesdk.actions.run('video.encode.checkSupport'); if (!canExport) { // A warning dialog is shown automatically // User can dismiss and continue editing // Consider offering server-side export as alternative console.log('Video export unavailable - consider server-side rendering'); } // You can also disable the dialog and handle feedback yourself: const canExportSilently = await cesdk.actions.run('video.encode.checkSupport', { dialog: false }); ``` **Options:** | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `dialog` | `boolean \| { show: boolean; backdrop?: 'transparent' \| 'opaque' }` | `true` (backdrop: `'transparent'`) | Controls dialog display. Use `false` to disable, or an object for fine-grained control. | > **Tip:** For platforms that don't support client-side video export (Linux, Firefox), > consider using [CE.SDK Renderer](#broken-link-7f3e9a) > for server-side video rendering. #### Platform Support | Platform | Video Import | Video Export | | -------- | ------------ | ------------ | | Chrome/Edge (Windows, macOS) | ✅ | ✅ | | Safari (macOS) | ✅ | ✅ | | Chrome (Linux) | ❌ | ❌ | | Firefox (all platforms) | ❌ | ❌ | ### Zoom Actions CE.SDK provides built-in zoom actions for controlling the viewport zoom level and focus. These actions are automatically registered and can be customized or called programmatically. #### Available Zoom Actions - `zoom.toBlock` - Zoom to a specific block with configurable padding - `zoom.toPage` - Zoom to the current page (or a specified page) - `zoom.toSelection` - Zoom to the currently selected blocks - `zoom.in` - Zoom in by one step - `zoom.out` - Zoom out by one step - `zoom.toLevel` - Set zoom to a specific level #### `zoom.toBlock` Zooms the viewport to fit a specific block. ```javascript // Zoom to a block with default settings await cesdk.actions.run('zoom.toBlock', blockId); // Zoom with custom padding and animation await cesdk.actions.run('zoom.toBlock', blockId, { padding: 50, // Uniform padding on all sides animate: true, autoFit: false }); // Different padding for each side await cesdk.actions.run('zoom.toBlock', blockId, { padding: { top: 20, bottom: 20, left: 40, right: 40 }, animate: { duration: 0.3, easing: 'EaseInOut' } }); ``` #### `zoom.toPage` Zooms to the current page or a specified page. If no options are provided, defaults to the current page. ```javascript // Zoom to current page with auto-fit await cesdk.actions.run('zoom.toPage', { autoFit: true, animate: false }); // Zoom with custom padding await cesdk.actions.run('zoom.toPage', { padding: { x: 40, y: 80 }, animate: true }); ``` #### `zoom.toSelection` Zooms to fit all currently selected blocks in the viewport. ```javascript // Zoom to selection with animation await cesdk.actions.run('zoom.toSelection', { padding: 40, animate: true }); // Auto-fit to selection await cesdk.actions.run('zoom.toSelection', { autoFit: true, padding: { x: 20, y: 20 } }); ``` #### `zoom.in` and `zoom.out` Step-based zoom controls with configurable limits. ```javascript // Zoom in with default settings await cesdk.actions.run('zoom.in'); // Zoom in with custom maximum await cesdk.actions.run('zoom.in', { maxZoom: 4, // Maximum zoom level animate: true }); // Zoom out with custom minimum await cesdk.actions.run('zoom.out', { minZoom: 0.25, // Minimum zoom level animate: { duration: 0.2, easing: 'EaseOut' } }); ``` #### `zoom.toLevel` Sets the zoom to a specific level. ```javascript // Set zoom to 100% await cesdk.actions.run('zoom.toLevel', 1.0); // Set zoom to 200% with animation await cesdk.actions.run('zoom.toLevel', 2.0, { animate: true, minZoom: 0.125, maxZoom: 32 }); // Fit to width (50% zoom) await cesdk.actions.run('zoom.toLevel', 0.5, { animate: { duration: 0.3, easing: 'EaseInOut' } }); ``` #### Padding Options Padding can be specified in multiple ways: ```javascript // Uniform padding on all sides { padding: 20 } // Different horizontal and vertical padding { padding: { x: 40, y: 20 } } // Individual padding for each side { padding: { top: 10, bottom: 20, left: 30, right: 40 } } ``` #### Animation Options Animation can be a boolean or an object with detailed settings: ```javascript // Simple animation toggle { animate: true } // Uses default duration and easing { animate: false } // No animation // Detailed animation configuration { animate: { duration: 0.3, // Duration in seconds easing: 'EaseInOut', // 'Linear', 'EaseIn', 'EaseOut', or 'EaseInOut' interruptible: true // Whether the animation can be interrupted } } ``` #### Auto-Fit Mode The `autoFit` option enables automatic zoom adjustment when the viewport resizes: ```javascript // Enable auto-fit to maintain proper framing await cesdk.actions.run('zoom.toPage', { autoFit: true, padding: { x: 40, y: 80 } }); ``` When auto-fit is enabled, the zoom level will automatically adjust to keep the target properly framed when the viewport size changes. #### Custom Zoom Action Example You can override the default zoom actions with custom implementations: ```javascript // Custom zoom to page with analytics cesdk.actions.register('zoom.toPage', async (options) => { // Track zoom event console.log('User zoomed to page'); // Get current page const currentPage = cesdk.engine.scene.getCurrentPage(); if (!currentPage) return; // Apply custom zoom logic await cesdk.engine.scene.zoomToBlock(currentPage, { padding: options?.padding ?? { x: 50, y: 100 }, animate: options?.animate ?? true }); // Custom post-zoom behavior cesdk.ui.showNotification('Zoomed to page'); }); ``` ### Video Timeline Zoom Actions The video timeline has its own set of zoom controls for managing the timeline view. These actions are registered when the video timeline component is active and provide instant zoom without animation. #### `timeline.zoom.in` Zooms in the video timeline by one step (multiplies current zoom level by 1.25). ```javascript // Zoom in the timeline await cesdk.actions.run('timeline.zoom.in'); ``` #### `timeline.zoom.out` Zooms out the video timeline by one step (divides current zoom level by 1.25). ```javascript // Zoom out the timeline await cesdk.actions.run('timeline.zoom.out'); ``` #### `timeline.zoom.fit` Automatically adjusts the timeline zoom to fit all content in the visible area. ```javascript // Fit timeline to show all content await cesdk.actions.run('timeline.zoom.fit'); ``` #### `timeline.zoom.toLevel` Sets the timeline zoom to a specific level. ```javascript // Set timeline zoom to 100% await cesdk.actions.run('timeline.zoom.toLevel', 1.0); // Set timeline zoom to 150% await cesdk.actions.run('timeline.zoom.toLevel', 1.5); // Set timeline zoom to 50% await cesdk.actions.run('timeline.zoom.toLevel', 0.5); ``` #### `timeline.zoom.reset` Resets the timeline zoom to the default level (1.0 or 100%). ```javascript // Reset timeline zoom to default await cesdk.actions.run('timeline.zoom.reset'); ``` ### Scroll Actions CE.SDK provides a scroll action for panning the viewport to different pages without changing the zoom level. This is useful for multi-page navigation where you want to maintain the current zoom. #### `scroll.toPage` Scrolls the viewport to center on a specific page without changing the zoom level. ```javascript // Scroll to current page without animation await cesdk.actions.run('scroll.toPage'); // Scroll to current page with smooth animation await cesdk.actions.run('scroll.toPage', { animate: true }); // Scroll to a specific page await cesdk.actions.run('scroll.toPage', { pageId: myPageId, animate: true }); ``` #### Parameters The `scroll.toPage` action accepts an optional options object: - `pageId` (optional): The ID of the page to scroll to. If not provided, scrolls to the current page. - `animate` (optional): Whether to animate the scroll transition. Default is `false`. #### Scroll vs Zoom The key difference between `scroll.toPage` and `zoom.toPage`: - **`scroll.toPage`**: Pans the viewport to center on the page while maintaining the current zoom level - **`zoom.toPage`**: Adjusts the zoom level to fit the page within the viewport with padding Use `scroll.toPage` when you want to navigate between pages in a multi-page document while keeping the same zoom level. Use `zoom.toPage` when you want to frame a page properly within the viewport. ## Utils API CE.SDK provides a Utils API with utility functions for common operations. These utilities are available through `cesdk.utils`: ### Loading Dialogs ```javascript // Create and manage loading dialogs const dialogController = cesdk.utils.showLoadingDialog({ title: 'Processing...', message: 'Please wait', // Can also be an array of strings progress: 0, // Initial progress value or 'indeterminate' cancelLabel: 'Cancel', abortTitle: 'Abort Operation?', abortMessage: 'Are you sure you want to abort?', abortLabel: 'Abort', size: 'large', // 'regular' or 'large' clickOutsideToClose: false, onAbort: () => console.log('User cancelled'), onDone: () => console.log('Dialog closed'), }); // Update progress dialogController.updateProgress({ value: 50, max: 100 }); // Show success or error dialogController.showSuccess({ title: 'Done!', message: 'Operation completed', }); dialogController.showError({ title: 'Error', message: 'Something went wrong' }); // Close dialog dialogController.close(); ``` ### Export Utility The export utility automatically handles both static (images, PDFs) and video exports: ```javascript // Export image or PDF const { blobs, options } = await cesdk.utils.export({ mimeType: 'image/png', pngCompressionLevel: 7, }); // Export video (automatically detected by MIME type) const { blobs, options } = await cesdk.utils.export({ mimeType: 'video/mp4', onProgress: (rendered, encoded, total) => { console.log(`Progress: ${rendered}/${total} frames`); }, }); ``` ### File Operations ```javascript // Load file from user const file = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'File', // 'dataURL', 'objectURL', 'text', 'blob', 'arrayBuffer', or 'File' }); // Download file to user's device await cesdk.utils.downloadFile(blob, 'image/png'); // Local upload (development only) const asset = await cesdk.utils.localUpload(file, context); ``` ### Video Support Detection Check browser video capabilities before working with video content: ```javascript // Check if video decoding/playback is supported if (cesdk.utils.supportsVideoDecode()) { // Safe to load and play video content await cesdk.engine.scene.loadFromURL(videoSceneUrl); } else { // Show fallback UI or message console.log('Video playback not available in this browser'); } // Check if video encoding/export is supported (async) if (await cesdk.utils.supportsVideoEncode()) { // Video export is available const blob = await cesdk.engine.block.exportVideo(page); } else { // Suggest server-side rendering alternative console.log('Video export not available - consider using CE.SDK Renderer'); } ``` These utilities provide the same checks as the `video.decode.checkSupport` and `video.encode.checkSupport` actions, but without showing dialogs. Use them when you want to check support silently and handle the UI yourself. ## Implementation Examples ### Environment-Based Upload Strategy ```javascript // Use local upload in development, CDN in production cesdk.actions.register('uploadFile', async (file, onProgress, context) => { if (process.env.NODE_ENV === 'development') { // Use utils for local upload return await cesdk.utils.localUpload(file, context); } else { console.log('Production upload for:', file.name); onProgress(100); // Production: // const asset = await yourCDNService.upload(file, { // onProgress: onProgress // }); return { id: 'prod-' + Date.now(), label: { en: file.name }, meta: { uri: URL.createObjectURL(file), thumbUri: URL.createObjectURL(file), // Production: // uri: asset.url, // thumbUri: asset.thumbnailUrl }, }; } }); ``` ### Combining Utils with Custom Logic ```javascript // Use utils for heavy lifting, add custom business logic cesdk.actions.register('exportDesign', async options => { console.log('Export started:', { format: options?.mimeType }); // Production: // analytics.track('export_started', { format: options?.mimeType }); // Use utils to handle the export with loading dialog const { blobs, options: exportOptions } = await cesdk.utils.export(options); // Custom post-processing if (exportOptions.mimeType === 'application/pdf') { console.log('PDF ready for watermarking:', blobs[0].size, 'bytes'); // Production: // const watermarkedBlob = await addWatermark(blobs[0]); // await cesdk.utils.downloadFile(watermarkedBlob, 'application/pdf'); await cesdk.utils.downloadFile(blobs[0], 'application/pdf'); } else { // Direct download for other formats await cesdk.utils.downloadFile(blobs[0], exportOptions.mimeType); } console.log('Export completed:', { format: exportOptions.mimeType }); // Production: // analytics.track('export_completed', { format: exportOptions.mimeType }); }); ``` ## Registering Custom Actions with Custom IDs Beyond the predefined action types, you can register actions with custom IDs for your own application-specific needs: ```javascript // Register a custom action cesdk.actions.register('myCustomAction', async data => { console.log('Custom action triggered with:', data); return { success: true, processedData: data }; }); // Execute the custom action using run const result = await cesdk.actions.run('myCustomAction', { someData: 'value' }); // Or retrieve it for conditional execution const customAction = cesdk.actions.get('myCustomAction'); if (customAction) { const result = await customAction({ someData: 'value' }); } ``` ## Discovering Registered Actions Use `list()` to get all registered action IDs or find actions matching a pattern: ```javascript // Get all registered action IDs const registeredActions = cesdk.actions.list(); console.log('Available actions:', registeredActions); // Find actions matching a pattern const exportActions = cesdk.actions.list({ matcher: 'export*' }); console.log('Export actions:', exportActions); ``` ## Using Actions with Navigation Actions The navigation bar actions in CE.SDK automatically use the registered actions: ### Default Navigation Bar Actions The default navigation bar actions map to actions: - Save action → `saveScene` action - Share action → `shareScene` action - Export actions → `exportDesign` action - Import scene/archive → `importScene` action - Export scene/archive → `exportScene` action --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Animation" description: "Add motion to designs with support for keyframes, timeline editing, and programmatic animation control." platform: angular url: "https://img.ly/docs/cesdk/angular/animation-ce900c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/angular/animation-ce900c/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/angular/animation/overview-6a2ef2/) - Add motion to designs with support for keyframes, timeline editing, and programmatic animation control. - [Supported Animation Types](https://img.ly/docs/cesdk/angular/animation/types-4e5f41/) - Apply different animation types to design blocks in CE.SDK and configure their properties. - [Create Animations](https://img.ly/docs/cesdk/angular/animation/create-15cf50/) - Build animations manually or with presets to animate objects, text, and scenes within your design. - [Edit Animations](https://img.ly/docs/cesdk/angular/animation/edit-32c12a/) - Modify existing animations in CE.SDK by reading properties, changing duration and easing, adjusting direction, and replacing or removing animations from blocks. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Animations" description: "Build animations manually or with presets to animate objects, text, and scenes within your design." platform: angular url: "https://img.ly/docs/cesdk/angular/animation/create-15cf50/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/angular/animation-ce900c/) > [Create Animations](https://img.ly/docs/cesdk/angular/animation/create-15cf50/) --- Add motion to design elements by creating entrance, exit, and loop animations using CE.SDK's animation system. ![Create Animations example showing animated blocks with various animation types](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-create-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-create-browser/) CE.SDK provides a unified animation system for adding motion to design elements. Animations are created as separate block instances and attached to target blocks using type-specific methods. You can apply entrance animations (how blocks appear), exit animations (how blocks leave), and loop animations (continuous motion while visible). Text blocks support additional properties for word-by-word or character-by-character reveals. ```typescript file=@cesdk_web_examples/guides-animation-create-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Create Animations Guide * * Demonstrates animation features in CE.SDK: * - Creating entrance (In) animations * - Creating exit (Out) animations * - Creating loop animations * - Configuring duration and easing * - Text animations with writing styles * - Managing animation lifecycle */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages[0]; // Set page dimensions and duration const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); engine.block.setDuration(page, 5.0); // Create gradient background if (engine.block.supportsFill(page)) { const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.2, b: 0.8, a: 1.0 }, stop: 0 }, { color: { r: 0.1, g: 0.3, b: 0.6, a: 1.0 }, stop: 0.5 }, { color: { r: 0.2, g: 0.1, b: 0.4, a: 1.0 }, stop: 1 } ]); // Diagonal gradient from top-left to bottom-right engine.block.setFloat( gradientFill, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( gradientFill, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); engine.block.setFill(page, gradientFill); } // ===== Title: "Create Animations" with entrance animation ===== const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Create Animations'); engine.block.setTextFontSize(titleBlock, 120); engine.block.setTextColor(titleBlock, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); engine.block.setDuration(titleBlock, 5.0); // Check if block supports animations before applying if (engine.block.supportsAnimation(titleBlock)) { // Create an entrance animation const slideIn = engine.block.createAnimation('slide'); engine.block.setInAnimation(titleBlock, slideIn); engine.block.setDuration(slideIn, 1.2); engine.block.setFloat( slideIn, 'animation/slide/direction', (3 * Math.PI) / 2 ); engine.block.setEnum(slideIn, 'animationEasing', 'EaseOut'); } // Center title horizontally and position in upper third const titleWidth = engine.block.getFrameWidth(titleBlock); const titleHeight = engine.block.getFrameHeight(titleBlock); engine.block.setPositionX(titleBlock, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleBlock, pageHeight * 0.25); // ===== IMG.LY Logo with pulsating loop animation ===== const logoBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, logoBlock); engine.block.setDuration(logoBlock, 5.0); // Contain the image within the block frame engine.block.setEnum(logoBlock, 'contentFill/mode', 'Contain'); // Create a pulsating loop animation const pulsating = engine.block.createAnimation('pulsating_loop'); engine.block.setLoopAnimation(logoBlock, pulsating); engine.block.setDuration(pulsating, 1.5); // Add fade entrance for the logo const logoFadeIn = engine.block.createAnimation('fade'); engine.block.setInAnimation(logoBlock, logoFadeIn); engine.block.setDuration(logoFadeIn, 0.8); engine.block.setEnum(logoFadeIn, 'animationEasing', 'EaseOut'); // Position logo below title, centered const logoWidth = engine.block.getFrameWidth(logoBlock); engine.block.setPositionX(logoBlock, (pageWidth - logoWidth) / 2); engine.block.setPositionY(logoBlock, pageHeight * 0.25 + titleHeight + 40); // ===== Subtitle with text animation ===== const subtitleBlock = engine.block.create('text'); engine.block.replaceText(subtitleBlock, 'Entrance • Exit • Loop'); engine.block.setTextFontSize(subtitleBlock, 48); engine.block.setTextColor(subtitleBlock, { r: 0.9, g: 0.9, b: 1.0, a: 0.9 }); engine.block.setEnum(subtitleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); engine.block.setDuration(subtitleBlock, 5.0); // Create text animation with word-by-word reveal const textAnim = engine.block.createAnimation('fade'); engine.block.setInAnimation(subtitleBlock, textAnim); engine.block.setDuration(textAnim, 1.5); // Configure text animation writing style (Line, Word, or Character) engine.block.setEnum(textAnim, 'textAnimationWritingStyle', 'Word'); // Set overlap for cascading effect (0 = sequential, 0-1 = cascading) engine.block.setFloat(textAnim, 'textAnimationOverlap', 0.3); // Position subtitle below logo const subtitleWidth = engine.block.getFrameWidth(subtitleBlock); engine.block.setPositionX(subtitleBlock, (pageWidth - subtitleWidth) / 2); engine.block.setPositionY(subtitleBlock, pageHeight * 0.65); // ===== Bottom right text with exit animation ===== const footerBlock = engine.block.create('text'); engine.block.replaceText(footerBlock, 'Powered by CE.SDK'); engine.block.setTextFontSize(footerBlock, 32); engine.block.setTextColor(footerBlock, { r: 1.0, g: 1.0, b: 1.0, a: 0.7 }); engine.block.setEnum(footerBlock, 'text/horizontalAlignment', 'Right'); engine.block.setWidthMode(footerBlock, 'Auto'); engine.block.setHeightMode(footerBlock, 'Auto'); engine.block.appendChild(page, footerBlock); // Footer appears at start and fades out at the end engine.block.setTimeOffset(footerBlock, 0); engine.block.setDuration(footerBlock, 5.0); // Create exit animation that plays at the end of the block's duration const fadeOut = engine.block.createAnimation('fade'); engine.block.setOutAnimation(footerBlock, fadeOut); engine.block.setDuration(fadeOut, 1.0); engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn'); // Position footer at bottom right with padding const footerWidth = engine.block.getFrameWidth(footerBlock); const footerHeight = engine.block.getFrameHeight(footerBlock); engine.block.setPositionX(footerBlock, pageWidth - footerWidth - 60); engine.block.setPositionY(footerBlock, pageHeight - footerHeight - 40); // ===== Animation Properties Demo ===== // Create slide animation and configure direction for title const titleInAnim = engine.block.getInAnimation(titleBlock); if (titleInAnim !== 0) { // Discover all available properties for this animation const properties = engine.block.findAllProperties(titleInAnim); console.log('Slide animation properties:', properties); } // Example: Retrieve animations to verify they're attached const currentTitleIn = engine.block.getInAnimation(titleBlock); const currentLogoLoop = engine.block.getLoopAnimation(logoBlock); const currentFooterOut = engine.block.getOutAnimation(footerBlock); console.log( 'Animation IDs - Title In:', currentTitleIn, 'Logo Loop:', currentLogoLoop, 'Footer Out:', currentFooterOut ); // Get available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); console.log('Available easing options:', easingOptions); // Set initial playback time to show the scene after animations start engine.block.setPlaybackTime(page, 2.0); } } export default Example; ``` This guide covers how to create and configure animations programmatically, including entrance, exit, loop, and text animations with customizable timing and easing. ## Animation Fundamentals We first verify that a block supports animations before creating and attaching them. The basic pattern involves creating an animation instance with `createAnimation()`, then attaching it using the appropriate setter method. ```typescript highlight-check-support const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Create Animations'); engine.block.setTextFontSize(titleBlock, 120); engine.block.setTextColor(titleBlock, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); engine.block.setDuration(titleBlock, 5.0); // Check if block supports animations before applying if (engine.block.supportsAnimation(titleBlock)) { // Create an entrance animation const slideIn = engine.block.createAnimation('slide'); engine.block.setInAnimation(titleBlock, slideIn); engine.block.setDuration(slideIn, 1.2); engine.block.setFloat( slideIn, 'animation/slide/direction', (3 * Math.PI) / 2 ); engine.block.setEnum(slideIn, 'animationEasing', 'EaseOut'); } ``` Animation support is available for: - **Graphic blocks** with image or video fills - **Text blocks** with additional writing style options - **Shape blocks** with fills CE.SDK provides several animation presets: - **Entrance animations**: slide, fade, blur, zoom, pop, wipe, pan - **Exit animations**: same types as entrance - **Loop animations**: breathing\_loop, spin\_loop, fade\_loop, pulsating\_loop, jump\_loop, squeeze\_loop, sway\_loop ## Entrance Animations Entrance animations define how blocks appear on screen. We create the animation with `createAnimation()`, attach it with `setInAnimation()`, and configure the duration with `setDuration()`. ```typescript highlight-entrance-animation // Add fade entrance for the logo const logoFadeIn = engine.block.createAnimation('fade'); engine.block.setInAnimation(logoBlock, logoFadeIn); engine.block.setDuration(logoFadeIn, 0.8); engine.block.setEnum(logoFadeIn, 'animationEasing', 'EaseOut'); ``` The `animationEasing` property controls the animation curve. Available options include Linear, EaseIn, EaseOut, and EaseInOut. ## Exit Animations Exit animations define how blocks leave the screen. We attach them with `setOutAnimation()`. CE.SDK manages timing automatically to prevent overlap between entrance and exit animations. ```typescript highlight-exit-animation const footerBlock = engine.block.create('text'); engine.block.replaceText(footerBlock, 'Powered by CE.SDK'); engine.block.setTextFontSize(footerBlock, 32); engine.block.setTextColor(footerBlock, { r: 1.0, g: 1.0, b: 1.0, a: 0.7 }); engine.block.setEnum(footerBlock, 'text/horizontalAlignment', 'Right'); engine.block.setWidthMode(footerBlock, 'Auto'); engine.block.setHeightMode(footerBlock, 'Auto'); engine.block.appendChild(page, footerBlock); // Footer appears at start and fades out at the end engine.block.setTimeOffset(footerBlock, 0); engine.block.setDuration(footerBlock, 5.0); // Create exit animation that plays at the end of the block's duration const fadeOut = engine.block.createAnimation('fade'); engine.block.setOutAnimation(footerBlock, fadeOut); engine.block.setDuration(fadeOut, 1.0); engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn'); ``` When a block has both entrance and exit animations, CE.SDK adjusts their timing based on the block's duration in the composition. ## Loop Animations Loop animations run continuously while the block is visible. We use animation types ending in `_loop` and attach them with `setLoopAnimation()`. ```typescript highlight-loop-animation const logoBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, logoBlock); engine.block.setDuration(logoBlock, 5.0); // Contain the image within the block frame engine.block.setEnum(logoBlock, 'contentFill/mode', 'Contain'); // Create a pulsating loop animation const pulsating = engine.block.createAnimation('pulsating_loop'); engine.block.setLoopAnimation(logoBlock, pulsating); engine.block.setDuration(pulsating, 1.5); ``` Loop animations continue throughout the block's visible duration, creating continuous motion effects like breathing, spinning, or pulsating. ## Animation Properties Each animation type exposes configurable properties. We use `setFloat()` and `setEnum()` to adjust these properties, and `findAllProperties()` to discover available options. ```typescript highlight-animation-properties // Create slide animation and configure direction for title const titleInAnim = engine.block.getInAnimation(titleBlock); if (titleInAnim !== 0) { // Discover all available properties for this animation const properties = engine.block.findAllProperties(titleInAnim); console.log('Slide animation properties:', properties); } ``` Common configurable properties include: - **Direction**: Set in radians for slide animations (0=right, PI/2=bottom, PI=left, 3\*PI/2=top) - **Easing**: Linear, EaseIn, EaseOut, EaseInOut ## Text Animations Text blocks support additional animation properties for granular control over how text appears. The `textAnimationWritingStyle` property controls whether the animation applies to the entire text, line by line, word by word, or character by character. ```typescript highlight-text-animation const subtitleBlock = engine.block.create('text'); engine.block.replaceText(subtitleBlock, 'Entrance • Exit • Loop'); engine.block.setTextFontSize(subtitleBlock, 48); engine.block.setTextColor(subtitleBlock, { r: 0.9, g: 0.9, b: 1.0, a: 0.9 }); engine.block.setEnum(subtitleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); engine.block.setDuration(subtitleBlock, 5.0); // Create text animation with word-by-word reveal const textAnim = engine.block.createAnimation('fade'); engine.block.setInAnimation(subtitleBlock, textAnim); engine.block.setDuration(textAnim, 1.5); // Configure text animation writing style (Line, Word, or Character) engine.block.setEnum(textAnim, 'textAnimationWritingStyle', 'Word'); // Set overlap for cascading effect (0 = sequential, 0-1 = cascading) engine.block.setFloat(textAnim, 'textAnimationOverlap', 0.3); ``` Writing style options: - **Line**: Animate entire lines together - **Word**: Animate word by word - **Character**: Animate character by character The `textAnimationOverlap` property (0 to 1) controls the cascading effect. A value of 0 means sequential animation, while values closer to 1 create more overlap between segments. ## Managing Animation Lifecycle We can retrieve current animations using `getInAnimation()`, `getOutAnimation()`, and `getLoopAnimation()`. A return value of 0 indicates no animation is attached. ```typescript highlight-manage-lifecycle // Example: Retrieve animations to verify they're attached const currentTitleIn = engine.block.getInAnimation(titleBlock); const currentLogoLoop = engine.block.getLoopAnimation(logoBlock); const currentFooterOut = engine.block.getOutAnimation(footerBlock); console.log( 'Animation IDs - Title In:', currentTitleIn, 'Logo Loop:', currentLogoLoop, 'Footer Out:', currentFooterOut ); // Get available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); console.log('Available easing options:', easingOptions); ``` When replacing animations, destroy the old instance with `destroy()` to prevent memory leaks. ## Troubleshooting ### Animation Not Playing Verify the block supports animations with `supportsAnimation()`. Check that playback is active on the page. ### Duration Issues Ensure the animation is attached to a block before setting its duration. Duration is set on the animation instance, not the block. ### Memory Leaks When replacing an animation, destroy the old animation instance before creating a new one: ```typescript const current = engine.block.getInAnimation(block); if (current !== 0) { engine.block.destroy(current); } const newAnim = engine.block.createAnimation('fade'); engine.block.setInAnimation(block, newAnim); ``` ### Timing Conflicts If entrance and exit animations seem to overlap incorrectly, CE.SDK automatically adjusts durations to prevent conflicts. Reduce individual animation durations if needed. ## API Reference | Method | Description | | --------------------------------------------- | ------------------------------------------ | | `engine.block.createAnimation(type)` | Create animation instance | | `engine.block.supportsAnimation(block)` | Check if block supports animations | | `engine.block.setInAnimation(block, anim)` | Attach entrance animation | | `engine.block.setOutAnimation(block, anim)` | Attach exit animation | | `engine.block.setLoopAnimation(block, anim)` | Attach loop animation | | `engine.block.getInAnimation(block)` | Get entrance animation (0 if none) | | `engine.block.getOutAnimation(block)` | Get exit animation (0 if none) | | `engine.block.getLoopAnimation(block)` | Get loop animation (0 if none) | | `engine.block.setDuration(anim, seconds)` | Set animation duration | | `engine.block.setEnum(anim, prop, value)` | Set enum property (easing, writing style) | | `engine.block.setFloat(anim, prop, value)` | Set float property (direction, overlap) | | `engine.block.findAllProperties(anim)` | List available properties | | `engine.block.getEnumValues(prop)` | Get enum options | | `engine.block.destroy(anim)` | Destroy animation instance | ## Next Steps - [Base Animations](https://img.ly/docs/cesdk/angular/animation/create/base-0fc5c4/) — Detailed non-text block animations - [Text Animations](https://img.ly/docs/cesdk/angular/animation/create/text-d6f4aa/) — Text-specific animation control - [Edit Animations](https://img.ly/docs/cesdk/angular/animation/edit-32c12a/) — Modify existing animations - [Animation Overview](https://img.ly/docs/cesdk/angular/animation/overview-6a2ef2/) — Animation concepts --- ## Related Pages - [Base Animations](https://img.ly/docs/cesdk/angular/animation/create/base-0fc5c4/) - Apply movement, scaling, rotation, or opacity changes to elements using time-based keyframes. - [Text Animations](https://img.ly/docs/cesdk/angular/animation/create/text-d6f4aa/) - Animate text elements with effects like fade, typewriter, and bounce for dynamic visual presentation. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Base Animations" description: "Apply movement, scaling, rotation, or opacity changes to elements using time-based keyframes." platform: angular url: "https://img.ly/docs/cesdk/angular/animation/create/base-0fc5c4/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/angular/animation-ce900c/) > [Create Animations](https://img.ly/docs/cesdk/angular/animation/create-15cf50/) > [Base Animations](https://img.ly/docs/cesdk/angular/animation/create/base-0fc5c4/) --- Add motion to design blocks with entrance, exit, and loop animations using CE.SDK's animation system. ![Base animations demonstrating slide, fade, zoom, and loop effects on image blocks](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-base-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-create-base-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-create-base-browser/) Base animations in CE.SDK add motion to design blocks through entrance (In), exit (Out), and loop animations. Animations are created as separate objects and attached to blocks, enabling reusable configurations across multiple elements. ```typescript file=@cesdk_web_examples/guides-animation-create-base-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Base Animations Guide * * Demonstrates animation features for design blocks in CE.SDK: * - Creating and applying entrance (In) animations * - Creating and applying exit (Out) animations * - Creating and applying loop animations * - Configuring duration and easing * - Managing animation lifecycle */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Set white background color 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 grid layout for 6 demonstration blocks const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Helper to create an image block const createImageBlock = async (index: number, imageUrl: string) => { const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUrl); engine.block.setFill(graphic, imageFill); engine.block.setShape(graphic, engine.block.createShape('rect')); engine.block.setWidth(graphic, blockWidth); engine.block.setHeight(graphic, blockHeight); const pos = getPosition(index); engine.block.setPositionX(graphic, pos.x); engine.block.setPositionY(graphic, pos.y); engine.block.appendChild(page, graphic); return graphic; }; // Sample images for demonstration const imageUrls = [ 'https://img.ly/static/ubq_samples/sample_1.jpg', 'https://img.ly/static/ubq_samples/sample_2.jpg', 'https://img.ly/static/ubq_samples/sample_3.jpg', 'https://img.ly/static/ubq_samples/sample_4.jpg', 'https://img.ly/static/ubq_samples/sample_5.jpg', 'https://img.ly/static/ubq_samples/sample_6.jpg' ]; // Block 1: Check animation support and create entrance animation const block1 = await createImageBlock(0, imageUrls[0]); // Check if block supports animations before applying if (engine.block.supportsAnimation(block1)) { // Create an entrance animation const slideAnimation = engine.block.createAnimation('slide'); engine.block.setInAnimation(block1, slideAnimation); engine.block.setDuration(slideAnimation, 1.0); } // Block 2: Entrance animation with easing configuration const block2 = await createImageBlock(1, imageUrls[1]); // Create a fade entrance animation with easing const fadeInAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(block2, fadeInAnimation); engine.block.setDuration(fadeInAnimation, 1.0); engine.block.setEnum(fadeInAnimation, 'animationEasing', 'EaseOut'); // Block 3: Exit animation const block3 = await createImageBlock(2, imageUrls[2]); // Create an exit animation const zoomInAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block3, zoomInAnimation); engine.block.setDuration(zoomInAnimation, 1.0); const fadeOutAnimation = engine.block.createAnimation('fade'); engine.block.setOutAnimation(block3, fadeOutAnimation); engine.block.setDuration(fadeOutAnimation, 1.0); engine.block.setEnum(fadeOutAnimation, 'animationEasing', 'EaseIn'); // Block 4: Loop animation const block4 = await createImageBlock(3, imageUrls[3]); // Create a breathing loop animation const breathingLoop = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block4, breathingLoop); engine.block.setDuration(breathingLoop, 1.0); // Block 5: Animation properties and slide direction const block5 = await createImageBlock(4, imageUrls[4]); // Create slide animation and configure direction const slideFromTop = engine.block.createAnimation('slide'); engine.block.setInAnimation(block5, slideFromTop); engine.block.setDuration(slideFromTop, 1.0); // Set slide direction (radians describe the motion direction the block // travels along; the block enters from the opposite side): // 0=slides right (enters from left), PI/2=slides down (enters from top), // PI=slides left (enters from right), 3*PI/2=slides up (enters from bottom) engine.block.setFloat( slideFromTop, 'animation/slide/direction', Math.PI / 2 ); engine.block.setEnum(slideFromTop, 'animationEasing', 'EaseInOut'); // Discover all available properties for this animation const properties = engine.block.findAllProperties(slideFromTop); // eslint-disable-next-line no-console console.log('Slide animation properties:', properties); // Block 6: Get animations and replace them const block6 = await createImageBlock(5, imageUrls[5]); // Set initial animations const initialIn = engine.block.createAnimation('pan'); engine.block.setInAnimation(block6, initialIn); engine.block.setDuration(initialIn, 1.0); const spinLoop = engine.block.createAnimation('spin_loop'); engine.block.setLoopAnimation(block6, spinLoop); engine.block.setDuration(spinLoop, 1.0); // Get current animations const currentIn = engine.block.getInAnimation(block6); const currentLoop = engine.block.getLoopAnimation(block6); const currentOut = engine.block.getOutAnimation(block6); // eslint-disable-next-line no-console console.log( 'Animation IDs - In:', currentIn, 'Loop:', currentLoop, 'Out:', currentOut ); // Replace in animation (destroy old one first to avoid memory leaks) if (currentIn !== 0) { engine.block.destroy(currentIn); } const newInAnimation = engine.block.createAnimation('wipe'); engine.block.setInAnimation(block6, newInAnimation); engine.block.setDuration(newInAnimation, 1.0); // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); // Set initial playback time to 1 second (after entrance animations) engine.block.setPlaybackTime(page, 1.0); } } export default Example; ``` This guide covers creating animations, attaching them to blocks, configuring properties like duration and easing, and managing animation lifecycle. ## Animation Fundamentals Before applying animations to a block, we verify it supports them using `supportsAnimation()`. Once confirmed, we create an animation instance and attach it to the block. ```typescript highlight-supports-animation // Check if block supports animations before applying if (engine.block.supportsAnimation(block1)) { // Create an entrance animation const slideAnimation = engine.block.createAnimation('slide'); engine.block.setInAnimation(block1, slideAnimation); engine.block.setDuration(slideAnimation, 1.0); } ``` We use `createAnimation()` with an animation type like `'slide'`, `'fade'`, or `'zoom'`. The animation is then attached using `setInAnimation()` for entrance animations. Duration is set with `setDuration()` in seconds. CE.SDK provides several animation types: - **Entrance animations**: `slide`, `fade`, `blur`, `grow`, `zoom`, `pop`, `wipe`, `pan`, `baseline`, `spin` - **Loop animations**: `spin_loop`, `fade_loop`, `blur_loop`, `pulsating_loop`, `breathing_loop`, `jump_loop`, `squeeze_loop`, `sway_loop` ## Entrance Animations Entrance animations (In animations) define how a block appears on screen. We create the animation, attach it with `setInAnimation()`, and configure its properties. ```typescript highlight-entrance-animation // Create a fade entrance animation with easing const fadeInAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(block2, fadeInAnimation); engine.block.setDuration(fadeInAnimation, 1.0); engine.block.setEnum(fadeInAnimation, 'animationEasing', 'EaseOut'); ``` We use `setEnum()` to configure the easing function. Available easing options include `'Linear'`, `'EaseIn'`, `'EaseOut'`, and `'EaseInOut'`. The `'EaseOut'` easing starts fast and slows down toward the end, creating a natural deceleration effect. ## Exit Animations Exit animations (Out animations) define how a block leaves the screen. We use `setOutAnimation()` to attach them. ```typescript highlight-exit-animation // Create an exit animation const zoomInAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block3, zoomInAnimation); engine.block.setDuration(zoomInAnimation, 1.0); const fadeOutAnimation = engine.block.createAnimation('fade'); engine.block.setOutAnimation(block3, fadeOutAnimation); engine.block.setDuration(fadeOutAnimation, 1.0); engine.block.setEnum(fadeOutAnimation, 'animationEasing', 'EaseIn'); ``` When using both entrance and exit animations, CE.SDK automatically manages their timing to prevent overlap. Changing the duration of an In animation may adjust the Out animation's duration to maintain valid timing. ## Loop Animations Loop animations run continuously while the block is visible. We use `setLoopAnimation()` to attach them. ```typescript highlight-loop-animation // Create a breathing loop animation const breathingLoop = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block4, breathingLoop); engine.block.setDuration(breathingLoop, 1.0); ``` The duration for loop animations defines the length of each cycle. A 2-second breathing loop will complete one full pulse every 2 seconds. ## Animation Properties Each animation type has specific configurable properties. We use `findAllProperties()` to discover available properties for an animation. ```typescript highlight-animation-properties // Create slide animation and configure direction const slideFromTop = engine.block.createAnimation('slide'); engine.block.setInAnimation(block5, slideFromTop); engine.block.setDuration(slideFromTop, 1.0); // Set slide direction (radians describe the motion direction the block // travels along; the block enters from the opposite side): // 0=slides right (enters from left), PI/2=slides down (enters from top), // PI=slides left (enters from right), 3*PI/2=slides up (enters from bottom) engine.block.setFloat( slideFromTop, 'animation/slide/direction', Math.PI / 2 ); engine.block.setEnum(slideFromTop, 'animationEasing', 'EaseInOut'); // Discover all available properties for this animation const properties = engine.block.findAllProperties(slideFromTop); // eslint-disable-next-line no-console console.log('Slide animation properties:', properties); ``` For slide animations, the `animation/slide/direction` property is the angle in radians that the block travels along during entrance — the block starts off-screen on the opposite side and slides in: - `0` — Slides right (enters from the left) - `Math.PI / 2` — Slides down (enters from the top) - `Math.PI` — Slides left (enters from the right) - `3 * Math.PI / 2` — Slides up (enters from the bottom) ## Managing Animation Lifecycle Animation objects must be properly managed to avoid memory leaks. When replacing an animation, we destroy the old one before setting the new one. We can retrieve current animations using `getInAnimation()`, `getOutAnimation()`, and `getLoopAnimation()`. ```typescript highlight-manage-animations // Set initial animations const initialIn = engine.block.createAnimation('pan'); engine.block.setInAnimation(block6, initialIn); engine.block.setDuration(initialIn, 1.0); const spinLoop = engine.block.createAnimation('spin_loop'); engine.block.setLoopAnimation(block6, spinLoop); engine.block.setDuration(spinLoop, 1.0); // Get current animations const currentIn = engine.block.getInAnimation(block6); const currentLoop = engine.block.getLoopAnimation(block6); const currentOut = engine.block.getOutAnimation(block6); // eslint-disable-next-line no-console console.log( 'Animation IDs - In:', currentIn, 'Loop:', currentLoop, 'Out:', currentOut ); // Replace in animation (destroy old one first to avoid memory leaks) if (currentIn !== 0) { engine.block.destroy(currentIn); } const newInAnimation = engine.block.createAnimation('wipe'); engine.block.setInAnimation(block6, newInAnimation); engine.block.setDuration(newInAnimation, 1.0); ``` A return value of `0` indicates no animation is attached. Destroying a design block also destroys all its attached animations, but detached animations must be destroyed manually. ## Easing Functions We can query available easing options using `getEnumValues()`. ```typescript highlight-easing-options // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); ``` Easing functions control animation acceleration: | Easing | Description | | ----------- | --------------------------------------------- | | `Linear` | Constant speed throughout | | `EaseIn` | Starts slow, accelerates toward the end | | `EaseOut` | Starts fast, decelerates toward the end | | `EaseInOut` | Starts slow, speeds up, then slows down again | ## API Reference | Method | Description | | ------------------------------- | ------------------------------------------ | | `createAnimation(type)` | Create a new animation instance | | `supportsAnimation(block)` | Check if block supports animations | | `setInAnimation(block, anim)` | Apply entrance animation to block | | `setOutAnimation(block, anim)` | Apply exit animation to block | | `setLoopAnimation(block, anim)` | Apply loop animation to block | | `getInAnimation(block)` | Get entrance animation (returns 0 if none) | | `getOutAnimation(block)` | Get exit animation (returns 0 if none) | | `getLoopAnimation(block)` | Get loop animation (returns 0 if none) | | `setDuration(anim, seconds)` | Set animation duration | | `getDuration(anim)` | Get animation duration | | `setEnum(anim, prop, value)` | Set enum property (easing, etc.) | | `setFloat(anim, prop, value)` | Set float property (direction, etc.) | | `findAllProperties(anim)` | Get all available properties for animation | | `getEnumValues(prop)` | Get available values for enum property | | `destroy(anim)` | Destroy animation instance | ## Next Steps - [Text Animations](https://img.ly/docs/cesdk/angular/animation/create/text-d6f4aa/) — Animate text with writing styles and character control - [Animation Overview](https://img.ly/docs/cesdk/angular/animation/overview-6a2ef2/) — Understand animation concepts and capabilities --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Animations" description: "Animate text elements with effects like fade, typewriter, and bounce for dynamic visual presentation." platform: angular url: "https://img.ly/docs/cesdk/angular/animation/create/text-d6f4aa/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/angular/animation-ce900c/) > [Create Animations](https://img.ly/docs/cesdk/angular/animation/create-15cf50/) > [Text Animations](https://img.ly/docs/cesdk/angular/animation/create/text-d6f4aa/) --- 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](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-text-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-create-text-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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. ```typescript file=@cesdk_web_examples/guides-animation-create-text-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; 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'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // 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 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. ```typescript highlight-create-animation // 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); ``` 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 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 The `Line` writing style animates text one line at a time from top to bottom. Each line appears sequentially, creating a structured reveal effect. ```typescript highlight-writing-style-line 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'); ``` 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 The `Word` writing style animates text one word at a time in reading order. This creates emphasis and draws attention to individual words. ```typescript highlight-writing-style-word 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'); ``` Setting the writing style to `'Word'` is perfect for creating dynamic, engaging text reveals that emphasize key phrases. ### 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. ```typescript highlight-writing-style-character 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'); ``` The `'Character'` writing style is ideal for typewriter effects and when you want maximum control over the animation timing. ## 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) When overlap is set to 0, each segment completes before the next begins, creating a clear, structured reveal effect. ```typescript highlight-overlap-sequential // Set overlap to 0 for sequential animation engine.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) 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. ```typescript highlight-overlap-cascading // Set overlap to 0.4 for cascading effect engine.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 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. ```typescript highlight-duration-easing // 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); ``` 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 | 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit Animations" description: "Modify existing animations in CE.SDK by reading properties, changing duration and easing, adjusting direction, and replacing or removing animations from blocks." platform: angular url: "https://img.ly/docs/cesdk/angular/animation/edit-32c12a/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/angular/animation-ce900c/) > [Edit Animations](https://img.ly/docs/cesdk/angular/animation/edit-32c12a/) --- Modify existing animations by reading properties, changing duration and easing, and replacing or removing animations from blocks. ![Edit animations demonstrating property modification, easing changes, and animation replacement on image blocks](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-edit-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-edit-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-edit-browser/) Editing animations in CE.SDK involves retrieving existing animations from blocks and modifying their properties. This guide assumes you've already created and attached animations to blocks as covered in the [Base Animations](https://img.ly/docs/cesdk/angular/animation/create/base-0fc5c4/) guide. ```typescript file=@cesdk_web_examples/guides-animation-edit-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Edit Animations Guide * * Demonstrates how to edit existing animations in CE.SDK: * - Retrieving animations from blocks * - Reading animation properties (type, duration, easing) * - Modifying animation duration and easing * - Adjusting animation-specific properties * - Replacing and removing animations */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages[0]!; // Set white background color const pageFill = engine.block.getFill(page); if (pageFill) { engine.block.setColor(pageFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); } // Calculate grid layout for 6 demonstration blocks const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Helper to create an image block with an initial animation const createAnimatedBlock = async (index: number, imageUrl: string) => { const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUrl); engine.block.setFill(graphic, imageFill); engine.block.setShape(graphic, engine.block.createShape('rect')); engine.block.setWidth(graphic, blockWidth); engine.block.setHeight(graphic, blockHeight); const pos = getPosition(index); engine.block.setPositionX(graphic, pos.x); engine.block.setPositionY(graphic, pos.y); engine.block.appendChild(page, graphic); // Add an initial slide animation const slideAnim = engine.block.createAnimation('slide'); engine.block.setInAnimation(graphic, slideAnim); engine.block.setDuration(slideAnim, 1.0); return graphic; }; // Sample images for demonstration const imageUrls = [ 'https://img.ly/static/ubq_samples/sample_1.jpg', 'https://img.ly/static/ubq_samples/sample_2.jpg', 'https://img.ly/static/ubq_samples/sample_3.jpg', 'https://img.ly/static/ubq_samples/sample_4.jpg', 'https://img.ly/static/ubq_samples/sample_5.jpg', 'https://img.ly/static/ubq_samples/sample_6.jpg' ]; // Block 1: Retrieve animations and check their existence const block1 = await createAnimatedBlock(0, imageUrls[0]); // Retrieve animations from a block const inAnimation = engine.block.getInAnimation(block1); const outAnimation = engine.block.getOutAnimation(block1); const loopAnimation = engine.block.getLoopAnimation(block1); // Check if animations exist (0 means no animation) console.log('In animation:', inAnimation !== 0 ? 'exists' : 'none'); console.log('Out animation:', outAnimation !== 0 ? 'exists' : 'none'); console.log('Loop animation:', loopAnimation !== 0 ? 'exists' : 'none'); // Get animation type if it exists if (inAnimation !== 0) { const animationType = engine.block.getType(inAnimation); console.log('Animation type:', animationType); } // Block 2: Read animation properties const block2 = await createAnimatedBlock(1, imageUrls[1]); // Read animation properties const animation2 = engine.block.getInAnimation(block2); if (animation2 !== 0) { // Get current duration const duration = engine.block.getDuration(animation2); console.log('Duration:', duration, 'seconds'); // Get current easing const easing = engine.block.getEnum(animation2, 'animationEasing'); console.log('Easing:', easing); // Discover all available properties const allProperties = engine.block.findAllProperties(animation2); console.log('Available properties:', allProperties); } // Block 3: Modify animation duration const block3 = await createAnimatedBlock(2, imageUrls[2]); // Modify animation duration const animation3 = engine.block.getInAnimation(block3); if (animation3 !== 0) { // Change duration to 1.5 seconds engine.block.setDuration(animation3, 1.5); // Verify the change const newDuration = engine.block.getDuration(animation3); console.log('Updated duration:', newDuration, 'seconds'); } // Block 4: Change easing function const block4 = await createAnimatedBlock(3, imageUrls[3]); // Change animation easing const animation4 = engine.block.getInAnimation(block4); if (animation4 !== 0) { // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); console.log('Available easing options:', easingOptions); // Set easing to EaseInOut for smooth acceleration and deceleration engine.block.setEnum(animation4, 'animationEasing', 'EaseInOut'); } // Block 5: Adjust animation-specific properties (slide direction) const block5 = await createAnimatedBlock(4, imageUrls[4]); // Adjust animation-specific properties const animation5 = engine.block.getInAnimation(block5); if (animation5 !== 0) { // Get current direction (for slide animations) const currentDirection = engine.block.getFloat( animation5, 'animation/slide/direction' ); console.log('Current direction (radians):', currentDirection); // Change direction to slide from top (3*PI/2 radians) engine.block.setFloat( animation5, 'animation/slide/direction', (3 * Math.PI) / 2 ); } // Block 6: Replace and remove animations const block6 = await createAnimatedBlock(5, imageUrls[5]); // Replace an existing animation const oldAnimation = engine.block.getInAnimation(block6); if (oldAnimation !== 0) { // Destroy the old animation to prevent memory leaks engine.block.destroy(oldAnimation); } // Create and set a new animation const newAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block6, newAnimation); engine.block.setDuration(newAnimation, 1.2); engine.block.setEnum(newAnimation, 'animationEasing', 'EaseOut'); // Add a loop animation to demonstrate removal const loopAnim = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block6, loopAnim); engine.block.setDuration(loopAnim, 1.0); // Remove the loop animation by destroying it const currentLoop = engine.block.getLoopAnimation(block6); if (currentLoop !== 0) { engine.block.destroy(currentLoop); // Verify removal - should now return 0 const verifyLoop = engine.block.getLoopAnimation(block6); console.log( 'Loop animation after removal:', verifyLoop === 0 ? 'none' : 'exists' ); } } } export default Example; ``` This guide covers retrieving animations, reading and modifying properties, changing easing functions, adjusting animation-specific settings, and replacing or removing animations. ## Retrieving Animations Before modifying an animation, we retrieve it from the block using `getInAnimation()`, `getOutAnimation()`, or `getLoopAnimation()`. A return value of `0` indicates no animation is attached. ```typescript highlight-retrieve-animations // Retrieve animations from a block const inAnimation = engine.block.getInAnimation(block1); const outAnimation = engine.block.getOutAnimation(block1); const loopAnimation = engine.block.getLoopAnimation(block1); // Check if animations exist (0 means no animation) console.log('In animation:', inAnimation !== 0 ? 'exists' : 'none'); console.log('Out animation:', outAnimation !== 0 ? 'exists' : 'none'); console.log('Loop animation:', loopAnimation !== 0 ? 'exists' : 'none'); // Get animation type if it exists if (inAnimation !== 0) { const animationType = engine.block.getType(inAnimation); console.log('Animation type:', animationType); } ``` We use `getType()` to identify the animation type (slide, fade, zoom, etc.). This is useful when you need to apply type-specific modifications. ## Reading Animation Properties We can inspect current animation settings using property getters. `getDuration()` returns the animation length in seconds, while `getEnum()` retrieves values like easing functions. ```typescript highlight-read-properties // Read animation properties const animation2 = engine.block.getInAnimation(block2); if (animation2 !== 0) { // Get current duration const duration = engine.block.getDuration(animation2); console.log('Duration:', duration, 'seconds'); // Get current easing const easing = engine.block.getEnum(animation2, 'animationEasing'); console.log('Easing:', easing); // Discover all available properties const allProperties = engine.block.findAllProperties(animation2); console.log('Available properties:', allProperties); } ``` Use `findAllProperties()` to discover all configurable properties for an animation. Different animation types expose different properties—slide animations have direction, while loop animations may have intensity or scale properties. ## Modifying Animation Duration Change animation timing with `setDuration()`. The duration is specified in seconds. ```typescript highlight-modify-duration // Modify animation duration const animation3 = engine.block.getInAnimation(block3); if (animation3 !== 0) { // Change duration to 1.5 seconds engine.block.setDuration(animation3, 1.5); // Verify the change const newDuration = engine.block.getDuration(animation3); console.log('Updated duration:', newDuration, 'seconds'); } ``` When modifying In or Out animation durations, CE.SDK automatically adjusts the paired animation to prevent overlap. For loop animations, the duration defines the cycle length. ## Changing Easing Functions Easing controls animation acceleration. We use `setEnum()` with the `'animationEasing'` property to change it. ```typescript highlight-change-easing // Change animation easing const animation4 = engine.block.getInAnimation(block4); if (animation4 !== 0) { // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); console.log('Available easing options:', easingOptions); // Set easing to EaseInOut for smooth acceleration and deceleration engine.block.setEnum(animation4, 'animationEasing', 'EaseInOut'); } ``` Use `getEnumValues('animationEasing')` to discover available options: | Easing | Description | | ----------- | ----------------------------------------------- | | `Linear` | Constant speed throughout | | `EaseIn` | Starts slow, accelerates toward the end | | `EaseOut` | Starts fast, decelerates toward the end | | `EaseInOut` | Starts slow, speeds up, then slows down again | ## Adjusting Animation-Specific Properties Each animation type has unique configurable properties. For slide animations, we can change the entry direction. ```typescript highlight-adjust-properties // Adjust animation-specific properties const animation5 = engine.block.getInAnimation(block5); if (animation5 !== 0) { // Get current direction (for slide animations) const currentDirection = engine.block.getFloat( animation5, 'animation/slide/direction' ); console.log('Current direction (radians):', currentDirection); // Change direction to slide from top (3*PI/2 radians) engine.block.setFloat( animation5, 'animation/slide/direction', (3 * Math.PI) / 2 ); } ``` The `animation/slide/direction` property uses radians: - `0` — From the right - `Math.PI / 2` — From the bottom - `Math.PI` — From the left - `3 * Math.PI / 2` — From the top For text animations, you can adjust `textAnimationWritingStyle` (Line, Word, Character) and `textAnimationOverlap` (0 for sequential, 1 for simultaneous). ## Replacing Animations To swap an animation type, destroy the existing animation before setting a new one. This prevents memory leaks from orphaned animation objects. ```typescript highlight-replace-animation // Replace an existing animation const oldAnimation = engine.block.getInAnimation(block6); if (oldAnimation !== 0) { // Destroy the old animation to prevent memory leaks engine.block.destroy(oldAnimation); } // Create and set a new animation const newAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block6, newAnimation); engine.block.setDuration(newAnimation, 1.2); engine.block.setEnum(newAnimation, 'animationEasing', 'EaseOut'); ``` We first retrieve and destroy the old animation, then create and attach a new one with the desired type and properties. ## Removing Animations Remove an animation by destroying it. After destruction, the getter returns `0`. ```typescript highlight-remove-animation // Add a loop animation to demonstrate removal const loopAnim = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block6, loopAnim); engine.block.setDuration(loopAnim, 1.0); // Remove the loop animation by destroying it const currentLoop = engine.block.getLoopAnimation(block6); if (currentLoop !== 0) { engine.block.destroy(currentLoop); // Verify removal - should now return 0 const verifyLoop = engine.block.getLoopAnimation(block6); console.log( 'Loop animation after removal:', verifyLoop === 0 ? 'none' : 'exists' ); } ``` Destroying a design block automatically destroys all its attached animations. However, detached animations must be destroyed manually to free memory. ## API Reference | Method | Description | | ------------------------------------- | -------------------------------------------------- | | `block.getInAnimation(block)` | Get entrance animation (returns 0 if none) | | `block.getOutAnimation(block)` | Get exit animation (returns 0 if none) | | `block.getLoopAnimation(block)` | Get loop animation (returns 0 if none) | | `block.getType(anim)` | Get animation type string | | `block.getDuration(anim)` | Get animation duration in seconds | | `block.setDuration(anim, seconds)` | Set animation duration | | `block.getEnum(anim, prop)` | Get enum property value | | `block.setEnum(anim, prop, value)` | Set enum property value | | `block.getFloat(anim, prop)` | Get float property value | | `block.setFloat(anim, prop, value)` | Set float property value | | `block.findAllProperties(anim)` | Get all available properties | | `block.getEnumValues(prop)` | Get available values for enum property | | `block.destroy(anim)` | Destroy animation and free memory | ## Next Steps - [Base Animations](https://img.ly/docs/cesdk/angular/animation/create/base-0fc5c4/) — Create entrance, exit, and loop animations - [Text Animations](https://img.ly/docs/cesdk/angular/animation/create/text-d6f4aa/) — Animate text with writing styles and character control - [Animation Overview](https://img.ly/docs/cesdk/angular/animation/overview-6a2ef2/) — Understand animation concepts and capabilities --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Add motion to designs with support for keyframes, timeline editing, and programmatic animation control." platform: angular url: "https://img.ly/docs/cesdk/angular/animation/overview-6a2ef2/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/angular/animation-ce900c/) > [Overview](https://img.ly/docs/cesdk/angular/animation/overview-6a2ef2/) --- 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](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Supported Animation Types" description: "Apply different animation types to design blocks in CE.SDK and configure their properties." platform: angular url: "https://img.ly/docs/cesdk/angular/animation/types-4e5f41/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/angular/animation-ce900c/) > [Supported Animation Types](https://img.ly/docs/cesdk/angular/animation/types-4e5f41/) --- Apply entrance, exit, and loop animations to design blocks using the available animation types in CE.SDK. ![Animation types demonstrating slide, fade, zoom, and loop effects on image blocks](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-types-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-types-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-types-browser/) CE.SDK organizes animations into three categories: entrance (In), exit (Out), and loop. Each category determines when the animation plays during the block's lifecycle. This guide demonstrates different animation types and their configurable properties. ```typescript file=@cesdk_web_examples/guides-animation-types-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Supported Animation Types Guide * * Demonstrates how to use different animation types in CE.SDK: * - Entrance animations (slide, fade, zoom, spin) * - Exit animations with timing and easing * - Loop animations for continuous motion * - Animation property configuration */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get()!; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Set white background color if (!engine.block.supportsFill(page) || !engine.block.getFill(page)) { const fill = engine.block.createFill('color'); engine.block.setFill(page, fill); } const pageFill = engine.block.getFill(page)!; engine.block.setColor(pageFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Calculate grid layout for 6 demonstration blocks const pageWidth = engine.block.getWidth(page)!; const pageHeight = engine.block.getHeight(page)!; const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Helper to create an image block const createImageBlock = async (index: number, imageUrl: string) => { const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUrl); engine.block.setFill(graphic, imageFill); engine.block.setShape(graphic, engine.block.createShape('rect')); engine.block.setWidth(graphic, blockWidth); engine.block.setHeight(graphic, blockHeight); const pos = getPosition(index); engine.block.setPositionX(graphic, pos.x); engine.block.setPositionY(graphic, pos.y); engine.block.appendChild(page, graphic); return graphic; }; // Sample images for demonstration const imageUrls = [ 'https://img.ly/static/ubq_samples/sample_1.jpg', 'https://img.ly/static/ubq_samples/sample_2.jpg', 'https://img.ly/static/ubq_samples/sample_3.jpg', 'https://img.ly/static/ubq_samples/sample_4.jpg', 'https://img.ly/static/ubq_samples/sample_5.jpg', 'https://img.ly/static/ubq_samples/sample_6.jpg' ]; // Block 1: Slide entrance animation with direction const block1 = await createImageBlock(0, imageUrls[0]); // Create a slide animation that enters from the left const slideAnimation = engine.block.createAnimation('slide'); engine.block.setInAnimation(block1, slideAnimation); engine.block.setDuration(slideAnimation, 1.0); // Direction in radians: 0=right, PI/2=bottom, PI=left, 3*PI/2=top engine.block.setFloat(slideAnimation, 'animation/slide/direction', Math.PI); engine.block.setEnum(slideAnimation, 'animationEasing', 'EaseOut'); // Block 2: Fade animation with easing const block2 = await createImageBlock(1, imageUrls[1]); // Create a fade entrance animation const fadeAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(block2, fadeAnimation); engine.block.setDuration(fadeAnimation, 1.0); engine.block.setEnum(fadeAnimation, 'animationEasing', 'EaseInOut'); // Block 3: Zoom animation const block3 = await createImageBlock(2, imageUrls[2]); // Create a zoom animation with fade effect const zoomAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block3, zoomAnimation); engine.block.setDuration(zoomAnimation, 1.0); engine.block.setBool(zoomAnimation, 'animation/zoom/fade', true); // Block 4: Exit animation const block4 = await createImageBlock(3, imageUrls[3]); // Create entrance and exit animations const wipeIn = engine.block.createAnimation('wipe'); engine.block.setInAnimation(block4, wipeIn); engine.block.setDuration(wipeIn, 1.0); engine.block.setEnum(wipeIn, 'animation/wipe/direction', 'Right'); // Exit animation plays before block disappears const fadeOut = engine.block.createAnimation('fade'); engine.block.setOutAnimation(block4, fadeOut); engine.block.setDuration(fadeOut, 1.0); engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn'); // Block 5: Loop animation const block5 = await createImageBlock(4, imageUrls[4]); // Create a breathing loop animation const breathingLoop = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block5, breathingLoop); engine.block.setDuration(breathingLoop, 2.0); // Intensity: 0 = 1.25x max scale, 1 = 2.5x max scale engine.block.setFloat( breathingLoop, 'animation/breathing_loop/intensity', 0.3 ); // Block 6: Combined animations const block6 = await createImageBlock(5, imageUrls[5]); // Apply entrance, exit, and loop animations together const spinIn = engine.block.createAnimation('spin'); engine.block.setInAnimation(block6, spinIn); engine.block.setDuration(spinIn, 1.0); engine.block.setEnum(spinIn, 'animation/spin/direction', 'Clockwise'); engine.block.setFloat(spinIn, 'animation/spin/intensity', 0.5); const blurOut = engine.block.createAnimation('blur'); engine.block.setOutAnimation(block6, blurOut); engine.block.setDuration(blurOut, 1.0); const swayLoop = engine.block.createAnimation('sway_loop'); engine.block.setLoopAnimation(block6, swayLoop); engine.block.setDuration(swayLoop, 1.5); // Discover available properties for any animation const properties = engine.block.findAllProperties(slideAnimation); // eslint-disable-next-line no-console console.log('Slide animation properties:', properties); // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); // Set initial playback time to see animations engine.block.setPlaybackTime(page, 1.9); } } export default Example; ``` This guide covers applying entrance animations (slide, fade, zoom), exit animations, loop animations, and configuring animation properties like direction, easing, and intensity. ## Entrance Animations Entrance animations define how a block appears. We use `createAnimation()` with the animation type and attach it using `setInAnimation()`. ### Slide Animation The slide animation moves a block in from a specified direction. The `direction` property uses radians where 0 is right, π/2 is bottom, π is left, and 3π/2 is top. ```typescript highlight-entrance-slide // Create a slide animation that enters from the left const slideAnimation = engine.block.createAnimation('slide'); engine.block.setInAnimation(block1, slideAnimation); engine.block.setDuration(slideAnimation, 1.0); // Direction in radians: 0=right, PI/2=bottom, PI=left, 3*PI/2=top engine.block.setFloat(slideAnimation, 'animation/slide/direction', Math.PI); engine.block.setEnum(slideAnimation, 'animationEasing', 'EaseOut'); ``` ### Fade Animation The fade animation transitions opacity from invisible to fully visible. Easing controls the animation curve. ```typescript highlight-entrance-fade // Create a fade entrance animation const fadeAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(block2, fadeAnimation); engine.block.setDuration(fadeAnimation, 1.0); engine.block.setEnum(fadeAnimation, 'animationEasing', 'EaseInOut'); ``` ### Zoom Animation The zoom animation scales the block from a smaller size to its final dimensions. The `fade` property adds an opacity transition during scaling. ```typescript highlight-entrance-zoom // Create a zoom animation with fade effect const zoomAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block3, zoomAnimation); engine.block.setDuration(zoomAnimation, 1.0); engine.block.setBool(zoomAnimation, 'animation/zoom/fade', true); ``` Other entrance animation types include: - `blur` — Transitions from blurred to clear - `wipe` — Reveals with a directional wipe - `pop` — Bouncy scale effect - `spin` — Rotates the block into view - `grow` — Scales up from a point ## Exit Animations Exit animations define how a block leaves the screen. We use `setOutAnimation()` to attach them. CE.SDK prevents overlap between entrance and exit durations automatically. ```typescript highlight-exit-animation // Create entrance and exit animations const wipeIn = engine.block.createAnimation('wipe'); engine.block.setInAnimation(block4, wipeIn); engine.block.setDuration(wipeIn, 1.0); engine.block.setEnum(wipeIn, 'animation/wipe/direction', 'Right'); // Exit animation plays before block disappears const fadeOut = engine.block.createAnimation('fade'); engine.block.setOutAnimation(block4, fadeOut); engine.block.setDuration(fadeOut, 1.0); engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn'); ``` In this example, a wipe entrance transitions to a fade exit. Mirror entrance effects for visual consistency, or use contrasting effects for emphasis. ## Loop Animations Loop animations run continuously while the block is visible. They can combine with entrance and exit animations. We use `setLoopAnimation()` to attach them. ```typescript highlight-loop-animation // Create a breathing loop animation const breathingLoop = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block5, breathingLoop); engine.block.setDuration(breathingLoop, 2.0); // Intensity: 0 = 1.25x max scale, 1 = 2.5x max scale engine.block.setFloat( breathingLoop, 'animation/breathing_loop/intensity', 0.3 ); ``` The duration controls each cycle length. Loop animation types include: - `breathing_loop` — Slow scale pulse - `pulsating_loop` — Rhythmic scale - `spin_loop` — Continuous rotation - `fade_loop` — Opacity cycling - `sway_loop` — Rotational oscillation - `jump_loop` — Jumping motion - `blur_loop` — Blur cycling - `squeeze_loop` — Squeezing effect ## Combined Animations A single block can have entrance, exit, and loop animations running together. The loop animation runs throughout the block's visibility while entrance and exit animations play at the appropriate times. ```typescript highlight-combined-animations // Apply entrance, exit, and loop animations together const spinIn = engine.block.createAnimation('spin'); engine.block.setInAnimation(block6, spinIn); engine.block.setDuration(spinIn, 1.0); engine.block.setEnum(spinIn, 'animation/spin/direction', 'Clockwise'); engine.block.setFloat(spinIn, 'animation/spin/intensity', 0.5); const blurOut = engine.block.createAnimation('blur'); engine.block.setOutAnimation(block6, blurOut); engine.block.setDuration(blurOut, 1.0); const swayLoop = engine.block.createAnimation('sway_loop'); engine.block.setLoopAnimation(block6, swayLoop); engine.block.setDuration(swayLoop, 1.5); ``` ## Configuring Animation Properties Each animation type has specific configurable properties. We use `findAllProperties()` to discover available properties and `getEnumValues()` to query options for enum properties. ```typescript highlight-discover-properties // Discover available properties for any animation const properties = engine.block.findAllProperties(slideAnimation); // eslint-disable-next-line no-console console.log('Slide animation properties:', properties); // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); ``` Common configurable properties include: - **Direction**: Controls entry/exit direction in radians or enum values - **Easing**: Animation curve (`Linear`, `EaseIn`, `EaseOut`, `EaseInOut`) - **Intensity**: Strength of the effect (varies by animation type) - **Fade**: Whether to include opacity transition ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.createAnimation(type)` | Create animation by type string | | `engine.block.setInAnimation(block, anim)` | Attach entrance animation | | `engine.block.setOutAnimation(block, anim)` | Attach exit animation | | `engine.block.setLoopAnimation(block, anim)` | Attach loop animation | | `engine.block.setDuration(anim, seconds)` | Set animation duration | | `engine.block.setFloat(anim, property, value)` | Set numeric property | | `engine.block.setEnum(anim, property, value)` | Set enum property | | `engine.block.setBool(anim, property, value)` | Set boolean property | | `engine.block.findAllProperties(anim)` | Discover configurable properties | | `engine.block.getEnumValues(property)` | Get available enum values | ## Next Steps - [Base Animations](https://img.ly/docs/cesdk/angular/animation/create/base-0fc5c4/) — Create and attach animations to blocks - [Text Animations](https://img.ly/docs/cesdk/angular/animation/create/text-d6f4aa/) — Animate text with writing styles - [Animation Overview](https://img.ly/docs/cesdk/angular/animation/overview-6a2ef2/) — Animation concepts and capabilities --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "API Reference" description: "Find out how to use the API of the CESDK." platform: angular url: "https://img.ly/docs/cesdk/angular/api-reference/overview-8f24e1/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [API Reference](https://img.ly/docs/cesdk/angular/api-reference/overview-8f24e1/) --- For , the following packages are available: - [@cesdk/cesdk-js](`$\{props.platform.slug}/api/cesdk-js/`) - [@cesdk/engine](`$\{props.platform.slug}/api/engine/`) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: ActionsAPI" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/actionsapi/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

ActionsAPI

## Methods
### register()

Registers a custom action for a specific event type.

#### Type Parameters | Type Parameter | | ------ | | `T` *extends* [`ActionId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/) | #### 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 `void` #### Example ```typescript actionsAPI.register('downloadFile', async (blob, mimeType) => { // Custom download logic await customDownloadAction(blob, mimeType); }); ``` #### Signature ```typescript register(actionId: T, action: ActionFunction): void ``` ***
### get()

Returns the custom export video action if registered, otherwise returns the default.

#### Type Parameters | 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `actionId` | `T` | The event type to get an action for | #### Returns [`ActionFunction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/)\<`T`, `C`> #### Example ```typescript const exportAction = actionsAPI.get('export'); if (exportAction) { const result = await exportAction(options); } ``` #### Signature ```typescript get(actionId: T): ActionFunction ``` ***
### run()

Executes a registered action with the provided parameters. Throws an error if the action is not registered.

#### Type Parameters | 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 | 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/)> : `never`\[] | The arguments to pass to the action | #### Returns `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 Error if the action is not registered #### Example ```typescript try { const result = await actionsAPI.run('exportDesign', exportOptions); console.log('Export completed', result); } catch (error) { console.error('Export action not registered'); } ``` #### Signature ```typescript run(actionId: T, args: ActionFunction extends CustomActionFunction ? Parameters : never[]): Promise extends (args: any[]) => R ? R : never> ``` ***
### list()

Returns all registered action IDs.

This method retrieves a list of all action identifiers that are available. #### 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 [`ActionId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/)\[] An array of action IDs currently registered in the store #### Example ```typescript const registeredActions = actionsAPI.list(); console.log('Available actions:', registeredActions); // Output: ['saveScene', 'exportDesign', 'customAction1', ...] // Find all export-related actions using wildcard const exportActions = actionsAPI.list({ matcher: 'export*' }); console.log('Export actions:', exportActions); // Output: ['exportDesign', 'exportScene', ...] ``` #### Signature ```typescript list(options?: object): ActionId[] ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: CreativeEditorSDK" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeeditorsdk/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 ## Constructors
### Constructor

CreativeEditorSDK

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

The version of the CE.SDK package.

***
### engine

Access to the CreativeEngine instance that powers the editor.

***
### ui

Access to the [UserInterfaceAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/userinterfaceapi/) for controlling the editor's user interface

***
### i18n

Access to the [InternationalizationAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/internationalizationapi/) to control locale and translations

***
### feature

Access to the [FeatureAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/featureapi/) to control feature availability

***
### actions

Access to the [ActionsAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/actionsapi/) to control event actions

***
### utils

Access to the [UtilsAPI](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/utilsapi/) for utility functions

***
### version

The version of the Creative Editor SDK

## Lifecycle Management Methods for SDK initialization, cleanup, and resource management.
### dispose()

Disposes the editor and engine if no longer needed.

#### Returns `void` #### Signature ```typescript dispose(): void ``` ***
### create()

Creates an editor and renders it for the given container.

This method gives you more control over the initialization process of the editor. After the returned Promise resolves, you can execute configuration commands on the CreativeEditorSDK instance. Once that is done, you can load or create an initial scene. Until then the CreativeEditorSDK will display a loading spinner #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `container` | `string` | `HTMLDivElement` | the container to mount the editor as a HTML element or selector | | `config?` | [`Configuration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/configuration/) | the initial configuration to create the editor | #### Returns `Promise`\<`CreativeEditorSDK`> a promise which resolves after the engine is ready to receive further commands on the CreativeEditorSDK instance #### Signature ```typescript create(container: string | HTMLDivElement, config?: Configuration): Promise ```
## Configuration Methods for configuring SDK behavior, translations, and runtime settings.
### onReset()

Registers a callback function to be executed when resetEditor is called.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | (`cesdk`) => `void` | Function to be called with the cesdk instance when reset occurs | #### Returns Function to remove the callback from the registry () => `void` #### Example ```typescript const removeCallback = cesdk.onReset((cesdk) => { console.log('Editor is being reset'); // Custom cleanup/reinitialization logic }); // Later, to remove the callback: removeCallback(); ``` #### Signature ```typescript onReset(callback: (cesdk: CreativeEditorSDK) => void): () => void ``` ***
### disableNoSceneWarning()

Disable the warning logged when no scene is available.

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

Resets the editor to a clean state by disabling all features, clearing UI configurations, and removing asset sources.

#### Returns `void` #### Example ```typescript // Reset the editor to clean state cesdk.resetEditor(); // Reconfigure as needed cesdk.feature.enable('ly.img.navigation.bar'); cesdk.addPlugin(new TypefaceAssetSource()); ``` #### Signature ```typescript resetEditor(): void ``` ***
### ~~reapplyLegacyUserConfiguration()~~

Re-applies the user's initial deprecated configuration that was passed to CreativeEditorSDK.create(). This restores deprecated configuration values that may have been cleared by resetEditor().

Config plugins should call this as the last step of their `initialize()` method, after all features, UI, actions, and settings have been set up. #### Returns `void` #### Deprecated This method is an intermediate measure to preserve backward compatibility while users migrate away from deprecated configuration options. It will be removed once the deprecated configuration paths are fully dropped. ***
### ~~setTranslations()~~

Adds translations to be used by the editor.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `definition` | `Partial`\<`Record`\<[`LocaleKey`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/localekey/), `Partial`\<[`Translations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/)>>> | locale to a translation object | #### Returns `void` #### Deprecated Use `cesdk.i18n.setTranslations()` instead. This method will be removed in a future version. #### Example ``` // Deprecated - do not use cesdk.setTranslations({...}); // Use this instead cesdk.i18n.setTranslations({ en: { presets: { scene: ... } } }) ```
## Plugin Management Methods for extending SDK functionality through plugins and custom integrations.
### addPlugin()

Adds and initializes a plugin to the editor.

#### Parameters | Parameter | Type | | ------ | ------ | | `plugin` | [`EditorPlugin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/editorplugin/) | #### Returns `Promise`\<`void`> #### Signature ```typescript addPlugin(plugin: EditorPlugin): Promise ```
## Asset Management Methods for registering, managing, and refreshing asset sources including default assets, demo assets, and custom asset libraries.
### ~~addDefaultAssetSources()~~

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

The sources contain our example assets. These are: - `'ly.img.sticker'` - Various stickers - `'ly.img.vector.shape'` - Shapes and arrows - `'ly.img.filter'` - Filter effects (LUT and duotone) 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `baseURL?`: `string`; `excludeAssetSourceIds?`: `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`\[] | - | #### Returns `Promise`\<`void`> #### Deprecated This method uses legacy v4 asset source IDs and will be removed in a future version. Please migrate to v5 asset sources using engine.asset.addLocalAssetSourceFromJSONURI(). ***
### ~~addDemoAssetSources()~~

Convenience function that registers a set of demo asset sources

These contain our example assets. These are not to meant to be used in your production code. These are - `'ly.img.image'` - Sample images - `'ly.img.image.upload'` - Demo source to upload image assets - `'ly.img.audio'` - Sample audios - `'ly.img.audio.upload'` - Demo source to upload audio assets - `'ly.img.video'` - Sample videos - `'ly.img.video.upload'` - Demo source to upload video assets #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `baseURL?`: `string`; `excludeAssetSourceIds?`: `DemoAssetSourceId`\[]; `sceneMode?`: `SceneMode`; `withUploadAssetSources?`: `boolean`; } | Configuration options for asset sources. Contains `baseURL` (defaults to IMG.LY CDN), `excludeAssetSourceIds` (IDs to ignore during load), and `sceneMode` (loads video-specific sources if 'Video'). | | `options.baseURL?` | `string` | - | | `options.excludeAssetSourceIds?` | `DemoAssetSourceId`\[] | - | | `options.sceneMode?` | `SceneMode` | - | | `options.withUploadAssetSources?` | `boolean` | - | #### Returns `Promise`\<`void`> #### Deprecated This method uses legacy v3 demo asset source IDs and will be removed in a future version. Please migrate to v4 asset sources using engine.asset.addLocalAssetSourceFromJSONURI(). ***
### ~~refetchAssetSources()~~

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

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `sourceId?` | `string` | `string`\[] | The ID or IDs of the asset sources to refetch. If not provided, all asset sources will be refetched. | #### Returns `void` #### Deprecated Please use `cesdk.engine.asset.assetSourceContentsChanged` instead.
## Scene Creation Methods for creating new scenes from scratch, including design scenes, video scenes, and scenes from existing images.
### ~~createDesignScene()~~

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

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `format?` | [`PageFormatDefinition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pageformatdefinition/) | A `PageFormatDefinition` object specifying the page format to use. | #### Returns `Promise`\<`number`> #### Deprecated Use `cesdk.actions.run('scene.create', { mode: 'Design' })` instead. ***
### ~~createVideoScene()~~

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

#### Parameters | 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 `Promise`\<`number`> #### Deprecated Use `cesdk.actions.run('scene.create', { mode: 'Video' })` instead. ***
### 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 | 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?` | `SceneLayout` | The layout of the scene. Defaults to 'Free'. | | `spacing?` | `number` | Spacing between pages. Defaults to 0. | | `spacingInScreenSpace?` | `boolean` | Whether spacing is in screen space. Defaults to false. | #### Returns `Promise`\<`number`> a promise which resolves if the scene was successfully created. #### Signature ```typescript createFromImage(url: string, dpi?: number, pixelScaleFactor?: number, sceneLayout?: SceneLayout, spacing?: number, spacingInScreenSpace?: boolean): Promise ``` ***
### createFromVideo()

Create a scene from the provided video.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `url` | `string` | The url of the video | #### Returns `Promise`\<`number`> a promise which resolves if the scene was successfully created. #### Signature ```typescript createFromVideo(url: string): Promise ```
## Scene Loading Methods for loading existing scenes from various sources including strings, URLs, and encoded scene data.
### ~~load()~~

Load an encoded scene from the provided string.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `scene` | `string` | A string starting with UBQ1 and containing the encoded scene. | #### Returns `Promise`\<`number`> #### Deprecated Use `loadFromString` instead. ***
### loadFromString()

Load an encoded scene from the provided string.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `scene` | `string` | A string starting with UBQ1 and containing the encoded scene. | | `overrideEditorConfig?` | `boolean` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | #### Returns `Promise`\<`number`> a promise which resolves if the scene was successfully loaded. #### Signature ```typescript loadFromString(scene: string, overrideEditorConfig?: boolean): Promise ``` ***
### loadFromURL()

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

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `url` | `string` | The url to fetch to acquire the scene string. | | `overrideEditorConfig?` | `boolean` | Whether to override editor configuration with settings and data from the scene file. Defaults to false. | #### Returns `Promise`\<`number`> a promise which resolves if the scene was successfully loaded. #### Signature ```typescript loadFromURL(url: string, overrideEditorConfig?: boolean): Promise ``` ***
### loadFromArchiveURL()

Load a previously archived scene from the URL to the scene file.

#### Parameters | 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 `Promise`\<`number`> a promise which resolves if the scene was successfully loaded. #### Signature ```typescript loadFromArchiveURL(url: string, overrideEditorConfig?: boolean): Promise ```
## Scene Saving Methods for persisting and exporting scene data as strings or files.
### save()

Save and return a scene as a base64 encoded string.

#### Returns `Promise`\<`string`> a promise with the scene as a string #### Signature ```typescript save(): Promise ```
## Export Operations Methods for exporting scenes and pages as files in various formats and mimeTypes.
### export()

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

Please note: the `onExport` callback provided in the configuration will be not called. This callback is for exports triggered by an user interaction. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | [`ExportOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/exportoptions/) | options for the export | #### Returns `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 ```typescript export(options: ExportOptions): Promise ``` ## Upload Operations Methods for handling file uploads and asset creation from user-provided files.
### ~~unstable\_upload()~~ Uses the configured upload handler to upload the given file. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `file` | `File` | The file to upload | | `onProgress` | (`progress`) => `void` | A callback to track the progress of the upload This API is experimental and may change or be removed in future versions. | #### Returns `Promise`\<`AssetDefinition`> #### Deprecated This API will be removed in future versions. Please use the `uploadFile` action instead.
## Other
### ui

| Name | Type | | ------ | ------ | | addIconSet() | (id, svgSprite) => void | | setComponentOrder() | (\_options, order) => void | | setTheme() | (theme) => void |

***
### i18n

| Name | Type | | ------ | ------ | | setTranslations() | (definition) => void |

***
### getBaseURL()

Returns the baseURL that was provided in the configuration during editor initialization.

#### Returns `string` The original baseURL from the top-level configuration #### Example ```typescript const cesdk = await CreativeEditorSDK.create('#editor', { baseURL: 'https://my-cdn.example.com/assets/' }); console.log(cesdk.getBaseURL()); // 'https://my-cdn.example.com/assets/' ``` #### Signature ```typescript getBaseURL(): string ```
## Page Management This API is experimental and may change or be removed in future versions.
### unstable\_switchPage() #### Parameters | Parameter | Type | | ------ | ------ | | `pageId` | `number` | #### Returns `Promise`\<`void`> ***
### unstable\_getPages() #### Returns `Promise`\<`number`\[]> ***
### unstable\_onActivePageChanged() #### Parameters | Parameter | Type | | ------ | ------ | | `callback` | (`id`) => `void` | #### Returns () => `void` ***
### unstable\_focusPage() Focus on a specific page and zoom to fit it in the viewport. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `pageId` | `number` | The ID of the page to focus on | #### Returns `Promise`\<`void`> A promise that resolves when the focus operation is complete
## Upload Operations This API is experimental and may change or be removed in future versions.
### ~~unstable\_supportsUpload()~~ Returns true if a upload handler was configured. If mime types are given as an argument, it will return true if the upload handler supports all of the given mime types. #### Parameters | Parameter | Type | | ------ | ------ | | `mimeTypes?` | `string` | `string`\[] | #### Returns `boolean` #### Deprecated This API will be removed in future versions. Please use the `engine.editor.getSetting('upload/supportedMimeTypes')` to check for supported mime types instead.
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: FeatureAPI" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/featureapi/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 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

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
### Use Case 1: Simple Enable/Disable ```typescript // Enable a feature with its default behavior cesdk.feature.enable('ly.img.delete'); // isEnabled: true // Disable it cesdk.feature.disable('ly.img.delete'); // isEnabled: false // Re-enable it cesdk.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() ```typescript // Enable delete only when something is selected cesdk.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 ```typescript cesdk.feature.enable('ly.img.delete'); // Default predicate: true cesdk.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 ```typescript // Base: Feature enabled by default cesdk.feature.enable('ly.img.delete'); // Layer 1: Add selection requirement cesdk.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 block type requirement cesdk.feature.set('ly.img.delete', ({ isPreviousEnable, engine }) => { const previousEnabled = isPreviousEnable(); // Checks Layer 1 const [selected] = engine.block.findAllSelected(); const isText = selected != null && engine.block.getType(selected) === '//ly.img.ubq/text'; return previousEnabled && isText; }); // isEnabled: true only if all conditions met (block type + selection + enabled) ``` **Expected outcome:** Each `set()` call with a function can build on previous conditions by calling `isPreviousEnable()`.
### Use Case 5: Overriding with set() ```typescript 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 ```typescript // Enable all video features at once cesdk.feature.enable('ly.img.video.*'); // Disable all crop features cesdk.feature.disable('ly.img.crop.*'); // Set custom predicate for all navigation features cesdk.feature.set('ly.img.navigation.*', ({ engine }) => { return engine.block.findAllSelected().length > 0; }); // Check if all video features are enabled const 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 ```typescript 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.
### Use Case 8: Enable/Disable Propagation to Children ```typescript // Enable the parent feature - also enables children cesdk.feature.enable('ly.img.replace'); // Equivalent to also calling: cesdk.feature.enable('ly.img.replace.*') // All children with default predicates are now enabled: cesdk.feature.isEnabled('ly.img.replace.fill'); // true (if default predicate passes) cesdk.feature.isEnabled('ly.img.replace.shape'); // true (if default predicate passes) cesdk.feature.isEnabled('ly.img.replace.audio'); // true (if default predicate passes) // Disable a specific child after propagation: cesdk.feature.disable('ly.img.replace.fill'); cesdk.feature.isEnabled('ly.img.replace.fill'); // false // Disable propagates to children too: cesdk.feature.disable('ly.img.replace'); // Equivalent to also calling: cesdk.feature.disable('ly.img.replace.*') ``` **Expected outcome:** `enable()` and `disable()` propagate to all child features that have registered default predicates. Each child uses its own default predicate, so context-dependent conditions (e.g., block type checks) still apply. Children can be individually overridden after propagation.
## 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 8. **Enable/disable propagates to children** - `enable()` and `disable()` also affect all child features with default predicates ## Constructors
### Constructor

FeatureAPI

## Feature Control Methods for enabling and checking the status of editor features based on custom predicates.
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `featureId` | | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/)\[] | The feature ID, glob pattern, or array of feature IDs to enable. | ##### Returns `void` ##### Examples Enable single feature with its default predicate: ```typescript cesdk.feature.enable('ly.img.delete'); ``` Enable multiple features at once: ```typescript cesdk.feature.enable(['ly.img.delete', 'ly.img.duplicate']); ``` Enable all video features using a glob pattern: ```typescript cesdk.feature.enable('ly.img.video.*'); ``` Enable all navigation features: ```typescript cesdk.feature.enable('ly.img.navigation.*'); ``` #### Call Signature ```ts enable(featureId, predicate): void; ``` ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `featureId` | | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/)\[] | The feature ID or array of feature IDs to enable. | | `predicate` | [`FeaturePredicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicate/) | The condition that determines if the feature is enabled. | ##### Returns `void` ##### 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 ```typescript enable(featureId: FeatureId | FeatureId[]): void ``` ```typescript enable(featureId: FeatureId | FeatureId[], predicate: FeaturePredicate): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `featureId` | | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/)\[] | The feature ID, glob pattern, or array of feature IDs to disable. | #### Returns `void` #### Examples Disable a single feature: ```typescript cesdk.feature.disable('ly.img.delete'); ``` Disable multiple features at once: ```typescript cesdk.feature.disable([ 'ly.img.delete', 'ly.img.duplicate', 'ly.img.group' ]); ``` Disable all video features using a glob pattern: ```typescript cesdk.feature.disable('ly.img.video.*'); ``` Disable all crop features: ```typescript cesdk.feature.disable('ly.img.crop.*'); ``` #### Signature ```typescript disable(featureId: FeatureId | FeatureId[]): void ``` ***
### 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 | 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 `void` #### Examples Enable a feature using its default predicate: ```typescript cesdk.feature.set('ly.img.delete', true); ``` Disable a feature: ```typescript cesdk.feature.set('ly.img.delete', false); ``` Set a feature with a custom predicate: ```typescript cesdk.feature.set('ly.img.delete', ({ engine }) => { return engine.block.findAllSelected().length > 0; }); ``` Disable all video features using a glob pattern: ```typescript cesdk.feature.set('ly.img.video.*', false); ``` Enable all filter features with a custom predicate: ```typescript 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 ```typescript set(featureId: FeatureId, enabled: FeaturePredicate): void ``` ***
### 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 | 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 [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/)\[] An array of feature IDs sorted alphabetically. #### Examples List all registered features: ```typescript const allFeatures = cesdk.feature.list(); console.log(allFeatures); // ['ly.img.delete', 'ly.img.duplicate', ...] ``` List features matching a pattern: ```typescript const videoFeatures = cesdk.feature.list({ matcher: 'ly.img.video.*' }); console.log(videoFeatures); // ['ly.img.video.timeline', 'ly.img.video.timeline.clips', ...] ``` List navigation features: ```typescript const navFeatures = cesdk.feature.list({ matcher: 'ly.img.navigation.*' }); ``` #### Signature ```typescript list(options?: object): FeatureId[] ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `featureId` | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | The feature ID to query. | #### Returns [`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 Get predicates for a feature: ```typescript const predicates = cesdk.feature.get('ly.img.delete'); if (predicates) { console.log(`Feature has ${predicates.length} predicates`); } ``` Check if a feature is registered: ```typescript const isRegistered = cesdk.feature.get('ly.img.delete') !== undefined; ``` #### Signature ```typescript get(featureId: FeatureId): FeaturePredicate[] ``` ***
### 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 | 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 `boolean` True if the feature (or all matching features for glob patterns) is enabled, false otherwise. #### Examples Check if a single feature is enabled: ```typescript const isDeleteEnabled = cesdk.feature.isEnabled('ly.img.delete'); ``` Check if all video features are enabled: ```typescript const allVideoFeaturesEnabled = cesdk.feature.isEnabled('ly.img.video.*'); ``` Check with custom context (useful in predicates): ```typescript cesdk.feature.set('ly.img.delete', ({ engine }) => { return cesdk.feature.isEnabled('ly.img.duplicate', { engine }); }); ``` #### Signature ```typescript isEnabled(featureId: FeatureId, context?: IsEnabledFeatureContext): boolean ``` ***
### has()

Checks if a feature has registered predicates.

Returns `true` if the feature has any predicates (boolean or function) in its chain. Returns `false` if the feature is unknown or has no predicates. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `featureId` | [`FeatureId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/) | The feature ID to check. | #### Returns `boolean` True if the feature has registered predicates. #### Signature ```typescript has(featureId: FeatureId): boolean ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: InternationalizationAPI" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/internationalizationapi/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

InternationalizationAPI

## Localization Methods for managing locale settings and custom translations within the editor.
### getLocale()

Gets the currently active locale.

#### Returns `string` The currently set locale as a string, or the fallback locale if none is set. #### Signature ```typescript getLocale(): string ``` ***
### listLocales()

Returns all available locales that have been loaded.

#### 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 `string`\[] An array of locale strings that have translations available. #### Example ```typescript const allLocales = cesdk.i18n.listLocales(); console.log('Available locales:', allLocales); // Output: ['en', 'de', 'fr', ...] // Find all English variants using wildcard const englishLocales = cesdk.i18n.listLocales({ matcher: 'en*' }); console.log('English locales:', englishLocales); // Output: ['en', 'en-US', 'en-GB', ...] ``` #### Signature ```typescript listLocales(options?: object): string[] ``` ***
### setLocale

Sets the active locale for the editor interface.

This will **not check** whether translations for the given locale are available. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `locale` | `string` | The locale string to set as active (e.g., 'en', 'de', 'fr'). | #### Returns `void` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `definition` | `Partial`\<`Record`\<[`LocaleKey`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/localekey/), `Partial`\<[`Translations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/)>>> | An object mapping locale strings to translation objects. | #### Returns `void` #### Example ``` setTranslations({ en: { presets: { scene: ... } } }) ``` #### Signature ```typescript setTranslations(definition: Partial>>): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `locales?` | `string`\[] | An optional array of locale strings to retrieve translations for. | #### Returns `Partial`\<`Record`\<[`LocaleKey`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/localekey/), `Partial`\<[`Translations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/)>>> An object mapping locale strings to their respective translations. #### Signature ```typescript getTranslations(locales?: string[]): Partial>> ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `key` | `string` | `string`\[] | A translation key string or an array of translation keys to try in order. | #### Returns `string` The translated string for the key in the current locale, or the key itself if no translation is found. #### Example ``` // Single key const 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 ```typescript translate(key: string | string[]): string ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: UserInterfaceAPI" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/userinterfaceapi/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

UserInterfaceAPI

## Experimental Features
### 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 | 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 `void` ***
### ~~unstable\_getView()~~ Gets the current view style of the editor interface. #### Returns [`ViewStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/viewstyle/) The current view style ('default' or 'advanced'). #### 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 ```javascript // Before (deprecated) const view = cesdk.ui.unstable_getView(); // After (preferred) const view = cesdk.ui.getView(); ```
## Asset Library
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `AssetLibraryEntry` | [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) | The asset library entry configuration to add. | #### Returns `void` #### Signature ```typescript addAssetLibraryEntry(AssetLibraryEntry: AssetLibraryEntry): void ``` ***
### updateAssetLibraryEntry()

Updates an existing asset library entry with new properties.

The provided properties will be merged with the existing entry. #### Parameters | 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"` | `"sourceIds"`> & `object`> | ((`entry`) => `Partial`\<`Omit`\<[`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/), `"id"` | `"sourceIds"`> & `object`>) | Partial entry properties to merge with the existing entry, or a function that receives the current entry and returns the updated properties. | #### Returns `void` #### Example ```typescript // Simple static update cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['my-custom-colors'] }); // Update other properties using callback with entry cesdk.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 ```typescript updateAssetLibraryEntry(id: AssetEntryId, assetLibraryEntry: Partial & object> | (entry: AssetLibraryEntry) => Partial & object>): void ``` ***
### removeAssetLibraryEntry()

Removes an asset library entry from the available entries.

#### Parameters | 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 `void` #### Signature ```typescript removeAssetLibraryEntry(id: AssetEntryId): void ``` ***
### getAssetLibraryEntry()

Gets a specific asset library entry by its ID.

#### Parameters | 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 [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) The asset library entry configuration, or undefined if not found. #### Signature ```typescript getAssetLibraryEntry(id: AssetEntryId): AssetLibraryEntry ``` ***
### findAllAssetLibraryEntries()

Gets all currently registered asset library entry IDs.

#### Returns [`AssetEntryId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/)\[] Array of asset library entry IDs. #### Signature ```typescript findAllAssetLibraryEntries(): AssetEntryId[] ``` ***
### ~~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 | 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 `void` #### Deprecated please use the cesdk.actions API to register an action for 'addClip' and implement your own logic. #### Example ```ts // Before cesdk.ui.setBackgroundTrackAssetLibraryEntries(['ly.img.video', 'ly.img.image']); // After cesdk.actions.register('addClip', async () => { cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.video', 'ly.img.image'] } }); }); ``` ***
### ~~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 [`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 The background track entries are now defined via the cesdk.actions API. ***
### 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 | 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 `void` #### Signature ```typescript setReplaceAssetLibraryEntries(replaceAssetLibraryEntries: (context: ReplaceAssetLibraryEntriesContext) => AssetEntryId[]): void ```
## Component Registration
### 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 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 | 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 `void` #### Signature ```typescript registerPanel(panelId: string, renderPanel: BuilderRenderFunction

): void ``` ***

### ~~unstable\_registerPanel()~~

Registers a panel with builder-based rendering system.

#### 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 | 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 `void` #### Deprecated Use `registerPanel` instead. ***
### 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 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `string` | `string`\[] | The component ID or array of IDs for use in ordering APIs. | | `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 `void` #### Signature ```typescript registerComponent(ids: string | string[], renderComponent: BuilderRenderFunction

): void ```

## Dialogs
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `dialog` | `string` | [`Dialog`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dialog/) | The dialog content as a string or dialog object. | #### Returns `string` The dialog ID for programmatic updates or closure. #### Signature ```typescript showDialog(dialog: string | Dialog): string ``` ***
### updateDialog()

Updates an existing dialog with new content or properties.

The dialog properties will be merged with the existing dialog configuration. #### Parameters | 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/)> | ((`dialog`) => `Partial`\<[`Dialog`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dialog/)>) | Partial dialog properties to merge, or a function that receives the current dialog and returns updates. | #### Returns `void` #### Signature ```typescript updateDialog(id: string, dialog: Partial | (dialog: Dialog) => Partial): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `string` | The ID of the dialog to close. | #### Returns `void` #### Signature ```typescript closeDialog(id: string): void ```
## Notifications
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `notification` | | `string` | [`Notification`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/notification/) | The notification content as a string or notification object. | #### Returns `string` The notification ID for programmatic updates or dismissal. #### Signature ```typescript showNotification(notification: string | Notification_2): string ``` ***
### dismissNotification()

Dismisses a notification programmatically.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `string` | The ID of the notification to dismiss. | #### Returns `void` #### Signature ```typescript dismissNotification(id: string): void ``` ***
### 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 | 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 `void` #### Signature ```typescript updateNotification(id: string, notification: Partial): void ```
## Other
### 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()

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 [`ViewStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/viewstyle/) The current view style ('default' or 'advanced'). #### Example ```javascript // Get the current view style const viewStyle = cesdk.ui.getView(); // 'default' or 'advanced' // Use for conditional UI logic const showAdvancedOptions = cesdk.ui.getView() === 'advanced'; // Switch to advanced mode if currently in default if (cesdk.ui.getView() === 'default') { cesdk.ui.setView('advanced'); } ``` #### Signature ```typescript getView(): ViewStyle ``` ***
### 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 | 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 `void` #### Example ```javascript // Set view to advanced mode cesdk.ui.setView('advanced'); // Set view to simplified mode cesdk.ui.setView('default'); // Toggle between view styles const currentView = cesdk.ui.getView(); const newView = currentView === 'advanced' ? 'default' : 'advanced'; cesdk.ui.setView(newView); ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `DesignBlockId` | The ID of the design block to apply the crop preset to. | | `options` | \{ `sourceId`: `string`; `presetId`: `string`; `mode`: `"silent"` | `"always"` | `"ifNeeded"`; } | Options for applying the crop preset: - `sourceId`: The ID of the asset source containing the crop preset. - `presetId`: The ID of the crop preset to apply. - `mode`: The mode for applying the crop preset: - `'silent'`: Apply the crop preset silently. - `'always'`: Apply the crop preset and enter crop mode. - `'ifNeeded'`: Apply the crop preset only if needed (i.e., if the preset is different from the current crop). | | `options.sourceId` | `string` | - | | `options.presetId` | `string` | - | | `options.mode` | `"silent"` | `"always"` | `"ifNeeded"` | - | #### Returns `Promise`\<`void`> #### Signature ```typescript applyForceCrop(id: DesignBlockId, options: object): Promise ```
## Panel Management
### 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 Parameter | | ------ | | `T` *extends* [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | #### Parameters | 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 `void` #### Signature ```typescript openPanel(panelId: T, options?: PanelOptions): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `panelId` | `string` | The panel ID or pattern to match panels for closing. | #### Returns `void` #### Example ```javascript // Close a specific panel by exact ID cesdk.ui.closePanel('//ly.img.panel/inspector'); // Close all ly.img panels using wildcard cesdk.ui.closePanel('//ly.img.*'); // Close all panels with specific prefix cesdk.ui.closePanel('//ly.img.panel/*'); // Close panels matching complex pattern cesdk.ui.closePanel('//ly.img.panel/' + '*' + '/stroke/' + '*'); // Close any inspector panels regardless of namespace cesdk.ui.closePanel('*' + '/inspector'); // Close all asset library panels cesdk.ui.closePanel('*assetLibrary*'); ``` #### Signature ```typescript closePanel(panelId: string): void ``` ***
### 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 Parameter | | ------ | | `T` *extends* [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | #### Parameters | 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 `boolean` True if the panel is open and matches the specified options, false otherwise. #### Signature ```typescript isPanelOpen(panelId: T, options?: PanelOptions): boolean ``` ***
### findAllPanels()

Gets all panel IDs, optionally filtered by state or position.

#### Type Parameters | Type Parameter | | ------ | | `T` *extends* [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | #### Parameters | 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 `string`\[] Array of panel IDs matching the specified criteria. #### Example ``` cesdk.ui.findAllPanels(); cesdk.ui.findAllPanels({ open: true, position: 'left' }); ``` #### Signature ```typescript findAllPanels(options?: PanelOptions & object): string[] ``` ***
### setPanelPosition()

Sets the position of a panel within the editor interface.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `panelId` | `string` | The ID of the panel to position. | | `panelPosition` | | [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelposition/) | (() => [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelposition/)) | The position ('left' or 'right') or a function returning the position. | #### Returns `void` #### Signature ```typescript setPanelPosition(panelId: string, panelPosition: PanelPosition | () => PanelPosition): void ``` ***
### getPanelPosition()

Gets the current position of a panel.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `panelId` | `string` | The ID of the panel. | #### Returns [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelposition/) The panel's position ('left' or 'right'). #### Signature ```typescript getPanelPosition(panelId: string): PanelPosition ``` ***
### setPanelFloating()

Sets whether a panel floats over the canvas.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `panelId` | `string` | The ID of the panel to configure. | | `floating` | `boolean` | (() => `boolean`) | True to make the panel float over the canvas, false to dock it. | #### Returns `void` #### Signature ```typescript setPanelFloating(panelId: string, floating: boolean | () => boolean): void ``` ***
### getPanelFloating()

Checks if a panel is currently floating over the canvas.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `panelId` | `string` | The ID of the panel to check. | #### Returns `boolean` True if the panel is floating, false if it's docked. #### Signature ```typescript getPanelFloating(panelId: string): boolean ```
## Theme Management
### 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 [`Theme`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/theme/) The resolved theme ('light' or 'dark'). #### Example ```javascript // Get the actual theme being used const theme = cesdk.ui.getTheme(); // 'light' or 'dark' // Use for conditional styling const iconColor = cesdk.ui.getTheme() === 'dark' ? 'white' : 'black'; // Theme function is evaluated each time getTheme() is called cesdk.ui.setTheme(() => new Date().getHours() >= 18 ? 'dark' : 'light'); const currentTheme = cesdk.ui.getTheme(); // Function is evaluated here ``` #### Signature ```typescript getTheme(): Theme ``` ***
### 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 | 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 `void` #### Example ```javascript // Set a specific theme cesdk.ui.setTheme('dark'); // Use system preference cesdk.ui.setTheme('system'); // Set theme based on custom logic cesdk.ui.setTheme(() => { const hour = new Date().getHours(); return hour >= 18 || hour < 6 ? 'dark' : 'light'; }); // Toggle between themes const currentTheme = cesdk.ui.getTheme(); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; cesdk.ui.setTheme(newTheme); ```
## UI Layout
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `dockOrder` | ( | [`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/) | [`DockOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent/))\[] | Array of component IDs defining the dock order. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns `void` #### Deprecated Use `setComponentOrder({ in: 'ly.img.dock' }, order)` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns [`DockOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent/)\[] Array of component configurations defining the dock order. #### Deprecated Use `getComponentOrder({ in: 'ly.img.dock' })` instead. ***
### ~~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 | 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/) | `Partial`\<[`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/)>> | ((`component`) => `Partial`\<[`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/)>>) | New ID, partial properties, or updater function for the component. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns `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/)>\[] | #### Deprecated Use `updateOrderComponent({ in: 'ly.img.dock', match }, update)` instead. ***
### ~~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 | 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 `object` The updated dock order array. | Name | Type | | ------ | ------ | | `removed` | `number` | | `order` | [`DockOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent/)\[] | #### Deprecated Use `removeOrderComponent({ in: 'ly.img.dock', match })` instead. ***
### ~~insertDockOrderComponent()~~

Inserts a component into the render order of the dock area.

This method inserts a new dock order component before or after 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' or 'after'. The insert API can be used in different contexts (such as edit modes). #### Parameters | 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/) | [`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/)> | The component ID or configuration to insert. | | `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 `object` The updated dock order array. | Name | Type | | ------ | ------ | | `inserted` | `boolean` | | `order` | ( | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)\<`string`> | \{ `id`: `string`; })\[] | #### Deprecated Use `insertOrderComponent({ in: 'ly.img.dock', before/after }, component)` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `inspectorBarOrder` | ( | [`InspectorBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/) | [`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/)>)\[] | Array of component IDs defining the inspector bar order. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns `void` #### Deprecated Use `setComponentOrder({ in: 'ly.img.inspector.bar' }, order)` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns [`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. #### Deprecated Use `getComponentOrder({ in: 'ly.img.inspector.bar' })` instead. ***
### ~~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 | 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/) | `Partial`\<[`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/)>> | ((`component`) => `Partial`\<[`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/)>>) | New ID, partial properties, or updater function for the component. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns `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/)>\[] | #### Deprecated Use `updateOrderComponent({ in: 'ly.img.inspector.bar', match }, update)` instead. ***
### ~~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 | 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 `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/)>\[] | #### Deprecated Use `removeOrderComponent({ in: 'ly.img.inspector.bar', match })` instead. ***
### ~~insertInspectorBarOrderComponent()~~

Inserts a component into the render order of the inspector bar.

This method inserts a new inspector bar order component before or after 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' or 'after'. The insert API can be used in different contexts (such as edit modes). #### Parameters | 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/) | [`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/)> | The component ID or configuration to insert. | | `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 `object` The updated inspector bar order array. | Name | Type | | ------ | ------ | | `inserted` | `boolean` | | `order` | ( | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)\<`string`> | \{ `id`: `string`; })\[] | #### Deprecated Use `insertOrderComponent({ in: 'ly.img.inspector.bar', before/after }, component)` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `canvasMenuOrder` | ( | [`CanvasMenuComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/) | [`CanvasMenuOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/))\[] | Array of component IDs defining the canvas menu order. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns `void` #### Deprecated Use `setComponentOrder({ in: 'ly.img.canvas.menu' }, order)` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns [`CanvasMenuOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/)\[] Array of component configurations defining the canvas menu order. #### Deprecated Use `getComponentOrder({ in: 'ly.img.canvas.menu' })` instead. ***
### ~~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 | 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/) | `Partial`\<[`CanvasMenuOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/)> | ((`component`) => `Partial`\<[`CanvasMenuOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/)>) | New ID, partial properties, or updater function for the component. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns `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/)\[] | #### Deprecated Use `updateOrderComponent({ in: 'ly.img.canvas.menu', match }, update)` instead. ***
### ~~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 | 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 `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/)\[] | #### Deprecated Use `removeOrderComponent({ in: 'ly.img.canvas.menu', match })` instead. ***
### ~~insertCanvasMenuOrderComponent()~~

Inserts a component into the render order of the canvas menu.

This method inserts a new canvas menu order component before or after 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' or 'after'. The insert API can be used in different contexts (such as edit modes). #### Parameters | 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/) | [`CanvasMenuOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/) | The component ID or configuration to insert. | | `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 `object` The updated canvas menu order array. | Name | Type | | ------ | ------ | | `inserted` | `boolean` | | `order` | ( | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)\<`string`> | \{ `id`: `string`; })\[] | #### Deprecated Use `insertOrderComponent({ in: 'ly.img.canvas.menu', before/after }, component)` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `navigationBarOrder` | ( | [`NavigationBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/) | [`NavigationBarOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent/))\[] | Array of component IDs defining the navigation bar order. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns `void` #### Deprecated Use `setComponentOrder({ in: 'ly.img.navigation.bar' }, order)` instead. ***
### ~~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 | 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/) | `Partial`\<[`NavigationBarOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent/)> | ((`component`) => `Partial`\<[`NavigationBarOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent/)>) | New ID, partial properties, or updater function for the component. | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns `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/)\[] | #### Deprecated Use `updateOrderComponent({ in: 'ly.img.navigation.bar', match }, update)` instead. ***
### ~~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 | 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 `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/)\[] | #### Deprecated Use `removeOrderComponent({ in: 'ly.img.navigation.bar', match })` instead. ***
### ~~insertNavigationBarOrderComponent()~~

Inserts a component into the render order of the navigation bar.

This method inserts a new navigation bar order component before or after 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' or 'after'. The insert API can be used in different contexts (such as edit modes). #### Parameters | 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/) | [`NavigationBarOrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent/) | The component ID or configuration to insert. | | `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 `object` The updated navigation bar order array. | Name | Type | | ------ | ------ | | `inserted` | `boolean` | | `order` | ( | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)\<`string`> | \{ `id`: `string`; })\[] | #### Deprecated Use `insertOrderComponent({ in: 'ly.img.navigation.bar', before/after }, component)` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns [`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. #### Deprecated Use `getComponentOrder({ in: 'ly.img.navigation.bar' })` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `canvasBarOrder` | ( | [`CanvasBarComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/) | [`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/)>)\[] | Array of component IDs defining the canvas bar order. | | `position` | `"bottom"` | `"top"` | The canvas bar position ('top' or 'bottom'). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying when this order applies. | #### Returns `void` #### Deprecated Use `setComponentOrder({ in: 'ly.img.canvas.bar', at: position }, order)` instead. ***
### ~~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 | Parameter | Type | Description | | ------ | ------ | ------ | | `position` | `"bottom"` | `"top"` | The canvas bar position ('top' or 'bottom'). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to retrieve. | #### Returns [`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. #### Deprecated Use `getComponentOrder({ in: 'ly.img.canvas.bar', at: position })` instead. ***
### ~~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 | 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/) | `Partial`\<[`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/)>> | ((`component`) => `Partial`\<[`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/)>>) | New ID, partial properties, or updater function for the component. | | `position` | `"bottom"` | `"top"` | The canvas bar position ('top' or 'bottom'). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns `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/)>\[] | #### Deprecated Use `updateOrderComponent({ in: 'ly.img.canvas.bar', at: position, match }, update)` instead. ***
### ~~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 | 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` | `"bottom"` | `"top"` | The canvas bar position ('top' or 'bottom'). | | `orderContext?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context specifying which order to update. | #### Returns `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/)>\[] | #### Deprecated Use `removeOrderComponent({ in: 'ly.img.canvas.bar', at: position, match })` instead. ***
### ~~insertCanvasBarOrderComponent()~~

Inserts a component into the render order of the canvas bar.

This method inserts a new canvas bar order component before or after 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' or 'after'. The insert API can be used in different contexts (such as edit modes and bar positions). #### Parameters | 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/) | [`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/)> | The component ID or configuration to insert. | | `position` | `"bottom"` | `"top"` | The canvas bar position ('top' or '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 `object` The updated canvas bar order array. | Name | Type | | ------ | ------ | | `inserted` | `boolean` | | `order` | ( | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)\<`string`> | \{ `id`: `string`; })\[] | #### Deprecated Use `insertOrderComponent({ in: 'ly.img.canvas.bar', at: position, before/after }, component)` instead. ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `string` | The unique identifier for the icon set. | | `svgSprite` | `string` | The SVG sprite string containing symbol definitions. | #### Returns `void` #### Signature ```typescript addIconSet(id: string, svgSprite: string): void ```
## UI Scale Management
### 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 [`Scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scale/) The resolved scale ('normal' or 'large'). #### Example ```javascript // Get the actual scale being used const scale = cesdk.ui.getScale(); // 'normal' or 'large' // Use for conditional sizing const fontSize = cesdk.ui.getScale() === 'large' ? '16px' : '14px'; // Scale function is evaluated each time getScale() is called cesdk.ui.setScale(({ containerWidth }) => containerWidth < 768 ? 'large' : 'normal'); const currentScale = cesdk.ui.getScale(); // Function is evaluated here ``` #### Signature ```typescript getScale(): Scale ``` ***
### 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 | 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 `void` #### Example ```javascript // Set a specific scale cesdk.ui.setScale('large'); // Set scale based on viewport cesdk.ui.setScale(({ containerWidth, isTouch }) => { if (isTouch || containerWidth < 768) { return 'large'; } return 'normal'; }); // Toggle between scales const currentScale = cesdk.ui.getScale(); const newScale = currentScale === 'normal' ? 'large' : 'normal'; cesdk.ui.setScale(newScale); ```
## Unified Component Order API
### setComponentOrder()

Sets the rendering order of components in a UI area.

This unified method replaces area-specific methods like `setDockOrder`, `setInspectorBarOrder`, etc. It provides a consistent API for all UI areas. #### Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | [`AnyUILocationOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/anyuilocationoptions/)\<`A`> | Location options specifying which area to set. For canvas bar, requires `at` position. For dock, `at` specifies position (`'left'`, `'right'`, or `'bottom'`); defaults to `'left'`. | | `order` | [`ComponentSpec`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentspec/)\<`A`>\[] | Array of component IDs or component objects defining the order. | #### Returns `void` #### Example ```typescript // Set dock order cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, ['ly.img.spacer', 'my.button']); // Set canvas bar order (requires position) cesdk.ui.setComponentOrder( { in: 'ly.img.canvas.bar', at: 'top' }, ['ly.img.settings.canvasBar'] ); // Set order with edit mode context cesdk.ui.setComponentOrder( { in: 'ly.img.inspector.bar', when: { editMode: 'Text' } }, ['ly.img.text.typeFace.inspectorBar', 'ly.img.text.bold.inspectorBar'] ); ``` #### Signature ```typescript setComponentOrder(options: AnyUILocationOptions, order: ComponentSpec[]): void ``` ***
### getComponentOrder()

Gets the current rendering order of components in a UI area.

This unified method replaces area-specific methods like `getDockOrder`, `getInspectorBarOrder`, etc. #### Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | [`AnyUILocationOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/anyuilocationoptions/)\<`A`> | Location options specifying which area to get. For canvas bar, `at` is required. For dock, omitting `at` returns components from all positions. | #### Returns [`OrderComponentFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentfor/)\<`A`>\[] Array of components in the specified area. #### Example ```typescript // Get all dock components across all positions const allDock = cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }); // Get dock order at a specific position const rightDock = cesdk.ui.getComponentOrder({ in: 'ly.img.dock', at: 'right' }); // Get canvas bar order (requires position) const canvasBarTop = cesdk.ui.getComponentOrder({ in: 'ly.img.canvas.bar', at: 'top' }); ``` #### Signature ```typescript getComponentOrder(options: AnyUILocationOptions
): OrderComponentFor[] ``` ***
### updateOrderComponent()

Updates components matching a criteria in one or more UI areas.

This unified method replaces area-specific update methods. Supports glob patterns for both areas and component matching. **Canvas Bar Note:** For `ly.img.canvas.bar`, if `options.at` is omitted, the update applies to BOTH top and bottom bars and results are combined. **Dock Note:** For `ly.img.dock`, if `options.at` is omitted, the update applies to all dock positions (left, right, bottom) and results are combined. #### Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIAreaSpecifier`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareaspecifier/) | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | [`ComponentMatchOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentmatchoptions/)\<`A`> | Match options specifying where and what to update. | | `update` | [`UpdateSpec`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/updatespec/)\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/)> | New ID, partial properties, or updater function. | #### Returns `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) ? [`UpdateResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/updateresult/)\<`A`> : [`MultiAreaUpdateResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/multiareaupdateresult/) For single area: UpdateResult. For multi-area: MultiAreaUpdateResult. #### Example ```typescript // Update by exact ID cesdk.ui.updateOrderComponent( { in: 'ly.img.dock', match: 'ly.img.separator' }, { key: 'my-separator' } ); // Update by glob pattern cesdk.ui.updateOrderComponent( { in: 'ly.img.dock', match: 'ly.img.*' }, { disabled: true } ); // Update using function cesdk.ui.updateOrderComponent( { in: 'ly.img.inspector.bar', match: 'first' }, (component) => ({ key: `${component.id}-modified` }) ); // Update across multiple areas const results = cesdk.ui.updateOrderComponent( { in: '*', match: 'ly.img.separator' }, { key: 'global-sep' } ); ``` #### Signature ```typescript updateOrderComponent(options: ComponentMatchOptions
, update: UpdateSpec): A extends UIArea ? UpdateResult : MultiAreaUpdateResult ``` ***
### removeOrderComponent()

Removes components matching a criteria from one or more UI areas.

This unified method replaces area-specific remove methods. Supports glob patterns for both areas and component matching. **Canvas Bar Note:** For `ly.img.canvas.bar`, if `options.at` is omitted, the removal applies to BOTH top and bottom bars and results are combined. **Dock Note:** For `ly.img.dock`, if `options.at` is omitted, the removal applies to all dock positions (left, right, bottom) and results are combined. #### Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIAreaSpecifier`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareaspecifier/) | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | [`ComponentMatchOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentmatchoptions/)\<`A`> | Match options specifying where and what to remove. | #### Returns `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) ? [`RemoveResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/removeresult/)\<`A`> : [`MultiAreaRemoveResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/multiarearemoveresult/) For single area: RemoveResult. For multi-area: MultiAreaRemoveResult. #### Example ```typescript // Remove by exact ID cesdk.ui.removeOrderComponent({ in: 'ly.img.dock', match: 'ly.img.separator' }); // Remove by position cesdk.ui.removeOrderComponent({ in: 'ly.img.inspector.bar', match: 'last' }); // Remove by glob pattern cesdk.ui.removeOrderComponent({ in: 'ly.img.dock', match: 'ly.img.*' }); // Remove from all areas const results = cesdk.ui.removeOrderComponent({ in: '*', match: 'ly.img.separator' }); ``` #### Signature ```typescript removeOrderComponent(options: ComponentMatchOptions
): A extends UIArea ? RemoveResult : MultiAreaRemoveResult ``` ***
### insertOrderComponent()

Inserts one or more components into a UI area at a specified position.

This unified method replaces area-specific insert methods. Supports inserting before, after, or at a specific index. When inserting multiple components, they are inserted in order at the specified position. **Canvas Bar Note:** For `ly.img.canvas.bar`, `options.at` is required and must specify either 'top' or 'bottom'. **Dock Note:** For `ly.img.dock`, if `options.at` is omitted, the anchor component is searched across all positions. For positional inserts (start/end/index), defaults to `'left'`. #### Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | [`InsertComponentOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertcomponentoptions/)\<`A`> | Insert options specifying where to insert. | | `components` | | [`ComponentSpec`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentspec/)\<`A`> | [`ComponentSpec`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentspec/)\<`A`>\[] | The component ID(s) or object(s) to insert. Can be a single component or an array. | #### Returns [`InsertResult`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertresult/)\<`A`> InsertResult with success status, count, and new order. #### Example ```typescript // Append single component to end (default) cesdk.ui.insertOrderComponent({ in: 'ly.img.dock' }, 'my.button'); // Insert multiple components at once cesdk.ui.insertOrderComponent( { in: 'ly.img.dock', after: 'ly.img.spacer' }, ['my.button.1', 'my.button.2', 'my.button.3'] ); // Insert before a component cesdk.ui.insertOrderComponent( { in: 'ly.img.dock', before: 'ly.img.separator' }, 'my.button' ); // Insert after a component cesdk.ui.insertOrderComponent( { in: 'ly.img.inspector.bar', after: 'ly.img.fill.inspectorBar' }, 'my.fill.tool' ); // Insert at specific position cesdk.ui.insertOrderComponent( { in: 'ly.img.dock', position: 'start' }, ['first.button', 'second.button'] ); // Insert at index cesdk.ui.insertOrderComponent( { in: 'ly.img.dock', position: 2 }, 'my.third.button' ); // Insert at negative index (from end) cesdk.ui.insertOrderComponent( { in: 'ly.img.dock', position: -1 }, 'my.before.last.button' ); ``` #### Signature ```typescript insertOrderComponent(options: InsertComponentOptions
, components: ComponentSpec | ComponentSpec[]): InsertResult ``` ***
### getOrderContext()

Gets the active order context for a UI area.

Returns the full context including both settable properties (like `view` for the caption panel) and engine-derived properties (like `editMode`). #### Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | \{ `in`: `A`; } | Location options specifying which area to get context for. | | `options.in` | `A` | - | #### Returns [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> The full order context for the area, or undefined if no context has been set. #### Example ```typescript // Get caption panel context const context = cesdk.ui.getOrderContext({ in: 'ly.img.caption.panel' }); // → { view: 'edit', editMode: 'Transform' } | undefined // Get inspector bar context (editMode only, derived from engine) const inspectorContext = cesdk.ui.getOrderContext({ in: 'ly.img.inspector.bar' }); // → { editMode: 'Crop' } | undefined ``` #### Signature ```typescript getOrderContext(options: object): OrderContextFor
``` ***
### setOrderContext()

Sets the active order context for a UI area.

Only accepts settable properties (excludes base OrderContext properties like `editMode` which are derived from the engine). For the caption panel, this means you can set the `view` property. #### Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | \{ `in`: `A`; } | Location options specifying which area to set context for. | | `options.in` | `A` | - | | `context` | [`UIAreaContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareacontext/)\<`A`> | The context properties to set. Only settable properties are accepted. | #### Returns `void` #### Example ```typescript // Set caption panel to style view cesdk.ui.setOrderContext( { in: 'ly.img.caption.panel' }, { view: 'style' } ); // Note: editMode cannot be set via this API - it's engine-derived // Use cesdk.engine.editor.setEditMode('Crop') instead ``` #### Signature ```typescript setOrderContext(options: object, context: UIAreaContext
): void ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: UtilsAPI" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/utilsapi/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

UtilsAPI

## Methods
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `blockId` | `number` | The block ID to generate a fallback name for | #### Returns `string` The localized fallback name for the block #### Signature ```typescript generateBlockName(blockId: number): string ``` ***
### showLoadingDialog()

Shows and manages a loading dialog with progress tracking

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `title?`: `string`; `message?`: `string` | `string`\[]; `cancelLabel?`: `string`; `abortLabel?`: `string`; `abortTitle?`: `string`; `abortMessage?`: `string` | `string`\[]; `size?`: `"large"` | `"regular"`; `clickOutsideToClose?`: `boolean`; `progress?`: [`DialogProgress`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogprogress/); `onDone?`: () => `void`; `onAbort?`: () => `void`; } | Options for configuring the loading dialog | | `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 `object` A controller object for managing the dialog | Name | Type | | ------ | ------ | | `dialogId` | `string` | | `updateProgress()` | (`progress`) => `void` | | `showSuccess()` | (`options`) => `void` | | `showError()` | (`options`) => `void` | | `close()` | () => `void` | #### Example ```typescript const controller = cesdk.utils.showLoadingDialog({ title: 'Exporting', message: 'Please wait...', onAbort: () => console.log('Aborted') }); // Update progress controller.updateProgress({ value: 50, max: 100 }); // Show success controller.showSuccess({ title: 'Success', message: 'Export completed!' }); ``` #### Signature ```typescript showLoadingDialog(options?: object): object ``` ***
### 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 Parameter | | ------ | | `T` *extends* `any` | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | `T` | Export options. Type inference based on mimeType. | #### Returns `Promise`\<\{ `blobs`: `Blob`\[]; `options`: `T` *extends* `VideoExportOptions` ? `any` : `any`; }> Export result - either blobs array for static or single blob for video #### Example ```typescript // Image export const imageResult = await cesdk.utils.export({ mimeType: 'image/png', pngCompressionLevel: 7 }); // Video export const videoResult = await cesdk.utils.export({ mimeType: 'video/mp4', onProgress: (rendered, encoded, total) => console.log(`${rendered}/${total}`) }); ``` #### Signature ```typescript export(options?: T): Promise ``` ***
### loadFile()

Opens a file picker dialog for the user to select a file

##### Parameters | Parameter | Type | | ------ | ------ | | `opts` | \{ `accept`: `string`; `returnType`: `"dataURL"`; } | | `opts.accept` | `string` | | `opts.returnType` | `"dataURL"` | ##### Returns `Promise`\<`string`> The loaded file content in the requested format. For dataURL return type, if the file is eligible for OPFS storage and the feature is enabled, returns the OPFS URL (opfs://...) instead of a data URL. ##### Example ```typescript // Load a text file const text = await cesdk.utils.loadFile({ accept: '.txt', returnType: 'text' }); // Load an image as blob const blob = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'blob' }); // Load a file with OPFS support (returns opfs:// URL for eligible files) const url = await cesdk.utils.loadFile({ accept: 'video/*', returnType: 'dataURL' }); // For eligible files: "opfs://cesdk-1234567890-video.mp4" // For non-eligible files: "data:video/mp4;base64,..." // 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 done URL.revokeObjectURL(objectURL); ``` #### Call Signature ```ts loadFile(opts): Promise; ``` Opens a file picker dialog for the user to select a file ##### Parameters | Parameter | Type | | ------ | ------ | | `opts` | \{ `accept`: `string`; `returnType`: `"text"`; } | | `opts.accept` | `string` | | `opts.returnType` | `"text"` | ##### Returns `Promise`\<`string`> The loaded file content in the requested format. For dataURL return type, if the file is eligible for OPFS storage and the feature is enabled, returns the OPFS URL (opfs://...) instead of a data URL. ##### Example ```typescript // Load a text file const text = await cesdk.utils.loadFile({ accept: '.txt', returnType: 'text' }); // Load an image as blob const blob = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'blob' }); // Load a file with OPFS support (returns opfs:// URL for eligible files) const url = await cesdk.utils.loadFile({ accept: 'video/*', returnType: 'dataURL' }); // For eligible files: "opfs://cesdk-1234567890-video.mp4" // For non-eligible files: "data:video/mp4;base64,..." // 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 done URL.revokeObjectURL(objectURL); ``` #### Call Signature ```ts loadFile(opts): Promise; ``` Opens a file picker dialog for the user to select a file ##### Parameters | Parameter | Type | | ------ | ------ | | `opts` | \{ `accept`: `string`; `returnType`: `"blob"`; } | | `opts.accept` | `string` | | `opts.returnType` | `"blob"` | ##### Returns `Promise`\<`Blob`> The loaded file content in the requested format. For dataURL return type, if the file is eligible for OPFS storage and the feature is enabled, returns the OPFS URL (opfs://...) instead of a data URL. ##### Example ```typescript // Load a text file const text = await cesdk.utils.loadFile({ accept: '.txt', returnType: 'text' }); // Load an image as blob const blob = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'blob' }); // Load a file with OPFS support (returns opfs:// URL for eligible files) const url = await cesdk.utils.loadFile({ accept: 'video/*', returnType: 'dataURL' }); // For eligible files: "opfs://cesdk-1234567890-video.mp4" // For non-eligible files: "data:video/mp4;base64,..." // 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 done URL.revokeObjectURL(objectURL); ``` #### Call Signature ```ts loadFile(opts): Promise; ``` Opens a file picker dialog for the user to select a file ##### Parameters | Parameter | Type | | ------ | ------ | | `opts` | \{ `accept`: `string`; `returnType`: `"arrayBuffer"`; } | | `opts.accept` | `string` | | `opts.returnType` | `"arrayBuffer"` | ##### Returns `Promise`\<`ArrayBuffer`> The loaded file content in the requested format. For dataURL return type, if the file is eligible for OPFS storage and the feature is enabled, returns the OPFS URL (opfs://...) instead of a data URL. ##### Example ```typescript // Load a text file const text = await cesdk.utils.loadFile({ accept: '.txt', returnType: 'text' }); // Load an image as blob const blob = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'blob' }); // Load a file with OPFS support (returns opfs:// URL for eligible files) const url = await cesdk.utils.loadFile({ accept: 'video/*', returnType: 'dataURL' }); // For eligible files: "opfs://cesdk-1234567890-video.mp4" // For non-eligible files: "data:video/mp4;base64,..." // 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 done URL.revokeObjectURL(objectURL); ``` #### Call Signature ```ts loadFile(opts): Promise; ``` Opens a file picker dialog for the user to select a file ##### Parameters | Parameter | Type | | ------ | ------ | | `opts` | \{ `accept`: `string`; `returnType`: `"objectURL"`; } | | `opts.accept` | `string` | | `opts.returnType` | `"objectURL"` | ##### Returns `Promise`\<`string`> The loaded file content in the requested format. For dataURL return type, if the file is eligible for OPFS storage and the feature is enabled, returns the OPFS URL (opfs://...) instead of a data URL. ##### Example ```typescript // Load a text file const text = await cesdk.utils.loadFile({ accept: '.txt', returnType: 'text' }); // Load an image as blob const blob = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'blob' }); // Load a file with OPFS support (returns opfs:// URL for eligible files) const url = await cesdk.utils.loadFile({ accept: 'video/*', returnType: 'dataURL' }); // For eligible files: "opfs://cesdk-1234567890-video.mp4" // For non-eligible files: "data:video/mp4;base64,..." // 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 done URL.revokeObjectURL(objectURL); ``` #### Call Signature ```ts loadFile(opts): Promise; ``` Opens a file picker dialog for the user to select a file ##### Parameters | Parameter | Type | | ------ | ------ | | `opts` | \{ `accept`: `string`; `returnType?`: `"File"`; } | | `opts.accept` | `string` | | `opts.returnType?` | `"File"` | ##### Returns `Promise`\<`File`> The loaded file content in the requested format. For dataURL return type, if the file is eligible for OPFS storage and the feature is enabled, returns the OPFS URL (opfs://...) instead of a data URL. ##### Example ```typescript // Load a text file const text = await cesdk.utils.loadFile({ accept: '.txt', returnType: 'text' }); // Load an image as blob const blob = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'blob' }); // Load a file with OPFS support (returns opfs:// URL for eligible files) const url = await cesdk.utils.loadFile({ accept: 'video/*', returnType: 'dataURL' }); // For eligible files: "opfs://cesdk-1234567890-video.mp4" // For non-eligible files: "data:video/mp4;base64,..." // 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 done URL.revokeObjectURL(objectURL); ``` #### Signatures ```typescript loadFile(opts: object): Promise ``` ```typescript loadFile(opts: object): Promise ``` ```typescript loadFile(opts: object): Promise ``` ```typescript loadFile(opts: object): Promise ``` ```typescript loadFile(opts: object): Promise ``` ```typescript loadFile(opts: object): Promise ``` ***
### downloadFile()

Downloads a blob, string, or OPFS path as a file to the user's device

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `file` | `string` | `Blob` | The content to download (Blob, string content, or opfs:// path) | | `mimeType?` | [`FileMimeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filemimetype/) | The MIME type of the content | #### Returns `Promise`\<`void`> #### Example ```typescript // Download a text file await cesdk.utils.downloadFile('Hello World', 'text/plain'); // Download a blob const blob = new Blob(['content'], { type: 'text/plain' }); await cesdk.utils.downloadFile(blob, 'text/plain'); // Download from OPFS path await cesdk.utils.downloadFile('opfs://cesdk/buffer/file.mp4', 'video/mp4'); ``` #### Signature ```typescript downloadFile(file: string | Blob, mimeType?: FileMimeType): Promise ``` ***
### 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 | 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 `Promise`\<`AssetDefinition`> The asset definition for the uploaded file #### Example ```typescript const file = new File(['content'], 'test.txt'); const asset = await cesdk.utils.localUpload(file, { context: { source: 'user-upload' } }); ``` #### Signature ```typescript localUpload(file: File, context?: UploadCallbackContext): Promise ``` ***
### 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 | 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 `object` An object containing paddingX and paddingY values | Name | Type | | ------ | ------ | | `paddingX` | `number` | | `paddingY` | `number` | #### Example ```typescript const padding = cesdk.utils.calculateViewportPadding(); console.log(`Padding: ${padding.paddingX}x${padding.paddingY}`); // Use with custom zoom await cesdk.engine.scene.zoomToBlock( pageId, padding.paddingX, padding.paddingY, padding.paddingX, padding.paddingY ); ``` #### Signature ```typescript calculateViewportPadding(width?: number, height?: number): object ``` ***
### supportsVideoDecode()

Checks if the current browser supports video decoding/playback.

Video decoding requires the WebCodecs API (VideoFrame, VideoDecoder, VideoEncoder, AudioDecoder, AudioEncoder). These APIs are not available on all platforms. **Supported platforms**: Chrome and Edge on Windows and macOS. **Unsupported platforms**: All browsers on Linux, Firefox on any OS. #### Returns `boolean` true if the browser supports video decoding, false otherwise #### Example ```typescript if (cesdk.utils.supportsVideoDecode()) { // Video features are available await cesdk.engine.scene.loadFromURL('video-scene.scene'); } else { // Show fallback UI or message console.log('Video features not available in this browser'); } ``` #### Signature ```typescript supportsVideoDecode(): boolean ``` ***
### supportsVideoEncode()

Checks if the current browser supports video encoding/export.

Video encoding requires the WebCodecs API with H.264 (AVC) video encoding and AAC audio encoding support. These codecs are patent-encumbered and not included in open-source browser builds. **Supported platforms**: Chrome and Edge on Windows and macOS. **Unsupported platforms**: All browsers on Linux, Firefox on any OS. For server-side video rendering that works on all platforms, see CE.SDK Renderer: https://img.ly/docs/cesdk/renderer/cesdk-renderer-overview-7f3e9a/ #### Returns `Promise`\<`boolean`> A promise that resolves to true if the browser supports video encoding, false otherwise #### Example ```typescript if (await cesdk.utils.supportsVideoEncode()) { // Video export is available const blob = await cesdk.engine.block.exportVideo(page); } else { // Show fallback UI or suggest server-side rendering console.log('Video export not available - consider using CE.SDK Renderer'); } ``` #### Signature ```typescript supportsVideoEncode(): Promise ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Namespace: ConfigTypes" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/index/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## 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. | | [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 | 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BleedMarginOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/bleedmarginoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: FontSizeOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/fontsizeoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Represents the font size configuration options in the Creative Editor SDK. This interface defines the dropdown options for font sizes. ## 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UIOptionsForSingleDesignUnit" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsforsingledesignunit/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `bleedMargin` | [`BleedMarginOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/bleedmarginoptions/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UIOptionsPerDesignUnit" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uioptionsperdesignunit/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UploadCallbackContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uploadcallbackcontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `sourceId` | `string` | | `group?` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: A11y" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/a11y/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | Description | | ------ | ------ | ------ | | `headingsHierarchyStart` | `1` | `2` | `3` | `4` | `5` | `6` | The option define a level of heading to start from (in a range 1-6) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Callbacks" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/callbacks/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 Use the `cesdk.actions` API and the Order API instead. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`onBack?`~~ | () => `void` | `Promise`\<`void`> | **Deprecated** Use the onClick on `'ly.img.back.navigationBar'` and the Order API instead. | | ~~`onClose?`~~ | () => `void` | `Promise`\<`void`> | **Deprecated** Use the onClick on `'ly.img.close.navigationBar'` and the Order API instead. | | ~~`onShare?`~~ | (`s`) => `void` | `Promise`\<`void`> | **Deprecated** Use the onClick on `'ly.img.shareScene.navigationBar'` and the Order API instead. | | ~~`onSave?`~~ | (`s`) => `void` | `Promise`\<`void`> | **Deprecated** Use the onClick on `'ly.img.saveScene.navigationBar'` and the Order API instead. | | ~~`onLoad?`~~ | (() => `Promise`\<`string`>) | `"upload"` | **Deprecated** Use the onClick on `'ly.img.importScene.navigationBar'` and the Order API instead. | | ~~`onLoadArchive?`~~ | (() => `Promise`\<`string`>) | `"uploadArchive"` | **Deprecated** Use the onClick on `'ly.img.importArchive.navigationBar'` and the Order API instead. | | ~~`onDownload?`~~ | ((`s`) => `void` | `Promise`\<`void`>) | `"download"` | **Deprecated** Use the onClick on `'ly.img.exportScene.navigationBar'` and the Order API instead. | | ~~`onExport?`~~ | ((`blobs`, `options`) => `void` | `Promise`\<`void`>) | `"download"` | **Deprecated** Use the onClick on `'ly.img.export.navigationBar'` and the Order API instead. | | ~~`onUpload?`~~ | | [`OnUploadCallback`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadcallback/) | `"local"` | `Partial`\<[`OnUploadOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadoptions/)> & `object` | **Deprecated** Use the `cesdk.actions.register('uploadFile', action)` and `engine.editor.setSetting('upload/supportedMimeTypes', ',')` instead. Note: If you are using `addDemoAssetSources`, now you will have to explicitly enable upload sources by setting `withUploadAssetSources: true`. | | ~~`onUnsupportedBrowser?`~~ | () => `void` | **Deprecated** Use the `cesdk.actions.register('onUnsupportedBrowser', action)` instead. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CombinedConfiguration" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/combinedconfiguration/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CombinedConfiguration = CESDKConfiguration & Omit; ``` Represents the combined configuration for the Creative Editor SDK. This type combines the `CESDKConfiguration` with the `EngineConfiguration` while omitting the `presets` key. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: I18n" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/i18n/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OnUploadCallback" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadcallback/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Parameter | Type | | ------ | ------ | | `file` | `File` | | `onProgress` | (`progress`) => `void` | | `context?` | [`UploadCallbackContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/interfaces/uploadcallbackcontext/) | ## Returns `Promise`\<[`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/)> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OnUploadOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/onuploadoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `supportedMimeTypes?` | `string`\[] | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Scale" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scale/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ScaleConfig" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scaleconfig/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ScaleFn" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scalefn/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Parameter | Type | | ------ | ------ | | `{ containerWidth, isTouch }` | \{ `containerWidth?`: `number`; `isTouch?`: `boolean`; } | | `{ containerWidth, isTouch }.containerWidth?` | `number` | | `{ containerWidth, isTouch }.isTouch?` | `boolean` | ## Returns [`Scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/scale/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Theme" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/theme/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type Theme = "light" | "dark"; ``` Represents the base theme values for the Creative Editor SDK. This type defines the concrete themes that can be rendered. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ThemeConfig" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/themeconfig/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ThemeFn" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/themefn/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 [`Theme`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/configtypes/type-aliases/theme/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Namespace: ExperimentalBuilder" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/index/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Namespace containing experimental features for the builder. These features are subject to change and may not be stable for production use. ## 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 | 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Builder" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/builder/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `Menu` | (`id`, `options`) => `void` | | `Popover` | (`id`, `options`) => `void` | | `ButtonRow` | (`id`, `options`) => `void` | | `MediaPreview` | (`id`, `options`) => `void` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BuilderRenderContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/builderrendercontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ButtonRowOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/buttonrowoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `children?` | () => `void` | | `justifyContent?` | | `"center"` | `"flex-start"` | `"flex-end"` | `"space-between"` | `"space-around"` | `"space-evenly"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: MediaPreviewOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/mediapreviewoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `size?` | `"square"` | `"small"` | `"medium"` | | `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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: MenuOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/menuoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `children?` | () => `void` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: PopoverChildrenContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/popoverchildrencontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `close` | () => `void` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: PopoverOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/interfaces/popoveroptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `inputLabel?` | `string` | `string`\[] | | `inputLabelPosition?` | `"left"` | `"top"` | | `label?` | `string` | `string`\[] | | `labelAlignment?` | `"left"` | `"center"` | | `tooltip?` | `string` | `string`\[] | | `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` | | `placement?` | [`Placement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/placement/) | | `children?` | | [`ChildrenOrder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/childrenorder/) | ((`context`) => `void`) | | `suffix?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Placement" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/placement/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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"; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PreviewType" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtype/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PreviewType = | PreviewTypeImage | PreviewTypeColor; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PreviewTypeColor" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtypecolor/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PreviewTypeColor = object; ``` ## Properties | Property | Type | | ------ | ------ | | `type` | `"color"` | | `color` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PreviewTypeImage" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentalbuilder/type-aliases/previewtypeimage/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PreviewTypeImage = object; ``` ## Properties | Property | Type | | ------ | ------ | | `type` | `"image"` | | `uri` | `string` | | `checkeredBackground?` | `boolean` | | `fillType?` | `"cover"` | `"contain"` | | `fillPosition?` | `"center"` | `"top"` | `"right"` | `"bottom"` | `"left"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Namespace: ExperimentalUserInterfaceAPI" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentaluserinterfaceapi/index/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: UserInterfaceAPI" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/experimentaluserinterfaceapi/classes/userinterfaceapi/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- A public interface for controlling the UI of the Creative Editor SDK ## Constructors
### Constructor

UserInterfaceAPI

## Methods
### setGlobalStateValue()

| Type Parameter | | ------ | | T |

#### Parameters | Parameter | Type | | ------ | ------ | | `id` | `string` | | `value` | `T` | #### Returns `void` #### Signature ```typescript setGlobalStateValue(id: string, value: T): void ``` ***
### getGlobalStateValue()

| Type Parameter | | ------ | | T |

#### Parameters | Parameter | Type | | ------ | ------ | | `id` | `string` | | `defaultValue?` | `T` | #### Returns `T` #### Signature ```typescript getGlobalStateValue(id: string, defaultValue?: T): T ``` ***
### hasGlobalStateValue()

| Parameter | Type | | ------ | ------ | | id | string |

#### Returns `boolean` #### Signature ```typescript hasGlobalStateValue(id: string): boolean ``` ***
### onGlobalStateChanged()

| Type Parameter | | ------ | | T |

#### Parameters | Parameter | Type | | ------ | ------ | | `id` | `string` | | `callback` | (`value`) => `void` | #### Returns () => `void` #### Signature ```typescript onGlobalStateChanged(id: string, callback: (value: T) => void): () => void ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Namespace: UserInterfaceElements" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/index/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## 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 | 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 | 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`: | | [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. | | [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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Enum: NavigationPosition" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/enumerations/navigationposition/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Member | Value | | ------ | ------ | | `Top` | `"top"` | | `Bottom` | `"bottom"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetEntrySourceIdsContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetentrysourceidscontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Context provided to the sourceIds callback function. - `cesdk`: The CreativeEditorSDK instance. - `engine`: The CreativeEngine instance. ## Properties | Property | Type | | ------ | ------ | | `cesdk` | [`CreativeEditorSDK`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeeditorsdk/) | | `engine` | `CreativeEngine_2` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetLibraryEntryData" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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`: ## Deprecated Since v1.72. Optional configuration for the scene mode. Not needed for new scenes. - `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 - [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`id`~~ | `string` | - | | ~~`sourceIds`~~ | `string`\[] | ((`context`) => `string`\[]) | - | | ~~`sceneMode?`~~ | `any` | **Deprecated** Since v1.72. Scene mode no longer affects engine behavior. Not setting this will make the entry available for all scenes. | | ~~`excludeGroups?`~~ | `string`\[] | - | | ~~`includeGroups?`~~ | `string`\[] | - | | ~~`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`. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetLibraryEntryView" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/) ## 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` | \{ `show`: `boolean`; `sourceIds?`: `string`\[]; } | Wether or not we need to show a confirmation dialog when an asset is selected. accepted values: - `true`: Show a confirmation dialog for all assets - `false`: Never show a confirmation dialog - `{ show: true, sourceIds: ['sourceId1', 'sourceId2'] }`: Show a confirmation dialog for the given sourceIds The content of the dialog should be defined in the translation files using the following keys: - Headline: `libraries.[your_source_id].confirmation.headline` - Body: `libraries.[your_source_id].confirmation.body` - Confirm: `libraries.[your_source_id].confirmation.confirm` - Abort: `libraries.[your_source_id].confirmation.abort` | | `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"` | 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 | | `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/)) | 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 the 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` - use a CSS background image Example of the default: `[ { path: 'meta.vectorPath', type: 'svgVectorPath' }, { path: 'meta.thumbUri', type: 'image' } ]` This will look if the asset has a value in `meta.vectorPath` and will use this value to render a SVG as background. If `meta.vectorPath` has no value, it will use `meta.thumbUri` instead as a background image. Otherwise it will render nothing | | `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 | | `hideCardLabelInPreview?` | `boolean` | When true, suppresses the card label rendered in section previews (the rows shown above each section's "More" button) while keeping the label visible inside the full asset section view (opened via the "More" button). Use this when the preview rows render very compactly and labels would not fit. | | `cardStyle?` | (`assetResult`) => `Record`\<`string`, `string` | `undefined`> | Add custom styles to a card for a specific asset result | | `cardLabelStyle?` | (`assetResult`) => `Record`\<`string`, `string` | `undefined`> | Add custom styles to a label for a specific asset result | | `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). | | `sortBy?` | `any` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceAssetLibrary" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceassetlibrary/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Interface representing the asset library in the user interface. - `position`: Optional position of the asset library. ## Extends - [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## Properties | Property | Type | Inherited from | | ------ | ------ | ------ | | `position?` | [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceCustomAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacecustomaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `callback` | () => `void` | `Promise`\<`void`> | | `label` | `string` | | `iconName` | [`UserInterfaceCustomActionIconName`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/userinterfacecustomactioniconname/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceElement" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Interface representing an element in the user interface. - `show`: Optional boolean indicating whether the element should be shown. ## 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 | Property | Type | | ------ | ------ | | `show?` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceElements" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelements/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Defines the configuration for user interface elements, including panels, dock, libraries, blocks, navigation, and inspector bar. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`view?`~~ | `"advanced"` | `"default"` | **Deprecated** Please use `cesdk.ui.setView` and `cesdk.ui.getView` instead. **Example** `// Before (deprecated): const config = { ui: { elements: { view: 'default' // or 'advanced' } } }; // After (recommended): const view = 'default'; // or 'advanced' cesdk.ui.setView(view);` | | `panels?` | `object` | - | | `panels.inspector?` | | `boolean` | [`UserInterfaceInspector`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspector/) | **Deprecated** Plese use `cesdk.feature.enable('ly.img.inspector')`, `cesdk.ui.setPanelPosition('//ly.img.panel/inspector')` and `cesdk.ui.setPanelFloating('//ly.img.panel/inspector')` instead. | | `panels.settings?` | | `boolean` | [`UserInterfaceSettings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacesettings/) | **Deprecated** Please use `cesdk.feature.enable('ly.img.settings')`, `cesdk.ui.setPanelPosition('//ly.img.panel/settings')` and `cesdk.ui.setPanelFloating('//ly.img.panel/settings')` instead. | | `panels.assetLibrary?` | | `boolean` | [`UserInterfaceAssetLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceassetlibrary/) | **Deprecated** Please use `cesdk.feature.enable('ly.img.library.panel')`, `cesdk.ui.setPanelPosition('//ly.img.panel/assetLibrary')` and `cesdk.ui.setPanelFloating('//ly.img.panel/assetLibrary')` instead. | | `dock?` | `object` | - | | `dock.show?` | `boolean` | **Deprecated** Please use `cesdk.feature.enable('ly.img.dock')` instead. | | `dock.iconSize?` | `"normal"` | `"large"` | - | | `dock.hideLabels?` | `boolean` | - | | `libraries?` | `object` | - | | `libraries.insert?` | `object` | - | | `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`\[]) | **Deprecated** please use the cesdk.actions API to register an action for 'addClip' and implement your own logic. **Example** `cesdk.actions.register('addClip', async () => { cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.video', 'ly.img.image'] } }); });` | | `libraries.replace?` | `object` | - | | `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` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceExportAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceexportaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Interface representing an export action in the user interface. - `format`: Optional array of export formats. ## Extends - [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## 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/)\[] | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspector" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspector/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## 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/type-aliases/panelposition/) | - | | `floating?` | `boolean` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlock" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Interface representing a block in the user interface inspector. ## Deprecated Use `cesdk.feature.enable()` instead. ## 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/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlockGraphic" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockgraphic/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Use `cesdk.feature.enable()` for graphic-related features instead. ## Extends - [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`crop?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.crop')` instead. | | ~~`filters?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.filter')` instead. | | ~~`adjustments?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.adjustment')` instead. | | ~~`effects?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.effect')` instead. | | ~~`blur?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.blur')` instead. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlockImage" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockimage/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Use `cesdk.feature.enable()` for image-related features instead. ## Extends - [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`crop?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.crop')` instead. | | ~~`filters?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.filter')` instead. | | ~~`adjustments?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.adjustment')` instead. | | ~~`effects?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.effect')` instead. | | ~~`blur?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.blur')` instead. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlockPage" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockpage/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Use `cesdk.feature.enable()` for page-related features instead. ## Extends - [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`format?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.page.resize')` instead. | | ~~`manage?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.page.add')`, `cesdk.feature.enable('ly.img.page.move')`, or `cesdk.feature.enable('ly.img.duplicate')` instead. | | ~~`maxDuration?`~~ | `number` | **Deprecated** Use feature API instead. Controls the maximum allowed duration of a page, if in video mode. | | ~~`crop?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.crop')` instead. | | ~~`filters?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.filter')` instead. | | ~~`adjustments?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.adjustment')` instead. | | ~~`effects?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.effect')` instead. | | ~~`blur?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.blur')` instead. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlockRectShape" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockrectshape/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Use `cesdk.feature.enable()` for shape-related features instead. ## Extends - [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`crop?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.crop')` instead. | | ~~`filters?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.filter')` instead. | | ~~`adjustments?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.adjustment')` instead. | | ~~`effects?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.effect')` instead. | | ~~`blur?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.blur')` instead. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlocks" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocks/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Use `cesdk.feature.enable()` instead. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`opacity?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.opacity')` instead. | | ~~`transform?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.transform.position')`, `cesdk.feature.enable('ly.img.transform.size')`, `cesdk.feature.enable('ly.img.transform.rotation')`, or `cesdk.feature.enable('ly.img.transform.flip')` instead. | | ~~`trim?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.trim')` instead. | | ~~`//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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlockShape" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockshape/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Interface representing a shape block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. ## Deprecated Use `cesdk.feature.enable()` for shape-related features instead. ## Extends - [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`crop?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.crop')` instead. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlockText" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocktext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Use `cesdk.feature.enable()` for text-related features instead. ## Extends - [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`advanced?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.text.advanced')` instead. | | ~~`color?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.fill')` instead. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceInspectorBlockVideoFill" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockvideofill/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Use `cesdk.feature.enable()` for video-related features instead. ## Extends - [`UserInterfaceInspectorBlock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) ## Properties | Property | Type | Description | | ------ | ------ | ------ | | ~~`crop?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.crop')` instead. | | ~~`filters?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.filter')` instead. | | ~~`adjustments?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.adjustment')` instead. | | ~~`effects?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.effect')` instead. | | ~~`blur?`~~ | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use `cesdk.feature.enable('ly.img.blur')` instead. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceNavigation" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacenavigation/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## 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/) | **Deprecated** Use the Order API to configure the actions instead. | - | | `action.back?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use the Order API to configure the actions instead. | - | | `action.save?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use the Order API to configure the actions instead. | - | | `action.export?` | | `boolean` | [`UserInterfaceExportAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceexportaction/) | **Deprecated** Use the Order API to configure the actions instead. | - | | `action.share?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use the Order API to configure the actions instead. | - | | `action.load?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use the Order API to configure the actions instead. | - | | `action.download?` | | `boolean` | [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | **Deprecated** Use the Order API to configure the actions instead. | - | | `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. | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterfaceSettings" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacesettings/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Interface representing the settings in the user interface. ## Extends - [`UserInterfaceElement`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) ## 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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetLibraryEntries" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/assetlibraryentries/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetLibraryEntries = | AssetLibraryEntry[] | ((currentAssetLibraryEntries, context) => AssetLibraryEntry[]); ``` Represents a collection of asset library entries, which can be either a static array or a dynamic function. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CardBackground" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/cardbackground/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `path` | `string` | | `type` | `"svgVectorPath"` | `"image"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CustomCardBackground" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardbackground/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CustomCardBackground = | CustomCardImageBackground | CustomCardSvgVectorPathBackground; ``` Type representing the background of a custom card, which can be either an image or an SVG vector path. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CustomCardImageBackground" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardimagebackground/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `url` | `string` | | `type` | `"image"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CustomCardSvgVectorPathBackground" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardsvgvectorpathbackground/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `type` | `"svgVectorPath"` | | `viewBox` | `string` | | `width?` | `string` | `number` | | `height?` | `string` | `number` | | `d` | `string` | | `stroke?` | `string` | | `strokeWidth?` | `number` | `string` | | `strokeLinecap?` | `"butt"` | `"round"` | `"square"` | | `strokeLinejoin?` | `"miter"` | `"round"` | `"bevel"` | | `strokeDasharray?` | `string` | | `strokeDashoffset?` | `number` | `string` | | `opacity?` | `number` | `string` | | `clipPath?` | `string` | | `fill?` | `string` | | `fillRule?` | `"nonzero"` | `"evenodd"` | | `clipRule?` | `"nonzero"` | `"evenodd"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CustomIcon" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ExportFormat" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/exportformat/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UserInterfaceCustomActionIconName" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/userinterfacecustomactioniconname/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: isGlobPattern" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/isglobpattern/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function isGlobPattern(str): str is GlobPattern; ``` Checks if a string is a glob pattern (contains `*`). ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `str` | `string` | The string to check | ## Returns `str is GlobPattern` True if the string contains a wildcard --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: matchGlob" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/matchglob/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function matchGlob(pattern, value): boolean; ``` Matches a value against a glob pattern. ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `pattern` | `string` | The glob pattern (e.g., 'ly.img.*', '*.separator') | | `value` | `string` | The value to match against | ## Returns `boolean` True if the value matches the pattern --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: useOrderContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/functions/useordercontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function useOrderContext(area): object; ``` Hook for reading and setting order context for a UI area. Components wrapped with `observer` will automatically re-render when the context changes. ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `area` | `A` | The UI area to get/set context for | ## Returns `object` Object with `context` and `setContext` | Name | Type | | ------ | ------ | | `context` | [`UIAreaContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareacontext/)\<`A`> | | `setContext()` | (`ctx`) => `void` | ## Example ```tsx function MyCaptionStyleButton() { const { context, setContext } = useOrderContext('ly.img.caption.panel'); return ; } ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetLibraryEntry" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Represents an entry in the asset library, combining data and view configurations. ## 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 | 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`\[]) | - | [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`sourceIds`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | | ~~`sceneMode?`~~ | `any` | **Deprecated** Since v1.72. Scene mode no longer affects engine behavior. Not setting this will make the entry available for all scenes. | [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`sceneMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | | `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`) | - | [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`title`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | | `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`. | [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`canAdd`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | | `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`. | [`AssetLibraryEntryData`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/).[`canRemove`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | | `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`\[]; } | Wether or not we need to show a confirmation dialog when an asset is selected. accepted values: - `true`: Show a confirmation dialog for all assets - `false`: Never show a confirmation dialog - `{ show: true, sourceIds: ['sourceId1', 'sourceId2'] }`: Show a confirmation dialog for the given sourceIds The content of the dialog should be defined in the translation files using the following keys: - Headline: `libraries.[your_source_id].confirmation.headline` - Body: `libraries.[your_source_id].confirmation.body` - Confirm: `libraries.[your_source_id].confirmation.confirm` - Abort: `libraries.[your_source_id].confirmation.abort` | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`promptBeforeApply`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `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. | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`previewBackgroundType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `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 | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`gridBackgroundType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `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 | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`gridItemHeight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `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/)) | 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 the 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` - use a CSS background image Example of the default: `[ { path: 'meta.vectorPath', type: 'svgVectorPath' }, { path: 'meta.thumbUri', type: 'image' } ]` This will look if the asset has a value in `meta.vectorPath` and will use this value to render a SVG as background. If `meta.vectorPath` has no value, it will use `meta.thumbUri` instead as a background image. Otherwise it will render nothing | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`cardBackgroundPreferences`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `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/) | | `hideCardLabelInPreview?` | `boolean` | When true, suppresses the card label rendered in section previews (the rows shown above each section's "More" button) while keeping the label visible inside the full asset section view (opened via the "More" button). Use this when the preview rows render very compactly and labels would not fit. | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`hideCardLabelInPreview`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `cardStyle?` | (`assetResult`) => `Record`\<`string`, `string` | `undefined`> | 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` | `undefined`> | 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'. | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`cardLabelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `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'. | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`cardLabelTruncateLines`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | | `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?` | `any` | - | [`AssetLibraryEntryView`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/).[`sortBy`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BaseInsertOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for inserting components into a UI area. ## Extended by - [`InsertAfterOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertafteroptions/) - [`InsertAppendOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertappendoptions/) - [`InsertAtPositionOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertatpositionoptions/) - [`InsertBeforeOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertbeforeoptions/) ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | | `at?` | `A` *extends* `"ly.img.dock"` ? [`DockPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/) : `never` | Dock position: `'left'`, `'right'`, or `'bottom'`. Defaults to `'left'`. Only available for `'ly.img.dock'`. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BasePositionalInsertOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for inserting components into a positional UI area (e.g., canvas bar). ## Extended by - [`PositionalInsertAfterOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/positionalinsertafteroptions/) - [`PositionalInsertAppendOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/positionalinsertappendoptions/) - [`PositionalInsertAtPositionOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/positionalinsertatpositionoptions/) - [`PositionalInsertBeforeOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/positionalinsertbeforeoptions/) ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/) | ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | | `at` | [`PositionFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionfor/)\<`A`> | Which slot within the area (e.g., 'top' or 'bottom' for canvas bar). | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Builder" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builder/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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` | | `Spinner` | (`id`, `options?`) => `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` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BuilderRenderFunctionContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builderrenderfunctioncontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 Parameter | | ------ | | `P` | ## 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_2` | - | | `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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BuiltinTranslations" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Built-in translation keys provided by the Creative Editor SDK. ## Extended by - [`Translations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/) ## 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.shape.replace` | `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.vectorEdit.editPath` | `string` | | `action.vectorEdit.exit` | `string` | | `action.vectorPath.addMode` | `string` | | `action.vectorPath.addNode` | `string` | | `action.vectorPath.bendMode` | `string` | | `action.vectorPath.deleteMode` | `string` | | `action.vectorPath.deleteNode` | `string` | | `action.vectorPath.moveMode` | `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.altKey` | `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.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.shiftKey` | `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.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.typefaceLibrary` | `string` | | `component.typefaceLibrary.allTypefaces` | `string` | | `component.typefaceLibrary.inThisFile` | `string` | | `component.typefaceLibrary.toggleVariants` | `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.addStop` | `string` | | `input.gradient.colorPosition` | `string` | | `input.gradient.colorStop` | `string` | | `input.gradient.colorStop.active` | `string` | | `input.gradient.colorStop.description` | `string` | | `input.gradient.deleteStop` | `string` | | `input.gradient.flip` | `string` | | `input.gradient.gradientAngle` | `string` | | `input.gradient.rotate` | `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.color.palette.label` | `string` | | `libraries.ly.img.colors.imageColors.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.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.florals.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.templates.confirmation.abort` | `string` | | `libraries.ly.img.templates.confirmation.body` | `string` | | `libraries.ly.img.templates.confirmation.confirm` | `string` | | `libraries.ly.img.templates.confirmation.headline` | `string` | | `libraries.ly.img.templates.label` | `string` | | `libraries.ly.img.templates.premium.confirmation.abort` | `string` | | `libraries.ly.img.templates.premium.confirmation.body` | `string` | | `libraries.ly.img.templates.premium.confirmation.confirm` | `string` | | `libraries.ly.img.templates.premium.confirmation.headline` | `string` | | `libraries.ly.img.templates.premium.e-commerce.label` | `string` | | `libraries.ly.img.templates.premium.event.label` | `string` | | `libraries.ly.img.templates.premium.label` | `string` | | `libraries.ly.img.templates.premium.personal.label` | `string` | | `libraries.ly.img.templates.premium.professional.label` | `string` | | `libraries.ly.img.templates.premium.socials.label` | `string` | | `libraries.ly.img.text.components.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.upload.label` | `string` | | `libraries.ly.img.vector.shape.abstract-filled.label` | `string` | | `libraries.ly.img.vector.shape.abstract-gradient.label` | `string` | | `libraries.ly.img.vector.shape.abstract-image.label` | `string` | | `libraries.ly.img.vector.shape.abstract-outline.label` | `string` | | `libraries.ly.img.vector.shape.filled.label` | `string` | | `libraries.ly.img.vector.shape.gradient.label` | `string` | | `libraries.ly.img.vector.shape.image.label` | `string` | | `libraries.ly.img.vector.shape.label` | `string` | | `libraries.ly.img.vector.shape.outline.label` | `string` | | `libraries.ly.img.video.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.advancedStrokeOptions` | `string` | | `property.advancedStrokeOptions.description` | `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.scale_loop` | `string` | | `property.animation.scale_loop.direction` | `string` | | `property.animation.scale_loop.direction.All` | `string` | | `property.animation.scale_loop.direction.BottomLeft` | `string` | | `property.animation.scale_loop.direction.BottomRight` | `string` | | `property.animation.scale_loop.direction.Horizontal` | `string` | | `property.animation.scale_loop.direction.TopLeft` | `string` | | `property.animation.scale_loop.direction.TopRight` | `string` | | `property.animation.scale_loop.direction.Vertical` | `string` | | `property.animation.scale_loop.easingDuration` | `string` | | `property.animation.scale_loop.endScale` | `string` | | `property.animation.scale_loop.holdDuration` | `string` | | `property.animation.scale_loop.startDelay` | `string` | | `property.animation.scale_loop.startScale` | `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.contentFillAlignment` | `string` | | `property.crop.contentFillAlignment.bottomCenter` | `string` | | `property.crop.contentFillAlignment.bottomLeft` | `string` | | `property.crop.contentFillAlignment.bottomRight` | `string` | | `property.crop.contentFillAlignment.centerCenter` | `string` | | `property.crop.contentFillAlignment.centerLeft` | `string` | | `property.crop.contentFillAlignment.centerRight` | `string` | | `property.crop.contentFillAlignment.description` | `string` | | `property.crop.contentFillAlignment.topCenter` | `string` | | `property.crop.contentFillAlignment.topLeft` | `string` | | `property.crop.contentFillAlignment.topRight` | `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.conical.description` | `string` | | `property.gradientType.linear` | `string` | | `property.gradientType.radial` | `string` | | `property.gradientType.radial.description` | `string` | | `property.innerDiameter` | `string` | | `property.layout` | `string` | | `property.layout.free` | `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.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.greyed` | `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.graphic.tooltip` | `string` | | `property.placeholderBehavior.text.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.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.autoDetect` | `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.vector` | `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.graphic` | `string` | | `scope.fill.change.graphic.tooltip` | `string` | | `scope.fill.change.text` | `string` | | `scope.fill.change.text.tooltip` | `string` | | `scope.fill.change.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.page` | `string` | | `scope.layer.resize.tooltip` | `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.placeholder.tooltip` | `string` | | `scope.text.edit.tooltip` | `string` | | `settings.feature.combine` | `string` | | `settings.feature.combine.exclude` | `string` | | `settings.feature.combine.intersect` | `string` | | `settings.feature.combine.subtract` | `string` | | `settings.feature.combine.union` | `string` | | `settings.feature.crop` | `string` | | `settings.feature.crop.fillAlignment` | `string` | | `settings.feature.crop.fillMode` | `string` | | `settings.feature.crop.flip` | `string` | | `settings.feature.crop.panel.autoOpen` | `string` | | `settings.feature.crop.position` | `string` | | `settings.feature.crop.rotation` | `string` | | `settings.feature.crop.scale` | `string` | | `settings.feature.crop.size` | `string` | | `settings.feature.effects.adjustments` | `string` | | `settings.feature.effects.blur` | `string` | | `settings.feature.effects.cutout` | `string` | | `settings.feature.effects.effects` | `string` | | `settings.feature.effects.filters` | `string` | | `settings.feature.fill` | `string` | | `settings.feature.fill.color` | `string` | | `settings.feature.fill.image` | `string` | | `settings.feature.fill.video` | `string` | | `settings.feature.general.animations` | `string` | | `settings.feature.general.blendMode` | `string` | | `settings.feature.general.delete` | `string` | | `settings.feature.general.duplicate` | `string` | | `settings.feature.general.opacity` | `string` | | `settings.feature.general.preview` | `string` | | `settings.feature.group.combine` | `string` | | `settings.feature.group.crop` | `string` | | `settings.feature.group.effects` | `string` | | `settings.feature.group.fill` | `string` | | `settings.feature.group.general` | `string` | | `settings.feature.group.group` | `string` | | `settings.feature.group.media` | `string` | | `settings.feature.group.navigation` | `string` | | `settings.feature.group.notifications` | `string` | | `settings.feature.group.page` | `string` | | `settings.feature.group.panels` | `string` | | `settings.feature.group.placeholder` | `string` | | `settings.feature.group.position` | `string` | | `settings.feature.group.replace` | `string` | | `settings.feature.group.scene` | `string` | | `settings.feature.group.shadow` | `string` | | `settings.feature.group.shape` | `string` | | `settings.feature.group.stroke` | `string` | | `settings.feature.group.text` | `string` | | `settings.feature.group.transform` | `string` | | `settings.feature.group.vectorEdit` | `string` | | `settings.feature.group.video` | `string` | | `settings.feature.group_feature` | `string` | | `settings.feature.group_feature.create` | `string` | | `settings.feature.group_feature.enter` | `string` | | `settings.feature.group_feature.select` | `string` | | `settings.feature.group_feature.ungroup` | `string` | | `settings.feature.header` | `string` | | `settings.feature.manage` | `string` | | `settings.feature.search` | `string` | | `settings.feature.media.playbackSpeed` | `string` | | `settings.feature.media.trim` | `string` | | `settings.feature.media.volume` | `string` | | `settings.feature.navigation` | `string` | | `settings.feature.navigation.actions` | `string` | | `settings.feature.navigation.back` | `string` | | `settings.feature.navigation.bar` | `string` | | `settings.feature.navigation.close` | `string` | | `settings.feature.navigation.undoRedo` | `string` | | `settings.feature.navigation.zoom` | `string` | | `settings.feature.notifications` | `string` | | `settings.feature.notifications.redo` | `string` | | `settings.feature.notifications.undo` | `string` | | `settings.feature.page` | `string` | | `settings.feature.page.add` | `string` | | `settings.feature.page.bleedMargin` | `string` | | `settings.feature.page.clipContent` | `string` | | `settings.feature.page.move` | `string` | | `settings.feature.page.resize` | `string` | | `settings.feature.page.settings` | `string` | | `settings.feature.panels.canvas` | `string` | | `settings.feature.panels.canvasBar` | `string` | | `settings.feature.panels.canvasMenu` | `string` | | `settings.feature.panels.dock` | `string` | | `settings.feature.panels.inspector` | `string` | | `settings.feature.panels.inspectorBar` | `string` | | `settings.feature.panels.inspectorToggle` | `string` | | `settings.feature.panels.library` | `string` | | `settings.feature.panels.rulers` | `string` | | `settings.feature.panels.settings` | `string` | | `settings.feature.placeholder` | `string` | | `settings.feature.placeholder.appearance` | `string` | | `settings.feature.placeholder.appearance.adjustments` | `string` | | `settings.feature.placeholder.appearance.animations` | `string` | | `settings.feature.placeholder.appearance.blur` | `string` | | `settings.feature.placeholder.appearance.effect` | `string` | | `settings.feature.placeholder.appearance.filter` | `string` | | `settings.feature.placeholder.appearance.shadow` | `string` | | `settings.feature.placeholder.arrange` | `string` | | `settings.feature.placeholder.arrange.flip` | `string` | | `settings.feature.placeholder.arrange.move` | `string` | | `settings.feature.placeholder.arrange.resize` | `string` | | `settings.feature.placeholder.arrange.rotate` | `string` | | `settings.feature.placeholder.audio` | `string` | | `settings.feature.placeholder.audio.change` | `string` | | `settings.feature.placeholder.fill` | `string` | | `settings.feature.placeholder.fill.actAsPlaceholder` | `string` | | `settings.feature.placeholder.fill.change` | `string` | | `settings.feature.placeholder.fill.changeType` | `string` | | `settings.feature.placeholder.fill.crop` | `string` | | `settings.feature.placeholder.general` | `string` | | `settings.feature.placeholder.general.blendMode` | `string` | | `settings.feature.placeholder.general.delete` | `string` | | `settings.feature.placeholder.general.duplicate` | `string` | | `settings.feature.placeholder.general.opacity` | `string` | | `settings.feature.placeholder.shape` | `string` | | `settings.feature.placeholder.shape.change` | `string` | | `settings.feature.placeholder.stroke` | `string` | | `settings.feature.placeholder.stroke.change` | `string` | | `settings.feature.placeholder.text` | `string` | | `settings.feature.placeholder.text.actAsPlaceholder` | `string` | | `settings.feature.placeholder.text.character` | `string` | | `settings.feature.placeholder.text.edit` | `string` | | `settings.feature.position` | `string` | | `settings.feature.position.align` | `string` | | `settings.feature.position.arrange` | `string` | | `settings.feature.position.distribute` | `string` | | `settings.feature.replace` | `string` | | `settings.feature.replace.audio` | `string` | | `settings.feature.replace.fill` | `string` | | `settings.feature.replace.shape` | `string` | | `settings.feature.scene.layout` | `string` | | `settings.feature.scene.layout.free` | `string` | | `settings.feature.scene.layout.horizontal` | `string` | | `settings.feature.scene.layout.vertical` | `string` | | `settings.feature.shadow` | `string` | | `settings.feature.shadow.blur` | `string` | | `settings.feature.shadow.color` | `string` | | `settings.feature.shadow.offset` | `string` | | `settings.feature.shape.edit` | `string` | | `settings.feature.shape.options` | `string` | | `settings.feature.shape.options.cornerRadius` | `string` | | `settings.feature.shape.options.innerDiameter` | `string` | | `settings.feature.shape.options.lineWidth` | `string` | | `settings.feature.shape.options.points` | `string` | | `settings.feature.shape.options.sides` | `string` | | `settings.feature.stroke` | `string` | | `settings.feature.stroke.color` | `string` | | `settings.feature.stroke.cornerGeometry` | `string` | | `settings.feature.stroke.position` | `string` | | `settings.feature.stroke.style` | `string` | | `settings.feature.stroke.width` | `string` | | `settings.feature.text` | `string` | | `settings.feature.text.advanced` | `string` | | `settings.feature.text.alignment` | `string` | | `settings.feature.text.background` | `string` | | `settings.feature.text.decoration` | `string` | | `settings.feature.text.edit` | `string` | | `settings.feature.text.fontSize` | `string` | | `settings.feature.text.fontStyle` | `string` | | `settings.feature.text.list` | `string` | | `settings.feature.text.list.ordered` | `string` | | `settings.feature.text.list.unordered` | `string` | | `settings.feature.text.typeface` | `string` | | `settings.feature.transform` | `string` | | `settings.feature.transform.flip` | `string` | | `settings.feature.transform.position` | `string` | | `settings.feature.transform.rotation` | `string` | | `settings.feature.transform.size` | `string` | | `settings.feature.vectorEdit` | `string` | | `settings.feature.vectorEdit.addMode` | `string` | | `settings.feature.vectorEdit.bendMode` | `string` | | `settings.feature.vectorEdit.deleteMode` | `string` | | `settings.feature.vectorEdit.done` | `string` | | `settings.feature.vectorEdit.mirrorMode` | `string` | | `settings.feature.vectorEdit.moveMode` | `string` | | `settings.feature.video` | `string` | | `settings.feature.video.addClip` | `string` | | `settings.feature.video.audio` | `string` | | `settings.feature.video.caption` | `string` | | `settings.feature.video.clips` | `string` | | `settings.feature.video.controls` | `string` | | `settings.feature.video.controls.background` | `string` | | `settings.feature.video.controls.loop` | `string` | | `settings.feature.video.controls.playback` | `string` | | `settings.feature.video.controls.split` | `string` | | `settings.feature.video.controls.timelineZoom` | `string` | | `settings.feature.video.controls.toggle` | `string` | | `settings.feature.video.overlays` | `string` | | `settings.feature.video.timeline` | `string` | | `settings.feature.video.timeline.ruler` | `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` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ButtonGroupOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buttongroupoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `inputLabel?` | `string` | `string`\[] | | `inputLabelPosition?` | `"left"` | `"top"` | | `children?` | () => `void` | | `suffix?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ButtonOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/buttonoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | Description | | ------ | ------ | ------ | | `inputLabel?` | `string` | `string`\[] | - | | `inputLabelPosition?` | `"left"` | `"top"` | - | | `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?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | - | | `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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CanvasBarLocationOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasbarlocationoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Location options specifically for the canvas bar, which requires a position. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `in` | `"ly.img.canvas.bar"` | Target the canvas bar. | | `at` | `"bottom"` | `"top"` | Position within the canvas bar. Required for canvas bar operations. | | `when?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context for conditional ordering. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CanvasMenuActionButton" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuactionbutton/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable ```ts [key: string]: unknown ``` ## Properties | Property | Type | Overrides | Inherited from | | ------ | ------ | ------ | ------ | | `id` | | `"ly.img.flipX.canvasMenu"` | `"ly.img.flipY.canvasMenu"` | `"ly.img.copy.canvasMenu"` | `"ly.img.paste.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/) | - | | `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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CanvasMenuCustomActionButton" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenucustomactionbutton/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Interface representing a custom canvas menu action button. Note: This component requires a key and has a required label, unlike other action buttons. ## Extends - [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable ```ts [key: string]: unknown ``` ## 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` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CanvasMenuOptionsComponent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuoptionscomponent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`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 ```ts [key: string]: unknown ``` ## 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/)>)\[] | A list of children as order components | - | [`OrderComponentWithChildren`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/).[`children`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CaptionPanelOrderContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/captionpanelordercontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Context for the caption panel which adds view-based filtering. ## Extends - [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `view?` | `string` & `object` | `"create"` | `"edit"` | `"style"` | - | - | | `showTimings?` | `boolean` | Whether to show timing information for each caption in edit view. | - | | `editMode?` | `EditMode` | - | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/).[`editMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CESDKConfiguration" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/cesdkconfiguration/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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?` | `_EngineConfiguration` | - | | `logger` | `_EngineConfiguration` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CheckboxOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/checkboxoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)\<`boolean`, `"left"` | `"right"`> ## Properties | Property | Type | Inherited from | | ------ | ------ | ------ | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | - | | `truncateLabel?` | `boolean` | - | | `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/) | | `inputLabelPosition?` | `"left"` | `"right"` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `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?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ClipContextMenuCustomAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/clipcontextmenucustomaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Interface representing a generic custom action in the clip context menu. Requires a `key` to uniquely identify the action and a `label` for display. ## Extends - [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable ```ts [key: string]: unknown ``` ## Properties | Property | Type | Overrides | | ------ | ------ | ------ | | `id` | `"ly.img.video.clip.menu.action"` | [`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` | - | | `isDisabled?` | `boolean` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ColorInputOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/colorinputoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)\<[`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/)> ## Properties | Property | Type | Inherited from | | ------ | ------ | ------ | | `label?` | `string` | `string`\[] | - | | `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/) | | `inputLabelPosition?` | `"left"` | `"top"` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `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?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ComponentMatchOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentmatchoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for update and remove operations. Supports multi-area operations via arrays or glob patterns. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIAreaSpecifier`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareaspecifier/) | [`UIAreaSpecifier`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareaspecifier/) | ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `in` | `A` | The UI area(s) to operate on. Can be a single area, array, or glob pattern. | | `match` | [`ComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentmatcher/)\<[`InferComponentType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/infercomponenttype/)\<`A`>> | The matcher to find components. Autocomplete is area-specific when targeting a single area. | | `when?` | [`InferOrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inferordercontext/)\<`A`> | Optional context filter. | | `at?` | `A` *extends* `"ly.img.canvas.bar"` ? `"bottom"` | `"top"` : `A` *extends* `"ly.img.dock"` ? [`DockPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/) : `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) ? `never` : | [`DockPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/) | `"top"` | Position filter. For canvas bar: `'top'` or `'bottom'`. For dock: `'left'`, `'right'`, or `'bottom'`. If omitted, the operation applies to all positions. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ComponentOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ComponentPayload" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`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 ```ts [key: string]: unknown ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CustomDockComponent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/customdockcomponent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) ## Indexable ```ts [key: string]: unknown ``` ## Properties | Property | Type | | ------ | ------ | | `id` | [`DockOrderComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Dialog" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dialog/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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/) | | `backdrop?` | [`DialogBackdrop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogbackdrop/) | | `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?` | | [`DialogAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogaction/) | [`DialogAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogaction/)\[] | | `cancel?` | [`DialogAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogaction/) | | `onClose?` | () => `void` | | `clickOutsideToClose?` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: DockLocationOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/docklocationoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Location options specifically for the dock, which supports an optional position. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `in` | `"ly.img.dock"` | Target the dock. | | `at?` | [`DockPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/) | Position of the dock. For set/insert, defaults to `'left'`. For get, omitting returns all positions. | | `when?` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | Optional context for conditional ordering. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: DropdownChildrenContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dropdownchildrencontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `close` | () => `void` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: DropdownOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/dropdownoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | Description | | ------ | ------ | ------ | | `inputLabel?` | `string` | `string`\[] | - | | `inputLabelPosition?` | `"left"` | `"top"` | - | | `label?` | `string` | `string`\[] | - | | `tooltip?` | `string` | `string`\[] | - | | `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/) | - | | `isActive?` | `boolean` | - | | `activeStateStyle?` | `"outline"` | `"pill"` | `"none"` | - | | `isDisabled?` | `boolean` | - | | `isLoading?` | `boolean` | - | | `loadingProgress?` | `number` | - | | `children?` | | ((`context`) => `void`) | [`ChildrenOrder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/childrenorder/) | - | | `suffix?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | - | | `showIndicator?` | `boolean` | Whether to show the expand indicator icons (triangle up/down). **Default** `true` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: EditorPlugin" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/editorplugin/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Represents an editor plugin. This interface defines the structure of an editor plugin, including its name, version, and initialization function. ## Properties | Property | Type | | ------ | ------ | | `name` | `string` | | `version` | `string` | | `initialize` | (`context`) => `void` | `Promise`\<`void`> | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ExportOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/exportoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - `Pick`\<[`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/), | `"pngCompressionLevel"` | `"jpegQuality"` | `"webpQuality"` | `"exportPdfWithHighCompatibility"` | `"exportPdfWithUnderlayer"` | `"underlayerSpotColorName"` | `"underlayerOffset"`> ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `pngCompressionLevel` | `EngineExportOptions` | - | `Pick.pngCompressionLevel` | | `jpegQuality` | `EngineExportOptions` | - | `Pick.jpegQuality` | | `webpQuality` | `EngineExportOptions` | - | `Pick.webpQuality` | | `exportPdfWithHighCompatibility` | `EngineExportOptions` | - | `Pick.exportPdfWithHighCompatibility` | | `exportPdfWithUnderlayer` | `EngineExportOptions` | - | `Pick.exportPdfWithUnderlayer` | | `underlayerSpotColorName` | `EngineExportOptions` | - | `Pick.underlayerSpotColorName` | | `underlayerOffset` | `EngineExportOptions` | - | `Pick.underlayerOffset` | | `mimeType` | `MimeType_2` | The mime type of the exported blob | - | | `pages?` | `number`\[] | The pages to export with the selected page as the default | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: HeadingOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/headingoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `content` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: InputOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`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 Parameter | Default type | | ------ | ------ | | `T` | - | | `P` | `"top"` | `"left"` | ## Properties | Property | Type | | ------ | ------ | | `inputLabel?` | `string` | `string`\[] | | `inputLabelPosition?` | `P` | | `value` | `T` | | `setValue` | (`value`) => `void` | | `isDisabled?` | `boolean` | | `suffix?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: InsertAfterOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertafteroptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Insert after a matched component. ## Extends - [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/)\<`A`> ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`when`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `at?` | `A` *extends* `"ly.img.dock"` ? [`DockPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/) : `never` | Dock position: `'left'`, `'right'`, or `'bottom'`. Defaults to `'left'`. Only available for `'ly.img.dock'`. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`at`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `after` | [`ComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentmatcher/) | Insert after this component. | - | | `before?` | `never` | - | - | | `position?` | `never` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: InsertAppendOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertappendoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Append to end (default behavior). ## Extends - [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/)\<`A`> ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`when`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `at?` | `A` *extends* `"ly.img.dock"` ? [`DockPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/) : `never` | Dock position: `'left'`, `'right'`, or `'bottom'`. Defaults to `'left'`. Only available for `'ly.img.dock'`. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`at`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `before?` | `never` | - | - | | `after?` | `never` | - | - | | `position?` | `never` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: InsertAtPositionOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertatpositionoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Insert at a specific position. ## Extends - [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/)\<`A`> ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`when`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `at?` | `A` *extends* `"ly.img.dock"` ? [`DockPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/) : `never` | Dock position: `'left'`, `'right'`, or `'bottom'`. Defaults to `'left'`. Only available for `'ly.img.dock'`. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`at`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `position` | `number` | `"start"` | `"end"` | Insert at 'start', 'end', or a specific index. Negative indexes count from end. | - | | `before?` | `never` | - | - | | `after?` | `never` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: InsertBeforeOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertbeforeoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Insert before a matched component. ## Extends - [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/)\<`A`> ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | `Exclude`\<[`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/), [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/)> | ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`when`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `at?` | `A` *extends* `"ly.img.dock"` ? [`DockPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/) : `never` | Dock position: `'left'`, `'right'`, or `'bottom'`. Defaults to `'left'`. Only available for `'ly.img.dock'`. | [`BaseInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/).[`at`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/baseinsertoptions/) | | `before` | [`ComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentmatcher/) | Insert before this component. | - | | `after?` | `never` | - | - | | `position?` | `never` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: InsertResult" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/insertresult/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Result of an insert operation. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `inserted` | `boolean` | Whether at least one component was successfully inserted. False if target not found. | | `insertedCount` | `number` | Number of components that were inserted. | | `order` | [`OrderComponentFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentfor/)\<`A`>\[] | The new order after the insert. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: LibraryOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/libraryoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | Description | | ------ | ------ | ------ | | `entries` | | `string`\[] | [`AssetLibraryEntry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/assetlibraryentry/)\[] | `AssetLibraryEntry[]` is deprecated and will be removed in the future; use `string[]` instead to pass a list of the asset library entries. Read more about adding asset library entries in the (documentation)\[https://img.ly/docs/cesdk/ui/customization/api/assetLibraryEntry/]. | | `onSelect?` | (`asset`) => `Promise`\<`void`> | - | | `searchable?` | `boolean` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: MediaPreviewOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/mediapreviewoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `size?` | `"small"` | `"medium"` | | `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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: NavigationBarActionButton" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/navigationbaractionbutton/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable ```ts [key: string]: unknown ``` ## Properties | Property | Type | Overrides | Inherited from | | ------ | ------ | ------ | ------ | | `id` | | `"ly.img.back.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"` | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/).[`id`](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` | - | - | | `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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: NavigationBarCustomActionButton" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/navigationbarcustomactionbutton/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) ## Indexable ```ts [key: string]: unknown ``` ## 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` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Notification" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/notification/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: NumberInputOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/numberinputoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)\<`number`> ## Properties | Property | Type | Default value | Description | Inherited from | | ------ | ------ | ------ | ------ | ------ | | `inputLabel?` | `string` | `string`\[] | `undefined` | - | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `inputLabelPosition?` | `"left"` | `"top"` | `undefined` | - | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `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?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | `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. | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: OrderComponent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Represents an order component. The OrderComponent interface defines the structure of an order component. It includes properties for the ID, key, and payload. ## Extends - [`ComponentPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/componentpayload/) ## 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/) - [`ClipContextMenuCustomAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/clipcontextmenucustomaction/) - [`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 Parameter | Default type | | ------ | ------ | | `I` | [`ComponentId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/) | ## Indexable ```ts [key: string]: unknown ``` ## Properties | Property | Type | | ------ | ------ | | `id` | `I` | | `key?` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: OrderComponentWithChildren" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponentwithchildren/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/)\<`I`> ## Extended by - [`CanvasMenuOptionsComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/canvasmenuoptionscomponent/) ## 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 ```ts [key: string]: unknown ``` ## 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`)\[] | A list of children as order components | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: OrderContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Context for ordering components. Contains editMode which is used by most UI areas. ## Extended by - [`CaptionPanelOrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/captionpanelordercontext/) - [`VideoClipMenuOrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/videoclipmenuordercontext/) ## Properties | Property | Type | | ------ | ------ | | `editMode?` | `EditMode` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: PositionalInsertAfterOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/positionalinsertafteroptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Insert after a matched component (positional areas). ## Extends - [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/)\<`A`> ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/) | ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `at` | [`PositionFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionfor/)\<`A`> | Which slot within the area (e.g., 'top' or 'bottom' for canvas bar). | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`at`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`when`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `after` | [`ComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentmatcher/) | Insert after this component. | - | | `before?` | `never` | - | - | | `position?` | `never` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: PositionalInsertAppendOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/positionalinsertappendoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Append to end (positional areas). ## Extends - [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/)\<`A`> ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/) | ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `at` | [`PositionFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionfor/)\<`A`> | Which slot within the area (e.g., 'top' or 'bottom' for canvas bar). | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`at`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`when`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `before?` | `never` | - | - | | `after?` | `never` | - | - | | `position?` | `never` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: PositionalInsertAtPositionOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/positionalinsertatpositionoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Insert at a specific position (positional areas). ## Extends - [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/)\<`A`> ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/) | ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `at` | [`PositionFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionfor/)\<`A`> | Which slot within the area (e.g., 'top' or 'bottom' for canvas bar). | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`at`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`when`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `position` | `number` | `"start"` | `"end"` | Insert at 'start', 'end', or a specific index. Negative indexes count from end. | - | | `before?` | `never` | - | - | | `after?` | `never` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: PositionalInsertBeforeOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/positionalinsertbeforeoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Insert before a matched component (positional areas). ## Extends - [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/)\<`A`> ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/) | ## Properties | Property | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | | `in` | `A` | The UI area to insert into. | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`in`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `at` | [`PositionFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionfor/)\<`A`> | Which slot within the area (e.g., 'top' or 'bottom' for canvas bar). | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`at`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | [`BasePositionalInsertOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/).[`when`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/basepositionalinsertoptions/) | | `before` | [`ComponentMatcher`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentmatcher/) | Insert before this component. | - | | `after?` | `never` | - | - | | `position?` | `never` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: RegisteredActions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/registeredactions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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 | | `video.decode.checkSupport` | [`VideoDecodeCheckSupportAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videodecodechecksupportaction/) | Action for checking video decoding/playback support | | `video.encode.checkSupport` | [`VideoEncodeCheckSupportAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videoencodechecksupportaction/) | Action for checking video encoding/export support | | `editor.checkBrowserSupport` | [`EditorCheckBrowserSupportAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editorcheckbrowsersupportaction/) | Action for checking browser capabilities at editor startup | | `scene.create` | [`SceneCreateAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scenecreateaction/) | Action for creating a new scene with configurable mode and page sizes | | `asset.delete` | [`DeleteAssetAction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/deleteassetaction/) | Action invoked when the user deletes an asset from an asset source via the asset library card. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: RemoveResult" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/removeresult/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Result of a remove operation on a single area. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `removed` | `number` | Number of components that were removed. | | `order` | [`OrderComponentFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentfor/)\<`A`>\[] | The new order after the removal. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ReplaceAssetLibraryEntriesContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/replaceassetlibraryentriescontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Provides context for replacing asset library entries, including selected blocks and default entry IDs. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `selectedBlocks` | `object`\[] | - | | `defaultEntryIds` | `string`\[] | - | | `replaceIntent?` | `"shape"` | `"fill"` | The intent of the replacement operation. - `'shape'`: User explicitly wants to replace the shape (e.g., from shape options panel) - `'fill'`: User wants to replace the fill content - `undefined`: No explicit intent, system determines based on block properties | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: SectionOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/sectionoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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, children, and scrollable behavior. ## Properties | Property | Type | | ------ | ------ | | `title?` | `string` | | `children?` | | [`ChildrenOrder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/childrenorder/) | (() => `void`) | | `scrollable?` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: SelectOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for a select input. ## 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 | Property | Type | Description | Overrides | Inherited from | | ------ | ------ | ------ | ------ | ------ | | `inputLabelPosition?` | `"left"` | `"top"` | - | - | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `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?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | - | [`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/)\[] | - | - | - | | `searchable?` | `boolean` | When true, adds a search input that filters the dropdown options by label. | - | - | | `searchPlaceholder?` | `string` | `string`\[] | Placeholder text for the search input. Only used when `searchable` is true. | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: SelectValue" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/selectvalue/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `id` | `string` | | `label` | `string` | `string`\[] | | `icon?` | [`CustomIcon`](https://img.ly/docs/cesdk/angular/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: SliderOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/slideroptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)\<`number`> ## Properties | Property | Type | Inherited from | | ------ | ------ | ------ | | `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/) | | `inputLabelPosition?` | `"left"` | `"top"` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `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?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | [`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` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: SpinnerOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/spinneroptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Represents options for a loading spinner. The `SpinnerOptions` interface controls the appearance of an indeterminate loading spinner. The optional `label` is rendered beneath the spinner. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `label?` | `string` | `string`\[] | An optional caption rendered beneath the spinner (e.g. `'Loading...'`). Strings are passed through i18n and resolve to themselves when no translation is available. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: TextAreaOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textareaoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)\<`string`> ## Properties | Property | Type | Inherited from | | ------ | ------ | ------ | | `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/) | | `inputLabelPosition?` | `"left"` | `"top"` | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `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?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | [`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` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: TextInputOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textinputoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/)\<`string`> ## Properties | Property | Type | Default value | Description | Inherited from | | ------ | ------ | ------ | ------ | ------ | | `inputLabel?` | `string` | `string`\[] | `undefined` | - | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabel`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `inputLabelPosition?` | `"left"` | `"top"` | `undefined` | - | [`InputOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/).[`inputLabelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/inputoptions/) | | `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?` | [`Suffix`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/) | `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. | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: TextOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/textoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `content` | `string` | | `align?` | `"left"` | `"right"` | `"center"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Translations" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/translations/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Complete translation type that includes both built-in and custom translations. ## 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 ```ts [key: string]: | string | { } ``` ## 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.shape.replace` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.shape.replace`](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.vectorEdit.editPath` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.vectorEdit.editPath`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.vectorEdit.exit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.vectorEdit.exit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.vectorPath.addMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.vectorPath.addMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.vectorPath.addNode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.vectorPath.addNode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.vectorPath.bendMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.vectorPath.bendMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.vectorPath.deleteMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.vectorPath.deleteMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.vectorPath.deleteNode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.vectorPath.deleteNode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `action.vectorPath.moveMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`action.vectorPath.moveMode`](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.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.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.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.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.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.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.typefaceLibrary` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.typefaceLibrary`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.typefaceLibrary.allTypefaces` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.typefaceLibrary.allTypefaces`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.typefaceLibrary.inThisFile` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.typefaceLibrary.inThisFile`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `component.typefaceLibrary.toggleVariants` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`component.typefaceLibrary.toggleVariants`](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.addStop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.addStop`](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.deleteStop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`input.gradient.deleteStop`](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.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.color.palette.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.color.palette.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.colors.imageColors.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.colors.imageColors.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.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.florals.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.sticker.florals.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.templates.confirmation.abort` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.confirmation.abort`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.confirmation.body` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.confirmation.body`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.confirmation.confirm` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.confirmation.confirm`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.confirmation.headline` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.confirmation.headline`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.confirmation.abort` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.confirmation.abort`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.confirmation.body` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.confirmation.body`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.confirmation.confirm` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.confirmation.confirm`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.confirmation.headline` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.confirmation.headline`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.e-commerce.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.e-commerce.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.event.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.event.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.personal.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.personal.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.professional.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.professional.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.templates.premium.socials.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.templates.premium.socials.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.text.components.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.text.components.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.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.vector.shape.abstract-filled.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.abstract-filled.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vector.shape.abstract-gradient.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.abstract-gradient.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vector.shape.abstract-image.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.abstract-image.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vector.shape.abstract-outline.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.abstract-outline.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vector.shape.filled.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.filled.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vector.shape.gradient.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.gradient.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vector.shape.image.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.image.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vector.shape.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.label`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `libraries.ly.img.vector.shape.outline.label` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`libraries.ly.img.vector.shape.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.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.advancedStrokeOptions` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.advancedStrokeOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.advancedStrokeOptions.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.advancedStrokeOptions.description`](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.scale_loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.direction` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.direction`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.direction.All` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.direction.All`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.direction.BottomLeft` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.direction.BottomLeft`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.direction.BottomRight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.direction.BottomRight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.direction.Horizontal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.direction.Horizontal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.direction.TopLeft` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.direction.TopLeft`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.direction.TopRight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.direction.TopRight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.direction.Vertical` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.direction.Vertical`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.easingDuration` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.easingDuration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.endScale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.endScale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.holdDuration` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.holdDuration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.startDelay` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.startDelay`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.animation.scale_loop.startScale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.animation.scale_loop.startScale`](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.contentFillAlignment` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.bottomCenter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.bottomCenter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.bottomLeft` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.bottomLeft`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.bottomRight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.bottomRight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.centerCenter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.centerCenter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.centerLeft` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.centerLeft`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.centerRight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.centerRight`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.description`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.topCenter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.topCenter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.topLeft` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.topLeft`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `property.crop.contentFillAlignment.topRight` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.crop.contentFillAlignment.topRight`](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.conical.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.gradientType.conical.description`](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.gradientType.radial.description` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.gradientType.radial.description`](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.free` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.layout.free`](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.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.greyed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.lutFilter.greyed`](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.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.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.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.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.autoDetect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.textAlignment.horizontal.autoDetect`](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.vector` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`property.vector`](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.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.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.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.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.page` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`scope.layer.resize.page`](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.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.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/) | | `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/) | | `settings.feature.combine` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.combine`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.combine.exclude` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.combine.exclude`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.combine.intersect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.combine.intersect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.combine.subtract` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.combine.subtract`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.combine.union` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.combine.union`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop.fillAlignment` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop.fillAlignment`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop.fillMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop.fillMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop.flip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop.flip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop.panel.autoOpen` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop.panel.autoOpen`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop.rotation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop.rotation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop.scale` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop.scale`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.crop.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.crop.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.effects.adjustments` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.effects.adjustments`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.effects.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.effects.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.effects.cutout` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.effects.cutout`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.effects.effects` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.effects.effects`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.effects.filters` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.effects.filters`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.fill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.fill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.fill.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.fill.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.fill.image` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.fill.image`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.fill.video` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.fill.video`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.general.animations` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.general.animations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.general.blendMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.general.blendMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.general.delete` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.general.delete`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.general.duplicate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.general.duplicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.general.opacity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.general.opacity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.general.preview` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.general.preview`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.combine` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.combine`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.crop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.crop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.effects` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.effects`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.fill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.fill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.general` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.general`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.group` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.group`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.media` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.media`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.navigation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.navigation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.notifications` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.notifications`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.page` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.page`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.panels` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.panels`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.placeholder` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.placeholder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.replace` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.replace`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.scene` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.scene`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.shadow` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.shadow`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.shape` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.shape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.stroke` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.stroke`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.transform` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.transform`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.vectorEdit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.vectorEdit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group.video` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group.video`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group_feature` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group_feature`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group_feature.create` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group_feature.create`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group_feature.enter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group_feature.enter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group_feature.select` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group_feature.select`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.group_feature.ungroup` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.group_feature.ungroup`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.header` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.header`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.manage` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.manage`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.search` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.search`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.media.playbackSpeed` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.media.playbackSpeed`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.media.trim` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.media.trim`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.media.volume` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.media.volume`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.navigation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.navigation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.navigation.actions` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.navigation.actions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.navigation.back` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.navigation.back`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.navigation.bar` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.navigation.bar`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.navigation.close` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.navigation.close`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.navigation.undoRedo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.navigation.undoRedo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.navigation.zoom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.navigation.zoom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.notifications` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.notifications`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.notifications.redo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.notifications.redo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.notifications.undo` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.notifications.undo`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.page` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.page`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.page.add` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.page.add`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.page.bleedMargin` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.page.bleedMargin`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.page.clipContent` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.page.clipContent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.page.move` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.page.move`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.page.resize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.page.resize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.page.settings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.page.settings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.canvas` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.canvas`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.canvasBar` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.canvasBar`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.canvasMenu` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.canvasMenu`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.dock` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.dock`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.inspector` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.inspector`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.inspectorBar` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.inspectorBar`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.inspectorToggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.inspectorToggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.library` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.library`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.rulers` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.rulers`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.panels.settings` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.panels.settings`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.appearance` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.appearance`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.appearance.adjustments` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.appearance.adjustments`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.appearance.animations` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.appearance.animations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.appearance.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.appearance.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.appearance.effect` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.appearance.effect`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.appearance.filter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.appearance.filter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.appearance.shadow` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.appearance.shadow`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.arrange` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.arrange`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.arrange.flip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.arrange.flip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.arrange.move` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.arrange.move`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.arrange.resize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.arrange.resize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.arrange.rotate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.arrange.rotate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.audio` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.audio`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.audio.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.audio.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.fill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.fill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.fill.actAsPlaceholder` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.fill.actAsPlaceholder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.fill.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.fill.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.fill.changeType` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.fill.changeType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.fill.crop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.fill.crop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.general` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.general`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.general.blendMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.general.blendMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.general.delete` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.general.delete`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.general.duplicate` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.general.duplicate`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.general.opacity` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.general.opacity`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.shape` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.shape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.shape.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.shape.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.stroke` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.stroke`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.stroke.change` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.stroke.change`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.text.actAsPlaceholder` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.text.actAsPlaceholder`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.text.character` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.text.character`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.placeholder.text.edit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.placeholder.text.edit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.position.align` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.position.align`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.position.arrange` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.position.arrange`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.position.distribute` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.position.distribute`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.replace` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.replace`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.replace.audio` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.replace.audio`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.replace.fill` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.replace.fill`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.replace.shape` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.replace.shape`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.scene.layout` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.scene.layout`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.scene.layout.free` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.scene.layout.free`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.scene.layout.horizontal` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.scene.layout.horizontal`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.scene.layout.vertical` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.scene.layout.vertical`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shadow` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shadow`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shadow.blur` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shadow.blur`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shadow.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shadow.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shadow.offset` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shadow.offset`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shape.edit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shape.edit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shape.options` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shape.options`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shape.options.cornerRadius` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shape.options.cornerRadius`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shape.options.innerDiameter` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shape.options.innerDiameter`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shape.options.lineWidth` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shape.options.lineWidth`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shape.options.points` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shape.options.points`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.shape.options.sides` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.shape.options.sides`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.stroke` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.stroke`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.stroke.color` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.stroke.color`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.stroke.cornerGeometry` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.stroke.cornerGeometry`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.stroke.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.stroke.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.stroke.style` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.stroke.style`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.stroke.width` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.stroke.width`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.advanced` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.advanced`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.alignment` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.alignment`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.background` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.background`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.decoration` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.decoration`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.edit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.edit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.fontSize` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.fontSize`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.fontStyle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.fontStyle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.list` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.list`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.list.ordered` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.list.ordered`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.list.unordered` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.list.unordered`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.text.typeface` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.text.typeface`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.transform` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.transform`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.transform.flip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.transform.flip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.transform.position` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.transform.position`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.transform.rotation` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.transform.rotation`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.transform.size` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.transform.size`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.vectorEdit` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.vectorEdit`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.vectorEdit.addMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.vectorEdit.addMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.vectorEdit.bendMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.vectorEdit.bendMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.vectorEdit.deleteMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.vectorEdit.deleteMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.vectorEdit.done` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.vectorEdit.done`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.vectorEdit.mirrorMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.vectorEdit.mirrorMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.vectorEdit.moveMode` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.vectorEdit.moveMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.addClip` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.addClip`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.audio` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.audio`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.caption` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.caption`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.clips` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.clips`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.controls` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.controls`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.controls.background` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.controls.background`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.controls.loop` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.controls.loop`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.controls.playback` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.controls.playback`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.controls.split` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.controls.split`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.controls.timelineZoom` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.controls.timelineZoom`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.controls.toggle` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.controls.toggle`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.overlays` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.overlays`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.timeline` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.timeline`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/) | | `settings.feature.video.timeline.ruler` | `string` | [`BuiltinTranslations`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builtintranslations/).[`settings.feature.video.timeline.ruler`](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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UILocationOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/uilocationoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Location options for non-positional UI areas. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `in` | `A` *extends* `"ly.img.dock"` | `"ly.img.canvas.bar"` ? `never` : `A` | The UI area to target. Cannot be 'ly.img.canvas.bar' or 'ly.img.dock' - use their specific location options instead. | | `when?` | [`OrderContextFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/)\<`A`> | Optional context for conditional ordering. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UpdateResult" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/updateresult/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Result of an update operation on a single area. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `updated` | `number` | Number of components that were updated. | | `order` | [`OrderComponentFor`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentfor/)\<`A`>\[] | The new order after the update. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: UserInterface" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/userinterface/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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`\[] | **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.color.palette', '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.color.palette', '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`\[]) | **Deprecated** Add asset sources using `cesdk.engine.asset.addAssetSource()` or `cesdk.engine.asset.addLocalSource()`, then use `cesdk.ui.updateAssetLibraryEntry('ly.img.pagePresets', { sourceIds: ... })` to configure which sources to display. For dynamic source IDs, use a callback function with the new API: `{ sourceIds: ({ engine }) => [...] }` **Example** `// Before (deprecated): const config = { ui: { pagePresetsLibraries: ['ly.img.page.presets'] } }; // After (recommended): // Add a local source for custom page presets engine.asset.addLocalSource('my.custom.pagePresets'); // Add page preset assets to the source engine.asset.addAssetToSource('my.custom.pagePresets', { id: 'custom-preset-1', payload: { transformPreset: { type: 'FixedSize', width: 800, height: 600 } } }); // Update the library entry with dynamic sourceIds cesdk.ui.updateAssetLibraryEntry('ly.img.pagePresets', { sourceIds: ({ engine }) => { return ['ly.img.page.presets', 'my.custom.pagePresets']; } });` | | ~~`cropPresetsLibraries?`~~ | `string`\[] | ((`engine`) => `string`\[]) | **Deprecated** Add asset sources using `cesdk.engine.asset.addAssetSource()` or `cesdk.engine.asset.addLocalSource()`, then use `cesdk.ui.updateAssetLibraryEntry('ly.img.cropPresets', { sourceIds: ... })` to configure which sources to display. For dynamic source IDs, use a callback function with the new API: `{ sourceIds: ({ engine }) => [...] }` **Example** `// Before (deprecated): const config = { ui: { cropPresetsLibraries: ['ly.img.crop.presets'] } }; // After (recommended): // Add a local source for custom crop presets engine.asset.addLocalSource('my.custom.cropPresets'); // Add crop preset assets to the source engine.asset.addAssetToSource('my.custom.cropPresets', { id: 'custom-crop-1', payload: { transformPreset: { type: 'FixedAspectRatio', width: 16, height: 9 } } }); // Update the library entry to use your sources cesdk.ui.updateAssetLibraryEntry('ly.img.cropPresets', { sourceIds: ['ly.img.crop.presets', 'my.custom.cropPresets'] });` | | ~~`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'] });` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: VideoClipMenuOrderContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/videoclipmenuordercontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Context for the clip context menu which adds clip type filtering. ## Extends - [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) ## Properties | Property | Type | Inherited from | | ------ | ------ | ------ | | `editMode?` | `EditMode` | [`OrderContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/).[`editMode`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercontext/) | | `clipType?` | [`VideoClipType`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videocliptype/) | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ActionFunction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionfunction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 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) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ActionId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/actionid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnyUILocationOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/anyuilocationoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnyUILocationOptions = A extends "ly.img.canvas.bar" ? CanvasBarLocationOptions : A extends "ly.img.dock" ? DockLocationOptions : UILocationOptions; ``` Union type for location options. Resolves to the appropriate options type based on area-specific requirements. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetEntryId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetentryid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetEntryId = | "ly.img.templates" | "ly.img.upload" | "ly.img.image" | "ly.img.video" | "ly.img.audio" | "ly.img.text" | "ly.img.vector.shape" | "ly.img.sticker" | "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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetLibraryDockComponent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetlibrarydockcomponent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | 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. | | `isSelected?` | `boolean` | (() => `boolean`) | Controls the selected state of the button. If provided, overrides the automatic detection. Can be a boolean or a function that returns a boolean for reactive updates. | | `isDisabled?` | `boolean` | (() => `boolean`) | Controls the disabled state of the button. If provided, overrides the automatic detection. Can be a boolean or a function that returns a boolean for reactive updates. | | `size?` | `"normal"` | `"large"` | Size of the button. Defaults to 'normal'. | | `variant?` | `"regular"` | `"plain"` | Visual variant of the button. Defaults to 'regular'. | | `color?` | `"accent"` | `"danger"` | Color scheme of the button. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetLibraryPanelPayload" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/assetlibrarypanelpayload/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | Description | | ------ | ------ | ------ | | `title?` | `string` | `string`\[] | - | | `entries?` | `string`\[] | - | | `applyAssetContext?` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | Context for asset application. Passed directly to engine.asset.apply() when an asset is selected. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BuilderRenderFunction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/builderrenderfunction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type BuilderRenderFunction

= (context) => void; ``` Function that defines a component with the help of the passed builder object. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `P` | `object` | ## Parameters | Parameter | Type | | ------ | ------ | | `context` | [`BuilderRenderFunctionContext`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/builderrenderfunctioncontext/)\<`P`> | ## Returns `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CanvasBarComponentId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasbarcomponentid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CanvasMenuComponentId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponentid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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.underline.canvasMenu" | "ly.img.text.strikethrough.canvasMenu" | "ly.img.text.variables.canvasMenu" | string & object; ``` A list of the component IDs that can be used in the canvas menu. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CanvasMenuComponents" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenucomponents/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CanvasMenuComponents = | CanvasMenuActionButton | CanvasMenuOptionsComponent | CanvasMenuCustomActionButton; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CanvasMenuOrderComponent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/canvasmenuordercomponent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CanvasMenuOrderComponent = | CanvasMenuComponents | OrderComponentWithChildren; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CaptionPanelComponentId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/captionpanelcomponentid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CaptionPanelComponentId = | "ly.img.section" | "ly.img.separator" | "ly.img.spacer" | "ly.img.caption.panel.create" | "ly.img.caption.panel.import" | "ly.img.caption.panel.tabs" | "ly.img.caption.panel.captions" | "ly.img.caption.panel.add" | "ly.img.caption.panel.presets" | string & object; ``` Represents the ID of a caption panel component. The CaptionPanelComponentId type defines the possible IDs for components that can be used in the caption panel. It includes predefined IDs for sections, separators, spacers, and various caption panel items, as well as a catch-all type for custom IDs. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ChildrenOrder" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/childrenorder/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ClipContextMenuComponentId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/clipcontextmenucomponentid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ClipContextMenuComponentId = | "ly.img.separator" | "ly.img.video.clip.menu.moveLeft" | "ly.img.video.clip.menu.moveRight" | "ly.img.video.clip.menu.bringForward" | "ly.img.video.clip.menu.sendBackward" | "ly.img.video.clip.menu.setAsOverlay" | "ly.img.video.clip.menu.setAsClip" | "ly.img.video.clip.menu.mute" | "ly.img.video.clip.menu.trim" | "ly.img.video.clip.menu.caption.merge" | "ly.img.video.clip.menu.caption.add" | "ly.img.video.clip.menu.replace" | "ly.img.video.clip.menu.placeholder" | "ly.img.video.clip.menu.duplicate" | "ly.img.video.clip.menu.delete" | "ly.img.video.clip.menu.action" | string & object; ``` Represents the ID of a video clip menu component. The ClipContextMenuComponentId type defines the possible IDs for components that can be used in the video clip context menu. It includes predefined IDs for separators and various clip menu items, as well as a catch-all type for custom IDs. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ComponentGlobPattern" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentglobpattern/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ComponentGlobPattern = `${string}*` | `*${string}` | `*${string}*`; ``` A glob pattern for matching component IDs. Examples: - `'ly.img.*'` matches all ly.img components - `'*.separator'` matches all separator components --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ComponentId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ComponentId = | DockOrderComponentId | CanvasMenuComponentId | NavigationBarComponentId | CanvasBarComponentId | InspectorBarComponentId | CaptionPanelComponentId | ClipContextMenuComponentId; ``` 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ComponentIdFor" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentidfor/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ComponentIdFor = object[A]; ``` Maps UI areas to their component ID types. ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ComponentMatcher" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentmatcher/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ComponentMatcher = | "first" | "last" | number | C["id"] | ComponentGlobPattern | Partial | ((component, index) => boolean); ``` Unified component matcher type supporting all matching strategies. - `'first'` / `'last'` - Match first or last component - `number` - Match by index (0, 1, -1, etc.) - `C['id']` - Match by exact ID (with autocomplete for known IDs) - `ComponentGlobPattern` - Match by glob pattern (e.g., `'ly.img.*'`) - `Partial` - Match by partial properties (e.g., `{ id: 'x', key: 'y' }`) - `(component, index) => boolean` - Custom predicate function ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `C` *extends* [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ComponentSpec" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentspec/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ComponentSpec = | ComponentIdFor | OrderComponentFor; ``` Specifies a component either by ID or as a full component object. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ComponentSpecOrArray" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/componentspecorarray/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ComponentSpecOrArray = | ComponentSpec | ComponentSpec[]; ``` Specifies one or more components for insertion. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Configuration" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/configuration/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type Configuration = Partial; ``` Represents the user-provided configuration for the Creative Editor SDK. This type allows for partial configuration settings, making all properties optional. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CopyAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/copyaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CopyAction = () => void | Promise; ``` Action function for copying selected blocks to the clipboard ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CustomActionFunction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/customactionfunction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CustomActionFunction = (...args) => any | Promise; ``` A generic action function type for custom actions. Supports both synchronous and asynchronous implementations with flexible parameters. ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | ...`args` | `any`\[] | Variable number of arguments of any type | ## Returns `any` | `Promise`\<`any`> Any value or a promise that resolves to any value --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CustomPanelMountFunction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/custompanelmountfunction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Parameter | Type | | ------ | ------ | | `domElement` | `HTMLDivElement` | ## Returns [`PanelDisposer`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneldisposer/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DeleteAssetAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/deleteassetaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DeleteAssetAction = (params) => void | Promise; ``` Action function for deleting an asset from an asset source. The default implementation opens a confirmation dialog and, on confirm, calls `engine.asset.removeAssetFromSource(sourceId, asset.id)` followed by `engine.asset.assetSourceContentsChanged(sourceId)`. Register a custom implementation to replace the dialog content, swap in a custom dialog, or change the deletion behavior entirely. The asset and its source id are provided so handlers can derive per-asset context (e.g. metadata, page number) for their custom UI. ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `params` | \{ `sourceId`: `string`; `asset`: [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/); } | The asset to delete and the id of its source | | `params.sourceId` | `string` | - | | `params.asset` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | - | ## Returns `void` | `Promise`\<`void`> A promise that resolves when the delete operation is complete, or void for synchronous operations --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DialogAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `variant?` | `"regular"` | `"plain"` | | `color?` | `"accent"` | `"danger"` | | `label` | `string` | | `onClick` | (`context`) => `void` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DialogBackdrop" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogbackdrop/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DialogBackdrop = "transparent" | "opaque"; ``` Represents the backdrop style for the dialog. The DialogBackdrop type defines how the background overlay is rendered when a dialog is shown. - 'transparent': A semi-transparent overlay that allows content behind to be partially visible (default behavior) - 'opaque': A fully opaque overlay that completely blocks the view of content behind the dialog --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DialogContent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogcontent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DialogProgress" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogprogress/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DialogSize" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogsize/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DialogType" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dialogtype/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DockOrderComponent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DockOrderComponentId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockordercomponentid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DockOrderComponentId = | "ly.img.separator" | "ly.img.spacer" | "ly.img.assetLibrary.dock" | 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DockPosition" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/dockposition/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DockPosition = "left" | "right" | "bottom"; ``` Valid positions for the dock: `'left'`, `'right'`, or `'bottom'`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EditorCheckBrowserSupportAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editorcheckbrowsersupportaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type EditorCheckBrowserSupportAction = (params?) => Promise; ``` Action for checking browser capabilities at editor startup. Idempotent: only runs checks once per editor lifetime. When called with explicit params, uses them directly (no scene needed). When called without params, reads scene mode for defaults. ## Parameters | Parameter | Type | | ------ | ------ | | `params?` | \{ `videoDecode?`: [`UnsupportedCapabilityBehavior`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unsupportedcapabilitybehavior/); `videoEncode?`: [`UnsupportedCapabilityBehavior`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unsupportedcapabilitybehavior/); } | | `params.videoDecode?` | [`UnsupportedCapabilityBehavior`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unsupportedcapabilitybehavior/) | | `params.videoEncode?` | [`UnsupportedCapabilityBehavior`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unsupportedcapabilitybehavior/) | ## Returns `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EditorPluginContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/editorplugincontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type EditorPluginContext = AddImageOptions & object; ``` Represents the context for an editor plugin. This type extends the `EnginePluginContext` with an optional `cesdk` property. ## Type Declaration | Name | Type | | ------ | ------ | | `cesdk?` | [`CreativeEditorSDK`](https://img.ly/docs/cesdk/angular/api/cesdk-js/classes/creativeeditorsdk/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ExportAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/exportaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | Optional export configuration for standard or video exports | ## Returns `void` | `Promise`\<`void`> A promise that resolves when the export operation is complete, or void for synchronous operations --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ExportSceneAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/exportsceneaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ExportSceneAction = (options) => void | Promise; ``` Action function for handling scene export operations. ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | \{ `format`: `"scene"` | `"archive"`; } | Options for configuring the export operation - options.format: The format of the exported scene data. - options.scene: The scene data to export. | | `options.format` | `"scene"` | `"archive"` | - | ## Returns `void` | `Promise`\<`void`> A promise that resolves when the export operation is complete, or void for synchronous operations --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FeatureId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featureid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type FeatureId = | "ly.img.navigation" | "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.navigation.documentSettings" | "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.audio" | "ly.img.placeholder.audio.change" | "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" | "ly.img.page.move" | "ly.img.page.add" | "ly.img.page.resize" | "ly.img.page.settings" | "ly.img.page.bleedMargin" | "ly.img.page.clipContent" | "ly.img.scene.layout" | "ly.img.scene.layout.horizontal" | "ly.img.scene.layout.vertical" | "ly.img.scene.layout.free" | "ly.img.scene.fontSizeUnit" | "ly.img.group" | "ly.img.group.create" | "ly.img.group.ungroup" | "ly.img.group.enter" | "ly.img.group.select" | "ly.img.replace" | "ly.img.replace.fill" | "ly.img.replace.shape" | "ly.img.replace.audio" | "ly.img.text" | "ly.img.text.edit" | "ly.img.text.typeface" | "ly.img.text.fontSize" | "ly.img.text.fontStyle" | "ly.img.text.decoration" | "ly.img.text.alignment" | "ly.img.text.list" | "ly.img.text.list.unordered" | "ly.img.text.list.ordered" | "ly.img.text.advanced" | "ly.img.text.background" | "ly.img.text.background.picker" | "ly.img.text.background.picker.opacity" | "ly.img.text.background.library" | "ly.img.adjustment" | "ly.img.filter" | "ly.img.effect" | "ly.img.blur" | "ly.img.shadow" | "ly.img.shadow.color" | "ly.img.shadow.color.picker" | "ly.img.shadow.color.picker.opacity" | "ly.img.shadow.color.library" | "ly.img.shadow.offset" | "ly.img.shadow.blur" | "ly.img.cutout" | "ly.img.fill" | "ly.img.fill.color" | "ly.img.fill.color.picker" | "ly.img.fill.color.picker.opacity" | "ly.img.fill.color.picker.gradient" | "ly.img.fill.color.library" | "ly.img.fill.image" | "ly.img.fill.video" | "ly.img.shape.options" | "ly.img.shape.options.cornerRadius" | "ly.img.shape.options.points" | "ly.img.shape.options.innerDiameter" | "ly.img.shape.options.sides" | "ly.img.shape.options.lineWidth" | "ly.img.shape.edit" | "ly.img.vectorEdit" | "ly.img.vectorEdit.moveMode" | "ly.img.vectorEdit.addMode" | "ly.img.vectorEdit.deleteMode" | "ly.img.vectorEdit.bendMode" | "ly.img.vectorEdit.mirrorMode" | "ly.img.vectorEdit.done" | "ly.img.combine" | "ly.img.combine.union" | "ly.img.combine.subtract" | "ly.img.combine.intersect" | "ly.img.combine.exclude" | "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.fillAlignment" | "ly.img.crop.scale" | "ly.img.crop.position" | "ly.img.crop.panel.autoOpen" | "ly.img.volume" | "ly.img.playbackSpeed" | "ly.img.stroke" | "ly.img.stroke.color" | "ly.img.stroke.color.picker" | "ly.img.stroke.color.picker.opacity" | "ly.img.stroke.color.library" | "ly.img.stroke.width" | "ly.img.stroke.style" | "ly.img.stroke.position" | "ly.img.stroke.cornerGeometry" | "ly.img.stroke.cap" | "ly.img.stroke.dash" | "ly.img.position" | "ly.img.position.arrange" | "ly.img.position.align" | "ly.img.position.distribute" | "ly.img.animations" | "ly.img.opacity" | "ly.img.blendMode" | "ly.img.video" | "ly.img.video.timeline" | "ly.img.video.timeline.ruler" | "ly.img.video.timeline.clips" | "ly.img.video.timeline.overlays" | "ly.img.video.timeline.audio" | "ly.img.video.timeline.addClip" | "ly.img.video.timeline.controls" | "ly.img.video.timeline.controls.toggle" | "ly.img.video.timeline.controls.background" | "ly.img.video.timeline.controls.playback" | "ly.img.video.timeline.controls.loop" | "ly.img.video.timeline.controls.split" | "ly.img.video.timeline.controls.timelineZoom" | "ly.img.video.caption" | "ly.img.transform" | "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.dock" | "ly.img.rulers" | "ly.img.canvas" | "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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FeaturePredicate" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicate/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FeaturePredicateContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/featurepredicatecontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Name | Type | | ------ | ------ | | `isPreviousEnable()` | () => `boolean` | | `defaultPredicate()` | () => `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FileMimeType" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/filemimetype/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type FileMimeType = | "image/png" | "image/jpeg" | "image/webp" | "image/x-tga" | "image/svg+xml" | "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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: GetOrderOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/getorderoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type GetOrderOptions = AnyUILocationOptions; ``` Options for getting component order. Only single area queries are supported to ensure type-safe returns. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: GlobPattern" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/globpattern/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type GlobPattern = `${string}*` | `*${string}` | `*${string}*` | "*"; ``` A glob pattern string for matching UI areas or component IDs. Supports `*` as a wildcard. Examples: - `'ly.img.canvas.*'` matches 'ly.img.canvas.bar' and 'ly.img.canvas.menu' - `'ly.img.*.bar'` matches 'ly.img.canvas.bar', 'ly.img.inspector.bar', 'ly.img.navigation.bar' - `'*'` matches all areas --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ImportSceneAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/importsceneaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ImportSceneAction = (options) => void | Promise; ``` Action function for handling scene import operations. ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options` | \{ `format?`: `"scene"` | `"archive"`; } | Options for configuring the import operation - options.format: The format of the imported scene data. | | `options.format?` | `"scene"` | `"archive"` | - | ## Returns `void` | `Promise`\<`void`> A promise that resolves with the imported scene data as a string, or the scene data directly --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: InferComponentType" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/infercomponenttype/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type InferComponentType = A extends UIArea ? OrderComponentFor : A extends UIArea[] ? OrderComponentFor : OrderComponent; ``` Infers the component type from a UI area specifier. - Single area: returns area-specific component type - Array of areas: returns union of component types - Glob pattern: returns base OrderComponent (all IDs) ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIAreaSpecifier`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareaspecifier/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: InferOrderContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inferordercontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type InferOrderContext = A extends UIArea ? OrderContextFor : A extends UIArea[] ? OrderContextFor : OrderContext; ``` Infers the order context type from a UI area specifier. - Single area: returns area-specific context type - Array of areas: returns union of context types - Glob pattern: returns base OrderContext (all areas) ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIAreaSpecifier`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareaspecifier/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: InsertComponentOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertcomponentoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type InsertComponentOptions = A extends PositionalUIArea ? | PositionalInsertBeforeOptions | PositionalInsertAfterOptions | PositionalInsertAtPositionOptions | PositionalInsertAppendOptions : A extends Exclude ? | InsertBeforeOptions | InsertAfterOptions | InsertAtPositionOptions | InsertAppendOptions : never; ``` Options for inserting a component into a UI area. Supports mutual exclusion: only one of `before`, `after`, or `position` can be specified. Positional areas (like canvas bar) require the `at` property to specify which slot. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: InsertOrderComponentLocation" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/insertordercomponentlocation/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: InspectorBarComponentId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/inspectorbarcomponentid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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.appearance.inspectorBar" | "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" | "ly.img.vectorEdit.moveMode.inspectorBar" | "ly.img.vectorEdit.addMode.inspectorBar" | "ly.img.vectorEdit.deleteMode.inspectorBar" | "ly.img.vectorEdit.bendMode.inspectorBar" | "ly.img.vectorEdit.mirrorMode.inspectorBar" | "ly.img.vectorEdit.done.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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: IsEnabledFeatureContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/isenabledfeaturecontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type IsEnabledFeatureContext = object; ``` Represents the context for determining if a feature is enabled. This type includes the `CreativeEngine` instance. ## Properties | Property | Type | | ------ | ------ | | `engine` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: LoadingComponent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/loadingcomponent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type LoadingComponent = | { id: "ly.img.loading.spinner"; key?: string; } | { id: "ly.img.loading.heading"; key?: string; content: string; } | { id: "ly.img.loading.text"; key?: string; content: string; }; ``` Represents a loading indicator component. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: LoadingOrder" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/loadingorder/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type LoadingOrder = ( | LoadingComponent["id"] | LoadingComponent)[]; ``` Order type for loading indicator components. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: LocaleKey" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/localekey/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type LocaleKey = "en" | "de" | string; ``` Represents the supported locale keys for the Creative Editor SDK. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: MultiAreaRemoveResult" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/multiarearemoveresult/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type MultiAreaRemoveResult = { [K in UIArea]?: RemoveResult }; ``` Result of a multi-area remove operation. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: MultiAreaUpdateResult" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/multiareaupdateresult/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type MultiAreaUpdateResult = { [K in UIArea]?: UpdateResult }; ``` Result of a multi-area update operation. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: NavigationBarComponentId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponentid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type NavigationBarComponentId = | "ly.img.separator" | "ly.img.spacer" | "ly.img.back.navigationBar" | "ly.img.undoRedo.navigationBar" | "ly.img.documentSettings.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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: NavigationBarComponents" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarcomponents/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type NavigationBarComponents = | NavigationBarActionButton | NavigationBarCustomActionButton; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: NavigationBarOrderComponent" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/navigationbarordercomponent/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type NavigationBarOrderComponent = | NavigationBarComponents | OrderComponentWithChildren; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: NotificationDuration" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/notificationduration/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: NotificationType" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/notificationtype/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OnExportOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onexportoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type OnExportOptions = AddImageOptions & object; ``` This interface extends the base ExportOptions with additional information about the export, including which design blocks were exported and the mimeType. ## Type Declaration | Name | Type | | ------ | ------ | | `mimeType` | `Required`\<[`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/)>\[`"mimeType"`] | | `exportedBlocks?` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/)\[] | ## See - ExportOptions For base export configuration options - DesignBlockId For design block identifier type --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OnExportVideoOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onexportvideooptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type OnExportVideoOptions = AddImageOptions & object; ``` This interface extends the base VideoExportOptions with additional information about the export, including which design blocks were exported and the mimeType. ## Type Declaration | Name | Type | | ------ | ------ | | `mimeType` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | | `exportedBlocks?` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/)\[] | ## See - VideoExportOptions For base export configuration options - DesignBlockId For design block identifier type --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OnUnsupportedBrowserAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/onunsupportedbrowseraction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type OnUnsupportedBrowserAction = () => void; ``` Action function that is invoked when an unsupported browser is detected. This allows custom handling of unsupported browser scenarios. ## Returns `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Optional" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/optional/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type Optional = Omit & Partial; ``` Turn value at K of T into a Partial ## Type Parameters | Type Parameter | | ------ | | `T` | | `K` *extends* keyof `T` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OrderComponentFor" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentfor/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type OrderComponentFor = object[A]; ``` Maps UI areas to their order component types. ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OrderComponentMatcher" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercomponentmatcher/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 Parameter | | ------ | | `C` *extends* [`OrderComponent`](https://img.ly/docs/cesdk/angular/api/cesdk-js/interfaces/ordercomponent/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OrderContextFor" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/ordercontextfor/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type OrderContextFor = A extends "ly.img.caption.panel" ? CaptionPanelOrderContext : A extends "ly.img.video.clip.menu" ? VideoClipMenuOrderContext : OrderContext; ``` Maps a UI area to its appropriate order context type for public API usage. - Caption panel uses CaptionPanelOrderContext (adds view property) - Video clip menu uses VideoClipMenuOrderContext (adds clipType) - All other areas use OrderContext (editMode only) ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PageAssetReference" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pageassetreference/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PageAssetReference = object; ``` Reference to a page preset from an asset source. ## Properties | Property | Type | | ------ | ------ | | `sourceId` | `string` | | `assetId` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PageDimensions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pagedimensions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PageDimensions = object; ``` Direct page dimensions specification. ## Properties | Property | Type | | ------ | ------ | | `width` | `number` | | `height` | `number` | | `unit` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | | `fixedOrientation?` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PageFormatDefinition" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pageformatdefinition/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `default?` | `boolean` | | `width` | `number` | | `height` | `number` | | `unit` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | | `fixedOrientation?` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PageResizePanelPayload" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pageresizepanelpayload/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PageResizePanelPayload = object; ``` Represents the payload for the page resize panel in the Creative Editor SDK. ## Properties | Property | Type | | ------ | ------ | | `intent?` | `"allPages"` | `"selectedPages"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PageSpec" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pagespec/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PageSpec = | PageDimensions | PageAssetReference | AddImageOptions & object; ``` A page can be specified as direct dimensions, an asset source reference, or an asset object (e.g., from engine.asset.fetchAsset()). All variants optionally accept a `color` to set the page fill color. ## Type Declaration | Name | Type | Description | | ------ | ------ | ------ | | `color?` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | Fill color for the page. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PanelDisposer" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneldisposer/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PanelId" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PanelOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/paneloptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 Parameter | | ------ | | `T` *extends* [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | ## Properties | Property | Type | | ------ | ------ | | `closableByUser?` | `boolean` | | `position?` | [`PanelPosition`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelposition/) | | `floating?` | `boolean` | | `payload?` | [`PanelPayload`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelpayload/)\<`T`> | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PanelPayload" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelpayload/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PanelPayload = T extends "//ly.img.panel/assetLibrary" ? AssetLibraryPanelPayload : T extends "//ly.img.panel/inspector/pageResize" ? PageResizePanelPayload : 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 Parameter | | ------ | | `T` *extends* [`PanelId`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelid/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PanelPosition" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/panelposition/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PanelPosition = "left" | "right" | "bottom"; ``` This type 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PasteAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/pasteaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PasteAction = () => void | Promise; ``` Action function for pasting blocks from the clipboard ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PositionalUIArea" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PositionalUIArea = "ly.img.canvas.bar"; ``` UI areas where `at` is required to specify a slot. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PositionFor" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionfor/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PositionFor = A extends "ly.img.canvas.bar" ? CanvasBarPosition : never; ``` Maps positional UI areas to their valid `at` values. ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`PositionalUIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/positionaluiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PreviewType" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtype/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PreviewTypeColor" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtypecolor/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `type` | `"color"` | | `color` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PreviewTypeImage" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/previewtypeimage/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `type` | `"image"` | | `uri` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SaveSceneAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/savesceneaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SaveSceneAction = () => void | Promise; ``` Action function for handling scene saving operations. ## Returns `void` | `Promise`\<`void`> A promise that resolves when the save operation is complete, or void for synchronous operations --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SceneCreateAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scenecreateaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SceneCreateAction = (options?) => Promise; ``` Action for creating a new scene with configurable mode and page sizes. Returns the scene block ID. ## Parameters | Parameter | Type | | ------ | ------ | | `options?` | [`SceneCreateOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scenecreateoptions/) | ## Returns `Promise`\<`number`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SceneCreateOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scenecreateoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SceneCreateOptions = object & | { page?: PageSpec; pageCount?: number; pages?: never; } | { pages: PageSpec[]; page?: never; pageCount?: never; }; ``` Options for creating a new scene. ## Type Declaration | Name | Type | Description | | ------ | ------ | ------ | | `mode?` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | Scene mode. Defaults to null (unified mode with all features enabled). **Deprecated** Scene mode is deprecated. New scenes should use the default null mode. | | `layout?` | [`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/) | Scene layout. Defaults to 'VerticalStack' for Design, ignored for Video. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ScrollToBlockAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scrolltoblockaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ScrollToBlockAction = (blockId, options?) => Promise; ``` Action function for scrolling to a specific block ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `blockId` | `number` | - | | `options?` | \{ `animate?`: `boolean`; } | - | | `options.animate?` | `boolean` | Whether to animate the scroll (default: false) | ## Returns `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ScrollToPageAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/scrolltopageaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ScrollToPageAction = (options?) => Promise; ``` Action function for scrolling to a specific page ## 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 `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SetOrderOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/setorderoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SetOrderOptions = AnyUILocationOptions; ``` Options for setting component order. Single area only for type safety with area-specific component types. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ShareSceneAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/sharesceneaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ShareSceneAction = () => void | Promise; ``` Action function for handling scene sharing operations. ## Returns `void` | `Promise`\<`void`> A promise that resolves when the share operation is complete, or void for synchronous operations --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Suffix" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/suffix/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TimelineCollapseAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinecollapseaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TimelineCollapseAction = () => void | Promise; ``` Action function for collapsing the video timeline. ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TimelineExpandAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelineexpandaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TimelineExpandAction = () => void | Promise; ``` Action function for expanding the video timeline. ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TimelineZoomInAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoominaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TimelineZoomInAction = () => void | Promise; ``` Action function for zooming in the video timeline by one step. ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TimelineZoomOutAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomoutaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TimelineZoomOutAction = () => void | Promise; ``` Action function for zooming out the video timeline by one step. ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TimelineZoomResetAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomresetaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TimelineZoomResetAction = () => void | Promise; ``` Action function for resetting the video timeline zoom to default level (1.0). ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TimelineZoomToFitAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomtofitaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TimelineZoomToFitAction = () => void | Promise; ``` Action function for fitting the video timeline to show all content. ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TimelineZoomToLevelAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/timelinezoomtolevelaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TimelineZoomToLevelAction = (level) => void | Promise; ``` Action function for setting the video timeline zoom to a specific level. ## Parameters | Parameter | Type | | ------ | ------ | | `level` | `number` | ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UIArea" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type UIArea = | "ly.img.dock" | "ly.img.inspector.bar" | "ly.img.canvas.menu" | "ly.img.navigation.bar" | "ly.img.canvas.bar" | "ly.img.caption.panel" | "ly.img.video.clip.menu"; ``` Represents a UI area where components can be ordered. Uses the `ly.img.*` naming convention consistent with Feature IDs. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UIAreaContext" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareacontext/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type UIAreaContext = Omit, keyof OrderContext>; ``` UI area-specific context - excludes base OrderContext properties (like editMode) that are read-only and derived from the engine. For 'ly.img.caption.panel': `\{ view?: 'create' | 'edit' | 'style' \}` For 'ly.img.video.clip.menu': `\{ clipType?: 'clip' | 'overlay' | 'caption' \}` For other areas: `\{\}` (nothing area-specific) ## Type Parameters | Type Parameter | | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UIAreaSpecifier" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiareaspecifier/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type UIAreaSpecifier = | UIArea | UIArea[] | GlobPattern; ``` Specifies which UI area(s) to target. Can be a single area, an array of areas, or a glob pattern. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UnknownPanelPayload" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unknownpanelpayload/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 ```ts [key: string]: unknown ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UnknownTranslations" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unknowntranslations/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type UnknownTranslations = object; ``` Allows for custom translation keys beyond the built-in ones. ## Index Signature ```ts [key: string]: | string | { } ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UnsupportedCapabilityBehavior" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/unsupportedcapabilitybehavior/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type UnsupportedCapabilityBehavior = "block" | "warn" | "ignore"; ``` Behavior for a browser capability check at editor startup. - `'block'`: Show a blocking error dialog (no dismiss) - `'warn'`: Show a dismissible warning dialog - `'ignore'`: Skip the check entirely --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UpdateSpec" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/updatespec/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type UpdateSpec = | ComponentIdFor | Partial> | ((component) => Partial>); ``` Specifies an update either as a new ID, partial update, or updater function. ## Type Parameters | Type Parameter | Default type | | ------ | ------ | | `A` *extends* [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | [`UIArea`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uiarea/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: UploadAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/uploadaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type UploadAction = (file, onProgress, context?) => Promise; ``` Action function for uploading files to asset sources. ## 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 `Promise`\<[`AddImageOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/)> A promise that resolves with the uploaded asset definition --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: VideoClipType" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videocliptype/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type VideoClipType = "clip" | "overlay" | "caption"; ``` The type of clip in the video timeline. - `'clip'` — clips on the main (background) track - `'overlay'` — clips on overlay tracks above the main track - `'caption'` — caption clips --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: VideoDecodeCheckSupportAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videodecodechecksupportaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type VideoDecodeCheckSupportAction = (options?) => boolean; ``` Action function for checking video decoding/playback support. Returns true if WebCodecs APIs are available for video decoding and playback. Shows a blocking error dialog if not supported (unless dialog is disabled). ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `dialog?`: | `boolean` | [`VideoSupportDialogOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videosupportdialogoptions/); } | Options for configuring the action behavior - dialog: false to disable the dialog, true for default, or VideoSupportDialogOptions for fine control | | `options.dialog?` | | `boolean` | [`VideoSupportDialogOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videosupportdialogoptions/) | - | ## Returns `boolean` true if video decoding is supported, false otherwise --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: VideoEncodeCheckSupportAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videoencodechecksupportaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type VideoEncodeCheckSupportAction = (options?) => Promise; ``` Action function for checking video encoding/export support. Returns true if H.264 video encoding and AAC audio encoding are supported. Shows a warning dialog if not supported (unless dialog is disabled). ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `dialog?`: | `boolean` | [`VideoSupportDialogOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videosupportdialogoptions/); } | Options for configuring the action behavior - dialog: false to disable the dialog, true for default, or VideoSupportDialogOptions for fine control | | `options.dialog?` | | `boolean` | [`VideoSupportDialogOptions`](https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videosupportdialogoptions/) | - | ## Returns `Promise`\<`boolean`> A promise that resolves to true if video encoding is supported, false otherwise --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: VideoSupportDialogOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/videosupportdialogoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type VideoSupportDialogOptions = object; ``` Dialog display options for video support check actions. Allows configuring whether and how the dialog is displayed. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `show` | `boolean` | Whether to show the dialog | | `backdrop?` | `"transparent"` | `"opaque"` | Backdrop style for the dialog - 'transparent' allows interaction with the page, 'opaque' blocks it | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ViewStyle" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/viewstyle/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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'. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ZoomInAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoominaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ZoomInAction = (options?) => void | Promise; ``` Action function for zooming in by one step ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `stepSize?`: `number`; `animate?`: | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; }; `maxZoom?`: `number`; } | - | | `options.stepSize?` | `number` | Custom step size for zoom in (default uses predefined steps) | | `options.animate?` | | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; } | Animation configuration - boolean for default animation or object for custom settings | | `options.maxZoom?` | `number` | Maximum allowed zoom level (default: 32) | ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ZoomOutAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomoutaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ZoomOutAction = (options?) => void | Promise; ``` Action function for zooming out by one step ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `stepSize?`: `number`; `animate?`: | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; }; `minZoom?`: `number`; } | - | | `options.stepSize?` | `number` | Custom step size for zoom out (default uses predefined steps) | | `options.animate?` | | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; } | Animation configuration - boolean for default animation or object for custom settings | | `options.minZoom?` | `number` | Minimum allowed zoom level (default: 0.125) | ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ZoomToBlockAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtoblockaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ZoomToBlockAction = (blockId, options?) => Promise; ``` Action function for zooming to a specific block ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `blockId` | `number` | - | | `options?` | \{ `padding?`: | `number` | \{ `x?`: `number`; `y?`: `number`; } | \{ `top?`: `number`; `bottom?`: `number`; `left?`: `number`; `right?`: `number`; }; `animate?`: | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; }; `autoFit?`: `boolean`; } | - | | `options.padding?` | | `number` | \{ `x?`: `number`; `y?`: `number`; } | \{ `top?`: `number`; `bottom?`: `number`; `left?`: `number`; `right?`: `number`; } | Padding configuration around the block | | `options.animate?` | | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; } | Animation configuration - boolean for default animation or object for custom settings | | `options.autoFit?` | `boolean` | Whether to enable auto-fit mode after zooming (default: false) | ## Returns `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ZoomToLevelAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtolevelaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ZoomToLevelAction = (level, options?) => void | Promise; ``` Action function for setting zoom to a specific level ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `level` | `number` | - | | `options?` | \{ `animate?`: | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; }; `minZoom?`: `number`; `maxZoom?`: `number`; } | - | | `options.animate?` | | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; } | Animation configuration - boolean for default animation or object for custom settings | | `options.minZoom?` | `number` | Minimum allowed zoom level (default: 0.125) | | `options.maxZoom?` | `number` | Maximum allowed zoom level (default: 32) | ## Returns `void` | `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ZoomToPageAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtopageaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ZoomToPageAction = (options?) => Promise; ``` Action function for zooming to a page with optional padding ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `page?`: `"current"` | `"first"` | `"last"` | `number`; `padding?`: | `number` | \{ `x?`: `number`; `y?`: `number`; } | \{ `top?`: `number`; `bottom?`: `number`; `left?`: `number`; `right?`: `number`; }; `animate?`: | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; }; `autoFit?`: `boolean`; } | - | | `options.page?` | `"current"` | `"first"` | `"last"` | `number` | The page to zoom to - 'current' (default), 'first', 'last', or a numeric page index (0-based) | | `options.padding?` | | `number` | \{ `x?`: `number`; `y?`: `number`; } | \{ `top?`: `number`; `bottom?`: `number`; `left?`: `number`; `right?`: `number`; } | Padding configuration around the block | | `options.animate?` | | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; } | Animation configuration - boolean for default animation or object for custom settings | | `options.autoFit?` | `boolean` | Whether to enable auto-fit mode after zooming (default: false) | ## Returns `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ZoomToSelectionAction" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/type-aliases/zoomtoselectionaction/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ZoomToSelectionAction = (options?) => Promise; ``` Action function for zooming to the current selection ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `padding?`: | `number` | \{ `x?`: `number`; `y?`: `number`; } | \{ `top?`: `number`; `bottom?`: `number`; `left?`: `number`; `right?`: `number`; }; `animate?`: | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; }; `autoFit?`: `boolean`; } | - | | `options.padding?` | | `number` | \{ `x?`: `number`; `y?`: `number`; } | \{ `top?`: `number`; `bottom?`: `number`; `left?`: `number`; `right?`: `number`; } | Padding configuration around the block | | `options.animate?` | | `boolean` | \{ `duration?`: `number`; `easing?`: `"Linear"` | `"EaseIn"` | `"EaseOut"` | `"EaseInOut"`; `interruptible?`: `boolean`; } | Animation configuration - boolean for default animation or object for custom settings | | `options.autoFit?` | `boolean` | Whether to enable auto-fit mode after zooming (default: false) | ## Returns `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AddImageOptions" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/addimageoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts AddImageOptions: any; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: PanelPosition" description: "" platform: angular package: cesdk-js url: "https://img.ly/docs/cesdk/angular/api/cesdk-js/variables/panelposition/" --- > This is one page of the CE.SDK Angular `@cesdk/cesdk-js` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [cesdk-js API Index](https://img.ly/docs/cesdk/angular/api/cesdk-js/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts PanelPosition: object; ``` ## Type Declaration | Name | Type | | ------ | ------ | | `Left` | `"left"` | | `Right` | `"right"` | | `Bottom` | `"bottom"` | ## Deprecated Use the string literal type `PanelPosition` ('left' | 'right' | 'bottom') instead. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[cesdk-js API Reference](https://img.ly/docs/cesdk/angular/api/cesdk-js/)** - Full cesdk-js API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: AssetAPI" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/classes/assetapi/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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

### Constructor

AssetAPI

## Event Subscriptions Subscribe to asset source changes and lifecycle events.
### onAssetSourceAdded

Subscribe to asset source addition events.

```javascript engine.asset.onAssetSourceAdded((sourceID) => { console.log(`Added source: ${sourceID}`); }); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source is added. | #### Returns A method to unsubscribe from the event. () => `void` ***
### onAssetSourceRemoved

Subscribe to asset source removal events.

```javascript engine.asset.onAssetSourceRemoved((sourceID) => { console.log(`Removed source: ${sourceID}`); }); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source is removed. | #### Returns A method to unsubscribe from the event. () => `void` ***
### onAssetSourceUpdated

Subscribe to asset source content change events.

```javascript engine.asset.onAssetSourceUpdated((sourceID) => { console.log(`Updated source: ${sourceID}`); }); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | (`sourceID`) => `void` | The function called whenever an asset source's contents are updated. | #### Returns A method to unsubscribe from the event. () => `void`
## Asset Source Management Register, remove, and query asset sources for different types of media.
### 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. ```javascript 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `source` | [`AssetSource`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetsource/) | The asset source configuration. | #### Returns `void` #### Signature ```typescript addSource(source: AssetSource): void ``` ***
### 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. ```javascript engine.asset.addLocalSource('local-source'); ``` #### Parameters | 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 `void` #### Signature ```typescript addLocalSource(id: string, supportedMimeTypes?: string[], applyAsset?: (asset: CompleteAssetResult) => Promise, applyAssetToBlock?: (asset: CompleteAssetResult, block: number) => Promise): void ``` ***
### 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. Optionally, you can provide a `basePath` for resolving relative URLs and additional options including a `matcher` array to filter which assets are loaded based on their IDs. The matcher patterns support wildcard matching using `*`. If multiple patterns are provided, an asset is included if it matches ANY of the patterns. #### Parameters | 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. | | `options?` | \{ `matcher?`: `string`\[]; } | Optional configuration: - `matcher`: Array of patterns to filter assets by ID. Supports `*` wildcard. An asset is included if it matches ANY pattern. | | `options.matcher?` | `string`\[] | - | #### Returns `Promise`\<`string`> The ID of the newly created asset source (as specified in the JSON's `id` field). #### Example ```javascript // Load all assets from JSON 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" // Load with custom base path const sourceId2 = await engine.asset.addLocalAssetSourceFromJSONString( json, 'https://example.com/' ); // Load only assets matching one of the patterns const sourceId3 = await engine.asset.addLocalAssetSourceFromJSONString( json, undefined, { matcher: ['sample_*', '*_asset'] } ); // Load with custom base path and matcher const sourceId4 = await engine.asset.addLocalAssetSourceFromJSONString( json, 'https://example.com/', { matcher: ['portrait_*', 'landscape_*'] } ); ``` #### Signature ```typescript addLocalAssetSourceFromJSONString(contentJSON: string, basePath?: string, options?: object): Promise ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `contentURI` | `string` | The URI for the JSON file to load and parse. | | `options?` | \{ `matcher?`: `string`\[]; } | Optional configuration: - `matcher`: Array of patterns to filter assets by ID. Supports `*` wildcard. An asset is included if it matches ANY pattern. | | `options.matcher?` | `string`\[] | - | #### Returns `Promise`\<`string`> The ID of the newly created asset source (as specified in the JSON's `id` field). #### Example ```javascript // Load all audio assets from IMG.LY's CDN const sourceId = await engine.asset.addLocalAssetSourceFromJSONURI( 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/content.json' ); console.log('Loaded asset source:', sourceId); // "ly.img.audio" // Load only assets matching one of the patterns const sourceId2 = await engine.asset.addLocalAssetSourceFromJSONURI( 'https://cdn.img.ly/assets/demo/v3/ly.img.image/content.json', { matcher: ['image-portrait-*', 'image-landscape-*'] } ); ``` #### Signature ```typescript addLocalAssetSourceFromJSONURI(contentURI: string, options?: object): Promise ``` ***
### 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. ```javascript engine.asset.removeSource('asset-source-id'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `string` | The ID of the asset source to remove. | #### Returns `void` #### Signature ```typescript removeSource(id: string): void ``` ***
### findAllSources()

Get all registered asset source IDs.

```javascript engine.asset.findAllSources(); ``` #### Returns `string`\[] A list with the IDs of all registered asset sources. #### Signature ```typescript findAllSources(): string[] ```
## Asset Discovery Search and filter assets from registered sources with advanced query options.
### 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. ```javascript const result = await engine.asset.findAssets('asset-source-id', { page: 0, perPage: 100 }); const asset = result.assets[0]; ``` #### Parameters | 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 `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 ```typescript findAssets(sourceId: string, query: AssetQueryData): Promise> ``` ***
### fetchAsset()

Fetch a specific asset by ID from an asset source.

```javascript const asset = await engine.asset.fetchAsset('asset-source-id', 'asset-id', { locale: 'en-US' }); ``` #### Parameters | 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 `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 ```typescript fetchAsset(sourceId: string, assetId: string, params?: Pick): Promise ```
## Asset Information Retrieve metadata, credits, licenses, and supported formats from asset sources.
### getGroups()

Get available asset groups from a source.

Groups provide categorization for assets within a source, enabling filtered discovery. ```javascript const groups = engine.asset.getGroups(customSource.id); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `string` | The ID of the asset source. | #### Returns `Promise`\<`string`\[]> Promise resolving to list of available group names. #### Signature ```typescript getGroups(id: string): Promise ``` ***
### 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. ```javascript const mimeTypes = engine.asset.getSupportedMimeTypes('asset-source-id'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `sourceId` | `string` | The ID of the asset source. | #### Returns `string`\[] Array of supported MIME type strings. #### Signature ```typescript getSupportedMimeTypes(sourceId: string): string[] ``` ***
### getCredits()

Get attribution credits for an asset source.

```javascript const credits = engine.asset.getCredits('asset-source-id'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `sourceId` | `string` | The ID of the asset source. | #### Returns `object` The asset source's credits info consisting of a name and an optional URL. | Name | Type | | ------ | ------ | | `name` | `string` | | `url` | `string` | #### Signature ```typescript getCredits(sourceId: string): object ``` ***
### getLicense()

Get license information for an asset source.

```javascript const license = engine.asset.getLicense('asset-source-id'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `sourceId` | `string` | The ID of the asset source. | #### Returns `object` The asset source's license info consisting of a name and an optional URL. | Name | Type | | ------ | ------ | | `name` | `string` | | `url` | `string` | #### Signature ```typescript getLicense(sourceId: string): object ``` ***
### 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. ```javascript engine.asset.canManageAssets('asset-source-id'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `sourceId` | `string` | The ID of the asset source to check. | #### Returns `boolean` True if the source supports asset management operations. #### Signature ```typescript canManageAssets(sourceId: string): boolean ```
## Asset Application Apply assets to scenes, blocks, or specific properties with customizable behavior.
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `middleware` | (`sourceId`, `assetResult`, `apply`, `context`) => `Promise`\<`number`> | The middleware function that is called before applying the asset. | #### Returns `VoidFunction` A function that can be used to remove the middleware. #### Example ```ts 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 ```typescript registerApplyMiddleware(middleware: (sourceId: string, assetResult: AssetResult, apply: (sourceId: string, assetResult: AssetResult, options: ApplyAssetOptions) => Promise, context: ApplyAssetOptions) => Promise): VoidFunction ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `middleware` | (`sourceId`, `assetResult`, `block`, `applyToBlock`) => `Promise`\<`void`> | The middleware function that is called before applying the asset. | #### Returns `VoidFunction` A function that can be used to remove the middleware. #### Example ```ts 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 ```typescript registerApplyToBlockMiddleware(middleware: (sourceId: string, assetResult: AssetResult, block: number, applyToBlock: (sourceId: string, assetResult: AssetResult, block: number) => Promise) => Promise): VoidFunction ``` ***
### 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 | 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 `Promise`\<`number`> Promise resolving to the created block ID, or undefined if no block was created. #### Examples ```javascript // Default behavior await engine.asset.apply('asset-source-id', assetResult.assets[0]); ``` ```javascript // Foreground overlay placement await engine.asset.apply('asset-source-id', assetResult.assets[0], { clipType: 'overlay' }); ``` #### Signature ```typescript apply(sourceId: string, assetResult: AssetResult, options?: ApplyAssetOptions): Promise ``` ***
### 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. ```javascript await engine.asset.applyToBlock('asset-source-id', assetResult.assets[0]); ``` #### Parameters | 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 `Promise`\<`void`> #### Signature ```typescript applyToBlock(sourceId: string, assetResult: AssetResult, block: number): Promise ``` ***
### 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. ```javascript 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 | 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 `Promise`\<`void`> #### Signature ```typescript applyProperty(sourceId: string, assetResult: AssetResult, property: AssetProperty): Promise ``` ***
### 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. ```javascript 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `assetResult` | [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) | A single asset result from a `findAssets` query. | #### Returns `Promise`\<`number`> Promise resolving to the created block ID, or undefined if no block was created. #### Signature ```typescript defaultApplyAsset(assetResult: AssetResult): Promise ``` ***
### 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. ```javascript 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 | 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 `Promise`\<`void`> #### Signature ```typescript defaultApplyAssetToBlock(assetResult: AssetResult, block: number): Promise ```
## Asset Lifecycle Add, remove, and manage assets within local asset sources.
### 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. ```javascript engine.asset.addAssetToSource('local-source', { id: 'asset-id', label: { en: 'My Asset' }, meta: { uri: 'https://example.com/asset.jpg', mimeType: 'image/jpeg' } }); ``` #### Parameters | 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 `void` #### Signature ```typescript addAssetToSource(sourceId: string, asset: AssetDefinition): void ``` ***
### 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. ```javascript engine.asset.removeAssetFromSource('local-source', 'asset-id'); ``` #### Parameters | 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 `void` #### Signature ```typescript removeAssetFromSource(sourceId: string, assetId: string): void ``` ***
### 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. ```javascript engine.asset.assetSourceContentsChanged('asset-source-id'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `sourceID` | `string` | The asset source whose contents changed. | #### Returns `void` #### Signature ```typescript assetSourceContentsChanged(sourceID: string): void ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: BlockAPI" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/classes/blockapi/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

BlockAPI

## Block Lifecycle Manage the complete lifecycle: create, find, duplicate, destroy, and serialize blocks.
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `content` | `string` | A string representing the given blocks. | #### Returns `Promise`\<`number`\[]> A promise that resolves with a list of handles representing the found blocks or an error. #### Example ```typescript const serializedBlocks = await engine.block.saveToString([pageBlockId]); // Later, load those blocks const loadedBlocks = await engine.block.loadFromString(serializedBlocks); // Attach the first loaded block to the scene engine.block.appendChild(sceneBlockId, loadedBlocks[0]); ``` #### Signature ```typescript loadFromString(content: string): Promise ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `url` | `string` | The URL of the blocks archive file. | #### Returns `Promise`\<`number`\[]> A promise that resolves with a list of handles representing the found blocks or an error. #### Example ```typescript // Load blocks from a remote archive const loadedBlocks = await engine.block.loadFromArchiveURL('https://example.com/blocks.zip'); // Attach the first loaded block to the scene engine.block.appendChild(sceneBlockId, loadedBlocks[0]); ``` #### Signature ```typescript loadFromArchiveURL(url: string): Promise ``` ***
### loadFromURL()

Loads blocks from a URL.

The URL should point to a blocks file within an unzipped archive directory 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `url` | `string` | The URL to the blocks file | #### Returns `Promise`\<`number`\[]> A promise that resolves with a list of block handles #### Example ```typescript // Load blocks from a URL const loadedBlocks = await engine.block.loadFromURL('https://example.com/blocks.blocks'); // Attach the first loaded block to the scene engine.block.appendChild(sceneBlockId, loadedBlocks[0]); ``` #### Signature ```typescript loadFromURL(url: string): Promise ``` ***
### saveToString()

Saves the given blocks to a serialized string.

If a page with multiple children is given, the entire hierarchy is saved. #### Parameters | 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 `Promise`\<`string`> A promise that resolves to a string representing the blocks or an error. #### Example ```typescript // Create a page with a text element const page = engine.block.create('page'); const text = engine.block.create('text'); engine.block.appendChild(page, text); // Save the whole page hierarchy to a string const serialized = await engine.block.saveToString([page]); ``` #### Signature ```typescript saveToString(blocks: number[], allowedResourceSchemes?: string[], onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise): Promise ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `blocks` | `number`\[] | The blocks to save. | #### Returns `Promise`\<`Blob`> A promise that resolves with a Blob on success or an error on failure. #### Signature ```typescript saveToArchive(blocks: number[]): Promise ``` ***
### create()

Creates a new block of a given type.

```javascript // Create a new text block const text = engine.block.create('text'); const page = engine.scene.getCurrentPage(); engine.block.appendChild(page, text); // Create a new image block const 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 block const 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/v3/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 | 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 `number` The created block's handle. #### Signature ```typescript create(type: DesignBlockType): number ``` ***
### duplicate()

Duplicates a block and its children.

#### Parameters | 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 `number` The handle of the duplicate. #### Signature ```typescript duplicate(id: number, attachToParent?: boolean): number ``` ***
### destroy()

Destroys a block and its children.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to destroy. | #### Returns `void` #### Signature ```typescript destroy(id: number): void ``` ***
### 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. Pass an empty array to load resources for every block currently known to the engine. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | The blocks whose resources should be loaded. Pass an empty array to load resources for every block currently known to the engine. | #### Returns `Promise`\<`void`> A Promise that resolves once all resources have finished loading. #### Signature ```typescript forceLoadResources(ids: number[]): Promise ```
## Block Exploration Find blocks by properties like name, type, or kind.
### findByName()

Finds all blocks with a given name.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `name` | `string` | The name to search for. | #### Returns `number`\[] A list of block ids. #### Signature ```typescript findByName(name: string): number[] ``` ***
### findByType()

Finds all blocks with a given type.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `type` | [`ObjectType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttype/) | The type to search for. | #### Returns `number`\[] A list of block ids. #### Signature ```typescript findByType(type: ObjectType): number[] ``` ***
### findByKind()

Finds all blocks with a given kind.

```javascript const allTitles = engine.block.findByKind('title'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `kind` | `string` | The kind to search for. | #### Returns `number`\[] A list of block ids. #### Signature ```typescript findByKind(kind: string): number[] ``` ***
### findAll()

Finds all blocks known to the engine.

#### Returns `number`\[] A list of block ids. #### Signature ```typescript findAll(): number[] ``` ***
### findAllPlaceholders()

Finds all placeholder blocks in the current scene.

#### Returns `number`\[] A list of block ids. #### Signature ```typescript findAllPlaceholders(): number[] ``` ***
### findAllUnused()

Finds all blocks that are not attached to any scene.

A block is considered unused when it has no path to a scene (no scene reference and no ancestor that belongs to a scene) and is not itself a scene. Generated blocks and render blocks (fills, effects, shapes, blurs) are excluded, matching the behaviour of [BlockAPI.findAll](https://img.ly/docs/cesdk/angular/api/engine/classes/blockapi/). This is useful for cleanup workflows and for filtering the URIs returned by [EditorAPI.findAllMediaURIs](https://img.ly/docs/cesdk/angular/api/engine/classes/editorapi/) before relocating resources. #### Returns `number`\[] A list of block ids that are not attached to any scene. #### Signature ```typescript findAllUnused(): number[] ```
## Block Export Export blocks to various formats like images, videos, and audio.
### export()

Exports a design block to a Blob.

Performs an internal update to resolve the final layout for the blocks. ##### Parameters | 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 `Promise`\<`Blob`> A promise that resolves with the exported image or is rejected with an error. #### Call Signature ```ts 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `handle` | `number` | The design block element to export. | | `mimeType?` | | `"application/octet-stream"` | `"application/pdf"` | [`ImageMimeType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/imagemimetype/) | The mime type of the output file. | | `options?` | `Omit`\<[`ExportOptions`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/exportoptions/), `"mimeType"`> | The options for exporting the block type | ##### Returns `Promise`\<`Blob`> A promise that resolves with the exported image or is rejected with an error. ##### Deprecated Use the new `export` signature instead ##### Example ```typescript // Before migration const blob = await cesdk.block.export(blockId, MimeType.Png, { pngCompressionLevel: 5 }) // After migration const blob = await cesdk.block.export(blockId, { mimeType: 'image/png', pngCompressionLevel: 5 }) ``` #### Signatures ```typescript export(handle: number, options?: ExportOptions): Promise ``` ```typescript export(handle: number, mimeType?: "application/octet-stream" | "application/pdf" | ImageMimeType, options?: Omit): Promise ``` ***
### 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 | 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 `Promise`\<`Blob`\[]> A promise that resolves with an array of the exported image and mask or is rejected with an error. #### Call Signature ```ts 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `handle` | `number` | The design block element to export. | | `mimeType` | | `"application/octet-stream"` | `"application/pdf"` | [`ImageMimeType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/imagemimetype/) | The mime type of the output file. | | `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 `Promise`\<`Blob`\[]> A promise that resolves with an array of the exported image and mask or is rejected with an error. ##### Deprecated Use the new `exportWithColorMask` signature instead ##### Example ```typescript // Before migration const blob = await cesdk.block.exportWithColorMask( blockId, MimeType.Png, 0.5, 0, 0, { pngCompressionLevel: 5 } ); // After migration const blob = await cesdk.block.exportWithColorMask( blockId, 0.5, 0, 0, { mimeType: 'image/png', pngCompressionLevel: 5 } ); ``` #### Signatures ```typescript exportWithColorMask(handle: number, maskColorR: number, maskColorG: number, maskColorB: number, options?: ExportOptions): Promise ``` ```typescript exportWithColorMask(handle: number, mimeType: "application/octet-stream" | "application/pdf" | ImageMimeType, maskColorR: number, maskColorG: number, maskColorB: number, options?: Omit): Promise ``` ***
### 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 | 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 `Promise`\<`Blob`> A promise that resolves with a video blob or is rejected with an error. ##### Example ```typescript const page = engine.block.create('page'); // Set up a progress tracking function const 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 ```ts 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 | 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"`> | The options for exporting the video, including h264 profile, level, bitrate, time offset, duration, framerate, target width and height. | ##### Returns `Promise`\<`Blob`> A promise that resolves with a video blob or is rejected with an error. ##### Deprecated Use the new `exportVideo` signature instead ##### Example ```typescript // Before migration const blob = await cesdk.block.exportVideo(blockId, 'video/mp4', handleProgress, { targetWidth: 1920, targetHeight: 1080, }) // After migration const blob = await cesdk.block.exportVideo(blockId, { mimeType: 'video/mp4', progressCallback: handleProgress, targetWidth: 1920, targetHeight: 1080, }) ``` #### Signatures ```typescript exportVideo(handle: number, options?: VideoExportOptions): Promise ``` ```typescript exportVideo(handle: number, mimeType?: VideoMimeType, progressCallback?: (numberOfRenderedFrames: number, numberOfEncodedFrames: number, totalNumberOfFrames: number) => void, options?: Omit): Promise ``` ***
### exportAudio() Exports a design block as an audio file. #### Parameters | 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 `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 ```typescript const audioBlock = engine.block.create('audio'); // Set up a progress tracking function const 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 ```typescript exportAudio(handle: number, options?: AudioExportOptions): Promise ```
## Block Hierarchies Manage parent-child relationships and the scene graph structure.
### getParent()

Gets the parent of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The parent's handle or null if the block has no parent. #### Signature ```typescript getParent(id: number): number ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number`\[] A list of block ids. #### Signature ```typescript getChildren(id: number): number[] ``` ***
### insertChild()

Inserts a child block at a specific index.

#### Parameters | 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 `void` #### Signature ```typescript insertChild(parent: number, child: number, index: number): void ``` ***
### appendChild()

Appends a child block to a parent.

#### Parameters | 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 `void` #### Signature ```typescript appendChild(parent: number, child: number): void ```
## Block Layout Structure designs by positioning, sizing, layering, aligning, and distributing blocks.
### isTransformLocked()

Gets the transform-locked state of a block.

If true, the block's transform can't be changed. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if transform locked, false otherwise. #### Signature ```typescript isTransformLocked(id: number): boolean ``` ***
### isLineOrigin()

Checks whether a graphic block originated as a line shape. Survives the line's conversion to a vector path during vector-edit; resets only when the shape is replaced by a non-line shape via setShape.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if the block originated as a line shape, false otherwise. #### Signature ```typescript isLineOrigin(id: number): boolean ``` ***
### setTransformLocked()

Sets the transform-locked state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `locked` | `boolean` | Whether the block's transform should be locked. | #### Returns `void` #### Signature ```typescript setTransformLocked(id: number, locked: boolean): void ``` ***
### getPositionX()

Gets the X position of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The value of the x position. #### Signature ```typescript getPositionX(id: number): number ``` ***
### getPositionXMode()

Gets the mode for the block's X position.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the x position: 'Absolute' or 'Percent'. #### Signature ```typescript getPositionXMode(id: number): "Absolute" | "Percent" | "Auto" ``` ***
### getPositionY()

Gets the Y position of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The value of the y position. #### Signature ```typescript getPositionY(id: number): number ``` ***
### getPositionYMode()

Gets the mode for the block's Y position.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the y position: 'Absolute' or 'Percent'. #### Signature ```typescript getPositionYMode(id: number): "Absolute" | "Percent" | "Auto" ``` ***
### 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. ```javascript engine.block.setPositionX(block, 0.25); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `value` | `number` | The value of the x position. | #### Returns `void` #### Signature ```typescript setPositionX(id: number, value: number): void ``` ***
### setPositionXMode()

Sets the mode for the block's X position.

```javascript engine.block.setPositionXMode(block, 'Percent'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | `"Auto"` | The x position mode: 'Absolute' or 'Percent'. | #### Returns `void` #### Signature ```typescript setPositionXMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` ***
### 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. ```javascript engine.block.setPositionY(block, 0.25); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `value` | `number` | The value of the y position. | #### Returns `void` #### Signature ```typescript setPositionY(id: number, value: number): void ``` ***
### setPositionYMode()

Sets the mode for the block's Y position.

```javascript engine.block.setPositionYMode(block, 'Absolute'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | `"Auto"` | The y position mode: 'Absolute' or 'Percent'. | #### Returns `void` #### Signature ```typescript setPositionYMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | the block to update. | | `enabled` | `boolean` | whether the block shall be always-on-top. | #### Returns `void` #### Signature ```typescript setAlwaysOnTop(id: number, enabled: boolean): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | the block to update. | | `enabled` | `boolean` | whether the block shall always be below its siblings. | #### Returns `void` #### Signature ```typescript setAlwaysOnBottom(id: number, enabled: boolean): void ``` ***
### isAlwaysOnTop()

Checks if a block is set to always be on top.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | the block to query. | #### Returns `boolean` true if the block is set to be always-on-top, false otherwise. #### Signature ```typescript isAlwaysOnTop(id: number): boolean ``` ***
### isAlwaysOnBottom()

Checks if a block is set to always be on the bottom.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | the block to query. | #### Returns `boolean` true if the block is set to be always-on-bottom, false otherwise. #### Signature ```typescript isAlwaysOnBottom(id: number): boolean ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The id of the block to bring to the front. | #### Returns `void` #### Signature ```typescript bringToFront(id: number): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The id of the block to send to the back. | #### Returns `void` #### Signature ```typescript sendToBack(id: number): void ``` ***
### bringForward()

Brings a block one layer forward.

Updates the sorting order to be higher than its next sibling. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The id of the block to bring forward. | #### Returns `void` #### Signature ```typescript bringForward(id: number): void ``` ***
### sendBackward()

Sends a block one layer backward.

Updates the sorting order to be lower than its previous sibling. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The id of the block to send backward. | #### Returns `void` #### Signature ```typescript sendBackward(id: number): void ``` ***
### getRotation()

Gets the rotation of a block in radians.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The block's rotation around its center in radians. #### Signature ```typescript getRotation(id: number): number ``` ***
### setRotation()

Sets the rotation of a block in radians.

Rotation is applied around the block's center. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `radians` | `number` | The new rotation in radians. | #### Returns `void` #### Signature ```typescript setRotation(id: number, radians: number): void ``` ***
### getWidth()

Gets the width of a block in the current width mode.

```javascript const width = engine.block.getWidth(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The value of the block's width. #### Signature ```typescript getWidth(id: number): number ``` ***
### getWidthMode()

Gets the mode for the block's width.

```javascript const widthMode = engine.block.getWidthMode(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the width: 'Absolute', 'Percent' or 'Auto'. #### Signature ```typescript getWidthMode(id: number): "Absolute" | "Percent" | "Auto" ``` ***
### getHeight()

Gets the height of a block in the current height mode.

```javascript const height = engine.block.getHeight(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The value of the block's height. #### Signature ```typescript getHeight(id: number): number ``` ***
### getHeightMode()

Gets the mode for the block's height.

```javascript const heightMode = engine.block.getHeightMode(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `"Absolute"` | `"Percent"` | `"Auto"` The current mode for the height: 'Absolute', 'Percent' or 'Auto'. #### Signature ```typescript getHeightMode(id: number): "Absolute" | "Percent" | "Auto" ``` ***
### setWidth()

Sets the width of a block in the current width mode.

If the crop is maintained, the crop values will be automatically adjusted. ```javascript engine.block.setWidth(block, 2.5, true); ``` #### Parameters | 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 `void` #### Signature ```typescript setWidth(id: number, value: number, maintainCrop?: boolean): void ``` ***
### setWidthMode()

Sets the mode for the block's width.

```javascript engine.block.setWidthMode(block, 'Percent'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | `"Auto"` | The width mode: 'Absolute', 'Percent' or 'Auto'. | #### Returns `void` #### Signature ```typescript setWidthMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` ***
### setHeight()

Sets the height of a block in the current height mode.

If the crop is maintained, the crop values will be automatically adjusted. ```javascript engine.block.setHeight(block, 0.5); engine.block.setHeight(block, 2.5, true); ``` #### Parameters | 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 `void` #### Signature ```typescript setHeight(id: number, value: number, maintainCrop?: boolean): void ``` ***
### setHeightMode()

Sets the mode for the block's height.

```javascript engine.block.setHeightMode(block, 'Percent'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `mode` | `"Absolute"` | `"Percent"` | `"Auto"` | The height mode: 'Absolute', 'Percent' or 'Auto'. | #### Returns `void` #### Signature ```typescript setHeightMode(id: number, mode: "Absolute" | "Percent" | "Auto"): void ``` ***
### getFrameX()

Gets the final calculated X position of a block's frame.

The position is only available after an internal update loop. ```javascript const frameX = engine.block.getFrameX(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The layout position on the x-axis. #### Signature ```typescript getFrameX(id: number): number ``` ***
### getFrameY()

Gets the final calculated Y position of a block's frame.

The position is only available after an internal update loop. ```javascript const frameY = engine.block.getFrameY(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The layout position on the y-axis. #### Signature ```typescript getFrameY(id: number): number ``` ***
### getFrameWidth()

Gets the final calculated width of a block's frame.

The width is only available after an internal update loop. ```javascript const frameWidth = engine.block.getFrameWidth(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The layout width. #### Signature ```typescript getFrameWidth(id: number): number ``` ***
### getFrameHeight()

Gets the final calculated height of a block's frame.

The height is only available after an internal update loop. ```javascript const frameHeight = engine.block.getFrameHeight(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The layout height. #### Signature ```typescript getFrameHeight(id: number): number ``` ***
### 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. ```javascript const globalX = engine.block.getGlobalBoundingBoxX(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns `number` The x coordinate of the axis-aligned bounding box. #### Signature ```typescript getGlobalBoundingBoxX(id: number): number ``` ***
### 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. ```javascript const globalY = engine.block.getGlobalBoundingBoxY(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns `number` The y coordinate of the axis-aligned bounding box. #### Signature ```typescript getGlobalBoundingBoxY(id: number): number ``` ***
### getGlobalBoundingBoxWidth()

Gets the width of the block's global bounding box.

The width is in the scene's global coordinate space. ```javascript const globalWidth = engine.block.getGlobalBoundingBoxWidth(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns `number` The width of the axis-aligned bounding box. #### Signature ```typescript getGlobalBoundingBoxWidth(id: number): number ``` ***
### getGlobalBoundingBoxHeight()

Gets the height of the block's global bounding box.

The height is in the scene's global coordinate space. ```javascript const globalHeight = engine.block.getGlobalBoundingBoxHeight(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose bounding box should be calculated. | #### Returns `number` The height of the axis-aligned bounding box. #### Signature ```typescript getGlobalBoundingBoxHeight(id: number): number ``` ***
### getScreenSpaceBoundingBoxXYWH()

Gets the screen-space bounding box for a set of blocks.

```javascript const boundingBox = engine.block.getScreenSpaceBoundingBoxXYWH([block]); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | The block to query. | #### Returns [`XYWH`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/xywh/) The position and size of the bounding box. #### Signature ```typescript getScreenSpaceBoundingBoxXYWH(ids: number[]): XYWH ``` ***
### alignHorizontally()

Aligns blocks horizontally.

Aligns multiple blocks within their bounding box or a single block to its parent. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | A non-empty array of block ids. | | `horizontalBlockAlignment` | `"Auto"` | `"Right"` | `"Left"` | `"Center"` | How they should be aligned: 'Left', 'Right', or 'Center'. | #### Returns `void` #### Signature ```typescript alignHorizontally(ids: number[], horizontalBlockAlignment: "Auto" | "Right" | "Left" | "Center"): void ``` ***
### alignVertically()

Aligns blocks vertically.

Aligns multiple blocks within their bounding box or a single block to its parent. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | A non-empty array of block ids. | | `verticalBlockAlignment` | `"Center"` | `"Top"` | `"Bottom"` | How they should be aligned: 'Top', 'Bottom', or 'Center'. | #### Returns `void` #### Signature ```typescript alignVertically(ids: number[], verticalBlockAlignment: "Center" | "Top" | "Bottom"): void ``` ***
### distributeHorizontally()

Distributes blocks horizontally with even spacing.

Distributes multiple blocks horizontally within their bounding box. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | A non-empty array of block ids. | #### Returns `void` #### Signature ```typescript distributeHorizontally(ids: number[]): void ``` ***
### distributeVertically()

Distributes blocks vertically with even spacing.

Distributes multiple blocks vertically within their bounding box. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | A non-empty array of block ids. | #### Returns `void` #### Signature ```typescript distributeVertically(ids: number[]): void ``` ***
### fillParent()

Resizes and positions a block to fill its parent.

The crop values of the block are reset if it can be cropped. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block that should fill its parent. | #### Returns `void` #### Signature ```typescript fillParent(id: number): void ``` ***
### 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. ```javascript const pages = engine.scene.getPages(); engine.block.resizeContentAware(pages, width: 100.0, 100.0); ``` #### Parameters | 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 `void` #### Signature ```typescript resizeContentAware(ids: number[], width: number, height: number): void ``` ***
### 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. ```javascript // Scale a block to double its size, anchored at the center. engine.block.scale(block, 2.0, 0.5, 0.5); ``` #### Parameters | 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 `void` #### Signature ```typescript scale(id: number, scale: number, anchorX?: number, anchorY?: number): void ```
## Block Selection & Visibility Manage a block's selection state and visibility on the canvas.
### select()

Selects a block, deselecting all others.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to be selected. | #### Returns `void` #### Signature ```typescript select(id: number): void ``` ***
### setSelected()

Sets the selection state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | | `selected` | `boolean` | Whether or not the block should be selected. | #### Returns `void` #### Signature ```typescript setSelected(id: number, selected: boolean): void ``` ***
### isSelected()

Gets the selection state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if the block is selected, false otherwise. #### Signature ```typescript isSelected(id: number): boolean ``` ***
### findAllSelected()

Finds all currently selected blocks.

#### Returns `number`\[] An array of block ids. #### Signature ```typescript findAllSelected(): number[] ``` ***
### isVisible()

Gets the visibility state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if visible, false otherwise. #### Signature ```typescript isVisible(id: number): boolean ``` ***
### setVisible()

Sets the visibility state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `visible` | `boolean` | Whether the block shall be visible. | #### Returns `void` #### Signature ```typescript setVisible(id: number, visible: boolean): void ```
## Block Appearance Control general appearance, including opacity, blend modes, flipping, and other visual properties.
### isClipped()

Gets the clipped state of a block.

If true, the block should clip its contents to its frame. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if clipped, false otherwise. #### Signature ```typescript isClipped(id: number): boolean ``` ***
### setClipped()

Sets the clipped state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `clipped` | `boolean` | Whether the block should clips its contents to its frame. | #### Returns `void` #### Signature ```typescript setClipped(id: number, clipped: boolean): void ``` ***
### getFlipHorizontal()

Gets the horizontal flip state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` A boolean indicating whether the block is flipped horizontally. #### Signature ```typescript getFlipHorizontal(id: number): boolean ``` ***
### getFlipVertical()

Gets the vertical flip state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` A boolean indicating whether the block is flipped vertically. #### Signature ```typescript getFlipVertical(id: number): boolean ``` ***
### setFlipHorizontal()

Sets the horizontal flip state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `flip` | `boolean` | If the flip should be enabled. | #### Returns `void` #### Signature ```typescript setFlipHorizontal(id: number, flip: boolean): void ``` ***
### setFlipVertical()

Sets the vertical flip state of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `flip` | `boolean` | If the flip should be enabled. | #### Returns `void` #### Signature ```typescript setFlipVertical(id: number, flip: boolean): void ``` ***
### ~~hasOpacity()~~

Checks if a block has an opacity property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has an opacity. #### Deprecated Use supportsOpacity() instead. ***
### supportsOpacity()

Checks if a block supports opacity.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block supports opacity. #### Signature ```typescript supportsOpacity(id: number): boolean ``` ***
### setOpacity()

Sets the opacity of a block.

#### Parameters | 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 `void` #### Signature ```typescript setOpacity(id: number, opacity: number): void ``` ***
### getOpacity()

Gets the opacity of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose opacity should be queried. | #### Returns `number` The opacity value. #### Signature ```typescript getOpacity(id: number): number ``` ***
### ~~hasBlendMode()~~

Checks if a block has a blend mode property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has a blend mode. #### Deprecated Use supportsBlendMode() instead. ***
### supportsBlendMode()

Checks if a block supports blend modes.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block supports blend modes. #### Signature ```typescript supportsBlendMode(id: number): boolean ``` ***
### setBlendMode()

Sets the blend mode of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose blend mode should be set. | | `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"` | The blend mode to be set. | #### Returns `void` #### Signature ```typescript 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()

Gets the blend mode of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose blend mode should be queried. | #### Returns | `"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 ```typescript 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()~~

Checks if a block has background color properties.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has background color properties. #### Deprecated Use supportsBackgroundColor() instead. ***
### supportsBackgroundColor()

Checks if a block supports a background color.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block supports a background color. #### Signature ```typescript supportsBackgroundColor(id: number): boolean ``` ***
### ~~setBackgroundColorRGBA()~~

Sets the background color of a block using RGBA values.

#### Parameters | 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 `void` #### Deprecated Use `Use setColor() with the key path 'backgroundColor/color' instead.`. ***
### ~~getBackgroundColorRGBA()~~

Gets the background color of a block as RGBA values.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose background color should be queried. | #### Returns [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The background color. #### Deprecated Use `Use getColor() with the key path 'backgroundColor/color' instead.`. ***
### setBackgroundColorEnabled()

Enables or disables the background of a block.

```javascript engine.block.setBackgroundColorEnabled(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose background should be enabled or disabled. | | `enabled` | `boolean` | If true, the background will be enabled. | #### Returns `void` #### Signature ```typescript setBackgroundColorEnabled(id: number, enabled: boolean): void ``` ***
### isBackgroundColorEnabled()

Checks if the background of a block is enabled.

```javascript const backgroundColorIsEnabled = engine.block.isBackgroundColorEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose background state should be queried. | #### Returns `boolean` True, if background is enabled. #### Signature ```typescript isBackgroundColorEnabled(id: number): boolean ```
## Block Fills Create, configure, and manage block fills, including solid colors, gradients, and images.
### createFill()

Creates a new fill block.

```javascript const solidColoFill = engine.block.createFill('color'); // Longhand fill types are also supported const imageFill = engine.block.createFill('//ly.img.ubq/fill/image'); ``` #### Parameters | 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 `number` The created fill's handle. #### Signature ```typescript createFill(type: FillType): number ``` ***
### ~~hasContentFillMode()~~

Checks if a block supports content fill modes.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has a content fill mode. #### Deprecated Use supportsContentFillMode instead. ***
### supportsContentFillMode()

Checks if a block supports content fill modes.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has a content fill mode. #### Signature ```typescript supportsContentFillMode(id: number): boolean ``` ***
### setContentFillMode()

Sets the content fill mode of a block.

```javascript engine.block.setContentFillMode(image, 'Cover'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `mode` | `"Crop"` | `"Cover"` | `"Contain"` | The content fill mode: 'Crop', 'Cover' or 'Contain'. | #### Returns `void` #### Signature ```typescript setContentFillMode(id: number, mode: "Crop" | "Cover" | "Contain"): void ``` ***
### getContentFillMode()

Gets the content fill mode of a block.

```javascript engine.block.getContentFillMode(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `"Crop"` | `"Cover"` | `"Contain"` The current mode: 'Crop', 'Cover' or 'Contain'. #### Signature ```typescript getContentFillMode(id: number): "Crop" | "Cover" | "Contain" ``` ***
### setContentFillHorizontalAlignment()

Sets the horizontal alignment of the content fill within a block.

Only affects 'Contain' and 'Cover' fill modes; has no visible effect in 'Crop' mode, where the user positions the content explicitly. ```javascript engine.block.setContentFillHorizontalAlignment(image, 'Left'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `alignment` | `"Right"` | `"Left"` | `"Center"` | The horizontal alignment: 'Left', 'Center' or 'Right'. | #### Returns `void` #### Signature ```typescript setContentFillHorizontalAlignment(id: number, alignment: "Right" | "Left" | "Center"): void ``` ***
### getContentFillHorizontalAlignment()

Gets the horizontal alignment of the content fill within a block.

```javascript engine.block.getContentFillHorizontalAlignment(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `"Right"` | `"Left"` | `"Center"` The current alignment: 'Left', 'Center' or 'Right'. #### Signature ```typescript getContentFillHorizontalAlignment(id: number): "Right" | "Left" | "Center" ``` ***
### setContentFillVerticalAlignment()

Sets the vertical alignment of the content fill within a block.

Only affects 'Contain' and 'Cover' fill modes; has no visible effect in 'Crop' mode, where the user positions the content explicitly. ```javascript engine.block.setContentFillVerticalAlignment(image, 'Top'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `alignment` | `"Center"` | `"Top"` | `"Bottom"` | The vertical alignment: 'Top', 'Center' or 'Bottom'. | #### Returns `void` #### Signature ```typescript setContentFillVerticalAlignment(id: number, alignment: "Center" | "Top" | "Bottom"): void ``` ***
### getContentFillVerticalAlignment()

Gets the vertical alignment of the content fill within a block.

```javascript engine.block.getContentFillVerticalAlignment(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `"Center"` | `"Top"` | `"Bottom"` The current alignment: 'Top', 'Center' or 'Bottom'. #### Signature ```typescript getContentFillVerticalAlignment(id: number): "Center" | "Top" | "Bottom" ``` ***
### setGradientColorStops()

Sets the color stops for a gradient property.

```javascript 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 | 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 `void` #### Signature ```typescript setGradientColorStops(id: number, property: string, colors: GradientColorStop[]): void ``` ***
### getGradientColorStops()

Gets the color stops from a gradient property.

``` engine.block.getGradientColorStops(gradientFill, 'fill/gradient/colors'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns [`GradientColorStop`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/gradientcolorstop/)\[] The gradient colors. #### Signature ```typescript getGradientColorStops(id: number, property: string): GradientColorStop[] ``` ***
### getSourceSet()

Gets the source set from a block property.

```javascript const sourceSet = engine.block.getSourceSet(imageFill, 'fill/image/sourceSet'); ``` #### Parameters | 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 [`Source`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source/)\[] The block's source set. #### Signature ```typescript getSourceSet(id: number, property: SourceSetPropertyName): Source[] ``` ***
### 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. ```javascript engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [{ uri: 'https://example.com/sample.jpg', width: 800, height: 600 }]); ``` #### Parameters | 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 `void` #### Signature ```typescript setSourceSet(id: number, property: SourceSetPropertyName, sourceSet: Source[]): void ``` ***
### 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. ```javascript await engine.block.addImageFileURIToSourceSet(imageFill, 'fill/image/sourceSet', 'https://example.com/sample.jpg'); ``` #### Parameters | 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 `Promise`\<`void`> A promise that resolves when the operation is complete. #### Signature ```typescript addImageFileURIToSourceSet(id: number, property: SourceSetPropertyName, uri: string): Promise ``` ***
### 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. ```javascript await engine.block.addVideoFileURIToSourceSet(videoFill, 'fill/video/sourceSet', 'https://example.com/sample.mp4'); ``` #### Parameters | 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 `Promise`\<`void`> A promise that resolves when the operation is complete. #### Signature ```typescript addVideoFileURIToSourceSet(id: number, property: SourceSetPropertyName, uri: string): Promise ``` ***
### ~~hasFillColor()~~

Checks if a block has fill color properties.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has fill color properties. #### Deprecated Query the fill's type using getFill() and getType() instead. ***
### ~~setFillColorRGBA()~~

Sets the fill color of a block using RGBA values.

#### Parameters | 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 `void` #### Deprecated Use setFillSolidColor() instead. ***
### ~~getFillColorRGBA()~~

Gets the fill color of a block as RGBA values.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill color should be queried. | #### Returns [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The fill color. #### Deprecated Use getFillSolidColor() instead. ***
### ~~setFillColorEnabled()~~

Enables or disables the fill of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill should be enabled or disabled. | | `enabled` | `boolean` | If true, the fill will be enabled. | #### Returns `void` #### Deprecated Use setFillEnabled() instead. ***
### ~~isFillColorEnabled()~~

Checks if the fill of a block is enabled.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill state should be queried. | #### Returns `boolean` True, if fill is enabled. #### Deprecated Use isFillEnabled() instead. ***
### ~~hasFill()~~

Checks if a block has fill properties.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has fill properties. #### Deprecated Use supportsFill instead. ***
### supportsFill()

Checks if a block supports a fill.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block supports a fill. #### Signature ```typescript supportsFill(id: number): boolean ``` ***
### isFillEnabled()

Checks if the fill of a block is enabled.

```javascript engine.block.isFillEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill state should be queried. | #### Returns `boolean` The fill state. #### Signature ```typescript isFillEnabled(id: number): boolean ``` ***
### setFillEnabled()

Enables or disables the fill of a block.

```javascript engine.block.setFillEnabled(block, false); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill should be enabled or disabled. | | `enabled` | `boolean` | If true, the fill will be enabled. | #### Returns `void` #### Signature ```typescript setFillEnabled(id: number, enabled: boolean): void ``` ***
### getFillOverprint()

Queries whether the fill of a block is marked as overprint for PDF export.

```javascript const overprint = engine.block.getFillOverprint(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill overprint flag should be queried. | #### Returns `boolean` The fill overprint flag. #### Signature ```typescript getFillOverprint(id: number): boolean ``` ***
### setFillOverprint()

Marks the fill of a block as overprint for PDF export.

The flag is only honored by the PDF writer when the fill uses a spot color (Separation/DeviceN). For process-color fills it is a silent no-op. On-screen rendering ignores the flag. ```javascript engine.block.setFillOverprint(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill overprint flag should be set. | | `overprint` | `boolean` | If true, the fill is marked as overprint in exported PDFs. | #### Returns `void` #### Signature ```typescript setFillOverprint(id: number, overprint: boolean): void ``` ***
### getFill()

Gets the fill block attached to a given block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill block should be returned. | #### Returns `number` The block that currently defines the given block's fill. #### Signature ```typescript getFill(id: number): number ``` ***
### setFill()

Sets the fill block for a given block.

The previous fill block is not destroyed automatically. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill should be changed. | | `fill` | `number` | The new fill block. | #### Returns `void` #### Signature ```typescript setFill(id: number, fill: number): void ``` ***
### setFillSolidColor()

Sets the solid fill color of a block.

#### Parameters | 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 `void` #### Signature ```typescript setFillSolidColor(id: number, r: number, g: number, b: number, a?: number): void ``` ***
### getFillSolidColor()

Gets the solid fill color of a block as RGBA values.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose fill color should be queried. | #### Returns [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The fill color. #### Signature ```typescript getFillSolidColor(id: number): RGBA ```
## Block Shapes Create and configure shape blocks and geometric forms.
### createShape()

Creates a new shape block of a given type.

```javascript const star = engine.block.createShape('star'); // Longhand shape types are also supported const rect = engine.block.createShape('//ly.img.ubq/shape/rect'); ``` #### Parameters | 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 `number` The created shape's handle. #### Signature ```typescript createShape(type: ShapeType): number ``` ***
### ~~hasShape()~~

Checks if a block has a shape property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has a shape property, an error otherwise. #### Deprecated Use supportsShape instead. ***
### supportsShape()

Checks if a block supports having a shape.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has a shape property, an error otherwise. #### Signature ```typescript supportsShape(id: number): boolean ``` ***
### getShape()

Gets the shape block attached to a given block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose shape block should be returned. | #### Returns `number` The block that currently defines the given block's shape. #### Signature ```typescript getShape(id: number): number ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose shape should be changed. | | `shape` | `number` | The new shape. | #### Returns `void` #### Signature ```typescript setShape(id: number, shape: number): void ```
## Block Text Create, edit, and style text content.
### replaceText()

Replaces a range of text in a text block.

```javascript engine.block.replaceText(text, 'Hello World'); engine.block.replaceText(text, 'Alex', 6, 11); ``` #### Parameters | 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 `void` #### Signature ```typescript replaceText(id: number, text: string, from?: number, to?: number): void ``` ***
### removeText()

Removes a range of text from a text block.

```javascript engine.block.removeText(text, 0, 6); ``` #### Parameters | 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 `void` #### Signature ```typescript removeText(id: number, from?: number, to?: number): void ``` ***
### setTextColor()

Sets the color for a range of text.

```javascript engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4); ``` #### Parameters | 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 `void` #### Signature ```typescript setTextColor(id: number, color: Color, from?: number, to?: number): void ``` ***
### getTextColors()

Gets the unique colors within a range of text.

```javascript const colorsInRange = engine.block.getTextColors(text, 2, 5); ``` #### Parameters | 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 [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/)\[] The ordered unique list of colors. #### Signature ```typescript getTextColors(id: number, from?: number, to?: number): Color[] ``` ***
### setTextFontWeight()

Sets the font weight for a range of text.

```javascript engine.block.setTextFontWeight(text, 'bold', 0, 5); ``` #### Parameters | 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 `void` #### Signature ```typescript setTextFontWeight(id: number, fontWeight: FontWeight, from?: number, to?: number): void ``` ***
### getTextFontWeights()

Gets the unique font weights within a range of text.

```javascript const fontWeights = engine.block.getTextFontWeights(text, 0, 6); ``` #### Parameters | 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 [`FontWeight`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontweight/)\[] The ordered unique list of font weights. #### Signature ```typescript getTextFontWeights(id: number, from?: number, to?: number): FontWeight[] ``` ***
### setTextFontSize()

Sets the font size for a range of text.

```javascript // With numeric fontSize (in points) engine.block.setTextFontSize(text, 12, 0, 5); // With font size and options object engine.block.setTextFontSize(text, 16, { unit: 'Pixel' }); engine.block.setTextFontSize(text, 24, { unit: 'Point', from: 0, to: 10 }); ``` ##### Parameters | 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 `void` #### Call Signature ```ts setTextFontSize( id, fontSize, from?, to?): void; ``` Sets the font size for a range of text. ##### Parameters | 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 `void` ##### Deprecated Use the new signature with options object instead. ##### Example ```typescript // Before migration engine.block.setTextFontSize(text, 18, 0, 5); // After migration engine.block.setTextFontSize(text, 18, { from: 0, to: 5 }); ``` #### Signatures ```typescript setTextFontSize(id: number, fontSize: number, options?: TextFontSizeOptions): void ``` ```typescript setTextFontSize(id: number, fontSize: number, from?: number, to?: number): void ``` ***
### getTextFontSizes()

Gets the unique font sizes within a range of text.

```javascript // Get all font sizes const fontSizes = engine.block.getTextFontSizes(text); // Get font sizes for a range const fontSizes = engine.block.getTextFontSizes(text, 0, 10); // With options object const sizesInPx = engine.block.getTextFontSizes(text, { unit: 'Pixel' }); const sizesInRange = engine.block.getTextFontSizes(text, { unit: 'Millimeter', from: 5, to: 15 }); ``` ##### Parameters | 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 `number`\[] The ordered unique list of font sizes. #### Call Signature ```ts getTextFontSizes( id, from?, to?): number[]; ``` Gets the unique font sizes within a range of text. ##### Parameters | 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 `number`\[] The ordered unique list of font sizes in points. ##### Deprecated Use the new signature with options object instead. ##### Example ```typescript // Before migration const fontSizes = engine.block.getTextFontSizes(text, 0, 10); // After migration const fontSizes = engine.block.getTextFontSizes(text, { from: 0, to: 10 }); ``` #### Signatures ```typescript getTextFontSizes(id: number, options?: TextFontSizeOptions): number[] ``` ```typescript getTextFontSizes(id: number, from?: number, to?: number): number[] ``` ***
### setTextFontStyle()

Sets the font style for a range of text.

```javascript engine.block.setTextFontStyle(text, 'italic', 0, 5); ``` #### Parameters | 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 `void` #### Signature ```typescript setTextFontStyle(id: number, fontStyle: FontStyle, from?: number, to?: number): void ``` ***
### getTextFontStyles()

Gets the unique font styles within a range of text.

```javascript const fontStyles = engine.block.getTextFontStyles(text); ``` #### Parameters | 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 [`FontStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontstyle/)\[] The ordered unique list of font styles. #### Signature ```typescript getTextFontStyles(id: number, from?: number, to?: number): FontStyle[] ``` ***
### getTextCases()

Gets the unique text cases within a range of text.

```javascript const textCases = engine.block.getTextCases(text); ``` #### Parameters | 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 [`TextCase`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textcase/)\[] The ordered list of text cases. #### Signature ```typescript getTextCases(id: number, from?: number, to?: number): TextCase[] ``` ***
### setTextCase()

Sets the text case for a range of text.

```javascript engine.block.setTextCase(text, 'Titlecase'); ``` #### Parameters | 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 `void` #### Signature ```typescript setTextCase(id: number, textCase: TextCase, from?: number, to?: number): void ``` ***
### getTextDecorations()

Gets the unique text decoration configurations within a range of text.

Each element of the returned array is a decoration configuration representing a unique combination of lines, style, color, and thickness found in the range. ```javascript const decorations = engine.block.getTextDecorations(text); // e.g., [{ lines: ['None'] }, { lines: ['Underline'], style: 'Dashed' }] ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose text decorations 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 [`TextDecorationConfig`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/textdecorationconfig/)\[] The ordered list of unique decoration configurations. #### Signature ```typescript getTextDecorations(id: number, from?: number, to?: number): TextDecorationConfig[] ``` ***
### setTextDecoration()

Sets the text decoration for a range of text.

The config specifies which decoration lines, style, underline color, thickness, and offset to apply. Use `{ lines: ['None'] }` to remove all decorations. ```javascript engine.block.setTextDecoration(text, { lines: ['Underline'] }); engine.block.setTextDecoration(text, { lines: ['Underline', 'Strikethrough'], style: 'Dashed' }); engine.block.setTextDecoration(text, { lines: ['Overline'], style: 'Wavy', underlineThickness: 2.0 }); engine.block.setTextDecoration(text, { lines: ['None'] }); // Remove decorations ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose text decoration should be changed. | | `config` | [`TextDecorationConfig`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/textdecorationconfig/) | The decoration configuration to apply. | | `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 `void` #### Signature ```typescript setTextDecoration(id: number, config: TextDecorationConfig, from?: number, to?: number): void ``` ***
### setTextKerning()

Sets kerning for a grapheme range.

Applies an additional offset in em units on top of the font's built-in kern. `1.0` equals the run's font size, so the offset scales proportionally with text size. ```javascript engine.block.setTextKerning(text, 0.1); // add 10% of font size as extra spacing engine.block.setTextKerning(text, -0.05, 0, 5); // tighten first 5 graphemes engine.block.setTextKerning(text, 0); // reset to no extra offset ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block to modify. | | `kerning` | `number` | Additional kerning in em units (1.0 = one full em). Use 0 for no extra offset. | | `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 `void` #### Signature ```typescript setTextKerning(id: number, kerning: number, from?: number, to?: number): void ``` ***
### getTextKernings()

Returns the unique kerning values across the grapheme range.

```javascript const kernings = engine.block.getTextKernings(text); // e.g. [0] or [0.1, 0] ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block to query. | | `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 `number`\[] #### Signature ```typescript getTextKernings(id: number, from?: number, to?: number): number[] ``` ***
### toggleTextDecorationUnderline()

Toggles the underline decoration for a text range.

If any part of the range does not have underline, the entire range gets underline. If the entire range already has underline, it is removed. Other decoration lines (strikethrough, overline) on each text run are preserved. ```javascript engine.block.toggleTextDecorationUnderline(text); ``` #### Parameters | 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 `void` #### Signature ```typescript toggleTextDecorationUnderline(id: number, from?: number, to?: number): void ``` ***
### toggleTextDecorationStrikethrough()

Toggles the strikethrough decoration for a text range.

If any part of the range does not have strikethrough, the entire range gets strikethrough. If the entire range already has strikethrough, it is removed. Other decoration lines (underline, overline) on each text run are preserved. ```javascript engine.block.toggleTextDecorationStrikethrough(text); ``` #### Parameters | 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 `void` #### Signature ```typescript toggleTextDecorationStrikethrough(id: number, from?: number, to?: number): void ``` ***
### toggleTextDecorationOverline()

Toggles the overline decoration for a text range.

If any part of the range does not have overline, the entire range gets overline. If the entire range already has overline, it is removed. Other decoration lines (underline, strikethrough) on each text run are preserved. ```javascript engine.block.toggleTextDecorationOverline(text); ``` #### Parameters | 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 `void` #### Signature ```typescript toggleTextDecorationOverline(id: number, from?: number, to?: number): void ``` ***
### getTextHorizontalAlignment()

Gets the paragraph-level horizontal alignment override for a specific paragraph, or the block-level alignment.

```javascript const alignment = engine.block.getTextHorizontalAlignment(text, 0); const blockAlignment = engine.block.getTextHorizontalAlignment(text); // paragraphIndex defaults to -1 // e.g. 'Left' | 'Center' | 'Right' | 'Auto' | undefined ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block to query. | | `paragraphIndex?` | `number` | The 0-based index of the paragraph to query. Negative values return the block-level `text/horizontalAlignment` setting. | #### Returns `"Auto"` | `"Right"` | `"Left"` | `"Center"` The paragraph override, `undefined` if no override is set, or the block-level alignment when `paragraphIndex < 0`. #### Signature ```typescript getTextHorizontalAlignment(id: number, paragraphIndex?: number): "Auto" | "Right" | "Left" | "Center" ``` ***
### setTextHorizontalAlignment()

Sets the paragraph-level horizontal alignment override for one or all paragraphs.

```javascript engine.block.setTextHorizontalAlignment(text, 'Center', 0); engine.block.setTextHorizontalAlignment(text, undefined, 0); // clear override engine.block.setTextHorizontalAlignment(text, 'Right'); // apply to all ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block to modify. | | `alignment` | `"Auto"` | `"Right"` | `"Left"` | `"Center"` | The alignment to apply, or `undefined` to clear the paragraph override. | | `paragraphIndex?` | `number` | The 0-based index of the paragraph. Negative values clear all paragraph-level alignment overrides and, when `alignment` is provided, apply that alignment to the whole text block. | #### Returns `void` #### Signature ```typescript setTextHorizontalAlignment(id: number, alignment: "Auto" | "Right" | "Left" | "Center", paragraphIndex?: number): void ``` ***
### getTextListStyle()

Gets the list style for a specific paragraph of a text block.

```javascript const listStyle = engine.block.getTextListStyle(text, 0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose list style should be returned. | | `paragraphIndex` | `number` | The 0-based index of the paragraph. | #### Returns [`ListStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/liststyle/) The list style of the paragraph. #### Signature ```typescript getTextListStyle(id: number, paragraphIndex: number): ListStyle ``` ***
### setTextListStyle()

Sets the list style for a specific paragraph or all paragraphs of a text block.

```javascript engine.block.setTextListStyle(text, 'Unordered'); engine.block.setTextListStyle(text, 'Ordered', 0, 2); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose list style should be changed. | | `listStyle` | [`ListStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/liststyle/) | The list style to apply. | | `paragraphIndex?` | `number` | The 0-based index of the paragraph to modify. Negative values apply to all paragraphs. | | `listLevel?` | `number` | Optional list nesting level to set atomically with the list style (0 = outermost). When omitted the existing list level of each paragraph is preserved. Has no visual effect when listStyle is 'None'. | #### Returns `void` #### Signature ```typescript setTextListStyle(id: number, listStyle: ListStyle, paragraphIndex?: number, listLevel?: number): void ``` ***
### getTextListLevel()

Gets the list nesting level for a specific paragraph of a text block.

```javascript const listLevel = engine.block.getTextListLevel(text, 0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose list level should be returned. | | `paragraphIndex` | `number` | The 0-based index of the paragraph. | #### Returns `number` The list nesting level of the paragraph. #### Signature ```typescript getTextListLevel(id: number, paragraphIndex: number): number ``` ***
### setTextListLevel()

Sets the list nesting level for a specific paragraph or all paragraphs of a text block.

```javascript engine.block.setTextListLevel(text, 1); engine.block.setTextListLevel(text, 2, 0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose list level should be changed. | | `listLevel` | `number` | The list nesting level (0 = outermost). | | `paragraphIndex?` | `number` | The 0-based index of the paragraph to modify. Negative values apply to all paragraphs. | #### Returns `void` #### Signature ```typescript setTextListLevel(id: number, listLevel: number, paragraphIndex?: number): void ``` ***
### getTextParagraphIndices()

Returns the 0-based paragraph indices that overlap the given UTF-16 range.

The range is half-open (exclusive): `from` is inclusive, `to` is exclusive (one past the last code unit of interest). When `from === to` the range is a cursor position and the paragraph containing `from` is returned. This convention matches `getTextCursorRange`, so the values it returns can be passed directly without adjustment. Negative values for either parameter cause all paragraph indices to be returned. ```javascript const indices = engine.block.getTextParagraphIndices(text); const { from, to } = engine.block.getTextCursorRange(); const indices = engine.block.getTextParagraphIndices(text, from, to); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block to query. | | `from?` | `number` | The inclusive start UTF-16 index. Negative values reference the entire text. | | `to?` | `number` | The exclusive end UTF-16 index. Negative values reference the entire text. | #### Returns `number`\[] The paragraph indices overlapping the range. #### Signature ```typescript getTextParagraphIndices(id: number, from?: number, to?: number): number[] ``` ***
### setTextLineHeight()

Sets the line height multiplier for a specific paragraph or all paragraphs of a text block.

```javascript engine.block.setTextLineHeight(text, 1.5); engine.block.setTextLineHeight(text, 1.5, 0); engine.block.setTextLineHeight(text, null); // reset all paragraphs to block default ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block to modify. | | `lineHeight` | `number` | The line height multiplier, or `null` to reset to the block-level default. | | `paragraphIndex?` | `number` | The 0-based index of the paragraph to modify. Negative values apply to all paragraphs. | #### Returns `void` #### Signature ```typescript setTextLineHeight(id: number, lineHeight: number, paragraphIndex?: number): void ``` ***
### getTextLineHeight()

Returns the line height multiplier for a specific paragraph of a text block.

Returns the per-paragraph override if one is set, otherwise returns the block-level `lineHeight`. ```javascript const lineHeight = engine.block.getTextLineHeight(text, 0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block to query. | | `paragraphIndex` | `number` | The 0-based index of the paragraph. | #### Returns `number` The line height multiplier for the paragraph. #### Signature ```typescript getTextLineHeight(id: number, paragraphIndex: number): number ``` ***
### 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. ```javascript const canToggleBold = engine.block.canToggleBoldFont(text); ``` #### Parameters | 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 `boolean` Whether the font weight can be toggled. #### Signature ```typescript canToggleBoldFont(id: number, from?: number, to?: number): boolean ``` ***
### 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. ```javascript const canToggleItalic = engine.block.canToggleItalicFont(text); ``` #### Parameters | 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 `boolean` Whether the font style can be toggled. #### Signature ```typescript canToggleItalicFont(id: number, from?: number, to?: number): boolean ``` ***
### 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. ```javascript engine.block.toggleBoldFont(text); ``` #### Parameters | 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 `void` #### Signature ```typescript toggleBoldFont(id: number, from?: number, to?: number): void ``` ***
### 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. ```javascript engine.block.toggleItalicFont(text); ``` #### Parameters | 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 `void` #### Signature ```typescript toggleItalicFont(id: number, from?: number, to?: number): void ``` ***
### setFont()

Sets the font and typeface for an entire text block.

Existing formatting is reset. ```javascript engine.block.setFont(text, font.uri, typeface); ``` #### Parameters | 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 `void` #### Signature ```typescript setFont(id: number, fontFileUri: string, typeface: Typeface): void ``` ***
### setTypeface()

Sets the typeface for a range of text.

The current formatting is retained as much as possible. ```javascript engine.block.setTypeface(text, typeface, 2, 5); ``` #### Parameters | 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 `void` #### Signature ```typescript setTypeface(id: number, typeface: Typeface, from?: number, to?: number): void ``` ***
### getTypeface()

Gets the base typeface of a text block.

This does not return the typefaces of individual text runs. ```javascript const defaultTypeface = engine.block.getTypeface(text); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose typeface should be queried. | #### Returns [`Typeface`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/) the typeface property of the text block. #### Signature ```typescript getTypeface(id: number): Typeface ``` ***
### getTypefaces()

Gets the unique typefaces within a range of text.

```javascript const currentTypefaces = engine.block.getTypefaces(text); ``` #### Parameters | 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 [`Typeface`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/)\[] The unique typefaces in the range. #### Signature ```typescript getTypefaces(id: number, from?: number, to?: number): Typeface[] ``` ***
### 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. The range is half-open (exclusive): `from` is the index of the first selected code unit, `to` is one past the last selected code unit. When `from === to` the cursor is positioned between characters with no text selected. ```javascript const selectedRange = engine.block.getTextCursorRange(); ``` #### Returns [`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 ```typescript getTextCursorRange(): Range_2 ``` ***
### setTextCursorRange()

Sets the text cursor range (selection) within the text block that is currently being edited.

#### Parameters | 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 `void` #### Throws Error if no text block is currently being edited or if the range is invalid. #### Signature ```typescript setTextCursorRange(range: Range_2): void ``` ***
### getTextVisibleLineCount()

Gets the number of visible lines in a text block.

```javascript const lineCount = engine.block.getTextVisibleLineCount(text); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose line count should be returned. | #### Returns `number` The number of lines in the text block. #### Signature ```typescript getTextVisibleLineCount(id: number): number ``` ***
### getTextVisibleLineGlobalBoundingBoxXYWH()

Gets the global bounding box of a visible line of text.

The values are in the scene's global coordinate space. ```javascript const lineBoundingBox = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH(text, 0); ``` #### Parameters | 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 [`XYWH`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/xywh/) The bounding box of the line. #### Signature ```typescript getTextVisibleLineGlobalBoundingBoxXYWH(id: number, lineIndex: number): XYWH ``` ***
### getTextVisibleLineContent()

Gets the text content of a visible line.

#### Parameters | 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 `string` The text content of the line. #### Signature ```typescript getTextVisibleLineContent(id: number, lineIndex: number): string ``` ***
### getTextCharacterInkBoxes()

Returns the tight ink-paint bounding box for each grapheme in the range. One entry per grapheme in \[from, to). Non-printable graphemes get a zero-rect. Coordinates are in global scene space.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block to query. | | `from?` | `number` | Start grapheme index (-1 = start of cursor selection or 0). | | `to?` | `number` | End grapheme index (-1 = end of cursor selection or text length). | #### Returns [`CharacterInkBox`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/characterinkbox/)\[] Array of CharacterInkBox, one per grapheme in range, in text order. #### Signature ```typescript getTextCharacterInkBoxes(id: number, from?: number, to?: number): CharacterInkBox[] ``` ***
### getTextEffectiveHorizontalAlignment()

Gets the effective horizontal alignment of a text block. If the alignment is set to Auto, this returns the resolved alignment (Left or Right) based on the text direction of the first logical run. This never returns 'Auto'.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The text block whose effective alignment should be returned. | #### Returns `"Right"` | `"Left"` | `"Center"` The effective alignment ('Left', 'Right', or 'Center'). #### Signature ```typescript getTextEffectiveHorizontalAlignment(id: number): "Right" | "Left" | "Center" ```
## Block Video Manage time-based media like video and audio, including playback, timing, and controls.
### createCaptionsFromURI()

Creates new caption blocks from an SRT or VTT file URI.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `uri` | `string` | The URI for the captions file to load. Supported file formats are: SRT and VTT. | #### Returns `Promise`\<`number`\[]> A promise that resolves with a list of the created caption blocks. #### Signature ```typescript createCaptionsFromURI(uri: string): Promise ``` ***
### ~~hasDuration()~~

Checks if a block has a duration property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true if the block has a duration property. #### Deprecated Use supportsDuration instead. ***
### supportsDuration()

Checks if a block supports a duration property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true if the block supports a duration property. #### Signature ```typescript supportsDuration(id: number): boolean ``` ***
### setDuration()

Sets the playback duration of a block.

The duration defines how long the block is active in the scene during playback. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose duration should be changed. | | `duration` | `number` | The new duration in seconds. | #### Returns `void` #### Signature ```typescript setDuration(id: number, duration: number): void ``` ***
### getDuration()

Gets the playback duration of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose duration should be returned. | #### Returns `number` The block's duration in seconds. #### Signature ```typescript getDuration(id: number): number ``` ***
### 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 | 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 `void` #### Signature ```typescript setPageDurationSource(page: number, id: number): void ``` ***
### isPageDurationSource()

Checks if a block is the duration source for its page.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose duration source property should be queried. | #### Returns `boolean` true if the block is a duration source for a page. #### Signature ```typescript isPageDurationSource(id: number): boolean ``` ***
### supportsPageDurationSource()

Checks if a block can be set as the page's duration source.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `page` | `number` | The page to check against. | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block can be marked as the page's duration source. #### Signature ```typescript supportsPageDurationSource(page: number, id: number): boolean ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose duration source property should be removed. | #### Returns `void` #### Signature ```typescript removePageDurationSource(id: number): void ``` ***
### ~~hasTimeOffset()~~

Checks if a block has a time offset property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has a time offset property. #### Deprecated Use supportsTimeOffset instead. ***
### supportsTimeOffset()

Checks if a block supports a time offset.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block supports a time offset. #### Signature ```typescript supportsTimeOffset(id: number): boolean ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose time offset should be changed. | | `offset` | `number` | The new time offset in seconds. | #### Returns `void` #### Signature ```typescript setTimeOffset(id: number, offset: number): void ``` ***
### getTimeOffset()

Gets the time offset of a block relative to its parent.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose time offset should be queried. | #### Returns `number` The time offset of the block in seconds. #### Signature ```typescript getTimeOffset(id: number): number ``` ***
### ~~hasTrim()~~

Checks if a block has trim properties.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has trim properties. #### Deprecated Use supportsTrim instead. ***
### supportsTrim()

Checks if a block supports trim properties.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block supports trim properties. #### Signature ```typescript supportsTrim(id: number): boolean ``` ***
### setTrimOffset()

Sets the trim offset of a block's media content.

This sets the time within the media clip where playback should begin. #### Parameters | 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 `void` #### Signature ```typescript setTrimOffset(id: number, offset: number): void ``` ***
### getTrimOffset()

Gets the trim offset of a block's media content.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose trim offset should be queried. | #### Returns `number` the trim offset in seconds. #### Signature ```typescript getTrimOffset(id: number): number ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The object whose trim length should be updated. | | `length` | `number` | The new trim length in seconds. | #### Returns `void` #### Signature ```typescript setTrimLength(id: number, length: number): void ``` ***
### getTrimLength()

Gets the trim length of a block's media content.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The object whose trim length should be queried. | #### Returns `number` The trim length of the object in seconds. #### Signature ```typescript getTrimLength(id: number): number ``` ***
### ~~getTotalSceneDuration()~~

Gets the total duration of a scene in video mode.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `scene` | `number` | The scene whose duration is being queried. | #### Returns `number` the total scene duration. #### Deprecated Use `getDuration` and pass a page block. ***
### setPlaying()

Sets whether a block should play its content during active playback.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block that should be updated. | | `enabled` | `boolean` | Whether the block should be playing its contents. | #### Returns `void` #### Signature ```typescript setPlaying(id: number, enabled: boolean): void ``` ***
### isPlaying()

Checks if a block is playing its content.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` whether the block is playing during playback. #### Signature ```typescript isPlaying(id: number): boolean ``` ***
### ~~hasPlaybackTime()~~

Checks if a block has a playback time property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` whether the block has a playback time property. #### Deprecated Use supportsPlaybackTime instead. ***
### supportsPlaybackTime()

Checks if a block supports a playback time property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` whether the block supports a playback time property. #### Signature ```typescript supportsPlaybackTime(id: number): boolean ``` ***
### setPlaybackTime()

Sets the current playback time of a block's content.

#### Parameters | 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 `void` #### Signature ```typescript setPlaybackTime(id: number, time: number): void ``` ***
### getPlaybackTime()

Gets the current playback time of a block's content.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The playback time of the block in seconds. #### Signature ```typescript getPlaybackTime(id: number): number ``` ***
### 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. ```javascript engine.block.setSoloPlaybackEnabled(videoFill, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block or fill to update. | | `enabled` | `boolean` | Whether solo playback should be enabled. | #### Returns `void` #### Signature ```typescript setSoloPlaybackEnabled(id: number, enabled: boolean): void ``` ***
### isSoloPlaybackEnabled()

Checks if solo playback is enabled for a block.

```javascript engine.block.isSoloPlaybackEnabled(videoFill); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block or fill to query. | #### Returns `boolean` Whether solo playback is enabled for this block. #### Signature ```typescript isSoloPlaybackEnabled(id: number): boolean ``` ***
### ~~hasPlaybackControl()~~

Checks if a block has playback controls.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` Whether the block has playback control. #### Deprecated Use supportsPlaybackControl instead ***
### supportsPlaybackControl()

Checks if a block supports playback controls.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` Whether the block supports playback control. #### Signature ```typescript supportsPlaybackControl(id: number): boolean ``` ***
### setLooping()

Sets whether a block's media content should loop.

#### Parameters | 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 `void` #### Signature ```typescript setLooping(id: number, looping: boolean): void ``` ***
### isLooping()

Checks if a block's media content is set to loop.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` Whether the block is looping. #### Signature ```typescript isLooping(id: number): boolean ``` ***
### setMuted()

Sets whether the audio of a block is muted.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block or video fill to update. | | `muted` | `boolean` | Whether the audio should be muted. | #### Returns `void` #### Signature ```typescript setMuted(id: number, muted: boolean): void ``` ***
### isForceMuted()

Checks if a block's audio is muted due to engine rules.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` Whether the block is force muted. #### Signature ```typescript isForceMuted(id: number): boolean ``` ***
### isMuted()

Checks if a block's audio is muted.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` Whether the block is muted. #### Signature ```typescript isMuted(id: number): boolean ``` ***
### setVolume()

Sets the audio volume of a block.

#### Parameters | 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 `void` #### Signature ```typescript setVolume(id: number, volume: number): void ``` ***
### getVolume()

Gets the audio volume of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The volume, ranging from 0.0 to 1.0. #### Signature ```typescript getVolume(id: number): number ``` ***
### 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 | 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 `void` #### Signature ```typescript setPlaybackSpeed(id: number, speed: number): void ``` ***
### getPlaybackSpeed()

Gets the playback speed multiplier of a block that supports playback control.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The playback speed multiplier. #### Signature ```typescript getPlaybackSpeed(id: number): number ``` ***
### forceLoadAVResource()

Forces the loading of a block's audio/video resource.

If the resource failed to load previously, it will be reloaded. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The video fill or audio block whose resource should be loaded. | #### Returns `Promise`\<`void`> A Promise that resolves once the resource has finished loading. #### Signature ```typescript forceLoadAVResource(id: number): Promise ``` ***
### unstable\_isAVResourceLoaded() Checks if a block's audio/video resource is loaded. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The video fill or audio block. | #### Returns `boolean` The loading state of the resource. This API is experimental and may change or be removed in future versions. ***
### getAVResourceTotalDuration()

Gets the total duration of a block's audio/video resource.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The video fill or audio block. | #### Returns `number` The video or audio file duration in seconds. #### Signature ```typescript getAVResourceTotalDuration(id: number): number ``` ***
### getVideoWidth()

Gets the width of a block's video resource.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The video fill block. | #### Returns `number` The video width in pixels. #### Signature ```typescript getVideoWidth(id: number): number ``` ***
### getVideoHeight()

Gets the height of a block's video resource.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The video fill block. | #### Returns `number` The video height in pixels. #### Signature ```typescript getVideoHeight(id: number): number ``` ***
### 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 | 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 A function to cancel the thumbnail generation request. () => `void` #### Signature ```typescript generateVideoThumbnailSequence(id: number, thumbnailHeight: number, timeBegin: number, timeEnd: number, numberOfFrames: number, onFrame: (frameIndex: number, result: ImageData | Error) => void): () => void ``` ***
### 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 | 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 A function to cancel the thumbnail generation request. () => `void` #### Signature ```typescript generateAudioThumbnailSequence(id: number, samplesPerChunk: number, timeBegin: number, timeEnd: number, numberOfSamples: number, numberOfChannels: number, onChunk: (chunkIndex: number, result: Error | Float32Array) => void): () => void ``` ***
### ~~getVideoFillThumbnail()~~

Generates a thumbnail for a video fill.

#### Parameters | 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 `Promise`\<`Blob`> A promise that resolves with a thumbnail encoded as a JPEG blob. #### Deprecated Use `generateVideoThumbnailSequence` instead. ***
### ~~getVideoFillThumbnailAtlas()~~

Generates a thumbnail atlas for a video fill.

#### Parameters | 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 `Promise`\<`Blob`> A promise that resolves with a thumbnail atlas encoded as a JPEG blob. #### Deprecated Use `generateVideoThumbnailSequence` instead. ***
### ~~getPageThumbnailAtlas()~~

Generates a thumbnail atlas for a page.

#### Parameters | 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 `Promise`\<`Blob`> A promise that resolves with a thumbnail atlas encoded as a JPEG blob. #### Deprecated Use `generateVideoThumbnailSequence` instead. ***
### setNativePixelBuffer()

Updates a pixel stream fill block with a new pixel buffer.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The pixel stream fill block. | | `buffer` | `HTMLCanvasElement` | `HTMLVideoElement` | A canvas or video element to use as the pixel source. | #### Returns `void` #### Signature ```typescript setNativePixelBuffer(id: number, buffer: HTMLCanvasElement | HTMLVideoElement): void ```
## Block Animations Create and manage animations and timeline-based effects.
### createAnimation()

Creates a new animation block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `type` | [`AnimationType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtype/) | The type of animation to create. | #### Returns `number` The handle of the new animation instance. #### Signature ```typescript createAnimation(type: AnimationType): number ``` ***
### supportsAnimation()

Checks if a block supports animation.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` Whether the block supports animation. #### Signature ```typescript supportsAnimation(id: number): boolean ``` ***
### setInAnimation()

Sets the "in" animation of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose "in" animation should be set. | | `animation` | `number` | The animation to set. | #### Returns `void` #### Signature ```typescript setInAnimation(id: number, animation: number): void ``` ***
### setLoopAnimation()

Sets the "loop" animation of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose "loop" animation should be set. | | `animation` | `number` | The animation to set. | #### Returns `void` #### Signature ```typescript setLoopAnimation(id: number, animation: number): void ``` ***
### setOutAnimation()

Sets the "out" animation of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose "out" animation should be set. | | `animation` | `number` | The animation to set. | #### Returns `void` #### Signature ```typescript setOutAnimation(id: number, animation: number): void ``` ***
### getInAnimation()

Gets the "in" animation of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose "in" animation should be queried. | #### Returns `number` The "in" animation of the block. #### Signature ```typescript getInAnimation(id: number): number ``` ***
### getLoopAnimation()

Gets the "loop" animation of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose "loop" animation should be queried. | #### Returns `number` The "loop" animation of the block. #### Signature ```typescript getLoopAnimation(id: number): number ``` ***
### getOutAnimation()

Gets the "out" animation of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose "out" animation should be queried. | #### Returns `number` The "out" animation of the block. #### Signature ```typescript getOutAnimation(id: number): number ```
## Block Groups Create and manage groups of blocks.
### 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. ```javascript const groupable = engine.block.isGroupable([block1, block2]) ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | An array of block ids. | #### Returns `boolean` Whether the blocks can be grouped together. #### Signature ```typescript isGroupable(ids: number[]): boolean ``` ***
### group()

Groups multiple blocks into a new group block.

```javascript if (engine.block.isGroupable([block1, block2])) { const group = engine.block.group(block1, block2]); } ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | A non-empty array of block ids. | #### Returns `number` The block id of the created group. #### Signature ```typescript group(ids: number[]): number ``` ***
### ungroup()

Ungroups a group block, releasing its children.

```javascript engine.block.ungroup(group); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The group id from a previous call to `group`. | #### Returns `void` #### Signature ```typescript ungroup(id: number): void ``` ***
### enterGroup()

Changes selection to a block within a selected group.

Nothing happens if the target is not a group. ```javascript engine.block.enterGroup(group); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The group id from a previous call to `group`. | #### Returns `void` #### Signature ```typescript enterGroup(id: number): void ``` ***
### exitGroup()

Changes selection from a block to its parent group.

Nothing happens if the block is not part of a group. ```javascript engine.block.exitGroup(member1); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | A block id. | #### Returns `void` #### Signature ```typescript exitGroup(id: number): void ```
## Block State Query the intrinsic state or identity of a block, such as its name, UUID, or lock status.
### getType()

Gets the longhand type of a given block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns [`ObjectTypeLonghand`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypelonghand/) The block's type. #### Signature ```typescript getType(id: number): ObjectTypeLonghand ``` ***
### setName()

Sets the name of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `name` | `string` | The name to set. | #### Returns `void` #### Signature ```typescript setName(id: number, name: string): void ``` ***
### getName()

Gets the name of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `string` The block's name. #### Signature ```typescript getName(id: number): string ``` ***
### getUUID()

Gets the unique universal identifier (UUID) of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `string` The block's UUID. #### Signature ```typescript getUUID(id: number): string ``` ***
### isValid()

Checks if a block handle is valid.

A block becomes invalid once it has been destroyed. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block is valid. #### Signature ```typescript isValid(id: number): boolean ``` ***
### referencesAnyVariables()

Checks if a block references any variables.

This check does not recurse into children. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to inspect. | #### Returns `boolean` true if the block references variables and false otherwise. #### Signature ```typescript referencesAnyVariables(id: number): boolean ``` ***
### isIncludedInExport()

Checks if a block is included in exports.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block is included on the exported result, false otherwise. #### Signature ```typescript isIncludedInExport(id: number): boolean ``` ***
### setIncludedInExport()

Sets whether a block should be included in exports.

#### Parameters | 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 `void` #### Signature ```typescript setIncludedInExport(id: number, enabled: boolean): void ``` ***
### isVisibleAtCurrentPlaybackTime()

Checks if a block is visible at the current scene playback time.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` Whether the block should be visible on the canvas at the current playback time. #### Signature ```typescript isVisibleAtCurrentPlaybackTime(id: number): boolean ``` ***
### 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. ```javascript const state = engine.block.getState(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns [`BlockState`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockstate/) The block's state: 'Ready', 'Pending', or 'Error'. #### Signature ```typescript getState(id: number): BlockState ``` ***
### setState()

Sets the state of a block.

```javascript engine.block.setState(video, {type: 'Pending', progress: 0.5}); engine.block.setState(page, {type: 'Ready'}); engine.block.setState(image, {type: 'Error', error: 'ImageDecoding'}); ``` #### Parameters | 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 `void` #### Signature ```typescript setState(id: number, state: BlockState): void ```
## Block Crop Crop, scale, translate, and transform block content.
### ~~hasCrop()~~

Checks if a block has crop properties.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block has crop properties. #### Deprecated Use supportsCrop() instead. ***
### supportsCrop()

Checks if a block supports cropping.

```javascript engine.block.supportsCrop(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` true, if the block supports cropping. #### Signature ```typescript supportsCrop(id: number): boolean ``` ***
### setCropScaleX()

Sets the horizontal crop scale of a block.

```javascript engine.block.setCropScaleX(image, 2.0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be set. | | `scaleX` | `number` | The scale in x direction. | #### Returns `void` #### Signature ```typescript setCropScaleX(id: number, scaleX: number): void ``` ***
### setCropScaleY()

Sets the vertical crop scale of a block.

```javascript engine.block.setCropScaleY(image, 1.5); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be set. | | `scaleY` | `number` | The scale in y direction. | #### Returns `void` #### Signature ```typescript setCropScaleY(id: number, scaleY: number): void ``` ***
### setCropRotation()

Sets the crop rotation of a block in radians.

```javascript engine.block.setCropRotation(image, Math.PI); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be set. | | `rotation` | `number` | The rotation in radians. | #### Returns `void` #### Signature ```typescript setCropRotation(id: number, rotation: number): void ``` ***
### setCropScaleRatio()

Sets the uniform crop scale ratio of a block.

This scales the content up or down from the center of the crop frame. ```javascript engine.block.setCropScaleRatio(image, 3.0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be set. | | `scaleRatio` | `number` | The crop scale ratio. | #### Returns `void` #### Signature ```typescript setCropScaleRatio(id: number, scaleRatio: number): void ``` ***
### setCropTranslationX()

Sets the horizontal crop translation of a block in percentage of the crop frame width.

```javascript engine.block.setCropTranslationX(image, -1.0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be set. | | `translationX` | `number` | The translation in x direction. | #### Returns `void` #### Signature ```typescript setCropTranslationX(id: number, translationX: number): void ``` ***
### setCropTranslationY()

Sets the vertical crop translation of a block in percentage of the crop frame height.

```javascript engine.block.setCropTranslationY(image, 1.0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be set. | | `translationY` | `number` | The translation in y direction. | #### Returns `void` #### Signature ```typescript setCropTranslationY(id: number, translationY: number): void ``` ***
### resetCrop()

Resets the crop of a block to its default state.

The block's content fill mode is set to 'Cover'. ```javascript engine.block.resetCrop(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be reset. | #### Returns `void` #### Signature ```typescript resetCrop(id: number): void ``` ***
### getCropScaleX()

Gets the horizontal crop scale of a block.

```javascript const scaleX = engine.block.getCropScaleX(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose scale should be queried. | #### Returns `number` The scale on the x axis. #### Signature ```typescript getCropScaleX(id: number): number ``` ***
### getCropScaleY()

Gets the vertical crop scale of a block.

```javascript const scaleY = engine.block.getCropScaleY(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose scale should be queried. | #### Returns `number` The scale on the y axis. #### Signature ```typescript getCropScaleY(id: number): number ``` ***
### getCropRotation()

Gets the crop rotation of a block in radians.

```javascript const cropRotation = engine.block.getCropRotation(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop rotation should be queried. | #### Returns `number` The crop rotation in radians. #### Signature ```typescript getCropRotation(id: number): number ``` ***
### getCropScaleRatio()

Gets the uniform crop scale ratio of a block.

```javascript const cropScaleRatio = engine.block.getCropScaleRatio(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop scale ratio should be queried. | #### Returns `number` The crop scale ratio. #### Signature ```typescript getCropScaleRatio(id: number): number ``` ***
### getCropTranslationX()

Gets the horizontal crop translation of a block in percentage of the crop frame width.

```javascript const cropTranslationX = engine.block.getCropTranslationX(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose translation should be queried. | #### Returns `number` The translation on the x axis. #### Signature ```typescript getCropTranslationX(id: number): number ``` ***
### getCropTranslationY()

Gets the vertical crop translation of a block in percentage of the crop frame height.

```javascript const cropTranslationY = engine.block.getCropTranslationY(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose translation should be queried. | #### Returns `number` The translation on the y axis. #### Signature ```typescript getCropTranslationY(id: number): number ``` ***
### 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.

```javascript const adjustedScaleRatio = engine.block.adjustCropToFillFrame(image, 1.0); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be adjusted. | | `minScaleRatio` | `number` | The minimal crop scale ratio to use. | #### Returns `number` The adjusted scale ratio. #### Signature ```typescript adjustCropToFillFrame(id: number, minScaleRatio: number): number ``` ***
### flipCropHorizontal()

Flips the content horizontally within its crop frame.

```javascript engine.block.flipCropHorizontal(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be updated. | #### Returns `void` #### Signature ```typescript flipCropHorizontal(id: number): void ``` ***
### flipCropVertical()

Flips the content vertically within its crop frame.

```javascript engine.block.flipCropVertical(image); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose crop should be updated. | #### Returns `void` #### Signature ```typescript flipCropVertical(id: number): void ``` ***
### isCropAspectRatioLocked()

Checks if the crop aspect ratio is locked for a block.

When locked, crop handles will maintain the current aspect ratio during resize. ```javascript const isLocked = engine.block.isCropAspectRatioLocked(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if aspect ratio is locked, false otherwise. #### Signature ```typescript isCropAspectRatioLocked(id: number): boolean ``` ***
### 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. ```javascript engine.block.setCropAspectRatioLocked(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `locked` | `boolean` | Whether aspect ratio should be locked. | #### Returns `void` #### Signature ```typescript setCropAspectRatioLocked(id: number, locked: boolean): void ``` ***
### canRevertToOriginalRatio()

Checks whether the "Original" crop preset (ContentAspectRatio) can be applied to a block.

This runs the same preliminary check the apply path performs: it resolves the intrinsic content dimensions from the block's image/video fill (an image fill resolves only from its `sourceSet`; a video fill resolves from its `sourceSet` or the first decoded frame). Use it to gate UI that would otherwise call the preset and fail — e.g. an unreplaced placeholder image fill with an empty `sourceSet`. ```javascript const canRevert = engine.block.canRevertToOriginalRatio(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if the preset would resolve, false if it cannot (no/placeholder fill, empty sourceSet, video not yet decoded, or unsupported fill type). #### Signature ```typescript canRevertToOriginalRatio(id: number): boolean ```
## Block Events Subscribe to user actions and state changes related to blocks.
### onSelectionChanged

Subscribes to changes in the selection.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | () => `void` | This function is called at the end of the engine update if the selection has changed. | #### Returns A method to unsubscribe. () => `void` ***
### onClicked

Subscribes to block click events.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | (`id`) => `void` | This function is called at the end of the engine update if a block has been clicked. | #### Returns A method to unsubscribe. () => `void` ***
### onStateChanged

Subscribes to state changes for a set of blocks.

The state is determined by the block and its associated shape, fill, and effects. ```javascript const unsubscribe = engine.block.onStateChanged([], (blocks) => { blocks.forEach(block => console.log(block)); }); ``` #### Parameters | 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 A function to unsubscribe from the event. () => `void`
## Block Utils Check block capabilities like alignability or distributability.
### isAlignable()

Checks if a set of blocks can be aligned.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | An array of block ids. | #### Returns `boolean` Whether the blocks can be aligned. #### Signature ```typescript isAlignable(ids: number[]): boolean ``` ***
### isDistributable()

Checks if a set of blocks can be distributed.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | An array of block ids. | #### Returns `boolean` Whether the blocks can be distributed. #### Signature ```typescript isDistributable(ids: number[]): boolean ```
## Block Kind Get and set a block's 'kind' identifier for custom categorization.
### getKind()

Gets the kind of a given block.

```javascript const kind = engine.block.getKind(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `string` The block's kind. #### Signature ```typescript getKind(id: number): string ``` ***
### setKind()

Sets the kind of a given block, a custom string for categorization of blocks.

```javascript engine.block.setKind(text, 'title'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose kind should be changed. | | `kind` | `string` | The new kind. | #### Returns `void` #### Signature ```typescript setKind(id: number, kind: string): void ```
## Block Properties Get and set any block property by name using low-level, generic accessors.
### findAllProperties()

Gets all available properties of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose properties should be queried. | #### Returns `string`\[] A list of the property names. #### Signature ```typescript findAllProperties(id: number): string[] ``` ***
### isPropertyReadable()

Checks if a property is readable.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `property` | `string` | The name of the property to check. | #### Returns `boolean` Whether the property is readable. Returns false for unknown properties. #### Signature ```typescript isPropertyReadable(property: string): boolean ``` ***
### isPropertyWritable()

Checks if a property is writable.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `property` | `string` | The name of the property to check. | #### Returns `boolean` Whether the property is writable. Returns false for unknown properties. #### Signature ```typescript isPropertyWritable(property: string): boolean ``` ***
### getPropertyType()

Gets the type of a property by its name.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `property` | `string` | The name of the property whose type should be queried. | #### Returns [`PropertyType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/propertytype/) The property type. #### Signature ```typescript getPropertyType(property: string): PropertyType ``` ***
### getEnumValues()

Gets all possible values of an enum property.

#### Type Parameters | Type Parameter | Default type | | ------ | ------ | | `T` | `string` | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `enumProperty` | `string` | The name of the property whose enum values should be queried. | #### Returns `T`\[] A list of the enum value names as a string array. #### Signature ```typescript getEnumValues(enumProperty: string): T[] ``` ***
### setBool()

Sets a boolean property on a block.

```javascript engine.block.setBool(scene, 'scene/aspectRatioLock', false); ``` #### Parameters | 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 `void` #### Signature ```typescript setBool(id: number, property: BoolPropertyName, value: boolean): void ``` ***
### getBool()

Gets a boolean property from a block.

```javascript engine.block.getBool(scene, 'scene/aspectRatioLock'); ``` #### Parameters | 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 `boolean` The value of the property. #### Signature ```typescript getBool(id: number, property: BoolPropertyName): boolean ``` ***
### setInt()

Sets an integer property on a block.

```javascript engine.block.setInt(starShape, 'shape/star/points', points + 2); ``` #### Parameters | 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 `void` #### Signature ```typescript setInt(id: number, property: IntPropertyName, value: number): void ``` ***
### getInt()

Gets an integer property from a block.

```javascript engine.block.setInt(starShape, 'shape/star/points', points + 2); ``` #### Parameters | 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 `number` The value of the property. #### Signature ```typescript getInt(id: number, property: IntPropertyName): number ``` ***
### setFloat()

Sets a float property on a block.

```javascript engine.block.setFloat(text, "text/letterSpacing", 0.2); engine.block.setFloat(text, "text/lineHeight", 1.2); ``` #### Parameters | 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 `void` #### Signature ```typescript setFloat(id: number, property: FloatPropertyName, value: number): void ``` ***
### getFloat()

Gets a float property from a block.

```javascript engine.block.getFloat(starShape, 'shape/star/innerDiameter'); ``` #### Parameters | 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 `number` The value of the property. #### Signature ```typescript getFloat(id: number, property: FloatPropertyName): number ``` ***
### setDouble()

Sets a double-precision float property on a block.

```javascript engine.block.setDouble(audio, 'playback/duration', 1.0); ``` #### Parameters | 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 `void` #### Signature ```typescript setDouble(id: number, property: DoublePropertyName, value: number): void ``` ***
### getDouble()

Gets a double-precision float property from a block.

```javascript engine.block.getDouble(audio, 'playback/duration'); ``` #### Parameters | 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 `number` The value of the property. #### Signature ```typescript getDouble(id: number, property: DoublePropertyName): number ``` ***
### setString()

Sets a string property on a block.

```javascript engine.block.setString(text, 'text/text', 'Hello World'); engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://example.com/sample.jpg'); ``` #### Parameters | 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 `void` #### Signature ```typescript setString(id: number, property: StringPropertyName, value: string): void ``` ***
### getString()

Gets a string property from a block.

```javascript engine.block.getString(text, 'text/text'); engine.block.getString(imageFill, 'fill/image/imageFileURI'); ``` #### Parameters | 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 `string` The value of the property. #### Signature ```typescript getString(id: number, property: StringPropertyName): string ``` ***
### setColor()

Sets a color property on a block.

```javascript // Set the block's fill color to white. engine.block.setColor(colorFill, 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); ``` #### Parameters | 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 `void` #### Signature ```typescript setColor(id: number, property: ColorPropertyName, value: Color): void ``` ***
### getColor()

Gets a color property from a block.

```javascript engine.block.getColor(colorFill, 'fill/color/value'); ``` #### Parameters | 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 [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) The value of the property. #### Signature ```typescript getColor(id: number, property: ColorPropertyName): Color ``` ***
### ~~setColorRGBA()~~

Sets a color property on a block using RGBA values.

#### Parameters | 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 `void` #### Deprecated Use setColor() instead. ***
### ~~getColorRGBA()~~

Gets a color property from a block as RGBA values.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns [`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 Use getColor() instead. ***
### ~~setColorSpot()~~

Sets a spot color property on a block.

#### Parameters | 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 `void` #### Deprecated Use setColor() instead. ***
### ~~getColorSpotName()~~

Gets the spot color name from a color property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns `string` The name of the spot color. #### Deprecated Use getColor() instead. ***
### ~~getColorSpotTint()~~

Gets the spot color tint from a color property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | #### Returns `number` The tint factor of the spot color. #### Deprecated Use getColor() instead. ***
### setEnum()

Sets an enum property on a block.

```javascript engine.block.setEnum(text, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text, 'text/verticalAlignment', 'Center'); ``` ##### Type Parameters | Type Parameter | | ------ | | `T` *extends* keyof [`BlockEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/) | ##### Parameters | 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 `void` #### Call Signature ```ts setEnum( id, property, value): void; ``` Sets an enum property on a block. ```javascript engine.block.setEnum(text, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text, 'text/verticalAlignment', 'Center'); ``` ##### Parameters | 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 `void` #### Signatures ```typescript setEnum(id: number, property: T, value: BlockEnumType[T]): void ``` ```typescript setEnum(id: number, property: string, value: string): void ``` ***
### getEnum()

Gets an enum property from a block.

```javascript engine.block.getEnum(text, 'text/horizontalAlignment'); engine.block.getEnum(text, 'text/verticalAlignment'); ``` ##### Type Parameters | Type Parameter | | ------ | | `T` *extends* keyof [`BlockEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/) | ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose property should be queried. | | `property` | `T` | The name of the property to query. | ##### Returns [`BlockEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/)\[`T`] The value as a string. #### Call Signature ```ts getEnum(id, property): string; ``` Gets an enum property from a block. ```javascript engine.block.getEnum(text, 'text/horizontalAlignment'); engine.block.getEnum(text, 'text/verticalAlignment'); ``` ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose property should be queried. | | `property` | `string` | The name of the property to query. | ##### Returns `string` The value as a string. #### Signatures ```typescript getEnum(id: number, property: T): BlockEnumType[T] ``` ```typescript getEnum(id: number, property: string): string ```
## Block Strokes Control stroke appearance, including color, width, style, and position.
### ~~hasStroke()~~

Checks if a block has a stroke property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if the block has a stroke property. #### Deprecated Use supportsStroke() instead. ***
### supportsStroke()

Checks if a block supports a stroke.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if the block supports a stroke. #### Signature ```typescript supportsStroke(id: number): boolean ``` ***
### setStrokeEnabled()

Enables or disables the stroke of a block.

```javascript engine.block.setStrokeEnabled(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke should be enabled or disabled. | | `enabled` | `boolean` | If true, the stroke will be enabled. | #### Returns `void` #### Signature ```typescript setStrokeEnabled(id: number, enabled: boolean): void ``` ***
### isStrokeEnabled()

Checks if the stroke of a block is enabled.

```javascript const strokeIsEnabled = engine.block.isStrokeEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke state should be queried. | #### Returns `boolean` True if the block's stroke is enabled. #### Signature ```typescript isStrokeEnabled(id: number): boolean ``` ***
### setStrokeOverprint()

Marks the stroke of a block as overprint for PDF export.

The flag is only honored by the PDF writer when the stroke uses a spot color (Separation/DeviceN). For process-color strokes it is a silent no-op. On-screen rendering ignores the flag. ```javascript engine.block.setStrokeOverprint(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke overprint flag should be set. | | `overprint` | `boolean` | If true, the stroke is marked as overprint in exported PDFs. | #### Returns `void` #### Signature ```typescript setStrokeOverprint(id: number, overprint: boolean): void ``` ***
### getStrokeOverprint()

Queries whether the stroke of a block is marked as overprint for PDF export.

```javascript const overprint = engine.block.getStrokeOverprint(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke overprint flag should be queried. | #### Returns `boolean` The stroke overprint flag. #### Signature ```typescript getStrokeOverprint(id: number): boolean ``` ***
### ~~setStrokeColorRGBA()~~

Sets the stroke color of a block using RGBA values.

#### Parameters | 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 `void` #### Deprecated Use setStrokeColor() instead. ***
### setStrokeColor()

Sets the stroke color of a block.

#### Parameters | 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 `void` #### Signature ```typescript setStrokeColor(id: number, color: Color): void ``` ***
### ~~getStrokeColorRGBA()~~

Gets the stroke color of a block as RGBA values.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke color should be queried. | #### Returns [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The stroke color. #### Deprecated Use getStrokeColor() instead. ***
### getStrokeColor()

Gets the stroke color of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke color should be queried. | #### Returns [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) The stroke color. #### Signature ```typescript getStrokeColor(id: number): Color ``` ***
### setStrokeWidth()

Sets the stroke width of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke width should be set. | | `width` | `number` | The stroke width to be set. | #### Returns `void` #### Signature ```typescript setStrokeWidth(id: number, width: number): void ``` ***
### getStrokeWidth()

Gets the stroke width of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke width should be queried. | #### Returns `number` The stroke's width. #### Signature ```typescript getStrokeWidth(id: number): number ``` ***
### setStrokeStyle()

Sets the stroke style of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke style should be set. | | `style` | | `"Dashed"` | `"DashedRound"` | `"Dotted"` | `"LongDashed"` | `"LongDashedRound"` | `"Solid"` | The stroke style to be set. | #### Returns `void` #### Signature ```typescript setStrokeStyle(id: number, style: "Dashed" | "DashedRound" | "Dotted" | "LongDashed" | "LongDashedRound" | "Solid"): void ``` ***
### getStrokeStyle()

Gets the stroke style of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke style should be queried. | #### Returns | `"Dashed"` | `"DashedRound"` | `"Dotted"` | `"LongDashed"` | `"LongDashedRound"` | `"Solid"` The stroke's style. #### Signature ```typescript getStrokeStyle(id: number): "Dashed" | "DashedRound" | "Dotted" | "LongDashed" | "LongDashedRound" | "Solid" ``` ***
### setStrokePosition()

Sets the stroke position of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke position should be set. | | `position` | `"Center"` | `"Inner"` | `"Outer"` | The stroke position to be set. | #### Returns `void` #### Signature ```typescript setStrokePosition(id: number, position: "Center" | "Inner" | "Outer"): void ``` ***
### getStrokePosition()

Gets the stroke position of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke position should be queried. | #### Returns `"Center"` | `"Inner"` | `"Outer"` The stroke position. #### Signature ```typescript getStrokePosition(id: number): "Center" | "Inner" | "Outer" ``` ***
### setStrokeCornerGeometry()

Sets the stroke corner geometry of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke corner geometry should be set. | | `cornerGeometry` | `"Bevel"` | `"Miter"` | `"Round"` | The stroke corner geometry to be set. | #### Returns `void` #### Signature ```typescript setStrokeCornerGeometry(id: number, cornerGeometry: "Bevel" | "Miter" | "Round"): void ``` ***
### getStrokeCornerGeometry()

Gets the stroke corner geometry of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke corner geometry should be queried. | #### Returns `"Bevel"` | `"Miter"` | `"Round"` The stroke corner geometry. #### Signature ```typescript getStrokeCornerGeometry(id: number): "Bevel" | "Miter" | "Round" ``` ***
### ~~setStrokeCap()~~

Sets the stroke cap of a block. Writes both the start and end caps to the same value.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke cap should be set. | | `cap` | `"Round"` | `"Butt"` | `"Square"` | The stroke cap to be set. | #### Returns `void` #### Deprecated Use `setStrokeStartCap` and `setStrokeEndCap` to set each end independently. ***
### ~~getStrokeCap()~~

Gets the legacy single stroke cap of a block. Tracks the value last written via setStrokeCap or setStrokeStartCap; ignores changes made via setStrokeEndCap.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke cap should be queried. | #### Returns `"Round"` | `"Butt"` | `"Square"` The stroke cap. #### Deprecated Use `getStrokeStartCap` and `getStrokeEndCap` instead. ***
### setStrokeStartCap()

Sets the cap geometry at the start of an open stroked path. Use this with setStrokeEndCap to set distinct caps for each end of a stroke (for example a flat start with an arrowhead end). setStrokeCap continues to set both ends at once and is preserved for backwards compatibility.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke start cap should be set. | | `cap` | `"Round"` | `"Butt"` | `"Square"` | The cap geometry to use at the path start. | #### Returns `void` #### Signature ```typescript setStrokeStartCap(id: number, cap: "Round" | "Butt" | "Square"): void ``` ***
### getStrokeStartCap()

Gets the cap geometry at the start of an open stroked path.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke start cap should be queried. | #### Returns `"Round"` | `"Butt"` | `"Square"` The start cap. #### Signature ```typescript getStrokeStartCap(id: number): "Round" | "Butt" | "Square" ``` ***
### setStrokeEndCap()

Sets the cap geometry at the end of an open stroked path. Use this with setStrokeStartCap to set distinct caps for each end of a stroke.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke end cap should be set. | | `cap` | `"Round"` | `"Butt"` | `"Square"` | The cap geometry to use at the path end. | #### Returns `void` #### Signature ```typescript setStrokeEndCap(id: number, cap: "Round" | "Butt" | "Square"): void ``` ***
### getStrokeEndCap()

Gets the cap geometry at the end of an open stroked path.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke end cap should be queried. | #### Returns `"Round"` | `"Butt"` | `"Square"` The end cap. #### Signature ```typescript getStrokeEndCap(id: number): "Round" | "Butt" | "Square" ``` ***
### setStrokeDashStartCap()

Sets the cap geometry at the leading edge of each dash piece (excluding the line's actual start). Only takes effect when a dash pattern is active. Distinct from setStrokeStartCap, which only applies to the start of the open path itself.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose dash start cap should be set. | | `cap` | `"Round"` | `"Butt"` | `"Square"` | The cap geometry to use at the leading edge of each dash piece. | #### Returns `void` #### Signature ```typescript setStrokeDashStartCap(id: number, cap: "Round" | "Butt" | "Square"): void ``` ***
### getStrokeDashStartCap()

Gets the cap geometry at the leading edge of each dash piece.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose dash start cap should be queried. | #### Returns `"Round"` | `"Butt"` | `"Square"` The dash start cap. #### Signature ```typescript getStrokeDashStartCap(id: number): "Round" | "Butt" | "Square" ``` ***
### setStrokeDashEndCap()

Sets the cap geometry at the trailing edge of each dash piece (excluding the line's actual end). Only takes effect when a dash pattern is active. Distinct from setStrokeEndCap, which only applies to the end of the open path itself.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose dash end cap should be set. | | `cap` | `"Round"` | `"Butt"` | `"Square"` | The cap geometry to use at the trailing edge of each dash piece. | #### Returns `void` #### Signature ```typescript setStrokeDashEndCap(id: number, cap: "Round" | "Butt" | "Square"): void ``` ***
### getStrokeDashEndCap()

Gets the cap geometry at the trailing edge of each dash piece.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose dash end cap should be queried. | #### Returns `"Round"` | `"Butt"` | `"Square"` The dash end cap. #### Signature ```typescript getStrokeDashEndCap(id: number): "Round" | "Butt" | "Square" ``` ***
### setStrokeDashArray()

Sets a custom dash pattern for the block's stroke. Semantics match SVG's stroke-dasharray: alternating on/off lengths in design-unit space. When the pattern is non-empty it overrides the preset implied by StrokeStyle. Pass an empty array to fall back to the preset.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke dash pattern should be set. | | `dashArray` | `number`\[] | Alternating on/off lengths. Odd-length arrays are doubled to an even length, matching SVG behaviour. | #### Returns `void` #### Signature ```typescript setStrokeDashArray(id: number, dashArray: number[]): void ``` ***
### getStrokeDashArray()

Gets the custom dash pattern of the block's stroke.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke dash pattern should be queried. | #### Returns `number`\[] The dash pattern, or an empty array if no custom pattern is set. #### Signature ```typescript getStrokeDashArray(id: number): number[] ``` ***
### setStrokeDashOffset()

Sets the dash offset of the block's stroke. Semantics match SVG's stroke-dashoffset. Ignored when the custom dash pattern is empty.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke dash offset should be set. | | `dashOffset` | `number` | The dash offset in design-unit space. | #### Returns `void` #### Signature ```typescript setStrokeDashOffset(id: number, dashOffset: number): void ``` ***
### getStrokeDashOffset()

Gets the dash offset of the block's stroke.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose stroke dash offset should be queried. | #### Returns `number` The dash offset. #### Signature ```typescript getStrokeDashOffset(id: number): number ```
## Block Drop Shadow Configure drop shadow effects, including blur, color, and offset.
### ~~hasDropShadow()~~

Checks if a block has a drop shadow property.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if the block has a drop shadow property. #### Deprecated Use supportsDropShadow() instead. ***
### supportsDropShadow()

Checks if a block supports a drop shadow.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if the block supports a drop shadow. #### Signature ```typescript supportsDropShadow(id: number): boolean ``` ***
### setDropShadowEnabled()

Enables or disables the drop shadow of a block.

```javascript engine.block.setDropShadowEnabled(block, true); ``` #### Parameters | 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 `void` #### Signature ```typescript setDropShadowEnabled(id: number, enabled: boolean): void ``` ***
### isDropShadowEnabled()

Checks if the drop shadow of a block is enabled.

```javascript const dropShadowIsEnabled = engine.block.isDropShadowEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose drop shadow state should be queried. | #### Returns `boolean` True if the block's drop shadow is enabled. #### Signature ```typescript isDropShadowEnabled(id: number): boolean ``` ***
### ~~setDropShadowColorRGBA()~~

Sets the drop shadow color of a block using RGBA values.

#### Parameters | 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 `void` #### Deprecated Use setDropShadowColor() instead. ***
### setDropShadowColor()

Sets the drop shadow color of a block.

#### Parameters | 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 `void` #### Signature ```typescript setDropShadowColor(id: number, color: Color): void ``` ***
### ~~getDropShadowColorRGBA()~~

Gets the drop shadow color of a block as RGBA values.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose drop shadow color should be queried. | #### Returns [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) The drop shadow color. #### Deprecated Use getDropShadowColor instead. ***
### getDropShadowColor()

Gets the drop shadow color of a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose drop shadow color should be queried. | #### Returns [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) The drop shadow color. #### Signature ```typescript getDropShadowColor(id: number): Color ``` ***
### setDropShadowOffsetX()

Sets the drop shadow's horizontal offset.

#### Parameters | 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 `void` #### Signature ```typescript setDropShadowOffsetX(id: number, offsetX: number): void ``` ***
### getDropShadowOffsetX()

Gets the drop shadow's horizontal offset.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose drop shadow's X offset should be queried. | #### Returns `number` The offset. #### Signature ```typescript getDropShadowOffsetX(id: number): number ``` ***
### setDropShadowOffsetY()

Sets the drop shadow's vertical offset.

#### Parameters | 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 `void` #### Signature ```typescript setDropShadowOffsetY(id: number, offsetY: number): void ``` ***
### getDropShadowOffsetY()

Gets the drop shadow's vertical offset.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose drop shadow's Y offset should be queried. | #### Returns `number` The offset. #### Signature ```typescript getDropShadowOffsetY(id: number): number ``` ***
### setDropShadowBlurRadiusX()

Sets the drop shadow's horizontal blur radius.

#### Parameters | 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 `void` #### Signature ```typescript setDropShadowBlurRadiusX(id: number, blurRadiusX: number): void ``` ***
### getDropShadowBlurRadiusX()

Gets the drop shadow's horizontal blur radius.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose drop shadow's blur radius should be queried. | #### Returns `number` The blur radius. #### Signature ```typescript getDropShadowBlurRadiusX(id: number): number ``` ***
### setDropShadowBlurRadiusY()

Sets the drop shadow's vertical blur radius.

#### Parameters | 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 `void` #### Signature ```typescript setDropShadowBlurRadiusY(id: number, blurRadiusY: number): void ``` ***
### getDropShadowBlurRadiusY()

Gets the drop shadow's vertical blur radius.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose drop shadow's blur radius should be queried. | #### Returns `number` The blur radius. #### Signature ```typescript getDropShadowBlurRadiusY(id: number): number ``` ***
### setDropShadowClip()

Sets the drop shadow's clipping behavior.

This only applies to shapes. #### Parameters | 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 `void` #### Signature ```typescript setDropShadowClip(id: number, clip: boolean): void ``` ***
### getDropShadowClip()

Gets the drop shadow's clipping behavior.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose drop shadow's clipping should be queried. | #### Returns `boolean` The drop shadow's clipping state. #### Signature ```typescript getDropShadowClip(id: number): boolean ```
## Block Effects Create, manage, and apply various visual effects to blocks.
### createEffect()

Creates a new effect block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `type` | [`EffectType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttype/) | The type of the effect. | #### Returns `number` The created effect's handle. #### Signature ```typescript createEffect(type: EffectType): number ``` ***
### ~~hasEffects()~~

Checks if a block supports effects.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block can render effects, false otherwise. #### Deprecated Use supportsEffects instead. ***
### supportsEffects()

Checks if a block supports effects.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block can render effects, false otherwise. #### Signature ```typescript supportsEffects(id: number): boolean ``` ***
### getEffects()

Gets all effects attached to a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number`\[] A list of effects or an error, if the block doesn't support effects. #### Signature ```typescript getEffects(id: number): number[] ``` ***
### insertEffect()

Inserts an effect into a block's effect list at a given index.

#### Parameters | 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 `void` #### Signature ```typescript insertEffect(id: number, effectId: number, index: number): void ``` ***
### appendEffect()

Appends an effect to a block's effect list.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to append the effect to. | | `effectId` | `number` | The effect to append. | #### Returns `void` #### Signature ```typescript appendEffect(id: number, effectId: number): void ``` ***
### removeEffect()

Removes an effect from a block's effect list at a given index.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to remove the effect from. | | `index` | `number` | The index where the effect is stored. | #### Returns `void` #### Signature ```typescript removeEffect(id: number, index: number): void ``` ***
### ~~hasEffectEnabled()~~

Checks if an effect block can be enabled or disabled.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `effectId` | `number` | The 'effect' block to query. | #### Returns `boolean` True, if the block supports enabling and disabling, false otherwise. #### Deprecated Calls to this function can be removed. All effects can be enabled and disabled. ***
### setEffectEnabled()

Sets the enabled state of an effect block.

```javascript engine.block.setEffectEnabled(effects[0], false); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `effectId` | `number` | The 'effect' block to update. | | `enabled` | `boolean` | The new state. | #### Returns `void` #### Signature ```typescript setEffectEnabled(effectId: number, enabled: boolean): void ``` ***
### isEffectEnabled()

Queries if an effect block is enabled.

```javascript engine.block.isEffectEnabled(effects[0]); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `effectId` | `number` | The 'effect' block to query. | #### Returns `boolean` True, if the effect is enabled. False otherwise. #### Signature ```typescript isEffectEnabled(effectId: number): boolean ```
## Block Blur Apply and configure blur effects on blocks.
### createBlur()

Creates a new blur block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `type` | [`BlurType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtype/) | The type of blur. | #### Returns `number` The handle of the newly created blur. #### Signature ```typescript createBlur(type: BlurType): number ``` ***
### ~~hasBlur()~~

Checks if a block supports blur.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block supports blur. #### Deprecated Use supportsBlur instead. ***
### supportsBlur()

Checks if a block supports blur.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block supports blur. #### Signature ```typescript supportsBlur(id: number): boolean ``` ***
### setBlur()

Sets the blur effect for a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `blurId` | `number` | A 'blur' block to apply. | #### Returns `void` #### Signature ```typescript setBlur(id: number, blurId: number): void ``` ***
### getBlur()

Gets the blur block of a given design block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `number` The 'blur' block. #### Signature ```typescript getBlur(id: number): number ``` ***
### setBlurEnabled()

Enables or disables the blur effect on a block.

```javascript engine.block.setBlurEnabled(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `enabled` | `boolean` | The new enabled value. | #### Returns `void` #### Signature ```typescript setBlurEnabled(id: number, enabled: boolean): void ``` ***
### isBlurEnabled()

Checks if blur is enabled for a block.

```javascript const isBlurEnabled = engine.block.isBlurEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the blur is enabled. False otherwise. #### Signature ```typescript isBlurEnabled(id: number): boolean ```
## Block Placeholder Manage placeholder functionality, controls, and behavior.
### 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. ```javascript engine.block.setPlaceholderEnabled(block, true); ``` #### Parameters | 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 `void` #### Signature ```typescript setPlaceholderEnabled(id: number, enabled: boolean): void ``` ***
### isPlaceholderEnabled()

Checks if the placeholder function for a block is enabled and can be selected by users in Adopter mode.

```javascript const placeholderIsEnabled = engine.block.isPlaceholderEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose placeholder function state should be queried. | #### Returns `boolean` The enabled state of the placeholder function. #### Signature ```typescript isPlaceholderEnabled(id: number): boolean ``` ***
### ~~hasPlaceholderBehavior()~~

Checks if a block supports placeholder behavior.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block supports placeholder behavior. #### Deprecated Use supportsPlaceholderBehavior instead. ***
### supportsPlaceholderBehavior()

Checks if a block supports placeholder behavior.

```javascript const placeholderBehaviorSupported = engine.block.supportsPlaceholderBehavior(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block supports placeholder behavior. #### Signature ```typescript supportsPlaceholderBehavior(id: number): boolean ``` ***
### 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. ```javascript engine.block.setPlaceholderBehaviorEnabled(block, true); ``` #### Parameters | 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 `void` #### Signature ```typescript setPlaceholderBehaviorEnabled(id: number, enabled: boolean): void ``` ***
### isPlaceholderBehaviorEnabled()

Checks if the placeholder behavior for a block is enabled.

```javascript engine.block.setPlaceholderBehaviorEnabled(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose placeholder behavior state should be queried. | #### Returns `boolean` The enabled state of the placeholder behavior. #### Signature ```typescript isPlaceholderBehaviorEnabled(id: number): boolean ``` ***
### ~~hasPlaceholderControls()~~

Checks if a block supports placeholder controls.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block supports placeholder controls. #### Deprecated Use supportsPlaceholderControls instead. ***
### supportsPlaceholderControls()

Checks if a block supports placeholder controls, e.g. a control overlay and a replacement button.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True, if the block supports placeholder controls. #### Signature ```typescript supportsPlaceholderControls(id: number): boolean ``` ***
### setPlaceholderControlsOverlayEnabled()

Enables or disables the placeholder overlay pattern.

```javascript engine.block.setPlaceholderControlsOverlayEnabled(block, true); ``` #### Parameters | 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 `void` #### Signature ```typescript setPlaceholderControlsOverlayEnabled(id: number, enabled: boolean): void ``` ***
### isPlaceholderControlsOverlayEnabled()

Checks if the placeholder overlay pattern is enabled.

```javascript const overlayEnabled = engine.block.isPlaceholderControlsOverlayEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose placeholder overlay visibility state should be queried. | #### Returns `boolean` The visibility state of the block's placeholder overlay pattern. #### Signature ```typescript isPlaceholderControlsOverlayEnabled(id: number): boolean ``` ***
### setPlaceholderControlsButtonEnabled()

Enables or disables the placeholder button.

```javascript engine.block.setPlaceholderControlsButtonEnabled(block, true); ``` #### Parameters | 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 `void` #### Signature ```typescript setPlaceholderControlsButtonEnabled(id: number, enabled: boolean): void ``` ***
### isPlaceholderControlsButtonEnabled()

Checks if the placeholder button is enabled.

```javascript const buttonEnabled = engine.block.isPlaceholderControlsButtonEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose placeholder button visibility state should be queried. | #### Returns `boolean` The visibility state of the block's placeholder button. #### Signature ```typescript isPlaceholderControlsButtonEnabled(id: number): boolean ```
## Block Scopes Manage permissions and capabilities per block.
### setScopeEnabled()

Enables or disables a scope for a block.

```javascript // Allow the user to move the image block. engine.block.setScopeEnabled(image, 'layer/move', true); ``` #### Parameters | 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 `void` #### Signature ```typescript setScopeEnabled(id: number, key: Scope, enabled: boolean): void ``` ***
### isScopeEnabled()

Checks if a scope is enabled for a block.

```javascript engine.block.isScopeEnabled(image, 'layer/move'); ``` #### Parameters | 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 `boolean` The enabled state of the scope for the given block. #### Signature ```typescript isScopeEnabled(id: number, key: Scope): boolean ``` ***
### isAllowedByScope()

Checks if an operation is allowed by a block's scopes.

```javascript // This will return true when the global scope is set to 'Defer'. engine.block.isAllowedByScope(image, 'layer/move'); ``` #### Parameters | 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 `boolean` Whether the scope is allowed for the given block. #### Signature ```typescript isAllowedByScope(id: number, key: Scope): boolean ```
## Block Boolean Operations Combine multiple blocks into a single new block using boolean path operations.
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `ids` | `number`\[] | An array of block ids. | #### Returns `boolean` Whether the blocks can be combined. #### Signature ```typescript isCombinable(ids: number[]): boolean ``` ***
### 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 | 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 `number` The newly created block or an error. #### Signature ```typescript combine(ids: number[], op: BooleanOperation): number ```
## Block Cutout Create cutout operations and path-based modifications.
### 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 | 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 `number` The newly created block or an error. #### Signature ```typescript createCutoutFromBlocks(ids: number[], vectorizeDistanceThreshold?: number, simplifyDistanceThreshold?: number, useExistingShapeInformation?: boolean): number ``` ***
### createCutoutFromPath()

Creates a cutout block from an SVG path string.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `path` | `string` | An SVG string describing a path. | #### Returns `number` The newly created block or an error. #### Signature ```typescript createCutoutFromPath(path: string): number ``` ***
### createCutoutFromOperation()

Creates a new cutout block by performing a boolean operation on existing cutout blocks.

#### Parameters | 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 `number` The newly created block or an error. #### Signature ```typescript createCutoutFromOperation(ids: number[], op: CutoutOperation): number ```
## Block
### 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. ```javascript const duplicate = engine.block.split(video, 10.0); ``` #### Parameters | 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 `number` The newly created second half of the split block. #### Signature ```typescript split(id: number, atTime: number, options?: SplitOptions): number ```
## Block Analysis
### getDominantColors()

Extracts the dominant colors from the rendered appearance of a block.

Performs an internal update to resolve the final layout for the block. Will not complete as long as assets are in a pending state; asset loading progresses during engine updates. Crops, color adjustments, and effects applied to the block are reflected in the returned palette. Fully or mostly transparent pixels are excluded from the analysis. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `handle` | `number` | The design block element to analyze. Must be attached to a scene and render visible content. | | `options?` | [`DominantColorsOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/dominantcolorsoptions/) | See `DominantColorsOptions`. | #### Returns `Promise`\<[`DominantColor`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/dominantcolor/)\[]> A promise that resolves with the dominant colors sorted by weight, descending. #### Signature ```typescript getDominantColors(handle: number, options?: DominantColorsOptions): Promise ```
## Block Audio
### getAudioTrackCountFromVideo()

Gets the number of available audio tracks in a video fill block.

```javascript const trackCount = engine.block.getAudioTrackCountFromVideo(videoBlock); console.log(`Video has ${trackCount} audio tracks`); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `videoFillBlock` | `number` | The video fill block to examine. | #### Returns `number` The number of audio tracks. #### Throws Will throw an error if the block is not a video fill or has no audio. #### Signature ```typescript getAudioTrackCountFromVideo(videoFillBlock: number): number ``` ***
### createAudioFromVideo()

Creates a new audio block by extracting a specific audio track from a video fill block.

```javascript // Extract the first audio track (usually the main mix) with trim settings const audioBlock = engine.block.createAudioFromVideo(videoFillBlock, 0); // Extract full audio track without trim settings const audioBlock = engine.block.createAudioFromVideo(videoFillBlock, 0, { keepTrimSettings: false }); // Extract a specific track, keep trim settings, and mute the original video const dialogueTrack = engine.block.createAudioFromVideo(videoFillBlock, 1, { keepTrimSettings: true, muteOriginalVideo: true }); ``` #### Parameters | 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 `number` The handle of the newly created audio block with extracted audio from the specified track. #### Throws Will throw an error if the track index is invalid or the block has no audio. #### Signature ```typescript createAudioFromVideo(videoFillBlock: number, trackIndex: number, options?: AudioFromVideoOptions): number ``` ***
### createAudiosFromVideo()

Creates multiple audio blocks by extracting all audio tracks from a video fill block.

```javascript // Extract all audio tracks from a video with trim settings const 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 video const audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock, { keepTrimSettings: true, muteOriginalVideo: true }); ``` #### Parameters | 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 `number`\[] An array of handles for the newly created audio blocks, one per track. #### Throws Will throw an error if the block has no audio or extraction fails. #### Signature ```typescript createAudiosFromVideo(videoFillBlock: number, options?: AudioFromVideoOptions): number[] ``` ***
### getAudioInfoFromVideo()

Gets information about all audio tracks from a video fill block.

```javascript // Get information about all audio tracks const trackInfos = engine.block.getAudioInfoFromVideo(videoFillBlock); console.log(`Video has ${trackInfos.length} audio tracks`); // Display track information trackInfos.forEach((track, index) => { console.log(`Track ${index}: ${track.channels} channels, ${track.sampleRate}Hz, ${track.language}`); }); // Use track info to create audio blocks selectively const englishTracks = trackInfos.filter(track => track.language === 'eng'); const audioBlocks = englishTracks.map(track => engine.block.createAudioFromVideo(videoFillBlock, track.trackIndex) ); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `videoFillBlock` | `number` | The video fill block to analyze for audio track information. | #### Returns [`AudioTrackInfo`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/audiotrackinfo/)\[] An array containing information about each audio track. #### Throws Will throw an error if the block is not a video fill or has no audio. #### Signature ```typescript getAudioInfoFromVideo(videoFillBlock: number): AudioTrackInfo[] ```
## Block Metadata
### setMetadata()

Sets a metadata value for a given key on a block.

If the key does not exist, it will be added. #### Parameters | 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 `void` #### Signature ```typescript setMetadata(id: number, key: string, value: string): void ``` ***
### getMetadata()

Gets a metadata value for a given key from a block.

#### Parameters | 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 `string` The value associated with the key. #### Signature ```typescript getMetadata(id: number, key: string): string ``` ***
### hasMetadata()

Checks if a block has metadata for a given key.

#### Parameters | 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 `boolean` Whether the key exists. #### Signature ```typescript hasMetadata(id: number, key: string): boolean ``` ***
### findAllMetadata()

Finds all metadata keys on a block.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block whose metadata will be accessed. | #### Returns `string`\[] A list of all metadata keys on this block. #### Signature ```typescript findAllMetadata(id: number): string[] ``` ***
### removeMetadata()

Removes metadata for a given key from a block.

#### Parameters | 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 `void` #### Signature ```typescript removeMetadata(id: number, key: string): void ```
## 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()

Update a block's size.

#### Parameters | 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 `void` #### Signature ```typescript setSize(id: number, width: number, height: number, options?: object): void ``` ***
### setPosition()

Update a block's position.

#### Parameters | 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 `void` #### Signature ```typescript setPosition(id: number, x: number, y: number, options?: object): void ``` ***
### 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 | 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 `Promise`\<`number`> Promise that resolves to the ID of the created image block #### Throws Error if no current page exists #### Signature ```typescript addImage(url: string, options?: AddImageOptions): Promise ``` ***
### 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.

#### Parameters | 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 `Promise`\<`number`> Promise that resolves to the ID of the created video block #### Throws Error if no current page exists #### Signature ```typescript addVideo(url: string, width: number, height: number, options?: AddVideoOptions): Promise ``` ***
### applyAnimation()

Applies an animation to a block.

#### Parameters | 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 `void` #### Signature ```typescript applyAnimation(block: number, animation?: AnimationOptions): void ``` ***
### applyDropShadow()

Applies a drop shadow effect to any block.

#### Parameters | 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 `void` #### Signature ```typescript applyDropShadow(block: number, options?: DropShadowOptions): void ``` ***
### generateThumbnailAtTimeOffset()

Generates a thumbnail image of the scene at a specific time.

#### Parameters | 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 `Promise`\<`Blob`> Promise that resolves to a Blob containing the PNG thumbnail image #### Throws Error if no page exists or if height exceeds 512 pixels #### Signature ```typescript generateThumbnailAtTimeOffset(height: number, time: number): Promise ``` ***
### getBackgroundTrack()

Gets the background track of the current scene. The background track is the track that determines the page duration.

#### Returns `number` The ID of the background track, or null if none exists #### Signature ```typescript getBackgroundTrack(): number ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `block` | `number` | The ID of the block to move to the background track | #### Returns `void` #### Signature ```typescript moveToBackgroundTrack(block: number): void ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: CreativeEngine" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/classes/creativeengine/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

CreativeEngine

## Engine Management Methods for initializing, configuring, and managing the engine lifecycle.
### version

The version of the CE.SDK package.

***
### version

The SDK version

***
### addPlugin()

Add and initialize a plugin to the engine.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `plugin` | [`EnginePlugin`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/engineplugin/) | The plugin to add and initialize. | #### Returns `Promise`\<`void`> #### Signature ```typescript addPlugin(plugin: EnginePlugin): Promise ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `target` | `HTMLElement` | The HTML element to attach the wheel event handler to. | #### Returns A function that removes the event handler from the target and adds it back to the canvas. () => `void` #### Signature ```typescript setWheelEventTarget(target: HTMLElement): () => void ``` ***
### element

Access the canvas element used by the CreativeEngine.

##### Returns [`HTMLCreativeEngineCanvasElement`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/htmlcreativeenginecanvaselement/) ***
### dispose()

Dispose the engine and clean up all resources.

#### Returns `void` #### Signature ```typescript dispose(): void ``` ***
### init()

Initialize a CreativeEngine with an optional configuration.

#### Type Parameters | Type Parameter | | ------ | | `C` *extends* `Partial`\<[`Configuration`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/configuration/)> | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `config?` | `C` | Optional configuration object for engine initialization. | #### Returns `Promise`\<`CreativeEngine` & `C` *extends* `object` ? `object` : `object`> A promise that resolves to an engine instance. #### Signature ```typescript init(config?: C): Promise ``` ***
### getBaseURL()

Returns the configured base URL for the engine's assets.

#### Returns `string` The absolute base URL configured for this engine instance. #### Example ```typescript const engine = await CreativeEngine.init({ baseURL: 'https://my-cdn.example.com/assets/' }); console.log(engine.getBaseURL()); // 'https://my-cdn.example.com/assets/' ``` #### Signature ```typescript getBaseURL(): string ```
## Core APIs
### asset

Manage and interact with assets in the engine.

***
### block

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

***
### editor

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

***
### event

Subscribe to events in the engine.

***
### scene

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

***
### variable

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

## Asset Sources Methods for adding default and demo asset sources to the engine.
### ~~addDefaultAssetSources()~~

Register a set of asset sources containing default assets.

Available default asset sources: - `'ly.img.sticker'` - Various stickers - `'ly.img.vectorpath'` - Shapes and arrows - `'ly.img.filter.lut'` - LUT effects of various kinds - `'ly.img.filter.duotone'` - Color effects of various kinds These assets are parsed 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 | 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 `Promise`\<`void`> A promise that resolves when all asset sources are loaded. #### Deprecated This method uses legacy v4 asset source IDs and will be removed in a future version. Please migrate to v5 asset sources using engine.asset.addLocalAssetSourceFromJSONURI(). ***
### ~~addDemoAssetSources()~~

Register a set of demo asset sources containing example assets.

**Note**: These are demonstration assets not meant for production use. Available demo asset sources: - `'ly.img.image'` - Sample images - `'ly.img.image.upload'` - Demo source to upload image assets - `'ly.img.audio'` - Sample audios - `'ly.img.audio.upload'` - Demo source to upload audio assets - `'ly.img.video'` - Sample videos - `'ly.img.video.upload'` - Demo source to upload video assets #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `baseURL?`: `string`; `excludeAssetSourceIds?`: [`DemoAssetSourceId`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/demoassetsourceid/)\[]; `sceneMode?`: `"Design"` | `"Video"`; `withUploadAssetSources?`: `boolean`; } | Configuration options for loading demo asset sources. | | `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"` | **Deprecated** Since v1.72. Scene mode no longer affects which asset sources are loaded. | | `options.withUploadAssetSources?` | `boolean` | If 'true' asset sources for uploads are added (default false) | #### Returns `Promise`\<`void`> A promise that resolves when all demo asset sources are loaded. #### Deprecated This method uses legacy v3 demo asset source IDs and will be removed in a future version. Please migrate to v4 asset sources using engine.asset.addLocalAssetSourceFromJSONURI().
## Experimental Features Experimental APIs that may change or be removed in future versions.
### unstable\_setVideoExportInactivityTimeout() Configure the timeout for video export inactivity detection. Some browsers exhibit a bug where support for certain video codecs is offered, but when attempting to decode or encode in these codecs, the request will simply never return. We detect that situation using a timeout. To prevent this mechanism from triggering in situations where the export simply takes long because of a slow device, you can configure the timeout here. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `timeout` | `number` | Timeout in milliseconds. Defaults to 10 seconds. This API is experimental and may change or be removed in future versions. | #### Returns `void` ***
### unstable\_setExportInactivityTimeout() Configure the timeout for block-exports in WebWorkers. If exporting a block hangs because resources take too long to initialize, the export will be aborted after this many ms. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `timeout` | `number` | Timeout in milliseconds (default: 10 000) This API is experimental and may change or be removed in future versions. | #### Returns `void`
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: EditorAPI" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/classes/editorapi/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

EditorAPI

## Role & Scope Management Manage user roles and global scope permissions.
### setRole()

Set the user role and apply role-dependent defaults.

Automatically configures scopes and settings based on the specified role. #### 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 `void` #### Signature ```typescript setRole(role: RoleString): void ``` ***
### getRole()

Get the current user role.

#### Returns [`RoleString`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rolestring/) The current role of the user. #### Signature ```typescript getRole(): RoleString ``` ***
### findAllScopes()

Get all available global scope names.

#### Returns [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/)\[] The names of all available global scopes. #### Signature ```typescript findAllScopes(): Scope[] ``` ***
### setGlobalScope()

Set a global scope permission level.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/) | The scope to configure. | | `value` | `"Allow"` | `"Deny"` | `"Defer"` | `Allow` always allows, `Deny` always denies, `Defer` defers to block-level. | #### Returns `void` #### Signature ```typescript setGlobalScope(key: Scope, value: "Allow" | "Deny" | "Defer"): void ``` ***
### getGlobalScope()

Get a global scope's permission level.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `key` | [`Scope`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/) | The scope to query. | #### Returns `"Allow"` | `"Deny"` | `"Defer"` `Allow`, `Deny`, or `Defer` indicating the scope's permission level. #### Signature ```typescript getGlobalScope(key: Scope): "Allow" | "Deny" | "Defer" ```
## Event Subscriptions Subscribe to editor state changes, history updates, and role changes.
### onStateChanged

Subscribe to editor state changes.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | () => `void` | Function called when the editor state changes. | #### Returns A method to unsubscribe from the event. () => `void` ***
### ~~onHistoryUpdated~~

Subscribe to undo/redo history changes.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | () => `void` | Function called when the undo/redo history changes. | #### Returns A method to unsubscribe from the event. () => `void` #### Deprecated Use [onHistoryUpdatedWithKind](https://img.ly/docs/cesdk/angular/api/engine/classes/editorapi/) instead, which additionally reports a [HistoryUpdate](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/historyupdate/) describing the kind of update. ***
### onHistoryUpdatedWithKind

Subscribe to undo/redo history changes.

The callback receives a [HistoryUpdate](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/historyupdate/) describing what kind of update happened so consumers can distinguish a real change to the active history's snapshots (e.g. an edit, undo, or redo) from a pure activation via `setActiveHistory`. ```javascript const unsubscribe = engine.editor.onHistoryUpdatedWithKind((kind) => { if (kind === 'Activated') { // The active history was switched; no scene change happened on this event. return; } const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log('History updated', { canUndo, canRedo }); }); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | (`kind`) => `void` | Function called when the undo/redo history changes. The argument describes the kind of update. | #### Returns A method to unsubscribe from the event. () => `void` ***
### onSettingsChanged

Subscribe to editor settings changes.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | () => `void` | Function called when editor settings change. | #### Returns A method to unsubscribe from the event. () => `void` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | (`role`) => `void` | Function called when the user role changes. | #### Returns A method to unsubscribe from the event. () => `void`
## Edit Mode Management Control the editor's current editing mode and interaction state.
### 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. ```javascript engine.editor.setEditMode('Crop'); // With a base mode engine.editor.setEditMode('CustomMode', 'Crop'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `mode` | [`EditMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/editmode/) | "Transform", "Crop", "Text", "Playback", "Trim", "Vector" or a custom value. | | `baseMode?` | `string` | Optional base mode from which the custom mode will inherit the settings. | #### Returns `void` #### Signature ```typescript setEditMode(mode: EditMode, baseMode?: string): void ``` ***
### 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 [`EditMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/editmode/) "Transform", "Crop", "Text", "Playback", "Trim", "Vector" or a custom value. #### Signature ```typescript getEditMode(): EditMode ``` ***
### getCursorType()

Get the cursor type that should be displayed.

#### Returns | `"Text"` | `"Arrow"` | `"Move"` | `"MoveNotPermitted"` | `"Resize"` | `"Rotate"` | `"Cell"` The cursor type. #### Signature ```typescript getCursorType(): "Text" | "Arrow" | "Move" | "MoveNotPermitted" | "Resize" | "Rotate" | "Cell" ``` ***
### getCursorRotation()

Get the cursor rotation angle.

#### Returns `number` The angle in radians. #### Signature ```typescript getCursorRotation(): number ``` ***
### getTextCursorPositionInScreenSpaceX()

Get the text cursor's x position in screen space.

#### Returns `number` The text cursor's x position in screen space. #### Signature ```typescript getTextCursorPositionInScreenSpaceX(): number ``` ***
### getTextCursorPositionInScreenSpaceY()

Get the text cursor's y position in screen space.

#### Returns `number` The text cursor's y position in screen space. #### Signature ```typescript getTextCursorPositionInScreenSpaceY(): number ```
## History Management Create, manage, and operate on undo/redo history stacks.
### createHistory()

Create a new undo/redo history stack.

Multiple histories can exist, but only one can be active at a time. ```javascript const newHistory = engine.editor.createHistory(); ``` #### Returns `number` The handle of the created history. #### Signature ```typescript createHistory(): number ``` ***
### destroyHistory()

Destroy a history stack and free its resources.

```javascript engine.editor.destroyHistory(oldHistory); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `history` | `number` | The history handle to destroy. | #### Returns `void` #### Throws Error if the handle doesn't refer to a valid history. #### Signature ```typescript destroyHistory(history: number): void ``` ***
### 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. ```javascript engine.editor.setActiveHistory(newHistory); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `history` | `number` | The history handle to make active. | #### Returns `void` #### Throws Error if the handle doesn't refer to a valid history. #### Signature ```typescript setActiveHistory(history: number): void ``` ***
### getActiveHistory()

Get the currently active history handle.

Creates a new history if none exists. ```javascript const oldHistory = engine.editor.getActiveHistory(); ``` #### Returns `number` The handle of the active history. #### Signature ```typescript getActiveHistory(): number ``` ***
### addUndoStep()

Add a new history state to the undo stack.

Only adds a state if undoable changes were made since the last undo step. ```javascript engine.editor.addUndoStep(); ``` #### Returns `void` #### Signature ```typescript addUndoStep(): void ``` ***
### removeUndoStep()

Remove the last history state from the undo stack.

Removes the most recent undo step if available. ```javascript engine.editor.removeUndoStep(); ``` #### Returns `void` #### Signature ```typescript removeUndoStep(): void ``` ***
### undo()

Undo one step in the active history if an undo step is available.

```javascript engine.editor.undo(); ``` #### Returns `void` #### Signature ```typescript undo(): void ``` ***
### redo()

Redo one step in the active history if a redo step is available.

```javascript engine.editor.redo(); ``` #### Returns `void` #### Signature ```typescript redo(): void ``` ***
### canUndo()

Check if an undo step is available.

```javascript if (engine.editor.canUndo()) { engine.editor.undo(); } ``` #### Returns `boolean` True if an undo step is available. #### Signature ```typescript canUndo(): boolean ``` ***
### canRedo()

Check if a redo step is available.

```javascript if (engine.editor.canRedo()) { engine.editor.redo(); } ``` #### Returns `boolean` True if a redo step is available. #### Signature ```typescript canRedo(): boolean ```
## Color Management Handle spot colors, color conversion, and color space operations.
### findAllSpotColors()

Get all spot color names currently defined.

#### Returns `string`\[] The names of all defined spot colors. #### Signature ```typescript findAllSpotColors(): string[] ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `name` | `string` | The name of a spot color. | #### Returns [`RGBA`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/) A result holding a float array of the four color components. #### Signature ```typescript getSpotColorRGBA(name: string): RGBA ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `name` | `string` | The name of a spot color. | #### Returns [`CMYK`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cmyk/) A result holding a float array of the four color components. #### Signature ```typescript getSpotColorCMYK(name: string): CMYK ``` ***
### 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 | 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 `void` #### Signature ```typescript setSpotColorRGB(name: string, r: number, g: number, b: number): void ``` ***
### 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 | 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 `void` #### Signature ```typescript setSpotColorCMYK(name: string, c: number, m: number, y: number, k: number): void ``` ***
### removeSpotColor()

Removes a spot color from the list of set spot colors.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `name` | `string` | The name of a spot color. | #### Returns `void` An empty result on success, an error otherwise. #### Signature ```typescript removeSpotColor(name: string): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `type` | `"Dashed"` | `"Solid"` | The cutout type. | | `color` | `string` | The spot color name to assign. | #### Returns `void` #### Signature ```typescript setSpotColorForCutoutType(type: "Dashed" | "Solid", color: string): void ``` ***
### getSpotColorForCutoutType()

Get the name of the spot color assigned to a cutout type.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `type` | `"Dashed"` | `"Solid"` | The cutout type. | #### Returns `string` The color spot name. #### Signature ```typescript getSpotColorForCutoutType(type: "Dashed" | "Solid"): string ``` ***
### convertColorToColorSpace()

Converts a color to the given color space.

##### Parameters | 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 [`RGBAColor`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbacolor/) The converted color. #### Call Signature ```ts convertColorToColorSpace(color, colorSpace): CMYKColor; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | | `colorSpace` | `"CMYK"` | ##### Returns [`CMYKColor`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cmykcolor/) #### Call Signature ```ts convertColorToColorSpace(color, colorSpace): never; ``` ##### Parameters | 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 `never` #### Signatures ```typescript convertColorToColorSpace(color: Color, colorSpace: "sRGB"): RGBAColor ``` ```typescript convertColorToColorSpace(color: Color, colorSpace: "CMYK"): CMYKColor ``` ```typescript convertColorToColorSpace(color: Color, colorSpace: ColorSpace): never ```
## Resource Management Manage buffers, URIs, and resource data handling.
### createBuffer()

Create a resizable buffer for arbitrary data.

```javascript const buffer = engine.editor.createBuffer(); // Reference the buffer resource from the audio block engine.block.setString(audioBlock, 'audio/fileURI', buffer); ``` #### Returns `string` A URI to identify the created buffer. #### Signature ```typescript createBuffer(): string ``` ***
### destroyBuffer()

Destroy a buffer and free its resources.

```javascript engine.editor.destroyBuffer(buffer); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `uri` | `string` | The URI of the buffer to destroy. | #### Returns `void` #### Signature ```typescript destroyBuffer(uri: string): void ``` ***
### setBufferData()

Set the data of a buffer at a given offset.

```javascript // Generate 10 seconds of stereo 48 kHz audio data const 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 buffer engine.editor.setBufferData(buffer, 0, new Uint8Array(samples.buffer)); ``` #### Parameters | 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 `void` #### Signature ```typescript setBufferData(uri: string, offset: number, data: Uint8Array): void ``` ***
### getBufferData()

Get the data of a buffer at a given offset.

```javascript 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 | 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 `Uint8Array` The data at the given offset. #### Signature ```typescript getBufferData(uri: string, offset: number, length: number): Uint8Array ``` ***
### setBufferLength()

Set the length of a buffer.

```javascript // Reduce the buffer to half its length const currentLength = engine.editor.getBufferLength(buffer); engine.editor.setBufferLength(buffer, currentLength / 2); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `uri` | `string` | The URI of the buffer to update. | | `length` | `number` | The new length of the buffer in bytes. | #### Returns `void` #### Signature ```typescript setBufferLength(uri: string, length: number): void ``` ***
### getBufferLength()

Get the length of a buffer.

```javascript const length = engine.editor.getBufferLength(buffer); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `uri` | `string` | The URI of the buffer to query. | #### Returns `number` The length of the buffer in bytes. #### Signature ```typescript getBufferLength(uri: string): number ``` ***
### getMimeType()

Get the MIME type of a resource.

Downloads the resource if not already cached. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `uri` | `string` | The URI of the resource. | #### Returns `Promise`\<`string`> Promise resolving to the resource's MIME type. #### Throws Error if the resource cannot be downloaded or MIME type determined. #### Signature ```typescript getMimeType(uri: string): Promise ``` ***
### getFontMetrics()

Gets the font metrics for a given font file URI.

If the font is not yet loaded, it will be fetched asynchronously. The returned metrics are in the font's design units coordinate space. ```javascript const metrics = await engine.editor.getFontMetrics('/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Regular.ttf'); console.log(metrics.ascender, metrics.descender, metrics.unitsPerEm); console.log(metrics.lineGap); console.log(metrics.capHeight, metrics.xHeight); console.log(metrics.underlineOffset, metrics.underlineSize, metrics.strikeoutOffset, metrics.strikeoutSize); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `fontFileUri` | `string` | The URI of the font file to get metrics from. | #### Returns `Promise`\<[`FontMetrics`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/fontmetrics/)> A promise resolving to the font metrics. #### Signature ```typescript getFontMetrics(fontFileUri: string): Promise ``` ***
### 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 [`TransientResource`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/transientresource/)\[] The URLs and sizes of transient resources. #### Signature ```typescript findAllTransientResources(): TransientResource[] ``` ***
### 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 `string`\[] The URLs of all media resources referenced in the scene, deduplicated. #### Signature ```typescript findAllMediaURIs(): string[] ``` ***
### getResourceData()

Provides the data of a resource at the given URL.

#### Parameters | 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 `void` #### Signature ```typescript getResourceData(uri: string, chunkSize: number, onData: (result: Uint8Array) => boolean): void ``` ***
### 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `currentUrl` | `string` | The current URL of the resource. | | `relocatedUrl` | `string` | The new URL of the resource. | #### Returns `void` #### Signature ```typescript relocateResource(currentUrl: string, relocatedUrl: string): void ```
## Editor Settings Configure editor behavior through typed settings for different data types.
### setSetting()

Set a setting value using the unified API. The value type is automatically validated based on the key.

#### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof [`Settings`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/settings/) | #### Parameters | 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 `void` #### Throws Error if the keypath is invalid or value type doesn't match #### Example ```typescript // Boolean setting engine.editor.setSetting('doubleClickToCropEnabled', false); // Color setting engine.editor.setSetting('highlightColor', { r: 1, g: 0, b: 1, a: 1 }); // Enum setting engine.editor.setSetting('doubleClickSelectionMode', 'Direct'); ``` #### Signature ```typescript setSetting(keypath: OptionalPrefix, value: SettingValueType): void ``` ***
### getSetting()

Get a setting value using the unified API. The return type is automatically inferred from the key.

#### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof [`Settings`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/settings/) | #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`OptionalPrefix`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/optionalprefix/)\<`K`> | The setting key from Settings | #### Returns [`SettingValueType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingvaluetype/)\<`K`> The value of the setting (type-safe based on key) #### Throws Error if the keypath is invalid #### Example ```typescript // Boolean setting const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); // Color setting const highlight = engine.editor.getSetting('highlightColor'); // Enum setting const selectionMode = engine.editor.getSetting('doubleClickSelectionMode'); ``` #### Signature ```typescript getSetting(keypath: OptionalPrefix): SettingValueType ``` ***
### setSettingBool()

Set a boolean setting value.

##### Parameters | 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 `void` ##### Throws Error if the keypath is invalid. #### Call Signature ```ts setSettingBool(keypath, value): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `boolean` | ##### Returns `void` ##### Deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. #### Signatures ```typescript setSettingBool(keypath: SettingBoolPropertyName, value: boolean): void ``` ```typescript setSettingBool(keypath: `ubq://${string & {}}`, value: boolean): void ``` ***
### getSettingBool()

Get a boolean setting value.

##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingBoolPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingboolpropertyname/) | The settings keypath, e.g. `doubleClickToCropEnabled`. | ##### Returns `boolean` The boolean value of the setting. ##### Throws Error if the keypath is invalid. #### Call Signature ```ts getSettingBool(keypath): boolean; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns `boolean` ##### Deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature ```ts getSettingBool(keypath): boolean; ``` Get a boolean setting value. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingBoolPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingboolpropertyname/) | The settings keypath, e.g. `doubleClickToCropEnabled`. | ##### Returns `boolean` The boolean value of the setting. ##### Throws Error if the keypath is invalid. #### Signatures ```typescript getSettingBool(keypath: SettingBoolPropertyName): boolean ``` ```typescript getSettingBool(keypath: `ubq://${string & {}}`): boolean ``` ```typescript getSettingBool(keypath: SettingBoolPropertyName): boolean ``` ***
### setSettingInt()

Set an integer setting value.

##### Parameters | 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 `void` ##### Throws Error if the keypath is invalid. #### Call Signature ```ts setSettingInt(keypath, value): void; ``` Set an integer setting value. ##### Parameters | 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 `void` ##### Throws Error if the keypath is invalid. #### Signatures ```typescript setSettingInt(keypath: SettingIntPropertyName, value: number): void ``` ```typescript setSettingInt(keypath: SettingIntPropertyName, value: number): void ``` ***
### getSettingInt()

Get an integer setting value.

##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingIntPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname/) | The settings keypath. | ##### Returns `number` The integer value of the setting. ##### Throws Error if the keypath is invalid. #### Call Signature ```ts getSettingInt(keypath): number; ``` Get an integer setting value. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingIntPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname/) | The settings keypath. | ##### Returns `number` The integer value of the setting. ##### Throws Error if the keypath is invalid. #### Signatures ```typescript getSettingInt(keypath: SettingIntPropertyName): number ``` ```typescript getSettingInt(keypath: SettingIntPropertyName): number ``` ***
### setSettingFloat()

Set a float setting value.

##### Parameters | 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 `void` ##### Throws Error if the keypath is invalid. #### Call Signature ```ts setSettingFloat(keypath, value): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `number` | ##### Returns `void` ##### Deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature ```ts setSettingFloat(keypath, value): void; ``` Set a float setting value. ##### Parameters | 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 `void` ##### Throws Error if the keypath is invalid. #### Signatures ```typescript setSettingFloat(keypath: SettingFloatPropertyName, value: number): void ``` ```typescript setSettingFloat(keypath: `ubq://${string & {}}`, value: number): void ``` ```typescript setSettingFloat(keypath: SettingFloatPropertyName, value: number): void ``` ***
### getSettingFloat()

Get a float setting value.

##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingFloatPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname/) | The settings keypath, e.g. `positionSnappingThreshold`. | ##### Returns `number` The float value of the setting. ##### Throws Error if the keypath is invalid. #### Call Signature ```ts getSettingFloat(keypath): number; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns `number` ##### Deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature ```ts getSettingFloat(keypath): number; ``` Get a float setting value. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingFloatPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname/) | The settings keypath, e.g. `positionSnappingThreshold`. | ##### Returns `number` The float value of the setting. ##### Throws Error if the keypath is invalid. #### Signatures ```typescript getSettingFloat(keypath: SettingFloatPropertyName): number ``` ```typescript getSettingFloat(keypath: `ubq://${string & {}}`): number ``` ```typescript getSettingFloat(keypath: SettingFloatPropertyName): number ``` ***
### setSettingString()

Set a string setting value.

##### Parameters | 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 `void` ##### Throws Error if the keypath is invalid. #### Call Signature ```ts setSettingString(keypath, value): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | `string` | ##### Returns `void` ##### Deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature ```ts setSettingString(keypath, value): void; ``` Set a string setting value. ##### Parameters | 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 `void` ##### Throws Error if the keypath is invalid. #### Signatures ```typescript setSettingString(keypath: SettingStringPropertyName, value: string): void ``` ```typescript setSettingString(keypath: `ubq://${string & {}}`, value: string): void ``` ```typescript setSettingString(keypath: SettingStringPropertyName, value: string): void ``` ***
### getSettingString()

Get a string setting value.

##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingStringPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname/) | The settings keypath, e.g. `license`. | ##### Returns `string` The string value of the setting. ##### Throws Error if the keypath is invalid. #### Call Signature ```ts getSettingString(keypath): string; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns `string` ##### Deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature ```ts getSettingString(keypath): string; ``` Get a string setting value. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingStringPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname/) | The settings keypath, e.g. `license`. | ##### Returns `string` The string value of the setting. ##### Throws Error if the keypath is invalid. #### Signatures ```typescript getSettingString(keypath: SettingStringPropertyName): string ``` ```typescript getSettingString(keypath: `ubq://${string & {}}`): string ``` ```typescript getSettingString(keypath: SettingStringPropertyName): string ``` ***
### setSettingColor()

Set a color setting.

##### Parameters | 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 `void` #### Call Signature ```ts setSettingColor(keypath, value): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `keypath` | `` `ubq://${string & {}}` `` | | `value` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | ##### Returns `void` ##### Deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature ```ts setSettingColor(keypath, value): void; ``` Set a color setting. ##### Parameters | 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 `void` #### Signatures ```typescript setSettingColor(keypath: SettingColorPropertyName, value: Color): void ``` ```typescript setSettingColor(keypath: `ubq://${string & {}}`, value: Color): void ``` ```typescript setSettingColor(keypath: SettingColorPropertyName, value: Color): void ``` ***
### getSettingColor()

Get a color setting.

##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | The settings keypath, e.g. `highlightColor`. | ##### Returns [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) ##### Throws An error, if the keypath is invalid. #### Call Signature ```ts getSettingColor(keypath): Color; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `keypath` | `` `ubq://${string & {}}` `` | ##### Returns [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) ##### Deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. #### Call Signature ```ts getSettingColor(keypath): Color; ``` Get a color setting. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | [`SettingColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | The settings keypath, e.g. `highlightColor`. | ##### Returns [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) ##### Throws An error, if the keypath is invalid. #### Signatures ```typescript getSettingColor(keypath: SettingColorPropertyName): Color ``` ```typescript getSettingColor(keypath: `ubq://${string & {}}`): Color ``` ```typescript getSettingColor(keypath: SettingColorPropertyName): Color ``` ***
### setSettingEnum()

Set an enum setting.

##### Type Parameters | Type Parameter | | ------ | | `T` *extends* keyof [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/) | ##### Parameters | 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 `void` #### Call Signature ```ts setSettingEnum(keypath, value): void; ``` Set an enum setting. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | | `value` | `string` | The enum value as string. | ##### Returns `void` #### Signatures ```typescript setSettingEnum(keypath: T, value: SettingEnumType[T]): void ``` ```typescript setSettingEnum(keypath: string, value: string): void ``` ***
### getSettingEnum()

Get an enum setting.

##### Type Parameters | Type Parameter | | ------ | | `T` *extends* keyof [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/) | ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | `T` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/)\[`T`] The value as string. #### Call Signature ```ts getSettingEnum(keypath): string; ``` Get an enum setting. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns `string` The value as string. #### Signatures ```typescript getSettingEnum(keypath: T): SettingEnumType[T] ``` ```typescript getSettingEnum(keypath: string): string ``` ***
### getSettingEnumOptions()

Get the possible enum options for a given enum setting.

##### Type Parameters | Type Parameter | | ------ | | `T` *extends* keyof [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/) | ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | `T` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns [`SettingEnumType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/)\[`T`]\[] The possible enum options as strings. #### Call Signature ```ts getSettingEnumOptions(keypath): string[]; ``` Get the possible enum options for a given enum setting. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | ##### Returns `string`\[] The possible enum options as strings. #### Signatures ```typescript getSettingEnumOptions(keypath: T): SettingEnumType[T][] ``` ```typescript getSettingEnumOptions(keypath: string): string[] ``` ***
### findAllSettings()

Returns a list of all the settings available.

#### Returns `string`\[] A list of settings keypaths. #### Signature ```typescript findAllSettings(): string[] ``` ***
### getSettingType()

Returns the type of a setting.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | `string` | The settings keypath, e.g. `doubleClickSelectionMode`. | #### Returns [`SettingType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingtype/) The setting type. #### Signature ```typescript getSettingType(keypath: string): SettingType ``` ***
### 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 an invalid URI, e.g., due to placeholders. ```javascript // Replace all .jpg files with the IMG.LY logo engine.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 | Parameter | Type | Description | | ------ | ------ | ------ | | `resolver` | [`SyncURIResolver`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/syncuriresolver/) | 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 `void` #### Signature ```typescript setURIResolver(resolver: SyncURIResolver): void ``` ***
### setURIResolverAsync()

Sets a custom async 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. The input is allowed to be invalid URI, e.g., due to placeholders. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `resolver` | [`AsyncURIResolver`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/asyncuriresolver/) | Custom async resolution function. | #### Returns `void` #### Signature ```typescript setURIResolverAsync(resolver: AsyncURIResolver): void ``` ***
### defaultURIResolver()

This is the default implementation for the URI resolver.

It resolves the given path relative to the `basePath` setting. ```javascript engine.editor.defaultURIResolver(uri); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `relativePath` | `string` | The relative path that should be resolved. | #### Returns `string` The resolved absolute URI. #### Signature ```typescript defaultURIResolver(relativePath: string): string ``` ***
### getAbsoluteURI()

Resolves the given path asynchronously.

If a custom resolver has been set with `setURIResolverAsync` (or `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. **Breaking change:** This method now returns a `Promise` instead of a plain `string`. Callers must `await` the result. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `relativePath` | `string` | A relative path string | #### Returns `Promise`\<`string`> Promise resolving to the resolved absolute uri or rejecting if an invalid path was given. #### Signature ```typescript getAbsoluteURI(relativePath: string): Promise ```
## System Information Access memory usage, export limits, and system capabilities.
### getAvailableMemory()

Get the currently available memory.

#### Returns `number` The available memory in bytes. #### Signature ```typescript getAvailableMemory(): number ``` ***
### getUsedMemory()

Get the engine's current memory usage.

#### Returns `number` The current memory usage in bytes. #### Signature ```typescript getUsedMemory(): number ``` ***
### 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 `number` The upper export size limit in pixels, or maximum 32-bit integer if unlimited. #### Signature ```typescript getMaxExportSize(): number ```
## Experimental
### unstable\_isInteractionHappening() Check if a user interaction is currently happening. Detects active interactions like resize edits with drag handles or touch gestures. #### Returns `boolean` True if an interaction is happening. This API is experimental and may change or be removed in future versions.
## Other
### ~~setSettingColorRGBA()~~

Set a color setting.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | | `` `ubq://${string & {}}` `` | [`SettingColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | The settings keypath, e.g. `highlightColor`. | | `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 `void` #### Deprecated Use setSettingColor() instead. ***
### ~~getSettingColorRGBA()~~

Get a color setting.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `keypath` | | `` `ubq://${string & {}}` `` | [`SettingColorPropertyName`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/) | The settings keypath, e.g. `highlightColor`. | #### Returns [`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 Use getSettingColor() instead. ***
### isHighlightingEnabled()

Checks wether the block has selection and hover highlighting enabled or disabled.

```javascript const highlightingIsEnabled = engine.editor.isHighlightingEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if highlighting is enabled, false otherwise. #### Signature ```typescript isHighlightingEnabled(id: number): boolean ``` ***
### setHighlightingEnabled()

Enable or disable selection and hover highlighting for a block.

```javascript engine.editor.setHighlightingEnabled(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `enabled` | `boolean` | Whether or not the block should show highlighting when selected or hovered. | #### Returns `void` #### Signature ```typescript setHighlightingEnabled(id: number, enabled: boolean): void ``` ***
### isSelectionEnabled()

Checks whether the block can currently be selected.

```javascript const selectionIsEnabled = engine.editor.isSelectionEnabled(block); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `boolean` True if selection is enabled, false otherwise. #### Signature ```typescript isSelectionEnabled(id: number): boolean ``` ***
### setSelectionEnabled()

Enable or disable selection for a block.

```javascript engine.editor.setSelectionEnabled(block, true); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to update. | | `enabled` | `boolean` | Whether the block should be selectable. | #### Returns `void` #### Signature ```typescript setSelectionEnabled(id: number, enabled: boolean): void ``` ***
### setMovementConstraint()

Set one or more rules that limit how far blocks can be positioned outside their parent page during user interactions (drag, resize, touch gestures, crop). Programmatic API calls are not affected.

`overshoot` is a non-negative fraction of the moved block's own size: `0` pins blocks fully inside the page, `0.3` allows 30% to extend past the page bounds. Each rule's scope is determined by its keys: - `{ overshoot }` — scene-wide default for every page in the scene. - `{ overshoot, block }` — applies to a specific block. Pages are blocks, so setting this on a page acts as the default for blocks inside that page. - `{ overshoot, blockType }` — applies to every block of the given type (e.g. `"text"` or `"//ly.img.ubq/text"`). Use `removeMovementConstraint` to clear a rule. When multiple rules match a block, the most specific one wins: block \\> parent page \\> blockType \\> scene-wide. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `rules` | `MovementConstraintRule` | `MovementConstraintRule`\[] | A single rule or an array of rules to apply. | #### Returns `void` #### Signature ```typescript setMovementConstraint(rules: MovementConstraintRule | MovementConstraintRule[]): void ``` ***
### getMovementConstraint()

Get the effective movement constraint for a block, picking the most specific matching rule: block > parent page > blockType > scene-wide.

The returned `overshoot` is a fraction of the block's own size. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block to query. | #### Returns `object` `{ overshoot }` with the effective value, or `null` if unconstrained. | Name | Type | | ------ | ------ | | `overshoot` | `number` | #### Signature ```typescript getMovementConstraint(id: number): object ``` ***
### removeMovementConstraint()

Remove previously set movement constraints.

- No argument: removes the scene-wide default. - `{ block }` / `{ blockType }` (or an array): removes the matching scope(s). Removing a scope falls through to the next tier on subsequent resolution. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `scopes?` | `MovementConstraintScope` | `MovementConstraintScope`\[] | Scope or array of scopes to remove. Omit to remove the scene-wide default. | #### Returns `void` #### Signature ```typescript removeMovementConstraint(scopes?: MovementConstraintScope | MovementConstraintScope[]): void ```
## Vector Edit
### hasSelectedVectorNode()

Check whether a vector anchor node is currently selected in vector edit mode.

#### Returns `boolean` True if a vector anchor node is selected. #### Signature ```typescript hasSelectedVectorNode(): boolean ``` ***
### addVectorNode()

Add a new vertex by splitting the segment after the currently selected vector node.

#### Returns `void` #### Signature ```typescript addVectorNode(): void ``` ***
### deleteVectorNode()

Delete the currently selected vector node from the path.

#### Returns `void` #### Signature ```typescript deleteVectorNode(): void ``` ***
### hasSelectedVectorControlPoint()

Check whether a vector control point handle is currently selected.

#### Returns `boolean` #### Signature ```typescript hasSelectedVectorControlPoint(): boolean ``` ***
### deleteSelectedVectorControlPoints()

Delete (reset) the currently selected vector control point handles. Removes the bezier handle from the node, converting that side to a straight line. If the node has two handles, only the selected one is removed.

#### Returns `void` #### Signature ```typescript deleteSelectedVectorControlPoints(): void ``` ***
### toggleSelectedVectorNodeSmooth()

Toggle the currently selected vector node between smooth (bezier handles) and corner (no handles).

#### Returns `void` #### Signature ```typescript toggleSelectedVectorNodeSmooth(): void ``` ***
### setVectorEditBendMode()

Enable or disable bend mode for vector editing.

When bend mode is active, clicking an anchor node automatically toggles it between smooth (bezier handles) and corner (no handles). #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `active` | `boolean` | true to enable bend mode, false to return to normal move mode. | #### Returns `void` #### Signature ```typescript setVectorEditBendMode(active: boolean): void ``` ***
### getVectorEditBendMode()

Check whether vector edit bend mode is currently active.

#### Returns `boolean` true if bend mode is active. #### Signature ```typescript getVectorEditBendMode(): boolean ``` ***
### setVectorEditAddMode()

Enable or disable add mode for vector editing.

When add mode is active, clicking on a path segment inserts a new anchor point at the click position. Mutually exclusive with bend and delete modes. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `active` | `boolean` | true to enable add mode, false to return to normal move mode. | #### Returns `void` #### Signature ```typescript setVectorEditAddMode(active: boolean): void ``` ***
### getVectorEditAddMode()

Check whether vector edit add mode is currently active.

#### Returns `boolean` true if add mode is active. #### Signature ```typescript getVectorEditAddMode(): boolean ``` ***
### setVectorEditDeleteMode()

Enable or disable delete mode for vector editing.

When delete mode is active, clicking an anchor node instantly deletes it from the path. Mutually exclusive with bend and add modes. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `active` | `boolean` | true to enable delete mode, false to return to normal move mode. | #### Returns `void` #### Signature ```typescript setVectorEditDeleteMode(active: boolean): void ``` ***
### getVectorEditDeleteMode()

Check whether vector edit delete mode is currently active.

#### Returns `boolean` true if delete mode is active. #### Signature ```typescript getVectorEditDeleteMode(): boolean ``` ***
### setSelectedVectorNodeMirrorMode()

Set the bezier handle mirror mode for the currently selected vector node.

Mirror modes control how the opposite handle behaves when one handle is dragged: - 0 (None): handles move independently - 1 (AngleAndLength): the opposite handle mirrors both angle and length - 2 (AngleOnly): the opposite handle mirrors the angle but keeps its own length #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `mode` | `number` | The mirror mode (0, 1, or 2). | #### Returns `void` #### Signature ```typescript setSelectedVectorNodeMirrorMode(mode: number): void ``` ***
### getSelectedVectorNodeMirrorMode()

Get the bezier handle mirror mode of the currently selected vector node.

#### Returns `number` The mirror mode as a number (0 = None, 1 = AngleAndLength, 2 = AngleOnly). #### Throws Error if no node is selected or no vector path is being edited. #### Signature ```typescript getSelectedVectorNodeMirrorMode(): number ```
## Viewport
### 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 | 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 `void` #### Signature ```typescript setSafeAreaInsets(insets: object): void ``` ***
### getSafeAreaInsets()

Get the current global safe area insets configuration.

#### Returns `object` The current inset values in CSS pixels (device-independent) | Name | Type | | ------ | ------ | | `left` | `number` | | `top` | `number` | | `right` | `number` | | `bottom` | `number` | #### Signature ```typescript getSafeAreaInsets(): object ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: EventAPI" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/classes/eventapi/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

EventAPI

## Event Subscriptions Subscribe to block lifecycle events with filtering and callback management.
### subscribe

Subscribe to block lifecycle events.

Events are bundled and delivered at the end of each engine update cycle for efficient processing. #### 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 A method to unsubscribe from the events. () => `void`
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: SceneAPI" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/classes/sceneapi/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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
### Constructor

SceneAPI

## Scene Creation Create new scenes from scratch or from media files.
### create()

Create a new design scene, along with its own camera.

```javascript const scene = engine.scene.create(layout); // With a specific design unit and auto-paired font-size unit: const pxScene = engine.scene.create('Free', { designUnit: 'Pixel' }); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `sceneLayout?` | `"Free"` | `"VerticalStack"` | `"HorizontalStack"` | `"DepthStack"` | The layout of the scene. | | `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. - `designUnit` - The design unit of the new scene. Defaults to `Pixel`. - `fontSizeUnit` - The font-size unit. If omitted, paired with `designUnit` (`Pixel` design unit → `Pixel` font unit, others → `Point`). | #### Returns `number` The scene's handle. #### Signature ```typescript create(sceneLayout?: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack", options?: CreateSceneOptions): number ``` ***
### ~~createVideo()~~

Create a new scene in video mode, along with its own camera.

#### Parameters | 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 `number` The scene's handle. #### Deprecated Scene mode no longer affects engine behavior. Use `create()` followed by `setMode('Video')` instead. ```javascript const scene = engine.scene.createVideo(); ``` ***
### 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. ```javascript const scene = await engine.scene.createFromImage('https://img.ly/static/ubq_samples/sample_4.jpg'); ``` #### Parameters | 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"` | `"HorizontalStack"` | `"DepthStack"` | - | | `spacing?` | `number` | - | | `spacingInScreenSpace?` | `boolean` | - | #### Returns `Promise`\<`number`> A promise that resolves with the scene ID on success or rejected with an error otherwise. #### Signature ```typescript createFromImage(url: string, dpi?: number, pixelScaleFactor?: number, sceneLayout?: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack", spacing?: number, spacingInScreenSpace?: boolean): Promise ``` ***
### 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. ```javascript const scene = await engine.scene.createFromVideo('https://img.ly/static/ubq_video_samples/bbb.mp4'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `url` | `string` | The video URL. | #### Returns `Promise`\<`number`> A promise that resolves with the scene ID on success or rejected with an error otherwise. #### Signature ```typescript createFromVideo(url: string): Promise ```
## Scene Loading Load scenes from various sources including strings, URLs, and archives.
### 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. ```javascript const sceneContent = await creativeEngine.scene.saveToString(); creativeEngine.scene.loadFromString(sceneContent); ``` #### Parameters | 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 `Promise`\<`number`> A handle to the loaded scene. #### Signature ```typescript loadFromString(sceneContent: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ``` ***
### 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. ```javascript const sceneURL = 'https://example.com/my-scene.json'; creativeEngine.scene.loadFromURL(sceneURL); ``` #### Parameters | 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 `Promise`\<`number`> scene A promise that resolves once the scene was loaded or rejects with an error otherwise. #### Signature ```typescript loadFromURL(url: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ``` ***
### 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 | 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 `Promise`\<`number`> scene A promise that resolves once the scene was loaded or rejects with an error otherwise. #### Signature ```typescript loadFromArchiveURL(url: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise ```
## Scene Saving Save and export scenes to different formats.
### saveToString()

Serializes the current scene into a string. Selection is discarded.

##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `allowedResourceSchemes` | `string`\[] | The resource schemes to allow in the saved string. | | `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 `Promise`\<`string`> A promise that resolves with a string on success or an error on failure. ##### Deprecated Use saveToString(options) instead for better extensibility and to access compression features. #### Call Signature ```ts saveToString(options?): Promise; ``` Serializes the current scene into a string. Selection is discarded. ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `options?` | \{ `allowedResourceSchemes?`: `string`\[]; `onDisallowedResourceScheme?`: (`url`, `dataHash`) => `Promise`\<`string`>; `compression?`: \{ `format?`: [`CompressionFormat`](https://img.ly/docs/cesdk/angular/api/engine/enumerations/compressionformat/); `level?`: [`CompressionLevel`](https://img.ly/docs/cesdk/angular/api/engine/enumerations/compressionlevel/); }; } | Save options containing: - allowedResourceSchemes: The resource schemes to allow in the saved string. Defaults to \['blob', 'bundle', 'file', 'http', 'https', 'opfs']. - onDisallowedResourceScheme: 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. - compression: Optional compression settings containing: - format: Compression format (None or Zstd). Defaults to None. - level: Compression level (Fastest, Default, or Best). Defaults to Default. | | `options.allowedResourceSchemes?` | `string`\[] | - | | `options.onDisallowedResourceScheme?` | (`url`, `dataHash`) => `Promise`\<`string`> | - | | `options.compression?` | \{ `format?`: [`CompressionFormat`](https://img.ly/docs/cesdk/angular/api/engine/enumerations/compressionformat/); `level?`: [`CompressionLevel`](https://img.ly/docs/cesdk/angular/api/engine/enumerations/compressionlevel/); } | - | | `options.compression.format?` | [`CompressionFormat`](https://img.ly/docs/cesdk/angular/api/engine/enumerations/compressionformat/) | - | | `options.compression.level?` | [`CompressionLevel`](https://img.ly/docs/cesdk/angular/api/engine/enumerations/compressionlevel/) | - | ##### Returns `Promise`\<`string`> A promise that resolves with a string on success or an error on failure. #### Signatures ```typescript saveToString(allowedResourceSchemes: string[], onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise): Promise ``` ```typescript saveToString(options?: object): Promise ``` ***
### 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 `Promise`\<`Blob`> A promise that resolves with a Blob on success or an error on failure. #### Signature ```typescript saveToArchive(): Promise ```
## Page Management Manage pages within scenes and find elements.
### getPages()

Get the sorted list of pages in the scene.

```javascript const pages = engine.scene.getPages(); ``` #### Returns `number`\[] The sorted list of pages in the scene. #### Signature ```typescript getPages(): number[] ``` ***
### 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.

```javascript const currentPage = engine.scene.getCurrentPage(); ``` #### Returns `number` The current page in the scene or null. #### Signature ```typescript getCurrentPage(): number ``` ***
### findNearestToViewPortCenterByType()

Find all blocks with the given type sorted by the distance to viewport center.

```javascript // 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 | Parameter | Type | Description | | ------ | ------ | ------ | | `type` | [`DesignBlockType`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktype/) | The type to search for. | #### Returns `number`\[] A list of block ids sorted by distance to viewport center. #### Signature ```typescript findNearestToViewPortCenterByType(type: DesignBlockType): number[] ``` ***
### findNearestToViewPortCenterByKind()

Find all blocks with the given kind sorted by the distance to viewport center.

```javascript let nearestImageByKind = engine.scene.findNearestToViewPortCenterByKind('image')[0]; ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `kind` | `string` | The kind to search for. | #### Returns `number`\[] A list of block ids sorted by distance to viewport center. #### Signature ```typescript findNearestToViewPortCenterByKind(kind: string): number[] ```
## Event Subscriptions Subscribe to scene-related events and changes.
### onZoomLevelChanged

Subscribe to changes to the zoom level.

```javascript const unsubscribeZoomLevelChanged = engine.scene.onZoomLevelChanged(() => { const zoomLevel = engine.scene.getZoomLevel(); console.log('Zoom level is now: ', zoomLevel); }); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | () => `void` | This function is called at the end of the engine update, if the zoom level has changed. | #### Returns A method to unsubscribe. () => `void` ***
### onActiveChanged

Subscribe to changes to the active scene rendered by the engine.

```javascript const unsubscribe = engine.scene.onActiveChanged(() => { const newActiveScene = engine.scene.get(); }); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `callback` | () => `void` | This function is called at the end of the engine update, if the active scene has changed. | #### Returns A method to unsubscribe. () => `void`
## Experimental Features Experimental features that may change or be removed in future versions.
### 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. ```javascript // Keep the scene with padding of 10px within the camera engine.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 | 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 `void` ***
### unstable\_disableCameraPositionClamping() Disables any previously set position clamping for the current scene. ```javascript engine.scene.unstable_disableCameraPositionClamping(); ``` #### Parameters | 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 `void` ***
### unstable\_isCameraPositionClampingEnabled() Queries whether position clamping is enabled. ```javascript engine.scene.unstable_isCameraPositionClampingEnabled(); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `blockOrScene?` | `number` | Optionally, the scene or a block in the scene for which to query the position clamping. | #### Returns `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() Continually ensures the zoom level of the camera in the active scene to be in the given range. ```javascript // Allow zooming from 12.5% to 800% relative to the size of a page engine.scene.unstable_enableCameraZoomClamping([page], 0.125, 8.0, 0.0, 0.0, 0.0, 0.0); ``` #### Parameters | 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 `void` ***
### unstable\_disableCameraZoomClamping() Disables any previously set zoom clamping for the current scene. ```javascript engine.scene.unstable_disableCameraZoomClamping(); ``` #### Parameters | 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 `void` ***
### unstable\_isCameraZoomClampingEnabled() Queries whether zoom clamping is enabled. ```javascript engine.scene.unstable_isCameraZoomClampingEnabled(); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `blockOrScene?` | `number` | Optionally, the scene or a block for which to query the zoom clamping. | #### Returns `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 Get and set scene properties like design units and mode.
### get()

Return the currently active scene.

```javascript const scene = engine.scene.get(); ``` #### Returns `number` The scene or null, if none was created yet. #### Signature ```typescript get(): number ``` ***
### ~~getMode()~~

Get the current scene mode.

#### Returns `"Design"` | `"Video"` The current mode of the scene, or null if no mode has been set. #### Deprecated Scene mode no longer affects engine behavior. All features work regardless of mode. ```javascript const mode = scene.getMode(); ``` ***
### ~~setMode()~~

Set the mode of the scene.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `mode` | `"Design"` | `"Video"` | The new mode for the scene. | #### Returns `void` #### Deprecated Scene mode no longer affects engine behavior. All features work regardless of mode. ```javascript engine.scene.setMode('Video'); ``` ***
### setDesignUnit()

Converts all values of the current scene into the given design unit.

```javascript engine.scene.setDesignUnit('Pixel'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `designUnit` | `"Pixel"` | `"Millimeter"` | `"Inch"` | The new design unit of the scene | #### Returns `void` #### Signature ```typescript setDesignUnit(designUnit: "Pixel" | "Millimeter" | "Inch"): void ``` ***
### getDesignUnit()

Returns the design unit of the current scene.

```javascript engine.scene.getDesignUnit(); ``` #### Returns `"Pixel"` | `"Millimeter"` | `"Inch"` The current design unit. #### Signature ```typescript getDesignUnit(): "Pixel" | "Millimeter" | "Inch" ``` ***
### setFontSizeUnit()

Sets the unit in which font sizes for setTextFontSize and getTextFontSizes are interpreted. The engine continues to store font sizes in points internally; this only affects how values are interpreted at the API boundary when callers don't specify a unit in TextFontSizeOptions.

```javascript engine.scene.setFontSizeUnit('Pixel'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `fontSizeUnit` | `"Pixel"` | `"Point"` | The new font-size unit of the scene. | #### Returns `void` #### Signature ```typescript setFontSizeUnit(fontSizeUnit: "Pixel" | "Point"): void ``` ***
### getFontSizeUnit()

Returns the font-size unit of the current scene.

```javascript engine.scene.getFontSizeUnit(); ``` #### Returns `"Pixel"` | `"Point"` The current font-size unit. #### Signature ```typescript getFontSizeUnit(): "Pixel" | "Point" ``` ***
### getLayout()

Get the layout of the current scene.

```javascript const layout = engine.scene.getLayout(); ``` #### Returns `"Free"` | `"VerticalStack"` | `"HorizontalStack"` | `"DepthStack"` The current layout of the scene. #### Signature ```typescript getLayout(): "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack" ``` ***
### 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. ```javascript engine.scene.setLayout('VerticalStack'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `layout` | `"Free"` | `"VerticalStack"` | `"HorizontalStack"` | `"DepthStack"` | The new layout for the scene. | #### Returns `void` #### Signature ```typescript setLayout(layout: "Free" | "VerticalStack" | "HorizontalStack" | "DepthStack"): void ```
## Template Operations Apply templates to existing scenes.
### 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. ```javascript engine.scene.applyTemplateFromString("UBQ1ewoiZm9ybWF0Ij..."); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `content` | `string` | The template scene file contents, a base64 string. | #### Returns `Promise`\<`void`> A Promise that resolves once the template was applied or rejects if there was an error. #### Signature ```typescript applyTemplateFromString(content: string): Promise ``` ***
### 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. ```javascript engine.scene.applyTemplateFromURL('https://cdn.img.ly/assets/demo/v4/ly.img.template/templates/cesdk_postcard_1.scene'); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `url` | `string` | The url to the template scene file. | #### Returns `Promise`\<`void`> A Promise that resolves once the template was applied or rejects if there was an error. #### Signature ```typescript applyTemplateFromURL(url: string): Promise ```
## Camera & Zoom Control camera position, zoom levels, and auto-fit behavior.
### 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. ```javascript // Zoom to 100% engine.scene.setZoomLevel(1.0); // Zoom to 50% engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel()); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `zoomLevel?` | `number` | The new zoom level. | #### Returns `void` #### Signature ```typescript setZoomLevel(zoomLevel?: number): void ``` ***
### 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.

```javascript const zoomLevel = engine.scene.getZoomLevel(); ``` #### Returns `number` The zoom level of the block's camera. #### Signature ```typescript getZoomLevel(): number ``` ***
### 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 | 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 `Promise`\<`void`> A promise that resolves once the zoom was set or rejects with an error otherwise. #### Call Signature ```ts 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. ```javascript // Bring entire scene in view with padding of 20px in all directions engine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0); ``` ##### Parameters | 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 `Promise`\<`void`> A promise that resolves once the zoom was set or rejects with an error otherwise. ##### Deprecated Use zoomToBlock with options object instead #### Signatures ```typescript zoomToBlock(id: number, options?: ZoomOptions): Promise ``` ```typescript zoomToBlock(id: number, paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): Promise ``` ***
### 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. ```javascript // Follow page with padding of 20px horizontally before and after the block engine.scene.enableZoomAutoFit(page, 'Horizontal', 20, 20) ``` ##### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `id` | `number` | The block for which the zoom is adjusted. | | `axis` | `"Horizontal"` | `"Vertical"` | The block axis for which the zoom is adjusted. | | `paddingBefore?` | `number` | Optional padding in screen pixels before the block. | | `paddingAfter?` | `number` | Optional padding in screen pixels after the block. | ##### Returns `void` #### Call Signature ```ts 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. ```javascript // Follow page with padding of 20px in both directions engine.scene.enableZoomAutoFit(page, 'Both', 20.0, 20.0, 20.0, 20.0); ``` ##### Parameters | 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 `void` #### Signatures ```typescript enableZoomAutoFit(id: number, axis: "Horizontal" | "Vertical", paddingBefore?: number, paddingAfter?: number): void ``` ```typescript enableZoomAutoFit(id: number, axis: "Both", paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): void ``` ***
### disableZoomAutoFit()

Disables any previously set zoom auto-fit.

```javascript engine.scene.disableZoomAutoFit(scene); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `blockOrScene` | `number` | The scene or a block in the scene for which to disable zoom auto-fit. | #### Returns `void` #### Signature ```typescript disableZoomAutoFit(blockOrScene: number): void ``` ***
### isZoomAutoFitEnabled()

Queries whether zoom auto-fit is enabled for the given block.

```javascript engine.scene.isZoomAutoFitEnabled(scene); ``` #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `blockOrScene` | `number` | The scene or a block in the scene for which to query the zoom auto-fit. | #### Returns `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 ```typescript isZoomAutoFitEnabled(blockOrScene: number): boolean ```
## Other
### setPlaying()

Starts or stops playback of the current scene. Only works in Video mode, not in Design mode.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `play` | `boolean` | True to start playback, false to stop | #### Returns `void` #### Throws Error if no page is available for playback #### Signature ```typescript setPlaying(play: boolean): void ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Class: VariableAPI" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/classes/variableapi/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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. ```ts // 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
### Constructor

VariableAPI

## Variable Management Create, update, retrieve, and remove text variables from the engine.
### findAll()

Get all text variable names currently stored in the engine.

#### Returns `string`\[] List of variable names. #### Signature ```typescript findAll(): string[] ``` ***
### setString()

Set a text variable's value.

Creates a new variable if the key doesn't exist, or updates an existing one. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `key` | `string` | The variable's key. | | `value` | `string` | The text value to assign to the variable. | #### Returns `void` #### Signature ```typescript setString(key: string, value: string): void ``` ***
### getString()

Get a text variable's value.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `key` | `string` | The variable's key. | #### Returns `string` The text value of the variable. #### Signature ```typescript getString(key: string): string ``` ***
### remove()

Remove a text variable from the engine.

#### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `key` | `string` | The variable's key to remove. | #### Returns `void` #### Signature ```typescript remove(key: string): void ```
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Enum: CompressionFormat" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/enumerations/compressionformat/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Compression format for scene serialization. ## Enumeration Members | Enumeration Member | Value | | ------ | ------ | | `None` | `0` | | `Zstd` | `1` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Enum: CompressionLevel" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/enumerations/compressionlevel/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Compression level for scene serialization. ## Enumeration Members | Enumeration Member | Value | | ------ | ------ | | `Fastest` | `0` | | `Default` | `1` | | `Best` | `2` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: checkVideoExportSupport" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/checkvideoexportsupport/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function checkVideoExportSupport(): Promise; ``` Throws an error if the current browser does not support video exporting. ## Returns `Promise`\<`void`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: checkVideoSupport" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/checkvideosupport/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function checkVideoSupport(): void; ``` Throws an error if the current browser does not support video editing. ## Returns `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: _combineProperties" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/combineproperties/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 Parameter | | ------ | | `T` *extends* `any`\[] | ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `properties` | \{ \[K in string | number | symbol]: \_ReadonlyReactiveProperty\ } | Array of reactive properties to combine | | `options?` | `Pick`\<[`_ReactivePropertyOptions`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactivepropertyoptions/)\<`T`>, `"equals"`> | Configuration options | ## Returns [`_ReadonlyReactiveProperty`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/readonlyreactiveproperty/)\<`T`> A reactive property containing an array of values ## Example ```typescript const x = createReactiveProperty(0); const y = createReactiveProperty(0); const position = combineProperties([x, y]); position.subscribe(([xVal, yVal]) => { console.log(`Position: (${xVal}, ${yVal})`); }); ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: _createDerivedProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/createderivedproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 Parameter | | ------ | | `T` | | `S` *extends* `any`\[] | ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `sources` | \{ \[K in string | number | symbol]: \_ReadonlyReactiveProperty\ | \_Source\ } | Array of reactive properties or sources to track | | `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 [`_ReadonlyReactiveProperty`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/readonlyreactiveproperty/)\<`T`> A read-only reactive property ## Example ```typescript 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" ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: _createReactiveProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/createreactiveproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 Parameter | | ------ | | `T` | ## 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 [`_ReactiveProperty`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactiveproperty/)\<`T`> A reactive property with subscribe, value, and update methods ## Example ```typescript // Simple value const zoom = createReactiveProperty(1.0); zoom.subscribe((value) => console.log('Zoom:', value)); zoom.update(2.0); // Logs: "Zoom: 2.0" // With custom equality for objects const settings = createReactiveProperty( { width: 800, height: 600 }, { equals: isEqual } ); // With initial value emission const formats = createReactiveProperty( defaultFormats, { emitOnSubscribe: true } ); ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: _createTrackedProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/createtrackedproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 Parameter | Default type | | ------ | ------ | | `T` | - | | `U` | `any` | ## 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 [`_ReactiveProperty`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactiveproperty/)\<`T`> A reactive property ## Example ```typescript 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 } ); ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: createVariableFontCombinations" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/createvariablefontcombinations/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function createVariableFontCombinations( uri, variantWeight, variantItalic): Font[]; ``` Generates an array of [Font](https://img.ly/docs/cesdk/angular/api/engine/interfaces/font/) entries for a variable font file. Variable fonts pack multiple weight/style variants into a single file. This helper builds every combination of weight and style that the font supports so you can pass the result straight into a [Typeface](https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/). ## Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `uri` | `string` | The URI of the variable font file. | | `variantWeight` | `boolean` | When `true`, generates entries for all nine standard weights (Thin through Heavy). When `false`, only Normal (400) is used. | | `variantItalic` | `boolean` | When `true`, generates italic variants in addition to normal style variants. When `false`, only normal style is used. | ## Returns [`Font`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/font/)\[] An array of [Font](https://img.ly/docs/cesdk/angular/api/engine/interfaces/font/) objects covering every requested combination. ## Example ```ts const fonts = createVariableFontCombinations( 'https://example.com/font.woff2', true, // weight variants true // italic variants ); // → 18 entries: 9 weights × 2 styles engine.block.setTypeface(block, { name: 'My Variable Font', fonts }); ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: defaultLogger" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/defaultlogger/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function defaultLogger(message, level?): void; ``` ## Parameters | Parameter | Type | | ------ | ------ | | `message` | `string` | | `level?` | [`LogLevel`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/loglevel/) | ## Returns `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: isCMYKColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/iscmykcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function isCMYKColor(color): color is CMYKColor; ``` Type guard for [CMYKColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cmykcolor/). ## Parameters | Parameter | Type | | ------ | ------ | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | ## Returns `color is CMYKColor` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: isRGBAColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/isrgbacolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function isRGBAColor(color): color is RGBAColor; ``` Type guard for [RGBAColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbacolor/). ## Parameters | Parameter | Type | | ------ | ------ | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | ## Returns `color is RGBAColor` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: isSpotColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/isspotcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function isSpotColor(color): color is SpotColor; ``` Type guard for [SpotColor](https://img.ly/docs/cesdk/angular/api/engine/interfaces/spotcolor/). ## Parameters | Parameter | Type | | ------ | ------ | | `color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | ## Returns `color is SpotColor` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: _makeSource" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/makesource/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 Parameter | | ------ | | `T` | ## Returns [`_Source`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/source-1/)\<`T`> A source function with an emit method ## Example ```typescript const onResize = makeSource<{ width: number; height: number }>(); // Subscribe const unsubscribe = onResize((size) => { console.log('New size:', size); }); // Emit onResize.emit({ width: 800, height: 600 }); // Cleanup unsubscribe(); ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: _mergeSources" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/mergesources/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Parameter | Type | Description | | ------ | ------ | ------ | | ...`sources` | (`listener`) => [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/)\[] | Event source functions to merge | ## Returns A merged source that emits when any source emits (`listener`) => [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) ## Example ```typescript const zoomChanged = engine.scene.onZoomLevelChanged; const dpiChanged = engine.scene.onDpiChanged; const zoomOrDpiChanged = mergeSources(zoomChanged, dpiChanged); // Now use with createTrackedProperty const normalizedZoom = createTrackedProperty( () => engine.scene.getZoomLevel() / getDpi(), (value) => engine.scene.setZoomLevel(value * getDpi()), zoomOrDpiChanged ); ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: supportsBrowser" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/supportsbrowser/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function supportsBrowser(): boolean; ``` Checks if the current browser supports necessary technologies to match our supported browsers ## Returns `boolean` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: supportsVideo" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/supportsvideo/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function supportsVideo(): boolean; ``` Checks if the current browser supports video editing. ## Returns `boolean` false if the browser does not support the required APIs. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: supportsVideoExport" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/supportsvideoexport/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function supportsVideoExport(): Promise; ``` Checks if the current browser supports video exporting. ## Returns `Promise`\<`boolean`> --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Function: supportsWasm" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/functions/supportswasm/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts function supportsWasm(): boolean; ``` Checks if the current browser supports web assembly ## Returns `boolean` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AddVideoOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/addvideooptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for adding videos to the scene. ## 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: ApplyAssetOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/applyassetoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for applying an asset to the scene. ## Indexable ```ts [key: string]: unknown ``` Additional custom context options. Allows passing arbitrary data to middleware for custom placement logic. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `clipType?` | `"clip"` | `"overlay"` | How the asset should be placed in the scene. - 'clip': Background clip placed on background track - 'overlay': Foreground overlay placed at playhead | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Asset" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Generic asset information ## 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 | 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetBooleanProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetbooleanproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset boolean property definition ## Properties | Property | Type | | ------ | ------ | | `property` | `string` | | `type` | `"Boolean"` | | `value` | `boolean` | | `defaultValue` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetCMYKColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetcmykcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset Color payload CMYK representation ## Properties | Property | Type | | ------ | ------ | | `colorSpace` | `"CMYK"` | | `c` | `number` | | `m` | `number` | | `y` | `number` | | `k` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetColorProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetcolorproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset color property definition ## 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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetContentAspectRatio" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetcontentaspectratio/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset transform preset payload that snaps a block's frame to the intrinsic aspect ratio of the block's content (e.g. the underlying image or video). ## Properties | Property | Type | | ------ | ------ | | `type` | `"ContentAspectRatio"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetDefinition" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetdefinition/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Definition of an asset used if an asset is added to an asset source. ## Extends - [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) ## 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`\<[`Locale`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/locale/), `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`\<[`Locale`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/locale/), `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`. | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetEnumProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetenumproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset enum property definition ## Properties | Property | Type | | ------ | ------ | | `property` | `string` | | `type` | `"Enum"` | | `value` | `string` | | `defaultValue` | `string` | | `options` | `string`\[] | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetFixedAspectRatio" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetfixedaspectratio/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset transform preset payload fixed aspect ratio ## Properties | Property | Type | | ------ | ------ | | `type` | `"FixedAspectRatio"` | | `width` | `number` | | `height` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetFixedSize" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetfixedsize/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset transform preset payload fixed size ## Properties | Property | Type | | ------ | ------ | | `type` | `"FixedSize"` | | `width` | `number` | | `height` | `number` | | `designUnit` | `"Pixel"` | `"Millimeter"` | `"Inch"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetFreeAspectRatio" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetfreeaspectratio/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset transform preset payload free aspect ratio ## Properties | Property | Type | | ------ | ------ | | `type` | `"FreeAspectRatio"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetNumberProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetnumberproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset number property definition ## Properties | Property | Type | | ------ | ------ | | `property` | `string` | | `type` | `"Int"` | `"Float"` | `"Double"` | | `value` | `number` | | `defaultValue` | `number` | | `min` | `number` | | `max` | `number` | | `step` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetPayload" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetpayload/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset payload ## 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/)\[] | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetQueryData" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetquerydata/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Defines a request for querying assets ## 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`\[] | Tags are searched with the query parameter, but this search is fuzzy. If one needs to get assets with exactly the tag (from a tag cloud or filter) this query parameter should be used. | | `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. For local asset sources, labels and tags are resolved using a fallback chain: requested locale → "en" → first available entry → empty default. | | `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. | | `filter?` | [`AssetFilter`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetfilter/)\[] | Optional structured filter, AND-combined with the result of `query` / `tags` / `groups` / `excludeGroups`. The top-level array is an implicit AND of its entries. Each entry is either a property predicate (`{ property, contains?, equals? }`) or a logical combinator (`{ and: [...] }`, `{ or: [...] }`, `{ not: ... }`). Combinators nest. **When to use `filter` vs `tags` / `groups` / `excludeGroups`:** The legacy `tags` / `groups` / `excludeGroups` fields remain supported and are equivalent to filter predicates with `equals` and implicit AND. Prefer `filter` for anything beyond a plain include/ exclude list — case-insensitive substrings, `meta.` matches, `or` / `not` combinators — and reach for the legacy fields only when you want their case-sensitive exact-match semantics. Malformed filters reject the returned promise with the engine's parse-error message (e.g. `"Unknown asset property '…'"`). **Example** `filter: [ { property: 'label', contains: 'Roboto' }, { property: 'meta.languages', contains: 'de' }, { not: { property: 'meta.legacy', equals: 'true' } } ]` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetResult" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Single asset result of a query from the engine. ## Extends - [`Asset`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/asset/) ## Extended by - [`CompleteAssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/completeassetresult/) ## 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` | - | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _AssetResultCredits" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresultcredits/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `name` | `string` | | `url` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _AssetResultLicense" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresultlicense/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `name` | `string` | | `url` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetRGBColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetrgbcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset Color payload RGB representation ## Properties | Property | Type | | ------ | ------ | | `colorSpace` | `"sRGB"` | | `r` | `number` | | `g` | `number` | | `b` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetSource" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetsource/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- A source of assets ## Methods ### findAssets() ```ts findAssets(queryData): Promise>; ``` Find all asset for the given type and the provided query data. #### Parameters | Parameter | Type | | ------ | ------ | | `queryData` | [`AssetQueryData`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetquerydata/) | #### 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()? ```ts optional addAsset(asset): void; ``` Adds the given asset to this source. Throws an error if the asset source does not support adding assets. #### Parameters | Parameter | Type | | ------ | ------ | | `asset` | [`AssetDefinition`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetdefinition/) | #### Returns `void` *** ### removeAsset()? ```ts optional removeAsset(assetId): void; ``` Removes the given asset from this source. #### Parameters | Parameter | Type | | ------ | ------ | | `assetId` | `string` | #### Returns `void` *** ### getSupportedMimeTypes()? ```ts optional getSupportedMimeTypes(): string[]; ``` Generates a list of supported mime types for this source. #### Returns `string`\[] a list of the mime types should be supported by this source ## 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetSpotColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetspotcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset Color payload SpotColor representation ## Properties | Property | Type | | ------ | ------ | | `colorSpace` | `"SpotColor"` | | `name` | `string` | | `externalReference` | `string` | | `representation` | | [`AssetCMYKColor`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetcmykcolor/) | [`AssetRGBColor`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetrgbcolor/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetsQueryResult" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetsqueryresult/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Return type of a `findAssets` query. ## 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 | 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AssetStringProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetstringproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset string property definition ## Properties | Property | Type | | ------ | ------ | | `property` | `string` | | `type` | `"String"` | | `value` | `string` | | `defaultValue` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: AudioTrackInfo" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/audiotrackinfo/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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.) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BlockEvent" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/blockevent/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `block` | `number` | | `type` | `"Created"` | `"Updated"` | `"Destroyed"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BlockStateError" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/blockstateerror/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `type` | `"Error"` | | `error` | | `"AudioDecoding"` | `"ImageDecoding"` | `"FileFetch"` | `"Unknown"` | `"VideoDecoding"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BlockStatePending" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/blockstatepending/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | Description | | ------ | ------ | ------ | | `type` | `"Pending"` | - | | `progress` | `number` | Expected range is \[0, 1] | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BlockStateReady" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/blockstateready/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `type` | `"Ready"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: BlurEvent" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/blurevent/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Dispatched on the engine canvas when the text input has been blurred. Call `preventDefault()` to disallow this and refocus the engine text input. ## Extends - `CustomEvent`\<`EventTarget` | `null`> ## Methods ### preventDefault() ```ts preventDefault(): void; ``` Force focus back to the engine input #### Returns `void` #### Overrides ```ts CustomEvent.preventDefault ``` *** ### ~~initCustomEvent()~~ ```ts initCustomEvent( type, bubbles?, cancelable?, detail?): void; ``` The **`CustomEvent.initCustomEvent()`** method initializes a CustomEvent object. #### Parameters | Parameter | Type | | ------ | ------ | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | | `detail?` | `EventTarget` | #### Returns `void` #### Deprecated [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/initCustomEvent) #### Inherited from ```ts CustomEvent.initCustomEvent ``` *** ### composedPath() ```ts composedPath(): EventTarget[]; ``` The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath) #### Returns `EventTarget`\[] #### Inherited from ```ts CustomEvent.composedPath ``` *** ### ~~initEvent()~~ ```ts initEvent( type, bubbles?, cancelable?): void; ``` The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent(). #### Parameters | Parameter | Type | | ------ | ------ | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | #### Returns `void` #### Deprecated [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/initEvent) #### Inherited from ```ts CustomEvent.initEvent ``` *** ### stopImmediatePropagation() ```ts stopImmediatePropagation(): void; ``` The **`stopImmediatePropagation()`** method of the If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation) #### Returns `void` #### Inherited from ```ts CustomEvent.stopImmediatePropagation ``` *** ### stopPropagation() ```ts stopPropagation(): void; ``` The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) #### Returns `void` #### Inherited from ```ts CustomEvent.stopPropagation ``` ## Properties | Property | Modifier | Type | Description | Overrides | Inherited from | | ------ | ------ | ------ | ------ | ------ | ------ | | `type` | `readonly` | `"cesdk-blur"` | The **`type`** read-only property of the Event interface returns a string containing the event's type. [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` | The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles) | - | `CustomEvent.bubbles` | | ~~`cancelBubble`~~ | `public` | `boolean` | The **`cancelBubble`** property of the Event interface is deprecated. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelBubble) | - | `CustomEvent.cancelBubble` | | `cancelable` | `readonly` | `boolean` | The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable) | - | `CustomEvent.cancelable` | | `composed` | `readonly` | `boolean` | The read-only **`composed`** property of the or not the event will propagate across the shadow DOM boundary into the standard DOM. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed) | - | `CustomEvent.composed` | | `currentTarget` | `readonly` | `EventTarget` | The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget) | - | [`CursorEvent`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/).[`currentTarget`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/) | | `defaultPrevented` | `readonly` | `boolean` | The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented) | - | `CustomEvent.defaultPrevented` | | `eventPhase` | `readonly` | `number` | The **`eventPhase`** read-only property of the being evaluated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase) | - | `CustomEvent.eventPhase` | | `isTrusted` | `readonly` | `boolean` | The **`isTrusted`** read-only property of the when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and `false` when the event was dispatched via The only exception is the `click` event, which initializes the `isTrusted` property to `false` in user agents. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted) | - | `CustomEvent.isTrusted` | | ~~`returnValue`~~ | `public` | `boolean` | The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/returnValue) | - | `CustomEvent.returnValue` | | ~~`srcElement`~~ | `readonly` | `EventTarget` | The deprecated **`Event.srcElement`** is an alias for the Event.target property. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/srcElement) | - | [`CursorEvent`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/).[`srcElement`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/) | | `target` | `readonly` | `EventTarget` | The read-only **`target`** property of the dispatched. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target) | - | [`CursorEvent`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/).[`target`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/) | | `timeStamp` | `readonly` | `number` | The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created. [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` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Buffer" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/buffer/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `handle` | `string` | | `buffer` | `Uint8Array` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CharacterInkBox" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/characterinkbox/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Tight ink-paint bounding box of a single grapheme, in global scene coordinates. Returned by `block.getTextCharacterInkBoxes`. The baseline Y is reported separately because it does not equal `y + height` (the box is the tight ink rect; the baseline anchors glyph descenders). ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `x` | `number` | Global X of the tight ink rect (left edge, Y-down scene space). | | `y` | `number` | Global Y of the tight ink rect (top edge, Y-down scene space). | | `width` | `number` | Width of the tight ink rect. | | `height` | `number` | Height of the tight ink rect. | | `baselineY` | `number` | Global Y of the glyph baseline. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CMYKColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/cmykcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | Description | | ------ | ------ | ------ | | `c` | `number` | Cyan | | `m` | `number` | Magenta | | `y` | `number` | Yellow | | `k` | `number` | Black | | `tint` | `number` | The tint factor | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CompleteAssetResult" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/completeassetresult/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Asset results that are returned from the engine. They contain additional information about the context of the asset. ## Extends - [`AssetResult`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/assetresult/) ## 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/) | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Configuration" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/configuration/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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"` | Whether the engine should automatically choose an audio output device or should not output audio at all. If not configured the fallback value is 'auto'. | | `role?` | [`RoleString`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rolestring/) | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: CursorEvent" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Dispatched on the engine canvas when the text input has been blurred. Call `preventDefault()` to disallow this and refocus the engine text input. ## Extends - `CustomEvent`\<`string`> ## Methods ### preventDefault() ```ts preventDefault(): void; ``` If default is prevented, the Creative Engine won't apply the cursor style to itself. #### Returns `void` #### Overrides ```ts CustomEvent.preventDefault ``` *** ### ~~initCustomEvent()~~ ```ts initCustomEvent( type, bubbles?, cancelable?, detail?): void; ``` The **`CustomEvent.initCustomEvent()`** method initializes a CustomEvent object. #### Parameters | Parameter | Type | | ------ | ------ | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | | `detail?` | `string` | #### Returns `void` #### Deprecated [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/initCustomEvent) #### Inherited from ```ts CustomEvent.initCustomEvent ``` *** ### composedPath() ```ts composedPath(): EventTarget[]; ``` The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath) #### Returns `EventTarget`\[] #### Inherited from ```ts CustomEvent.composedPath ``` *** ### ~~initEvent()~~ ```ts initEvent( type, bubbles?, cancelable?): void; ``` The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent(). #### Parameters | Parameter | Type | | ------ | ------ | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | #### Returns `void` #### Deprecated [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/initEvent) #### Inherited from ```ts CustomEvent.initEvent ``` *** ### stopImmediatePropagation() ```ts stopImmediatePropagation(): void; ``` The **`stopImmediatePropagation()`** method of the If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation) #### Returns `void` #### Inherited from ```ts CustomEvent.stopImmediatePropagation ``` *** ### stopPropagation() ```ts stopPropagation(): void; ``` The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) #### Returns `void` #### Inherited from ```ts CustomEvent.stopPropagation ``` ## Properties | Property | Modifier | Type | Description | Overrides | Inherited from | | ------ | ------ | ------ | ------ | ------ | ------ | | `type` | `readonly` | `"cesdk-cursor"` | The **`type`** read-only property of the Event interface returns a string containing the event's type. [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` | The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles) | - | `CustomEvent.bubbles` | | ~~`cancelBubble`~~ | `public` | `boolean` | The **`cancelBubble`** property of the Event interface is deprecated. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelBubble) | - | `CustomEvent.cancelBubble` | | `cancelable` | `readonly` | `boolean` | The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable) | - | `CustomEvent.cancelable` | | `composed` | `readonly` | `boolean` | The read-only **`composed`** property of the or not the event will propagate across the shadow DOM boundary into the standard DOM. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed) | - | `CustomEvent.composed` | | `currentTarget` | `readonly` | `EventTarget` | The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget) | - | `CustomEvent.currentTarget` | | `defaultPrevented` | `readonly` | `boolean` | The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented) | - | `CustomEvent.defaultPrevented` | | `eventPhase` | `readonly` | `number` | The **`eventPhase`** read-only property of the being evaluated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase) | - | `CustomEvent.eventPhase` | | `isTrusted` | `readonly` | `boolean` | The **`isTrusted`** read-only property of the when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and `false` when the event was dispatched via The only exception is the `click` event, which initializes the `isTrusted` property to `false` in user agents. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted) | - | `CustomEvent.isTrusted` | | ~~`returnValue`~~ | `public` | `boolean` | The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/returnValue) | - | `CustomEvent.returnValue` | | ~~`srcElement`~~ | `readonly` | `EventTarget` | The deprecated **`Event.srcElement`** is an alias for the Event.target property. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/srcElement) | - | `CustomEvent.srcElement` | | `target` | `readonly` | `EventTarget` | The read-only **`target`** property of the dispatched. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target) | - | `CustomEvent.target` | | `timeStamp` | `readonly` | `number` | The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created. [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` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: DominantColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/dominantcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- A single color extracted from the rendered appearance of a block. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `r` | `number` | Red component in sRGB, normalized to the range \[0, 1]. | | `g` | `number` | Green component in sRGB, normalized to the range \[0, 1]. | | `b` | `number` | Blue component in sRGB, normalized to the range \[0, 1]. | | `weight` | `number` | Share of analyzed pixels represented by this color, in the range \[0, 1]. Higher values indicate a more prominent color. The sum of weights returned by a single `BlockAPI.getDominantColors` call is `1.0`. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: DominantColorsOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/dominantcolorsoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for `BlockAPI.getDominantColors`. ## Properties | Property | Type | Default value | Description | | ------ | ------ | ------ | ------ | | `count?` | `number` | `5` | Number of dominant colors to extract. The returned palette may contain fewer entries for images with very little variation, and is empty when `count` is `0`. | | `ignoreWhite?` | `boolean` | `false` | If `true`, near-white pixels are excluded from the analysis. Useful when analyzing images on white backgrounds to avoid the background dominating the result. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: EnginePlugin" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/engineplugin/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `name` | `string` | | `version` | `string` | | `initialize` | (`context`) => `void` | `Promise`\<`void`> | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _FindAssetsQuery" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/findassetsquery/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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` | | `filter` | [`AssetFilter`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetfilter/)\[] | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _Flip" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/flip/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `horizontal` | `boolean` | | `vertical` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Font" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/font/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Individual font within a typeface. Field optionality matches `@cesdk/engine` (WASM) — fields not present in the engine response are simply omitted rather than empty strings. ## 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/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: FontMetrics" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/fontmetrics/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Font metrics extracted from a font file. Values are in the font's design units coordinate space. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `ascender` | `number` | The ascender value in font design units. | | `descender` | `number` | The descender value in font design units (typically negative). | | `unitsPerEm` | `number` | The number of units per em square (typically 1000 or 2048). | | `lineGap` | `number` | The OS/2 sTypoLineGap value in font design units. | | `capHeight` | `number` | The OS/2 sCapHeight value in font design units. | | `xHeight` | `number` | The OS/2 sxHeight value in font design units. | | `underlineOffset` | `number` | The post.underlinePosition value in font design units (typically negative). | | `underlineSize` | `number` | The post.underlineThickness value in font design units. | | `strikeoutOffset` | `number` | The OS/2 yStrikeoutPosition value in font design units. | | `strikeoutSize` | `number` | The OS/2 yStrikeoutSize value in font design units. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: GradientColorStop" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/gradientcolorstop/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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]. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: HTMLCreativeEngineCanvasElement" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/htmlcreativeenginecanvaselement/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 - `HTMLElement` ## Accessors ### classList #### Get Signature ```ts get classList(): DOMTokenList; ``` The **`Element.classList`** is a read-only property that returns a live DOMTokenList collection of the `class` attributes of the element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList) ##### Returns `DOMTokenList` #### Set Signature ```ts set classList(value): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `value` | `string` | ##### Returns `void` #### Inherited from ```ts HTMLElement.classList ``` *** ### part #### Get Signature ```ts get part(): DOMTokenList; ``` The **`part`** property of the Element interface represents the part identifier(s) of the element (i.e., set using the `part` attribute), returned as a DOMTokenList. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/part) ##### Returns `DOMTokenList` #### Set Signature ```ts set part(value): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `value` | `string` | ##### Returns `void` #### Inherited from ```ts HTMLElement.part ``` *** ### textContent #### Get Signature ```ts get textContent(): string; ``` [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) ##### Returns `string` #### Set Signature ```ts set textContent(value): void; ``` The **`textContent`** property of the Node interface represents the text content of the node and its descendants. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/textContent) ##### Parameters | Parameter | Type | | ------ | ------ | | `value` | `string` | ##### Returns `void` #### Inherited from ```ts HTMLElement.textContent ``` *** ### style #### Get Signature ```ts get style(): CSSStyleDeclaration; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style) ##### Returns `CSSStyleDeclaration` #### Set Signature ```ts set style(cssText): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `cssText` | `string` | ##### Returns `void` #### Inherited from ```ts HTMLElement.style ``` ## Methods ### clear() ```ts 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 `void` *** ### animate() ```ts animate(keyframes, options?): Animation; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animate) #### Parameters | Parameter | Type | | ------ | ------ | | `keyframes` | `Keyframe`\[] | `PropertyIndexedKeyframes` | | `options?` | `number` | `KeyframeAnimationOptions` | #### Returns `Animation` #### Inherited from ```ts HTMLElement.animate ``` *** ### getAnimations() ```ts getAnimations(options?): Animation[]; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAnimations) #### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `GetAnimationsOptions` | #### Returns `Animation`\[] #### Inherited from ```ts HTMLElement.getAnimations ``` *** ### after() ```ts 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 | Parameter | Type | | ------ | ------ | | ...`nodes` | (`string` | `Node`)\[] | #### Returns `void` #### Inherited from ```ts HTMLElement.after ``` *** ### before() ```ts 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 | Parameter | Type | | ------ | ------ | | ...`nodes` | (`string` | `Node`)\[] | #### Returns `void` #### Inherited from ```ts HTMLElement.before ``` *** ### remove() ```ts remove(): void; ``` Removes node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/remove) #### Returns `void` #### Inherited from ```ts HTMLElement.remove ``` *** ### replaceWith() ```ts 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 | Parameter | Type | | ------ | ------ | | ...`nodes` | (`string` | `Node`)\[] | #### Returns `void` #### Inherited from ```ts HTMLElement.replaceWith ``` *** ### attachShadow() ```ts attachShadow(init): ShadowRoot; ``` The **`Element.attachShadow()`** method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/attachShadow) #### Parameters | Parameter | Type | | ------ | ------ | | `init` | `ShadowRootInit` | #### Returns `ShadowRoot` #### Inherited from ```ts HTMLElement.attachShadow ``` *** ### checkVisibility() ```ts checkVisibility(options?): boolean; ``` The **`checkVisibility()`** method of the Element interface checks whether the element is visible. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/checkVisibility) #### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `CheckVisibilityOptions` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.checkVisibility ``` *** ### closest() #### Call Signature ```ts closest(selector): HTMLElementTagNameMap[K]; ``` The **`closest()`** method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/closest) ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `HTMLElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selector` | `K` | ##### Returns `HTMLElementTagNameMap`\[`K`] ##### Inherited from ```ts HTMLElement.closest ``` #### Call Signature ```ts closest(selector): SVGElementTagNameMap[K]; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `SVGElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selector` | `K` | ##### Returns `SVGElementTagNameMap`\[`K`] ##### Inherited from ```ts HTMLElement.closest ``` #### Call Signature ```ts closest(selector): MathMLElementTagNameMap[K]; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `MathMLElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selector` | `K` | ##### Returns `MathMLElementTagNameMap`\[`K`] ##### Inherited from ```ts HTMLElement.closest ``` #### Call Signature ```ts closest(selectors): E; ``` ##### Type Parameters | Type Parameter | Default type | | ------ | ------ | | `E` *extends* `Element` | `Element` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `string` | ##### Returns `E` ##### Inherited from ```ts HTMLElement.closest ``` *** ### computedStyleMap() ```ts computedStyleMap(): StylePropertyMapReadOnly; ``` The **`computedStyleMap()`** method of the Element interface returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/computedStyleMap) #### Returns `StylePropertyMapReadOnly` #### Inherited from ```ts HTMLElement.computedStyleMap ``` *** ### getAttribute() ```ts getAttribute(qualifiedName): string; ``` The **`getAttribute()`** method of the element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttribute) #### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `string` | #### Returns `string` #### Inherited from ```ts HTMLElement.getAttribute ``` *** ### getAttributeNS() ```ts getAttributeNS(namespace, localName): string; ``` The **`getAttributeNS()`** method of the Element interface returns the string value of the attribute with the specified namespace and name. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNS) #### Parameters | Parameter | Type | | ------ | ------ | | `namespace` | `string` | | `localName` | `string` | #### Returns `string` #### Inherited from ```ts HTMLElement.getAttributeNS ``` *** ### getAttributeNames() ```ts getAttributeNames(): string[]; ``` The **`getAttributeNames()`** method of the array. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNames) #### Returns `string`\[] #### Inherited from ```ts HTMLElement.getAttributeNames ``` *** ### getAttributeNode() ```ts getAttributeNode(qualifiedName): Attr; ``` Returns the specified attribute of the specified element, as an Attr node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNode) #### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `string` | #### Returns `Attr` #### Inherited from ```ts HTMLElement.getAttributeNode ``` *** ### getAttributeNodeNS() ```ts getAttributeNodeNS(namespace, localName): Attr; ``` The **`getAttributeNodeNS()`** method of the Element interface returns the namespaced Attr node of an element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getAttributeNodeNS) #### Parameters | Parameter | Type | | ------ | ------ | | `namespace` | `string` | | `localName` | `string` | #### Returns `Attr` #### Inherited from ```ts HTMLElement.getAttributeNodeNS ``` *** ### getBoundingClientRect() ```ts getBoundingClientRect(): DOMRect; ``` The **`Element.getBoundingClientRect()`** method returns a position relative to the viewport. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect) #### Returns `DOMRect` #### Inherited from ```ts HTMLElement.getBoundingClientRect ``` *** ### getClientRects() ```ts getClientRects(): DOMRectList; ``` The **`getClientRects()`** method of the Element interface returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getClientRects) #### Returns `DOMRectList` #### Inherited from ```ts HTMLElement.getClientRects ``` *** ### getElementsByClassName() ```ts getElementsByClassName(classNames): HTMLCollectionOf; ``` The Element method **`getElementsByClassName()`** returns a live specified class name or names. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByClassName) #### Parameters | Parameter | Type | | ------ | ------ | | `classNames` | `string` | #### Returns `HTMLCollectionOf`\<`Element`> #### Inherited from ```ts HTMLElement.getElementsByClassName ``` *** ### getElementsByTagName() #### Call Signature ```ts getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` The **`Element.getElementsByTagName()`** method returns a live All descendants of the specified element are searched, but not the element itself. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByTagName) ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `HTMLElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `K` | ##### Returns `HTMLCollectionOf`\<`HTMLElementTagNameMap`\[`K`]> ##### Inherited from ```ts HTMLElement.getElementsByTagName ``` #### Call Signature ```ts getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `SVGElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `K` | ##### Returns `HTMLCollectionOf`\<`SVGElementTagNameMap`\[`K`]> ##### Inherited from ```ts HTMLElement.getElementsByTagName ``` #### Call Signature ```ts getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `MathMLElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `K` | ##### Returns `HTMLCollectionOf`\<`MathMLElementTagNameMap`\[`K`]> ##### Inherited from ```ts HTMLElement.getElementsByTagName ``` #### Call Signature ```ts getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `K` | ##### Returns `HTMLCollectionOf`\<`HTMLElementDeprecatedTagNameMap`\[`K`]> ##### Deprecated ##### Inherited from ```ts HTMLElement.getElementsByTagName ``` #### Call Signature ```ts getElementsByTagName(qualifiedName): HTMLCollectionOf; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `string` | ##### Returns `HTMLCollectionOf`\<`Element`> ##### Inherited from ```ts HTMLElement.getElementsByTagName ``` *** ### getElementsByTagNameNS() #### Call Signature ```ts getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` The **`Element.getElementsByTagNameNS()`** method returns a live HTMLCollection of elements with the given tag name belonging to the given namespace. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getElementsByTagNameNS) ##### Parameters | Parameter | Type | | ------ | ------ | | `namespaceURI` | `"http://www.w3.org/1999/xhtml"` | | `localName` | `string` | ##### Returns `HTMLCollectionOf`\<`HTMLElement`> ##### Inherited from ```ts HTMLElement.getElementsByTagNameNS ``` #### Call Signature ```ts getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `namespaceURI` | `"http://www.w3.org/2000/svg"` | | `localName` | `string` | ##### Returns `HTMLCollectionOf`\<`SVGElement`> ##### Inherited from ```ts HTMLElement.getElementsByTagNameNS ``` #### Call Signature ```ts getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `namespaceURI` | `"http://www.w3.org/1998/Math/MathML"` | | `localName` | `string` | ##### Returns `HTMLCollectionOf`\<`MathMLElement`> ##### Inherited from ```ts HTMLElement.getElementsByTagNameNS ``` #### Call Signature ```ts getElementsByTagNameNS(namespace, localName): HTMLCollectionOf; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `namespace` | `string` | | `localName` | `string` | ##### Returns `HTMLCollectionOf`\<`Element`> ##### Inherited from ```ts HTMLElement.getElementsByTagNameNS ``` *** ### getHTML() ```ts getHTML(options?): string; ``` The **`getHTML()`** method of the Element interface is used to serialize an element's DOM to an HTML string. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/getHTML) #### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `GetHTMLOptions` | #### Returns `string` #### Inherited from ```ts HTMLElement.getHTML ``` *** ### hasAttribute() ```ts hasAttribute(qualifiedName): boolean; ``` The **`Element.hasAttribute()`** method returns a **Boolean** value indicating whether the specified element has the specified attribute or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttribute) #### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `string` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.hasAttribute ``` *** ### hasAttributeNS() ```ts hasAttributeNS(namespace, localName): boolean; ``` The **`hasAttributeNS()`** method of the Element interface returns a boolean value indicating whether the current element has the specified attribute with the specified namespace. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttributeNS) #### Parameters | Parameter | Type | | ------ | ------ | | `namespace` | `string` | | `localName` | `string` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.hasAttributeNS ``` *** ### hasAttributes() ```ts hasAttributes(): boolean; ``` The **`hasAttributes()`** method of the Element interface returns a boolean value indicating whether the current element has any attributes or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasAttributes) #### Returns `boolean` #### Inherited from ```ts HTMLElement.hasAttributes ``` *** ### hasPointerCapture() ```ts hasPointerCapture(pointerId): boolean; ``` The **`hasPointerCapture()`** method of the pointer capture for the pointer identified by the given pointer ID. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/hasPointerCapture) #### Parameters | Parameter | Type | | ------ | ------ | | `pointerId` | `number` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.hasPointerCapture ``` *** ### insertAdjacentElement() ```ts insertAdjacentElement(where, element): Element; ``` The **`insertAdjacentElement()`** method of the relative to the element it is invoked upon. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentElement) #### Parameters | Parameter | Type | | ------ | ------ | | `where` | `InsertPosition` | | `element` | `Element` | #### Returns `Element` #### Inherited from ```ts HTMLElement.insertAdjacentElement ``` *** ### insertAdjacentHTML() ```ts insertAdjacentHTML(position, string): void; ``` The **`insertAdjacentHTML()`** method of the the resulting nodes into the DOM tree at a specified position. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML) #### Parameters | Parameter | Type | | ------ | ------ | | `position` | `InsertPosition` | | `string` | `string` | #### Returns `void` #### Inherited from ```ts HTMLElement.insertAdjacentHTML ``` *** ### insertAdjacentText() ```ts insertAdjacentText(where, data): void; ``` The **`insertAdjacentText()`** method of the Element interface, given a relative position and a string, inserts a new text node at the given position relative to the element it is called from. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentText) #### Parameters | Parameter | Type | | ------ | ------ | | `where` | `InsertPosition` | | `data` | `string` | #### Returns `void` #### Inherited from ```ts HTMLElement.insertAdjacentText ``` *** ### matches() ```ts matches(selectors): boolean; ``` The **`matches()`** method of the Element interface tests whether the element would be selected by the specified CSS selector. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/matches) #### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `string` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.matches ``` *** ### releasePointerCapture() ```ts releasePointerCapture(pointerId): void; ``` The **`releasePointerCapture()`** method of the previously set for a specific (PointerEvent) *pointer*. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/releasePointerCapture) #### Parameters | Parameter | Type | | ------ | ------ | | `pointerId` | `number` | #### Returns `void` #### Inherited from ```ts HTMLElement.releasePointerCapture ``` *** ### removeAttribute() ```ts removeAttribute(qualifiedName): void; ``` The Element method **`removeAttribute()`** removes the attribute with the specified name from the element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttribute) #### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `string` | #### Returns `void` #### Inherited from ```ts HTMLElement.removeAttribute ``` *** ### removeAttributeNS() ```ts removeAttributeNS(namespace, localName): void; ``` The **`removeAttributeNS()`** method of the If you are working with HTML and you don't need to specify the requested attribute as being part of a specific namespace, use the Element.removeAttribute() method instead. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttributeNS) #### Parameters | Parameter | Type | | ------ | ------ | | `namespace` | `string` | | `localName` | `string` | #### Returns `void` #### Inherited from ```ts HTMLElement.removeAttributeNS ``` *** ### removeAttributeNode() ```ts removeAttributeNode(attr): Attr; ``` The **`removeAttributeNode()`** method of the Element interface removes the specified Attr node from the element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttributeNode) #### Parameters | Parameter | Type | | ------ | ------ | | `attr` | `Attr` | #### Returns `Attr` #### Inherited from ```ts HTMLElement.removeAttributeNode ``` *** ### requestFullscreen() ```ts requestFullscreen(options?): Promise; ``` The **`Element.requestFullscreen()`** method issues an asynchronous request to make the element be displayed in fullscreen mode. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/requestFullscreen) #### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `FullscreenOptions` | #### Returns `Promise`\<`void`> #### Inherited from ```ts HTMLElement.requestFullscreen ``` *** ### requestPointerLock() ```ts requestPointerLock(options?): Promise; ``` The **`requestPointerLock()`** method of the Element interface lets you asynchronously ask for the pointer to be locked on the given element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/requestPointerLock) #### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `PointerLockOptions` | #### Returns `Promise`\<`void`> #### Inherited from ```ts HTMLElement.requestPointerLock ``` *** ### scroll() #### Call Signature ```ts scroll(options?): void; ``` The **`scroll()`** method of the Element interface scrolls the element to a particular set of coordinates inside a given element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scroll) ##### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `ScrollToOptions` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.scroll ``` #### Call Signature ```ts scroll(x, y): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `x` | `number` | | `y` | `number` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.scroll ``` *** ### scrollBy() #### Call Signature ```ts scrollBy(options?): void; ``` The **`scrollBy()`** method of the Element interface scrolls an element by the given amount. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollBy) ##### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `ScrollToOptions` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.scrollBy ``` #### Call Signature ```ts scrollBy(x, y): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `x` | `number` | | `y` | `number` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.scrollBy ``` *** ### scrollIntoView() ```ts scrollIntoView(arg?): void; ``` The Element interface's **`scrollIntoView()`** method scrolls the element's ancestor containers such that the element on which `scrollIntoView()` is called is visible to the user. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView) #### Parameters | Parameter | Type | | ------ | ------ | | `arg?` | `boolean` | `ScrollIntoViewOptions` | #### Returns `void` #### Inherited from ```ts HTMLElement.scrollIntoView ``` *** ### scrollTo() #### Call Signature ```ts scrollTo(options?): void; ``` The **`scrollTo()`** method of the Element interface scrolls to a particular set of coordinates inside a given element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTo) ##### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `ScrollToOptions` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.scrollTo ``` #### Call Signature ```ts scrollTo(x, y): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `x` | `number` | | `y` | `number` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.scrollTo ``` *** ### setAttribute() ```ts setAttribute(qualifiedName, value): void; ``` The **`setAttribute()`** method of the Element interface sets the value of an attribute on the specified element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttribute) #### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `string` | | `value` | `string` | #### Returns `void` #### Inherited from ```ts HTMLElement.setAttribute ``` *** ### setAttributeNS() ```ts setAttributeNS( namespace, qualifiedName, value): void; ``` `setAttributeNS` adds a new attribute or changes the value of an attribute with the given namespace and name. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNS) #### Parameters | Parameter | Type | | ------ | ------ | | `namespace` | `string` | | `qualifiedName` | `string` | | `value` | `string` | #### Returns `void` #### Inherited from ```ts HTMLElement.setAttributeNS ``` *** ### setAttributeNode() ```ts setAttributeNode(attr): Attr; ``` The **`setAttributeNode()`** method of the Element interface adds a new Attr node to the specified element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNode) #### Parameters | Parameter | Type | | ------ | ------ | | `attr` | `Attr` | #### Returns `Attr` #### Inherited from ```ts HTMLElement.setAttributeNode ``` *** ### setAttributeNodeNS() ```ts setAttributeNodeNS(attr): Attr; ``` The **`setAttributeNodeNS()`** method of the Element interface adds a new namespaced Attr node to an element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttributeNodeNS) #### Parameters | Parameter | Type | | ------ | ------ | | `attr` | `Attr` | #### Returns `Attr` #### Inherited from ```ts HTMLElement.setAttributeNodeNS ``` *** ### setHTMLUnsafe() ```ts setHTMLUnsafe(html): void; ``` The **`setHTMLUnsafe()`** method of the Element interface is used to parse a string of HTML into a DocumentFragment, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then using it to replace the element's subtree in the DOM. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setHTMLUnsafe) #### Parameters | Parameter | Type | | ------ | ------ | | `html` | `string` | #### Returns `void` #### Inherited from ```ts HTMLElement.setHTMLUnsafe ``` *** ### setPointerCapture() ```ts setPointerCapture(pointerId): void; ``` The **`setPointerCapture()`** method of the *capture target* of future pointer events. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setPointerCapture) #### Parameters | Parameter | Type | | ------ | ------ | | `pointerId` | `number` | #### Returns `void` #### Inherited from ```ts HTMLElement.setPointerCapture ``` *** ### toggleAttribute() ```ts toggleAttribute(qualifiedName, force?): boolean; ``` The **`toggleAttribute()`** method of the present and adding it if it is not present) on the given element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/toggleAttribute) #### Parameters | Parameter | Type | | ------ | ------ | | `qualifiedName` | `string` | | `force?` | `boolean` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.toggleAttribute ``` *** ### ~~webkitMatchesSelector()~~ ```ts webkitMatchesSelector(selectors): boolean; ``` #### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `string` | #### Returns `boolean` #### Deprecated This is a legacy alias of `matches`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/matches) #### Inherited from ```ts HTMLElement.webkitMatchesSelector ``` *** ### dispatchEvent() ```ts dispatchEvent(event): boolean; ``` The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent) #### Parameters | Parameter | Type | | ------ | ------ | | `event` | `Event` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.dispatchEvent ``` *** ### attachInternals() ```ts attachInternals(): ElementInternals; ``` The **`HTMLElement.attachInternals()`** method returns an ElementInternals object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/attachInternals) #### Returns `ElementInternals` #### Inherited from ```ts HTMLElement.attachInternals ``` *** ### click() ```ts click(): void; ``` The **`HTMLElement.click()`** method simulates a mouse click on an element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/click) #### Returns `void` #### Inherited from ```ts HTMLElement.click ``` *** ### hidePopover() ```ts hidePopover(): void; ``` The **`hidePopover()`** method of the HTMLElement interface hides a popover element (i.e., one that has a valid `popover` attribute) by removing it from the top layer and styling it with `display: none`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidePopover) #### Returns `void` #### Inherited from ```ts HTMLElement.hidePopover ``` *** ### showPopover() ```ts showPopover(): void; ``` The **`showPopover()`** method of the HTMLElement interface shows a Popover\_API element (i.e., one that has a valid `popover` attribute) by adding it to the top layer. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/showPopover) #### Returns `void` #### Inherited from ```ts HTMLElement.showPopover ``` *** ### togglePopover() ```ts togglePopover(options?): boolean; ``` The **`togglePopover()`** method of the HTMLElement interface toggles a Popover\_API element (i.e., one that has a valid `popover` attribute) between the hidden and showing states. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/togglePopover) #### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `boolean` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.togglePopover ``` *** ### addEventListener() #### Call Signature ```ts addEventListener( type, listener, options?): void; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `HTMLElementEventMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `type` | `K` | | `listener` | (`this`, `ev`) => `any` | | `options?` | `boolean` | `AddEventListenerOptions` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.addEventListener ``` #### Call Signature ```ts addEventListener( type, listener, options?): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `type` | `string` | | `listener` | `EventListenerOrEventListenerObject` | | `options?` | `boolean` | `AddEventListenerOptions` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.addEventListener ``` *** ### removeEventListener() #### Call Signature ```ts removeEventListener( type, listener, options?): void; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `HTMLElementEventMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `type` | `K` | | `listener` | (`this`, `ev`) => `any` | | `options?` | `boolean` | `EventListenerOptions` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.removeEventListener ``` #### Call Signature ```ts removeEventListener( type, listener, options?): void; ``` ##### Parameters | Parameter | Type | | ------ | ------ | | `type` | `string` | | `listener` | `EventListenerOrEventListenerObject` | | `options?` | `boolean` | `EventListenerOptions` | ##### Returns `void` ##### Inherited from ```ts HTMLElement.removeEventListener ``` *** ### blur() ```ts blur(): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/blur) #### Returns `void` #### Inherited from ```ts HTMLElement.blur ``` *** ### focus() ```ts focus(options?): void; ``` [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus) #### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `FocusOptions` | #### Returns `void` #### Inherited from ```ts HTMLElement.focus ``` *** ### appendChild() ```ts appendChild(node): T; ``` The **`appendChild()`** method of the Node interface adds a node to the end of the list of children of a specified parent node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/appendChild) #### Type Parameters | Type Parameter | | ------ | | `T` *extends* `Node` | #### Parameters | Parameter | Type | | ------ | ------ | | `node` | `T` | #### Returns `T` #### Inherited from ```ts HTMLElement.appendChild ``` *** ### cloneNode() ```ts cloneNode(subtree?): Node; ``` The **`cloneNode()`** method of the Node interface returns a duplicate of the node on which this method was called. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) #### Parameters | Parameter | Type | | ------ | ------ | | `subtree?` | `boolean` | #### Returns `Node` #### Inherited from ```ts HTMLElement.cloneNode ``` *** ### compareDocumentPosition() ```ts compareDocumentPosition(other): number; ``` The **`compareDocumentPosition()`** method of the Node interface reports the position of its argument node relative to the node on which it is called. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/compareDocumentPosition) #### Parameters | Parameter | Type | | ------ | ------ | | `other` | `Node` | #### Returns `number` #### Inherited from ```ts HTMLElement.compareDocumentPosition ``` *** ### contains() ```ts contains(other): boolean; ``` The **`contains()`** method of the Node interface returns a boolean value indicating whether a node is a descendant of a given node, that is the node itself, one of its direct children (Node.childNodes), one of the children's direct children, and so on. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/contains) #### Parameters | Parameter | Type | | ------ | ------ | | `other` | `Node` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.contains ``` *** ### getRootNode() ```ts getRootNode(options?): Node; ``` The **`getRootNode()`** method of the Node interface returns the context object's root, which optionally includes the shadow root if it is available. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/getRootNode) #### Parameters | Parameter | Type | | ------ | ------ | | `options?` | `GetRootNodeOptions` | #### Returns `Node` #### Inherited from ```ts HTMLElement.getRootNode ``` *** ### hasChildNodes() ```ts hasChildNodes(): boolean; ``` The **`hasChildNodes()`** method of the Node interface returns a boolean value indicating whether the given Node has child nodes or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/hasChildNodes) #### Returns `boolean` #### Inherited from ```ts HTMLElement.hasChildNodes ``` *** ### insertBefore() ```ts insertBefore(node, child): T; ``` The **`insertBefore()`** method of the Node interface inserts a node before a *reference node* as a child of a specified *parent node*. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/insertBefore) #### Type Parameters | Type Parameter | | ------ | | `T` *extends* `Node` | #### Parameters | Parameter | Type | | ------ | ------ | | `node` | `T` | | `child` | `Node` | #### Returns `T` #### Inherited from ```ts HTMLElement.insertBefore ``` *** ### isDefaultNamespace() ```ts isDefaultNamespace(namespace): boolean; ``` The **`isDefaultNamespace()`** method of the Node interface accepts a namespace URI as an argument. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isDefaultNamespace) #### Parameters | Parameter | Type | | ------ | ------ | | `namespace` | `string` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.isDefaultNamespace ``` *** ### isEqualNode() ```ts isEqualNode(otherNode): boolean; ``` The **`isEqualNode()`** method of the Node interface tests whether two nodes are equal. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isEqualNode) #### Parameters | Parameter | Type | | ------ | ------ | | `otherNode` | `Node` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.isEqualNode ``` *** ### isSameNode() ```ts isSameNode(otherNode): boolean; ``` The **`isSameNode()`** method of the Node interface is a legacy alias the for the `===` strict equality operator. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isSameNode) #### Parameters | Parameter | Type | | ------ | ------ | | `otherNode` | `Node` | #### Returns `boolean` #### Inherited from ```ts HTMLElement.isSameNode ``` *** ### lookupNamespaceURI() ```ts lookupNamespaceURI(prefix): string; ``` The **`lookupNamespaceURI()`** method of the Node interface takes a prefix as parameter and returns the namespace URI associated with it on the given node if found (and `null` if not). [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lookupNamespaceURI) #### Parameters | Parameter | Type | | ------ | ------ | | `prefix` | `string` | #### Returns `string` #### Inherited from ```ts HTMLElement.lookupNamespaceURI ``` *** ### lookupPrefix() ```ts lookupPrefix(namespace): string; ``` The **`lookupPrefix()`** method of the Node interface returns a string containing the prefix for a given namespace URI, if present, and `null` if not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lookupPrefix) #### Parameters | Parameter | Type | | ------ | ------ | | `namespace` | `string` | #### Returns `string` #### Inherited from ```ts HTMLElement.lookupPrefix ``` *** ### normalize() ```ts normalize(): void; ``` The **`normalize()`** method of the Node interface puts the specified node and all of its sub-tree into a *normalized* form. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/normalize) #### Returns `void` #### Inherited from ```ts HTMLElement.normalize ``` *** ### removeChild() ```ts removeChild(child): T; ``` The **`removeChild()`** method of the Node interface removes a child node from the DOM and returns the removed node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/removeChild) #### Type Parameters | Type Parameter | | ------ | | `T` *extends* `Node` | #### Parameters | Parameter | Type | | ------ | ------ | | `child` | `T` | #### Returns `T` #### Inherited from ```ts HTMLElement.removeChild ``` *** ### replaceChild() ```ts replaceChild(node, child): T; ``` The **`replaceChild()`** method of the Node interface replaces a child node within the given (parent) node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/replaceChild) #### Type Parameters | Type Parameter | | ------ | | `T` *extends* `Node` | #### Parameters | Parameter | Type | | ------ | ------ | | `node` | `Node` | | `child` | `T` | #### Returns `T` #### Inherited from ```ts HTMLElement.replaceChild ``` *** ### append() ```ts 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 | Parameter | Type | | ------ | ------ | | ...`nodes` | (`string` | `Node`)\[] | #### Returns `void` #### Inherited from ```ts HTMLElement.append ``` *** ### prepend() ```ts 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 | Parameter | Type | | ------ | ------ | | ...`nodes` | (`string` | `Node`)\[] | #### Returns `void` #### Inherited from ```ts HTMLElement.prepend ``` *** ### querySelector() #### Call Signature ```ts 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 Parameter | | ------ | | `K` *extends* keyof `HTMLElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `K` | ##### Returns `HTMLElementTagNameMap`\[`K`] ##### Inherited from ```ts HTMLElement.querySelector ``` #### Call Signature ```ts querySelector(selectors): SVGElementTagNameMap[K]; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `SVGElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `K` | ##### Returns `SVGElementTagNameMap`\[`K`] ##### Inherited from ```ts HTMLElement.querySelector ``` #### Call Signature ```ts querySelector(selectors): MathMLElementTagNameMap[K]; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `MathMLElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `K` | ##### Returns `MathMLElementTagNameMap`\[`K`] ##### Inherited from ```ts HTMLElement.querySelector ``` #### Call Signature ```ts querySelector(selectors): HTMLElementDeprecatedTagNameMap[K]; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `K` | ##### Returns `HTMLElementDeprecatedTagNameMap`\[`K`] ##### Deprecated ##### Inherited from ```ts HTMLElement.querySelector ``` #### Call Signature ```ts querySelector(selectors): E; ``` ##### Type Parameters | Type Parameter | Default type | | ------ | ------ | | `E` *extends* `Element` | `Element` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `string` | ##### Returns `E` ##### Inherited from ```ts HTMLElement.querySelector ``` *** ### querySelectorAll() #### Call Signature ```ts 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 Parameter | | ------ | | `K` *extends* keyof `HTMLElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `K` | ##### Returns `NodeListOf`\<`HTMLElementTagNameMap`\[`K`]> ##### Inherited from ```ts HTMLElement.querySelectorAll ``` #### Call Signature ```ts querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `SVGElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `K` | ##### Returns `NodeListOf`\<`SVGElementTagNameMap`\[`K`]> ##### Inherited from ```ts HTMLElement.querySelectorAll ``` #### Call Signature ```ts querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `MathMLElementTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `K` | ##### Returns `NodeListOf`\<`MathMLElementTagNameMap`\[`K`]> ##### Inherited from ```ts HTMLElement.querySelectorAll ``` #### Call Signature ```ts querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters | Type Parameter | | ------ | | `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `K` | ##### Returns `NodeListOf`\<`HTMLElementDeprecatedTagNameMap`\[`K`]> ##### Deprecated ##### Inherited from ```ts HTMLElement.querySelectorAll ``` #### Call Signature ```ts querySelectorAll(selectors): NodeListOf; ``` ##### Type Parameters | Type Parameter | Default type | | ------ | ------ | | `E` *extends* `Element` | `Element` | ##### Parameters | Parameter | Type | | ------ | ------ | | `selectors` | `string` | ##### Returns `NodeListOf`\<`E`> ##### Inherited from ```ts HTMLElement.querySelectorAll ``` *** ### replaceChildren() ```ts 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 | Parameter | Type | | ------ | ------ | | ...`nodes` | (`string` | `Node`)\[] | #### Returns `void` #### Inherited from ```ts HTMLElement.replaceChildren ``` ## Properties | Property | Modifier | Type | Description | Inherited from | | ------ | ------ | ------ | ------ | ------ | | `ariaActiveDescendantElement` | `public` | `Element` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaActiveDescendantElement) | `HTMLElement.ariaActiveDescendantElement` | | `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` | | `ariaColIndexText` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaColIndexText) | `HTMLElement.ariaColIndexText` | | `ariaColSpan` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaColSpan) | `HTMLElement.ariaColSpan` | | `ariaControlsElements` | `public` | readonly `Element`\[] | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaControlsElements) | `HTMLElement.ariaControlsElements` | | `ariaCurrent` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaCurrent) | `HTMLElement.ariaCurrent` | | `ariaDescribedByElements` | `public` | readonly `Element`\[] | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaDescribedByElements) | `HTMLElement.ariaDescribedByElements` | | `ariaDescription` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaDescription) | `HTMLElement.ariaDescription` | | `ariaDetailsElements` | `public` | readonly `Element`\[] | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaDetailsElements) | `HTMLElement.ariaDetailsElements` | | `ariaDisabled` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaDisabled) | `HTMLElement.ariaDisabled` | | `ariaErrorMessageElements` | `public` | readonly `Element`\[] | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaErrorMessageElements) | `HTMLElement.ariaErrorMessageElements` | | `ariaExpanded` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaExpanded) | `HTMLElement.ariaExpanded` | | `ariaFlowToElements` | `public` | readonly `Element`\[] | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaFlowToElements) | `HTMLElement.ariaFlowToElements` | | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaInvalid) | `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` | | `ariaLabelledByElements` | `public` | readonly `Element`\[] | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabelledByElements) | `HTMLElement.ariaLabelledByElements` | | `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` | | `ariaOwnsElements` | `public` | readonly `Element`\[] | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaOwnsElements) | `HTMLElement.ariaOwnsElements` | | `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` | | `ariaRelevant` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRelevant) | `HTMLElement.ariaRelevant` | | `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` | | `ariaRowIndexText` | `public` | `string` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaRowIndexText) | `HTMLElement.ariaRowIndexText` | | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/role) | `HTMLElement.role` | | `attributes` | `readonly` | `NamedNodeMap` | The **`Element.attributes`** property returns a live collection of all attribute nodes registered to the specified node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/attributes) | `HTMLElement.attributes` | | `className` | `public` | `string` | The **`className`** property of the of the specified element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/className) | `HTMLElement.className` | | `clientHeight` | `readonly` | `number` | The **`clientHeight`** read-only property of the Element interface is zero for elements with no CSS or inline layout boxes; otherwise, it's the inner height of an element in pixels. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientHeight) | `HTMLElement.clientHeight` | | `clientLeft` | `readonly` | `number` | The **`clientLeft`** read-only property of the Element interface returns the width of the left border of an element in pixels. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientLeft) | `HTMLElement.clientLeft` | | `clientTop` | `readonly` | `number` | The **`clientTop`** read-only property of the Element interface returns the width of the top border of an element in pixels. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientTop) | `HTMLElement.clientTop` | | `clientWidth` | `readonly` | `number` | The **`clientWidth`** read-only property of the Element interface is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientWidth) | `HTMLElement.clientWidth` | | `currentCSSZoom` | `readonly` | `number` | The **`currentCSSZoom`** read-only property of the Element interface provides the 'effective' CSS `zoom` of an element, taking into account the zoom applied to the element and all its parent elements. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/currentCSSZoom) | `HTMLElement.currentCSSZoom` | | `id` | `public` | `string` | The **`id`** property of the Element interface represents the element's identifier, reflecting the **`id`** global attribute. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id) | `HTMLElement.id` | | `innerHTML` | `public` | `string` | The **`innerHTML`** property of the Element interface gets or sets the HTML or XML markup contained within the element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) | `HTMLElement.innerHTML` | | `localName` | `readonly` | `string` | The **`Element.localName`** read-only property returns the local part of the qualified name of an element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/localName) | `HTMLElement.localName` | | `namespaceURI` | `readonly` | `string` | The **`Element.namespaceURI`** read-only property returns the namespace URI of the element, or `null` if the element is not in a 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` | The **`outerHTML`** attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/outerHTML) | `HTMLElement.outerHTML` | | `ownerDocument` | `readonly` | `Document` | The read-only **`ownerDocument`** property of the Node interface returns the top-level document object of the node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/ownerDocument) | `HTMLElement.ownerDocument` | | `prefix` | `readonly` | `string` | The **`Element.prefix`** read-only property returns the namespace prefix of the specified element, or `null` if no prefix is specified. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/prefix) | `HTMLElement.prefix` | | `scrollHeight` | `readonly` | `number` | The **`scrollHeight`** read-only property of the Element interface is a measurement of the height of an element's content, including content not visible on the screen due to overflow. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollHeight) | `HTMLElement.scrollHeight` | | `scrollLeft` | `public` | `number` | The **`scrollLeft`** property of the Element interface gets or sets the number of pixels by which an element's content is scrolled from its left edge. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollLeft) | `HTMLElement.scrollLeft` | | `scrollTop` | `public` | `number` | The **`scrollTop`** property of the Element interface gets or sets the number of pixels by which an element's content is scrolled from its top edge. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTop) | `HTMLElement.scrollTop` | | `scrollWidth` | `readonly` | `number` | The **`scrollWidth`** read-only property of the Element interface is a measurement of the width of an element's content, including content not visible on the screen due to overflow. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollWidth) | `HTMLElement.scrollWidth` | | `shadowRoot` | `readonly` | `ShadowRoot` | The `Element.shadowRoot` read-only property represents the shadow root hosted by the element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/shadowRoot) | `HTMLElement.shadowRoot` | | `slot` | `public` | `string` | The **`slot`** property of the Element interface returns the name of the shadow DOM slot the element is inserted in. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/slot) | `HTMLElement.slot` | | `tagName` | `readonly` | `string` | The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. [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` | | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/abort_event) | `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` | | `onbeforematch` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/beforematch_event) | `HTMLElement.onbeforematch` | | `onbeforetoggle` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/beforetoggle_event) | `HTMLElement.onbeforetoggle` | | `onblur` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/blur_event) | `HTMLElement.onblur` | | `oncancel` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/cancel_event) | `HTMLElement.oncancel` | | `oncanplay` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplay_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/change_event) | `HTMLElement.onchange` | | `onclick` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/click_event) | `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/contextlost_event) | `HTMLElement.oncontextlost` | | `oncontextmenu` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/dblclick_event) | `HTMLElement.ondblclick` | | `ondrag` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/drag_event) | `HTMLElement.ondrag` | | `ondragend` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragend_event) | `HTMLElement.ondragend` | | `ondragenter` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragenter_event) | `HTMLElement.ondragenter` | | `ondragleave` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragleave_event) | `HTMLElement.ondragleave` | | `ondragover` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragover_event) | `HTMLElement.ondragover` | | `ondragstart` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragstart_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/durationchange_event) | `HTMLElement.ondurationchange` | | `onemptied` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/emptied_event) | `HTMLElement.onemptied` | | `onended` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/ended_event) | `HTMLElement.onended` | | `onerror` | `public` | `OnErrorEventHandlerNonNull` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/error_event) | `HTMLElement.onerror` | | `onfocus` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/focus_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keydown_event) | `HTMLElement.onkeydown` | | ~~`onkeypress`~~ | `public` | (`this`, `ev`) => `any` | **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keypress_event) | `HTMLElement.onkeypress` | | `onkeyup` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keyup_event) | `HTMLElement.onkeyup` | | `onload` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/load_event) | `HTMLElement.onload` | | `onloadeddata` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadeddata_event) | `HTMLElement.onloadeddata` | | `onloadedmetadata` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadedmetadata_event) | `HTMLElement.onloadedmetadata` | | `onloadstart` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadstart_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mousedown_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mousemove_event) | `HTMLElement.onmousemove` | | `onmouseout` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseout_event) | `HTMLElement.onmouseout` | | `onmouseover` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseover_event) | `HTMLElement.onmouseover` | | `onmouseup` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseup_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/pause_event) | `HTMLElement.onpause` | | `onplay` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/play_event) | `HTMLElement.onplay` | | `onplaying` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/playing_event) | `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` | | `onpointerrawupdate` | `public` | (`this`, `ev`) => `any` | Available only in secure contexts. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerrawupdate_event) | `HTMLElement.onpointerrawupdate` | | `onpointerup` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerup_event) | `HTMLElement.onpointerup` | | `onprogress` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/progress_event) | `HTMLElement.onprogress` | | `onratechange` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/ratechange_event) | `HTMLElement.onratechange` | | `onreset` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/reset_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/scroll_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/seeked_event) | `HTMLElement.onseeked` | | `onseeking` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/seeking_event) | `HTMLElement.onseeking` | | `onselect` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/select_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/stalled_event) | `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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/suspend_event) | `HTMLElement.onsuspend` | | `ontimeupdate` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/timeupdate_event) | `HTMLElement.ontimeupdate` | | `ontoggle` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/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` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/volumechange_event) | `HTMLElement.onvolumechange` | | `onwaiting` | `public` | (`this`, `ev`) => `any` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/waiting_event) | `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` | The **`HTMLElement.accessKey`** property sets the keystroke which a user can press to jump to a given element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKey) | `HTMLElement.accessKey` | | `accessKeyLabel` | `readonly` | `string` | The **`HTMLElement.accessKeyLabel`** read-only property returns a string containing the element's browser-assigned access key (if any); otherwise it returns an empty string. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKeyLabel) | `HTMLElement.accessKeyLabel` | | `autocapitalize` | `public` | `string` | The **`autocapitalize`** property of the HTMLElement interface represents the element's capitalization behavior for user input. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/autocapitalize) | `HTMLElement.autocapitalize` | | `autocorrect` | `public` | `boolean` | The **`autocorrect`** property of the HTMLElement interface controls whether or not autocorrection of editable text is enabled for spelling and/or punctuation errors. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/autocorrect) | `HTMLElement.autocorrect` | | `dir` | `public` | `string` | The **`HTMLElement.dir`** property indicates the text writing directionality of the content of the current element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dir) | `HTMLElement.dir` | | `draggable` | `public` | `boolean` | The **`draggable`** property of the HTMLElement interface gets and sets a Boolean primitive indicating if the element is draggable. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/draggable) | `HTMLElement.draggable` | | `hidden` | `public` | `boolean` | The HTMLElement property **`hidden`** reflects the value of the element's `hidden` attribute. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidden) | `HTMLElement.hidden` | | `inert` | `public` | `boolean` | The HTMLElement property **`inert`** reflects the value of the element's `inert` attribute. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/inert) | `HTMLElement.inert` | | `innerText` | `public` | `string` | The **`innerText`** property of the HTMLElement interface represents the rendered text content of a node and its descendants. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/innerText) | `HTMLElement.innerText` | | `lang` | `public` | `string` | The **`lang`** property of the HTMLElement interface indicates the base language of an element's attribute values and text content, in the form of a MISSING: RFC(5646, 'BCP 47 language identifier tag')]. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/lang) | `HTMLElement.lang` | | `offsetHeight` | `readonly` | `number` | The **`offsetHeight`** read-only property of the HTMLElement interface returns the height of an element, including vertical padding and borders, as an integer. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetHeight) | `HTMLElement.offsetHeight` | | `offsetLeft` | `readonly` | `number` | The **`offsetLeft`** read-only property of the HTMLElement interface returns the number of pixels that the *upper left corner* of the current element is offset to the left within the HTMLElement.offsetParent node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetLeft) | `HTMLElement.offsetLeft` | | `offsetParent` | `readonly` | `Element` | The **`HTMLElement.offsetParent`** read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetParent) | `HTMLElement.offsetParent` | | `offsetTop` | `readonly` | `number` | The **`offsetTop`** read-only property of the HTMLElement interface returns the distance from the outer border of the current element (including its margin) to the top padding edge of the HTMLelement.offsetParent, the *closest positioned* ancestor element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetTop) | `HTMLElement.offsetTop` | | `offsetWidth` | `readonly` | `number` | The **`offsetWidth`** read-only property of the HTMLElement interface returns the layout width of an element as an integer. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetWidth) | `HTMLElement.offsetWidth` | | `outerText` | `public` | `string` | The **`outerText`** property of the HTMLElement interface returns the same value as HTMLElement.innerText. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/outerText) | `HTMLElement.outerText` | | `popover` | `public` | `string` | The **`popover`** property of the HTMLElement interface gets and sets an element's popover state via JavaScript (`'auto'`, `'hint'`, or `'manual'`), and can be used for feature detection. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/popover) | `HTMLElement.popover` | | `spellcheck` | `public` | `boolean` | The **`spellcheck`** property of the HTMLElement interface represents a boolean value that controls the spell-checking hint. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/spellcheck) | `HTMLElement.spellcheck` | | `title` | `public` | `string` | The **`HTMLElement.title`** property represents the title of the element: the text usually displayed in a 'tooltip' popup when the mouse is over the node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/title) | `HTMLElement.title` | | `translate` | `public` | `boolean` | The **`translate`** property of the HTMLElement interface indicates whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/translate) | `HTMLElement.translate` | | `writingSuggestions` | `public` | `string` | The **`writingSuggestions`** property of the HTMLElement interface is a string indicating if browser-provided writing suggestions should be enabled under the scope of the element or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/writingSuggestions) | `HTMLElement.writingSuggestions` | | `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` | The read-only **`baseURI`** property of the Node interface returns the absolute base URL of the document containing the node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/baseURI) | `HTMLElement.baseURI` | | `childNodes` | `readonly` | `NodeListOf`\<`ChildNode`> | The read-only **`childNodes`** property of the Node interface returns a live the first child node is assigned index `0`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/childNodes) | `HTMLElement.childNodes` | | `firstChild` | `readonly` | `ChildNode` | The read-only **`firstChild`** property of the Node interface returns the node's first child in the tree, or `null` if the node has no children. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/firstChild) | `HTMLElement.firstChild` | | `isConnected` | `readonly` | `boolean` | The read-only **`isConnected`** property of the Node interface returns a boolean indicating whether the node is connected (directly or indirectly) to a Document object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isConnected) | `HTMLElement.isConnected` | | `lastChild` | `readonly` | `ChildNode` | The read-only **`lastChild`** property of the Node interface returns the last child of the node, or `null` if there are no child nodes. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/lastChild) | `HTMLElement.lastChild` | | `nextSibling` | `readonly` | `ChildNode` | The read-only **`nextSibling`** property of the Node interface returns the node immediately following the specified one in their parent's Node.childNodes, or returns `null` if the specified node is the last child in the parent element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nextSibling) | `HTMLElement.nextSibling` | | `nodeName` | `readonly` | `string` | The read-only **`nodeName`** property of Node returns the name of the current node as a string. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeName) | `HTMLElement.nodeName` | | `nodeType` | `readonly` | `number` | The read-only **`nodeType`** property of a Node interface is an integer that identifies what the node is. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeType) | `HTMLElement.nodeType` | | `nodeValue` | `public` | `string` | The **`nodeValue`** property of the Node interface returns or sets the value of the current node. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeValue) | `HTMLElement.nodeValue` | | `parentElement` | `readonly` | `HTMLElement` | The read-only **`parentElement`** property of Node interface returns the DOM node's parent Element, or `null` if the node either has no parent, or its parent isn't a DOM Element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/parentElement) | `HTMLElement.parentElement` | | `parentNode` | `readonly` | `ParentNode` | The read-only **`parentNode`** property of the Node interface returns the parent of the specified node in the DOM tree. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/parentNode) | `HTMLElement.parentNode` | | `previousSibling` | `readonly` | `ChildNode` | The read-only **`previousSibling`** property of the Node interface returns the node immediately preceding the specified one in its parent's or `null` if the specified node is the first in that list. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/previousSibling) | `HTMLElement.previousSibling` | | `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` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Logger" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/logger/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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. ```ts 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 | Parameter | Type | | ------ | ------ | | `message` | `string` | | `level?` | [`LogLevel`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/loglevel/) | ## Returns `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: PageDuration" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/pageduration/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `pageId` | `number` | | `duration` | `number` | | `start` | `number` | | `end` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Range" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/range/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- An open range. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `from` | `number` | The starting value of the range | | `to` | `number` | The non-inclusive ending value of the range | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Reaction" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/reaction/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 ### track() ```ts 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 Parameter | | ------ | | `T` | #### Parameters | Parameter | Type | | ------ | ------ | | `cb` | () => `T` | #### Returns `T` *** ### subscribe() ```ts 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 | Parameter | Type | | ------ | ------ | | `cb` | () => `void` | #### Returns A function that can be called to unsubscribe the handler. () => `void` *** ### dispose() ```ts dispose(): void; ``` Unsubscribe all handlers, nullify the reference to the Reactor and dispose the reaction. #### Returns `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _ReactiveProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactiveproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- A reactive property with subscribe, value, and update methods ## Type Parameters | Type Parameter | | ------ | | `T` | ## 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) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _ReactivePropertyOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactivepropertyoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for creating a reactive property ## Type Parameters | Type Parameter | | ------ | | `T` | ## 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) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Reactor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/reactor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 ### createReaction() ```ts createReaction(debugName?): Reaction; ``` Create and return a new Reaction that is associated with this Reactor. #### Parameters | Parameter | Type | | ------ | ------ | | `debugName?` | `string` | #### Returns [`Reaction`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/reaction/) *** ### dispose() ```ts dispose(): void; ``` Dispose the reactor and all reactions. After this call, the reactor is no longer usable. #### Returns `void` ## 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _ReadonlyReactiveProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/readonlyreactiveproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- A read-only reactive property with subscribe and value methods ## Type Parameters | Type Parameter | | ------ | | `T` | ## 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: RefocusEvent" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/refocusevent/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Dispatched on the engine canvas right before the engine will refocus its text input after a blur. Call `preventDefault()` to prevent the refocusing. ## Extends - `CustomEvent`\<`EventTarget` | `null`> ## Methods ### preventDefault() ```ts preventDefault(): void; ``` Prevent refocusing the engine input #### Returns `void` #### Overrides ```ts CustomEvent.preventDefault ``` *** ### ~~initCustomEvent()~~ ```ts initCustomEvent( type, bubbles?, cancelable?, detail?): void; ``` The **`CustomEvent.initCustomEvent()`** method initializes a CustomEvent object. #### Parameters | Parameter | Type | | ------ | ------ | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | | `detail?` | `EventTarget` | #### Returns `void` #### Deprecated [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/initCustomEvent) #### Inherited from ```ts CustomEvent.initCustomEvent ``` *** ### composedPath() ```ts composedPath(): EventTarget[]; ``` The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath) #### Returns `EventTarget`\[] #### Inherited from ```ts CustomEvent.composedPath ``` *** ### ~~initEvent()~~ ```ts initEvent( type, bubbles?, cancelable?): void; ``` The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent(). #### Parameters | Parameter | Type | | ------ | ------ | | `type` | `string` | | `bubbles?` | `boolean` | | `cancelable?` | `boolean` | #### Returns `void` #### Deprecated [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/initEvent) #### Inherited from ```ts CustomEvent.initEvent ``` *** ### stopImmediatePropagation() ```ts stopImmediatePropagation(): void; ``` The **`stopImmediatePropagation()`** method of the If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation) #### Returns `void` #### Inherited from ```ts CustomEvent.stopImmediatePropagation ``` *** ### stopPropagation() ```ts stopPropagation(): void; ``` The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) #### Returns `void` #### Inherited from ```ts CustomEvent.stopPropagation ``` ## Properties | Property | Modifier | Type | Description | Overrides | Inherited from | | ------ | ------ | ------ | ------ | ------ | ------ | | `type` | `readonly` | `"cesdk-refocus"` | The **`type`** read-only property of the Event interface returns a string containing the event's type. [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` | The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles) | - | `CustomEvent.bubbles` | | ~~`cancelBubble`~~ | `public` | `boolean` | The **`cancelBubble`** property of the Event interface is deprecated. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelBubble) | - | `CustomEvent.cancelBubble` | | `cancelable` | `readonly` | `boolean` | The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable) | - | `CustomEvent.cancelable` | | `composed` | `readonly` | `boolean` | The read-only **`composed`** property of the or not the event will propagate across the shadow DOM boundary into the standard DOM. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed) | - | `CustomEvent.composed` | | `currentTarget` | `readonly` | `EventTarget` | The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget) | - | [`CursorEvent`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/).[`currentTarget`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/) | | `defaultPrevented` | `readonly` | `boolean` | The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented) | - | `CustomEvent.defaultPrevented` | | `eventPhase` | `readonly` | `number` | The **`eventPhase`** read-only property of the being evaluated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase) | - | `CustomEvent.eventPhase` | | `isTrusted` | `readonly` | `boolean` | The **`isTrusted`** read-only property of the when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and `false` when the event was dispatched via The only exception is the `click` event, which initializes the `isTrusted` property to `false` in user agents. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted) | - | `CustomEvent.isTrusted` | | ~~`returnValue`~~ | `public` | `boolean` | The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/returnValue) | - | `CustomEvent.returnValue` | | ~~`srcElement`~~ | `readonly` | `EventTarget` | The deprecated **`Event.srcElement`** is an alias for the Event.target property. **Deprecated** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/srcElement) | - | [`CursorEvent`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/).[`srcElement`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/) | | `target` | `readonly` | `EventTarget` | The read-only **`target`** property of the dispatched. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target) | - | [`CursorEvent`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/).[`target`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/cursorevent/) | | `timeStamp` | `readonly` | `number` | The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created. [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` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: RGBAColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbacolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | Description | | ------ | ------ | ------ | | `r` | `number` | Red | | `g` | `number` | Green | | `b` | `number` | Blue | | `a` | `number` | Alpha | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: RGBColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/rgbcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | Description | | ------ | ------ | ------ | | `r` | `number` | Red | | `g` | `number` | Green | | `b` | `number` | Blue | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Settings" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/settings/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | 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/dynamicMoveHandleVisibility` | `boolean` | Whether the move handle visibility is dynamic based on block size. Set to false to always show. | | `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/fileSystemUsageEnabled` | `boolean` | Enable file system usage, that allows the engine to use the file system to store files for local uploads. | | `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. | | `features/clampTextBlockWidthToPageDimensionsDuringEditing` | `boolean` | Whether auto-sized text blocks should be clamped to page boundaries during editing. | | `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/marqueeSelectOnBodyDrag` | `boolean` | When enabled, a click+drag that starts on the page body performs a marquee selection of the blocks inside the page instead of moving the page. The page can still be moved by dragging its title (when visible in free layout) or by holding the command key (macOS) / control key (Windows/Linux) while clicking and dragging on the page body. Has no effect when the page is not movable (see `page/allowMoveInteraction` and scene layout constraints). | | `page/restrictPageSelectionToBorderAndTitle` | `boolean` | When enabled, the page can only be selected by clicking on its title (when shown in free layout) or near its border. Clicks inside the page body no longer select the page; the click falls through to whatever block sits underneath. Independent of `page/marqueeSelectOnBodyDrag`. | | `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/allowShapeChange` | `boolean` | Whether pages support non-rectangular shapes. When false, supportsShape returns false for pages. | | `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/canEdit` | `boolean` | Whether double-clicking a page title enters text edit mode to rename the page. | | `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. | | `playback/showAllBlocks` | `boolean` | When enabled, every block stays visible regardless of the current playback time, instead of being culled outside its time offset/duration. No effect on export. | | `grid/enabled` | `boolean` | Whether the background grid is shown on pages. | | `grid/snapEnabled` | `boolean` | Whether elements should snap to grid lines when dragged. | | `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. | | `page/highlightWhenCropping` | `boolean` | Whether highlighting should be automatically enabled on the current page when entering crop mode. | | `page/highlightDropTarget` | `boolean` | Whether to highlight the page under a dragged element as a drop target. | | `page/reparentBlocksToSceneWhenOutOfPage` | `boolean` | Whether blocks should be reparented to the scene when dragged outside all pages, and reparented back to a page when dragged over one. | | `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 for resolving relative paths and `bundle://` URIs. Also used as the base URL for loading font fallback files and the default emoji font (when self-hosting assets). If empty, defaults to `https://cdn.img.ly/assets/v4` for font/emoji assets. | | `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"` | `"include"` | Web-only: Credentials mode for cross-origin fetch requests. - "omit": Never send cookies - "same-origin": Send cookies only for same-origin requests (default) - "include": Always send cookies, even for cross-origin requests Note: Only affects web platform. Ignored on native platforms. | | `controlGizmo/blockScaleDownLimit` | `number` | Scale-down limit for blocks in screen pixels when scaling with gizmos or touch gestures. | | `listIndentPerLevel` | `number` | The width of each list indentation level, in EM units. | | `positionSnappingThreshold` | `number` | The threshold distance in pixels for position snapping. | | `rotationSnappingThreshold` | `number` | The threshold angle in degrees for rotation snapping. | | `grid/spacingX` | `number` | Horizontal spacing between vertical grid lines in design units. | | `grid/spacingY` | `number` | Vertical spacing between horizontal grid lines in design units. | | `maxImageSize` | `number` | The maximum size (width or height) in pixels for images. | | `maxPreviewResolution` | `number` | The maximum dimension (width or height) in physical pixels for preview rendering. When greater than 0, the scene is rendered at reduced resolution and upscaled for improved performance. Does not affect exports. Set to -1 to disable (default). | | `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. | | `grid/color` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | Color of the grid lines. | | `doubleClickSelectionMode` | `"Direct"` | `"Hierarchical"` | The selection mode for double-click: Direct selects the clicked element, Hierarchical traverses the hierarchy. | | `touch/pinchAction` | `"Auto"` | `"None"` | `"Zoom"` | `"Scale"` | `"Dynamic"` | The action performed for pinch gestures: None, Zoom, Scale, Auto, or Dynamic. | | `touch/rotateAction` | `"None"` | `"Rotate"` | The action performed for rotate gestures: None or Rotate. | | `camera/clamping/overshootMode` | `"Center"` | `"Reverse"` | Controls behavior when clamp area is smaller than viewport: Center or Reverse. | | `dock/iconSize` | `"normal"` | `"large"` | Controls the icon size of the dock components | | `colorPicker/colorMode` | `"CMYK"` | `"RGB"` | `"Any"` | Controls the color mode of the color picker. When set to 'RGB' or 'CMYK', only colors matching this mode are fully editable. Defaults to 'Any'. | | `timeline/trackVisibility` | `"all"` | `"active"` | Controls which timeline tracks are visible. 'all' shows all tracks, 'active' shows only the track containing the active block. Defaults to 'all'. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Size2" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/size2/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `width` | `number` | | `height` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _Source" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/source-1/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- A source that can emit values to subscribed listeners ## Type Parameters | Type Parameter | | ------ | | `T` | ```ts _Source(listener): _Unsubscribe; ``` A source that can emit values to subscribed listeners ## Parameters | Parameter | Type | | ------ | ------ | | `listener` | [`_Listener`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/listener/)\<`T`> | ## Returns [`_Unsubscribe`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/) ## Properties | Property | Type | | ------ | ------ | | `emit` | (`value`) => `void` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Source" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/source/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- A single source width an intrinsic width & height. ## Properties | Property | Type | | ------ | ------ | | `uri` | `string` | | `width` | `number` | | `height` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: SpotColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/spotcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `name` | `string` | | `tint` | `number` | | `externalReference` | `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: TextDecorationConfig" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/textdecorationconfig/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Configuration for text decorations on a text run. All active decoration lines share the same style and thickness. An optional underline color override can be set; overline and strikethrough always use the text color. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `lines` | [`TextDecorationLine`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textdecorationline/)\[] | The active decoration line types. Use `['None']` to clear all decorations. When `'None'` is present, all other values are ignored. | | `style?` | [`TextDecorationStyle`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textdecorationstyle/) | The style of the decoration lines. Defaults to 'Solid'. | | `underlineColor?` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | Optional color override for underlines only. Uses the text color if not set. Overline and strikethrough always use the text color. | | `underlineThickness?` | `number` | Multiplier for the underline thickness. Defaults to 1.0. | | `underlineOffset?` | `number` | Relative offset applied to the underline position as a multiplier on the font-default distance. 0 = font default, positive = proportionally further from baseline, negative = proportionally closer. The actual position is computed as `fontDefault * (1 + underlineOffset)`. Defaults to 0.0. | | `skipInk?` | `boolean` | When true, underlines skip over glyph descenders (skip-ink). Defaults to true. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: TextFontSizeOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/textfontsizeoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Options for text font size operations with unit support. ## 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 the scene's `fontSizeUnit` (configured via `engine.scene.setFontSizeUnit()`), which itself 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) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: TransientResource" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/transientresource/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `URL` | `string` | | `size` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Typeface" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/typeface/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Typeface definition ## Properties | Property | Type | | ------ | ------ | | `name` | `string` | | `fonts` | [`Font`](https://img.ly/docs/cesdk/angular/api/engine/interfaces/font/)\[] | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _UBQAudioFromVideoOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqaudiofromvideooptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `keepTrimSettings` | `boolean` | | `muteOriginalVideo` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _UBQExportAudioOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportaudiooptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `sampleRate` | `number` | | `numberOfChannels` | `number` | | `skipEncoding?` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _UBQExportOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `jpegQuality` | `number` | | `webpQuality` | `number` | | `pngCompressionLevel` | `number` | | `useTargetSize` | `boolean` | | `targetWidth` | `number` | | `targetHeight` | `number` | | `exportPdfWithHighCompatibility` | `boolean` | | `exportPdfWithUnderlayer` | `boolean` | | `underlayerSpotColorName` | `string` | | `underlayerOffset` | `number` | | `underlayerRenderRatio` | `number` | | `underlayerMaxError` | `number` | | `allowTextOverhang` | `boolean` | | `exportPdfWithDeviceCMYK` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _UBQExportVideoOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqexportvideooptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `h264Profile` | `number` | | `h264Level` | `number` | | `framerate` | `number` | | `videoBitrate` | `number` | | `audioBitrate` | `number` | | `useTargetSize` | `boolean` | | `targetWidth` | `number` | | `targetHeight` | `number` | | `allowTextOverhang` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: _UBQSplitOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/ubqsplitoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- 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 | Property | Type | | ------ | ------ | | `attachToParent` | `boolean` | | `createParentTrackIfNeeded` | `boolean` | | `selectNewBlock` | `boolean` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Vec2" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/vec2/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `x` | `number` | | `y` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Interface: Vec3" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/interfaces/vec3/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ## Properties | Property | Type | | ------ | ------ | | `x` | `number` | | `y` | `number` | | `z` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AddImageOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/addimageoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AddImageOptions = object; ``` Options for adding images to the scene. ## 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` | \{ `width`: `number`; `height`: `number`; } | Size for the image - can be a number for equal width/height or an object | | `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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationBaselineDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationbaselinedirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationBaselineDirection = typeof AnimationBaselineDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationBlockSwipeTextDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationblockswipetextdirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationBlockSwipeTextDirection = typeof AnimationBlockSwipeTextDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationEasing" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationeasing/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationEasing = typeof AnimationEasingValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationEntry" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationentry/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationEntry = object; ``` Configuration options for animations. ## 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationGrowDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationgrowdirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationGrowDirection = typeof AnimationGrowDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationJumpLoopDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationjumploopdirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationJumpLoopDirection = typeof AnimationJumpLoopDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationKenBurnsDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationkenburnsdirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationKenBurnsDirection = typeof AnimationKenBurnsDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationMergeTextDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationmergetextdirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationMergeTextDirection = typeof AnimationMergeTextDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationOptions = object; ``` Options for configuring animations (in, loop, out animations). ## 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationScaleLoopDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationscaleloopdirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationScaleLoopDirection = typeof AnimationScaleLoopDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationSpinDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationspindirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationSpinDirection = typeof AnimationSpinDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationSpinLoopDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationspinloopdirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationSpinLoopDirection = typeof AnimationSpinLoopDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationTypeLonghand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypelonghand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationTypeShorthand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypeshorthand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationTypeShorthand = typeof ANIMATION_TYPES[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationTypewriterTextWritingStyle" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationtypewritertextwritingstyle/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationTypewriterTextWritingStyle = typeof AnimationTypewriterTextWritingStyleValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AnimationWipeDirection" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationwipedirection/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AnimationWipeDirection = typeof AnimationWipeDirectionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ApplicationMimeType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/applicationmimetype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ApplicationMimeType = Extract; ``` Represents the application MIME types used in the editor. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetcolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetColor = | AssetRGBColor | AssetCMYKColor | AssetSpotColor; ``` Asset Color payload --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetFilter" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetfilter/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetFilter = | AssetPropertyFilter | { and: AssetFilter[]; or?: never; not?: never; property?: never; } | { or: AssetFilter[]; and?: never; not?: never; property?: never; } | { not: AssetFilter; and?: never; or?: never; property?: never; }; ``` Filter expression — predicate or logical combinator. Combinators nest arbitrarily. The union is mutually exclusive: an object with both `and` and `or`, or with `property` next to a combinator key, is rejected at the type level. Missing-key semantics for `not`: a predicate is `false` on an asset that lacks the targeted field, so a negated `meta.foo === 'x'` matches assets where `meta.foo !== 'x'` **and** assets that lack `meta.foo` entirely. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetGroups" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetgroups/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetMetaData" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetmetadata/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetMetaData = object & Record; ``` Generic asset information ## 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?` | `string` | Effect kind hint. Widened to `string` so this metadata stays cross-binding (the narrow `EffectType` union remains the source of truth for `BlockAPI.createEffect`). | | `blurType?` | `string` | Blur kind hint. Widened to `string` for the same reason as `effectType` — the narrow `BlurType` union still gates `BlockAPI.createBlur`. | | `looping?` | `boolean` | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetProperty" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetproperty/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetProperty = | AssetBooleanProperty | AssetColorProperty | AssetEnumProperty | AssetNumberProperty | AssetStringProperty; ``` Asset property for payload --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetPropertyFilter" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetpropertyfilter/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetPropertyFilter = object & | { contains: string; equals?: never; } | { equals: string; contains?: never; }; ``` A single property predicate. Exactly one of `contains` (case-insensitive substring) or `equals` (case-insensitive equality) must be set — the type forbids passing both or neither. On a string-array property (`tags`, `groups`), the operator matches if any element matches. `meta.` values are flat strings in the engine; if a meta value was originally serialized as a number or boolean, stringify it the same way before comparing. ## Type Declaration | Name | Type | | ------ | ------ | | `property` | [`AssetPropertyPath`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetpropertypath/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetPropertyPath" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assetpropertypath/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetPropertyPath = "label" | "tags" | "id" | "groups" | `meta.${string}`; ``` Dot-path against the resolved asset that a property predicate targets: `label`, `id`, `tags`, `groups`, or `meta.` (one segment — meta values in the engine are flat strings). The template literal accepts `'meta.'` (empty key) because TypeScript's `${string}` includes the empty string; the engine rejects this at runtime with an explanatory error. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AssetTransformPreset" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/assettransformpreset/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AssetTransformPreset = | AssetFixedAspectRatio | AssetFreeAspectRatio | AssetContentAspectRatio | AssetFixedSize; ``` Transform preset payload --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AsyncURIResolver" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/asyncuriresolver/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AsyncURIResolver = (URI, defaultURIResolver) => Promise | string; ``` An async-compatible URI resolver function. May return a plain string for synchronous resolution, or a `Promise` for asynchronous resolution. The engine preserves synchronous behaviour when a plain string is returned (important for call-sites that expect immediate resolution). ## Parameters | Parameter | Type | | ------ | ------ | | `URI` | `string` | | `defaultURIResolver` | (`URI`) => `string` | ## Returns `Promise`\<`string`> | `string` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AudioExportOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audioexportoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AudioFromVideoOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audiofromvideooptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AudioFromVideoOptions = object; ``` Options for configuring audio extraction from video operations. ## 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: AudioMimeType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/audiomimetype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type AudioMimeType = Extract; ``` Represents the audio MIME types used in the editor. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BlendMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blendmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type BlendMode = typeof BlendModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BlockEnumType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockenumtype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type BlockEnumType = object; ``` ## 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/) | | `page/guides/source` | [`PageGuidesSource`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/pageguidessource/) | | `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/cap` | [`StrokeCap`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokecap/) | | `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/) | | `animation/scale_loop/direction` | [`AnimationScaleLoopDirection`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationscaleloopdirection/) | | `fill/pixelStream/orientation` | [`FillPixelStreamOrientation`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fillpixelstreamorientation/) | | `shape/vector_path/fillRule` | [`ShapeVectorPathFillRule`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapevectorpathfillrule/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BlockState" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blockstate/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BlurType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BlurTypeLonghand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypelonghand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BlurTypeShorthand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/blurtypeshorthand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type BlurTypeShorthand = typeof BLUR_TYPES[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BooleanOperation" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/booleanoperation/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: BoolPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/boolpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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/guides/gridEnabled" | "page/guides/gridSnapEnabled" | "page/marginEnabled" | "placeholderControls/showButton" | "placeholderControls/showOverlay" | "playback/looping" | "playback/muted" | "stroke/enabled" | "backgroundColor/enabled" | "placeholderBehavior/enabled" | "text/automaticFontSizeEnabled" | "text/clipLinesOutsideOfFrame" | "text/hasClippedLines" | "text/useLigatures" | "text/useKerning" | "text/useContextualLigatures" | "text/useDiscretionaryLigatures" | "track/automaticallyManageBlockOffsets" | "caption/automaticFontSizeEnabled" | "caption/clipLinesOutsideOfFrame" | "caption/hasClippedLines" | "caption/useLigatures" | "caption/useKerning" | "caption/useContextualLigatures" | "caption/useDiscretionaryLigatures" | "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; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CameraClampingOvershootMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cameraclampingovershootmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CameraClampingOvershootMode = typeof CameraClampingOvershootModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Canvas" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/canvas/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type Canvas = | HTMLCanvasElement | OffscreenCanvas; ``` An HTML Canvas or an Offscreen Canvas --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CaptionHorizontalAlignment" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/captionhorizontalalignment/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CaptionHorizontalAlignment = typeof CaptionHorizontalAlignmentValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CaptionVerticalAlignment" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/captionverticalalignment/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CaptionVerticalAlignment = typeof CaptionVerticalAlignmentValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CMYK" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cmyk/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Color" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type Color = | RGBAColor | CMYKColor | SpotColor; ``` Represents all color types supported by the engine. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ColorPickerColorMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorpickercolormode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ColorPickerColorMode = typeof ColorPickerColorModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ColorPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ColorPropertyName = | "dropShadow/color" | "fill/solid/color" | "page/guides/gridColor" | "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; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ColorSpace" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorspace/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ColorSpace = "sRGB" | "CMYK" | "SpotColor"; ``` Represents the color space used in the editor. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ContentFillMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/contentfillmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ContentFillMode = typeof ContentFillModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CreateSceneOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/createsceneoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CreateSceneOptions = object; ``` Options for creating a video scene. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `page?` | `object` | The page options | | `page.size` | | `number` | \{ `width`: `number`; `height`: `number`; } | The size of the page | | `page.color?` | [`Color`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/color/) | The background color of the page | | `designUnit?` | [`DesignUnit`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designunit/) | The design unit of the new scene. Defaults to `Pixel`. | | `fontSizeUnit?` | [`SceneFontSizeUnit`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scenefontsizeunit/) | The unit in which font sizes for `setTextFontSize` and `getTextFontSizes` are interpreted. If omitted, it is paired with `designUnit`: `Pixel` scenes get `Pixel`, all other scenes get `Point`. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CutoutOperation" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cutoutoperation/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CutoutOperation = "Difference" | "Intersection" | "Union" | "XOR"; ``` Represents the type of a cutout. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: CutoutType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/cutouttype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type CutoutType = typeof CutoutTypeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DefaultAssetSourceId" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/defaultassetsourceid/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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.text" | "ly.img.captionPresets"; ``` Represents the default asset source IDs used in the editor. ## Deprecated This function uses legacy v4 asset source IDs. Please migrate to v5 asset sources using engine.asset.addLocalAssetSourceFromJSONURI() directly. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DemoAssetSourceId" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/demoassetsourceid/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. ## Deprecated This function uses legacy v3 demo asset source IDs. Please migrate to v4 asset sources using engine.asset.addLocalAssetSourceFromJSONURI() directly. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DesignBlockId" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblockid/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DesignBlockId = number; ``` A numerical identifier for a design block --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DesignBlockType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DesignBlockTypeLonghand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypelonghand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DesignBlockTypeShorthand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designblocktypeshorthand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DesignBlockTypeShorthand = typeof DESIGN_BLOCK_TYPES[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DesignUnit" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/designunit/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DesignUnit = typeof SceneDesignUnitValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DoubleClickSelectionMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/doubleclickselectionmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DoubleClickSelectionMode = typeof DoubleClickSelectionModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DoublePropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/doublepropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DoublePropertyName = | "playback/time" | "playback/duration" | "playback/timeOffset" | "audio/totalDuration" | "playback/trimLength" | "playback/trimOffset" | "fill/video/totalDuration" | "animation/scale_loop/startDelay" | "animation/scale_loop/holdDuration" | "animation/scale_loop/easingDuration" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: DropShadowOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/dropshadowoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type DropShadowOptions = object; ``` Options for configuring drop shadow effects on blocks. ## 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EditMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/editmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type EditMode = | "Transform" | "Crop" | "Text" | "Playback" | "Trim" | "Vector" | string & object; ``` Represents the current edit mode of the editor. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EffectType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EffectTypeLonghand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypelonghand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EffectTypeShorthand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/effecttypeshorthand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type EffectTypeShorthand = typeof EFFECT_TYPES[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EnginePluginContext" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/engineplugincontext/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Property | Type | | ------ | ------ | | `engine` | [`CreativeEngine`](https://img.ly/docs/cesdk/angular/api/engine/classes/creativeengine/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EnumPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/enumpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type EnumPropertyName = | "blend/mode" | "contentFill/mode" | "height/mode" | "position/x/mode" | "position/y/mode" | "scene/designUnit" | "scene/layout" | "scene/mode" | "width/mode" | "page/guides/source" | "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" | "animation/scale_loop/direction" | "fill/pixelStream/orientation" | "shape/vector_path/fillRule" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: EnumValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/enumvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type EnumValues = | BlendMode | ContentFillMode | HeightMode | PageGuidesSource | PositionXMode | PositionYMode | DesignUnit | SceneLayout | SceneMode | WidthMode | StrokeCap | StrokeCornerGeometry | StrokePosition | StrokeStyle | HorizontalTextAlignment | TextVerticalAlignment | CutoutType | CaptionHorizontalAlignment | CaptionVerticalAlignment | AnimationEasing | TextAnimationWritingStyle | AnimationGrowDirection | AnimationWipeDirection | AnimationBaselineDirection | AnimationSpinDirection | AnimationSpinLoopDirection | AnimationJumpLoopDirection | AnimationTypewriterTextWritingStyle | AnimationBlockSwipeTextDirection | AnimationMergeTextDirection | AnimationKenBurnsDirection | AnimationScaleLoopDirection | FillPixelStreamOrientation | ShapeVectorPathFillRule | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: _EqualsFn" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/equalsfn/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type _EqualsFn = (a, b) => boolean; ``` A function that compares two values for equality ## Type Parameters | Type Parameter | | ------ | | `T` | ## Parameters | Parameter | Type | | ------ | ------ | | `a` | `T` | | `b` | `T` | `undefined` | ## Returns `boolean` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ExportOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/exportoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. - 'underlayerRenderRatio': Resolution multiplier for the underlayer contour extraction. - 'underlayerMaxError': Curve-fit error tolerance for the underlayer contour. - 'abortSignal': An abort signal that can be used to cancel the export. ## 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"`> | `'image/png'` | The MIME type of the output file. | | `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. | | `underlayerRenderRatio?` | `number` | `1.0` | Resolution multiplier for the raster pass that extracts the underlayer contour. Higher values produce sharper underlayer outlines at the cost of memory and export time. Useful for small text on large pages, where the 1.0 default can miss fine glyph details. Values `<= 0` fall back to 1.0. `NaN` / `Infinity` are rejected at the binding boundary with a `StructError`; pass a real number or leave the field undefined to use the default. | | `underlayerMaxError?` | `number` | `2.0` | Maximum acceptable curve-fit error, in pixels, when vectorising the underlayer contour. Smaller values produce tighter fits at the cost of more path complexity. Useful together with `underlayerRenderRatio` for small text on large pages. Values `<= 0` fall back to 2.0. `NaN` / `Infinity` are rejected at the binding boundary with a `StructError`; pass a real number or leave the field undefined to use the default. | | `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. | | `exportPdfWithDeviceCMYK?` | `boolean` | `false` | Export CMYK colors using their native color spaces in the PDF. When enabled, direct CMYK colors are written as DeviceCMYK (k/K operators) and spot colors with CMYK values (set via setSpotColorCMYK) are written as DeviceN with process CMYK components. When disabled (default), all colors are exported as DeviceRGB. | | `abortSignal?` | `AbortSignal` | `undefined` | An abortsignal that can be used to cancel the export. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FillPixelStreamOrientation" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fillpixelstreamorientation/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type FillPixelStreamOrientation = typeof FillPixelStreamOrientationValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FillType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FillTypeLonghand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypelonghand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FillTypeShorthand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/filltypeshorthand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type FillTypeShorthand = typeof FILL_TYPES[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FloatPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/floatpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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/guides/gridSpacingX" | "page/guides/gridSpacingY" | "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/grow/scaleFactor" | "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/scale_loop/startScale" | "animation/scale_loop/endScale" | "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/cornerRadius" | "shape/vector_path/height" | "shape/vector_path/width" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FontSizeUnit" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontsizeunit/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type FontSizeUnit = | DesignUnit | "Point"; ``` Extended design unit type that includes Point for font size operations. Maintains consistency with SceneDesignUnit's capitalized naming convention. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FontStyle" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontstyle/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type FontStyle = "normal" | "italic"; ``` Allowed font styles. Mirrors the WASM `FontStyle` union. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: FontWeight" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/fontweight/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type FontWeight = | "thin" | "extraLight" | "light" | "normal" | "medium" | "semiBold" | "bold" | "extraBold" | "heavy"; ``` Allowed font weights. Mirrors the `@cesdk/engine` (WASM) `FontWeight` union so a single `Font` is interchangeable across bindings. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: GradientstopRGBA" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/gradientstoprgba/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: HeightMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/heightmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type HeightMode = typeof HeightModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: HexColorString" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/hexcolorstring/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type HexColorString = string; ``` Represents a hexadecimal color value (RGB or RGBA) that starts with a '#'. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: HistoryId" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/historyid/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type HistoryId = number; ``` A numerical identifier for a history stack --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: HistoryUpdate" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/historyupdate/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type HistoryUpdate = "Updated" | "Activated"; ``` Describes the kind of update that triggered an `onHistoryUpdatedWithKind` callback. - `Updated`: The active history's snapshots changed: a new snapshot was added (e.g. after an edit), or undo/redo was applied. The scene state changed as a direct consequence. - `Activated`: A different history buffer was activated via `setActiveHistory`. The undo/redo stack visible to the user changed, but no new snapshot was created and no undo/redo was applied as part of this event. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: HorizontalBlockAlignment" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/horizontalblockalignment/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type HorizontalBlockAlignment = HorizontalTextAlignment; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: HorizontalContentFillAlignment" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/horizontalcontentfillalignment/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type HorizontalContentFillAlignment = typeof HorizontalContentFillAlignmentValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: HorizontalTextAlignment" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/horizontaltextalignment/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type HorizontalTextAlignment = typeof TextHorizontalAlignmentValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ImageMimeType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/imagemimetype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ImageMimeType = Extract; ``` Represents the image MIME types used in the editor. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: IntPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/intpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: _LegacySource" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/legacysource/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type _LegacySource = (handler) => () => void; ``` A simplified source type for legacy API streams ## Type Parameters | Type Parameter | | ------ | | `T` | ## Parameters | Parameter | Type | | ------ | ------ | | `handler` | (`value`) => `void` | ## Returns () => `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: _Listener" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/listener/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type _Listener = (value) => void; ``` A listener function that receives value updates ## Type Parameters | Type Parameter | | ------ | | `T` | ## Parameters | Parameter | Type | | ------ | ------ | | `value` | `T` | ## Returns `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ListStyle" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/liststyle/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ListStyle = "None" | "Unordered" | "Ordered"; ``` Represents the list style of a paragraph. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Locale" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/locale/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type Locale = string; ``` e.g. `en`, `de`, etc. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: LogLevel" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/loglevel/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: MimeType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/mimetype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type MimeType = typeof MimeType[keyof typeof MimeType]; ``` Represents the MIME types used in the editor. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ObjectType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ObjectTypeLonghand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypelonghand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ObjectTypeShorthand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/objecttypeshorthand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OffscreenCanvas" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/offscreencanvas/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type OffscreenCanvas = object; ``` A simplified placeholder type for `OffscreenCanvas`, to avoid a dependency on `@types/offscreencanvas` ## Properties | Property | Type | | ------ | ------ | | `width` | `number` | | `height` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: OptionalPrefix" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/optionalprefix/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type OptionalPrefix = `ubq://${T}` | T; ``` ## Type Parameters | Type Parameter | | ------ | | `T` *extends* `string` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PageGuidesSource" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/pageguidessource/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PageGuidesSource = typeof PageGuidesSourceValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PaletteColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/palettecolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PaletteColor = | HexColorString | RGBColor | RGBAColor | SpotColor; ``` Represents a color definition for the custom color palette. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PositionMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PositionMode = | PositionXMode | PositionYMode; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PositionXMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionxmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PositionXMode = typeof PositionXModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PositionYMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/positionymode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type PositionYMode = typeof PositionYModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: PropertyType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/propertytype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: RGBA" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rgba/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: RoleString" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/rolestring/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SceneFontSizeUnit" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scenefontsizeunit/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SceneFontSizeUnit = typeof SceneFontSizeUnitValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SceneLayout" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scenelayout/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SceneLayout = typeof SceneLayoutValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SceneMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scenemode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SceneMode = typeof SceneModeValues[number]; ``` ## Deprecated Since v1.72. Scene mode no longer affects engine behavior. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: Scope" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/scope/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingBoolPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingboolpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingBoolPropertyName = | "alwaysHighlightPlaceholders" | "doubleClickToCropEnabled" | "showBuildVersion" | "placeholderControls/showButton" | "placeholderControls/showOverlay" | "blockAnimations/enabled" | "playback/showAllBlocks" | "renderTextCursorAndSelectionInEngine" | "touch/dragStartCanSelect" | "touch/singlePointPanning" | "mouse/enableZoom" | "mouse/enableScroll" | "controlGizmo/showCropHandles" | "controlGizmo/showMoveHandles" | "controlGizmo/dynamicMoveHandleVisibility" | "controlGizmo/showResizeHandles" | "controlGizmo/showScaleHandles" | "controlGizmo/showRotateHandles" | "controlGizmo/showCropScaleHandles" | "page/title/canEdit" | "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/marqueeSelectOnBodyDrag" | "page/restrictPageSelectionToBorderAndTitle" | "page/moveChildrenWhenCroppingFill" | "page/selectWhenNoBlocksSelected" | "page/highlightWhenCropping" | "page/highlightDropTarget" | "page/reparentBlocksToSceneWhenOutOfPage" | "colorMaskingSettings/secondPass" | "clampThumbnailTextureSizes" | "useSystemFontFallback" | "forceSystemEmojis" | "features/textEditModeTransformHandlesEnabled" | "features/videoStreamingEnabled" | "grid/enabled" | "grid/snapEnabled" | "features/enableAutomaticEnumerations" | "features/transparentClickThroughEnabled" | "features/fontLineGapEnabled" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingColorPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingcolorpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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" | "grid/color" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingEnumPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingEnumPropertyName = | "touch/pinchAction" | "touch/rotateAction" | "camera/clamping/overshootMode" | "doubleClickSelectionMode" | "colorPicker/colorMode" | "timeline/trackVisibility" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingEnumType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumtype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingEnumType = object; ``` ## 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/) | | `colorPicker/colorMode` | [`ColorPickerColorMode`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/colorpickercolormode/) | | `timeline/trackVisibility` | [`TimelineTrackVisibility`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/timelinetrackvisibility/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingEnumValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingenumvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingEnumValues = | TouchPinchAction | TouchRotateAction | CameraClampingOvershootMode | DoubleClickSelectionMode | ColorPickerColorMode | TimelineTrackVisibility | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingFloatPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingfloatpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingFloatPropertyName = | "positionSnappingThreshold" | "rotationSnappingThreshold" | "controlGizmo/blockScaleDownLimit" | "listIndentPerLevel" | "grid/spacingX" | "grid/spacingY" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingIntPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingintpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingIntPropertyName = "maxImageSize" | "maxPreviewResolution" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingKey" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingkey/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingKey = keyof Settings; ``` Union type of all valid setting keys. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingsBool" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsbool/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingsBool = SettingBoolPropertyName; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingsColor" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingscolor/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingsColor = SettingColorPropertyName; ``` Represents the color settings available in the editor. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingsColorRGBA" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingscolorrgba/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingsColorRGBA = SettingsColor; ``` Represents the color settings available in the editor. ## Deprecated Use SettingsColor instead. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingsEnum" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsenum/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingsEnum = SettingEnumType; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingsFloat" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsfloat/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingsFloat = SettingFloatPropertyName; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingsInt" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsint/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingsInt = SettingIntPropertyName; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingsString" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingsstring/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingsString = SettingStringPropertyName; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingStringPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingstringpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingStringPropertyName = | "basePath" | "defaultEmojiFontFileUri" | "defaultFontFileUri" | "upload/supportedMimeTypes" | "license" | "web/fetchCredentials" | "page/title/separator" | "page/title/fontFileUri" | "fallbackFontUri" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingtype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingType = "Bool" | "Int" | "Float" | "String" | "Color" | "Enum"; ``` Represents the type of a setting. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SettingValueType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingvaluetype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SettingValueType = Settings[K]; ``` Gets the value type for a specific setting key. ## Type Parameters | Type Parameter | | ------ | | `K` *extends* [`SettingKey`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/settingkey/) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ShapeType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ShapeTypeLonghand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypelonghand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ShapeTypeShorthand" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapetypeshorthand/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ShapeTypeShorthand = typeof SHAPE_TYPES[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ShapeVectorPathFillRule" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/shapevectorpathfillrule/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ShapeVectorPathFillRule = typeof ShapeVectorPathFillRuleValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SizeMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sizemode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SizeMode = | WidthMode | HeightMode; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SortingOrder" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sortingorder/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SourceSetPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/sourcesetpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SourceSetPropertyName = "fill/image/sourceSet" | string & object; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SplitOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/splitoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SplitOptions = object; ``` Options for configuring block split operations. ## 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: StringPropertyName" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/stringpropertyname/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: StrokeCap" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokecap/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type StrokeCap = typeof StrokeCapValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: StrokeCornerGeometry" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokecornergeometry/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type StrokeCornerGeometry = typeof StrokeCornerGeometryValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: StrokePosition" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokeposition/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type StrokePosition = typeof StrokePositionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: StrokeStyle" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/strokestyle/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type StrokeStyle = typeof StrokeStyleValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: _Subscription" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/subscription/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type _Subscription = number; ``` Represents a subscription to an event. The `Subscription` type is a number that uniquely identifies a subscription to an event. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: SyncURIResolver" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/syncuriresolver/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type SyncURIResolver = (URI, defaultURIResolver) => string; ``` A synchronous URI resolver function. ## Parameters | Parameter | Type | | ------ | ------ | | `URI` | `string` | | `defaultURIResolver` | (`URI`) => `string` | ## Returns `string` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TextAnimationWritingStyle" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textanimationwritingstyle/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TextAnimationWritingStyle = typeof TextAnimationWritingStyleValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TextCase" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textcase/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TextCase = "Normal" | "Uppercase" | "Lowercase" | "Titlecase"; ``` Represents the text case of a text block. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TextDecorationLine" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textdecorationline/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TextDecorationLine = "None" | "Underline" | "Strikethrough" | "Overline"; ``` Represents a line type for text decoration. Text decoration lines are combinable — a range of text can have multiple decoration lines. - 'None': No decoration. - 'Underline': The text is underlined. - 'Strikethrough': The text has a line through it. - 'Overline': The text has a line above it. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TextDecorationStyle" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textdecorationstyle/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TextDecorationStyle = "Solid" | "Double" | "Dotted" | "Dashed" | "Wavy"; ``` Represents the style of a text decoration line. - 'Solid': A solid line (default). - 'Double': Two parallel lines. - 'Dotted': A series of dots. - 'Dashed': A series of dashes. - 'Wavy': A wavy line. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TextVerticalAlignment" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/textverticalalignment/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TextVerticalAlignment = typeof TextVerticalAlignmentValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TimelineTrackVisibility" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/timelinetrackvisibility/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TimelineTrackVisibility = typeof TimelineTrackVisibilityValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TouchPinchAction" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/touchpinchaction/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TouchPinchAction = typeof TouchPinchActionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TouchRotateAction" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/touchrotateaction/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TouchRotateAction = typeof TouchRotateActionValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: TypefaceDefinition" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/typefacedefinition/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type TypefaceDefinition = object; ``` Represents a typeface definition used in the editor. ## 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 | 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`\[] | - | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: _Unsubscribe" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/unsubscribe/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type _Unsubscribe = () => void; ``` An unsubscribe function that removes a listener ## Returns `void` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: VerticalBlockAlignment" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/verticalblockalignment/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type VerticalBlockAlignment = TextVerticalAlignment; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: VerticalContentFillAlignment" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/verticalcontentfillalignment/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type VerticalContentFillAlignment = typeof VerticalContentFillAlignmentValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: VideoExportOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/videoexportoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: VideoMimeType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/videomimetype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type VideoMimeType = Extract; ``` Represents the video MIME types used in the editor. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: WidthMode" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/widthmode/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type WidthMode = typeof WidthModeValues[number]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: XYWH" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/xywh/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ZoomAutoFitAxis" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/zoomautofitaxis/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ZoomAutoFitAxis = "Horizontal" | "Vertical" | "Both"; ``` The axis(es) for which to auto-fit. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Type Alias: ZoomOptions" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/type-aliases/zoomoptions/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts type ZoomOptions = object; ``` Options for zooming to a block with optional animation. ## Properties | Property | Type | Description | | ------ | ------ | ------ | | `padding?` | | `number` | \{ `x?`: `number`; `y?`: `number`; } | \{ `top?`: `number`; `bottom?`: `number`; `left?`: `number`; `right?`: `number`; } | Padding configuration around the block | | `animate?` | | `boolean` | \{ `duration?`: `number`; `easing?`: [`AnimationEasing`](https://img.ly/docs/cesdk/angular/api/engine/type-aliases/animationeasing/); `interruptible?`: `boolean`; } | Animation configuration - boolean for default animation or object for custom settings | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: ANIMATION_TYPES" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animation_types/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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", "scale_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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationBaselineDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationbaselinedirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationBaselineDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationBlockSwipeTextDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationblockswipetextdirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationBlockSwipeTextDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationEasingValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationeasingvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationEasingValues: readonly ["Linear", "EaseIn", "EaseOut", "EaseInOut", "EaseInQuart", "EaseOutQuart", "EaseInOutQuart", "EaseInQuint", "EaseOutQuint", "EaseInOutQuint", "EaseInBack", "EaseOutBack", "EaseInOutBack", "EaseInSpring", "EaseOutSpring", "EaseInOutSpring"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationGrowDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationgrowdirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationGrowDirectionValues: readonly ["Horizontal", "Vertical", "TopLeft", "TopRight", "BottomLeft", "BottomRight", "All"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationJumpLoopDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationjumploopdirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationJumpLoopDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationKenBurnsDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationkenburnsdirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationKenBurnsDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationMergeTextDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationmergetextdirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationMergeTextDirectionValues: readonly ["Right", "Left"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationScaleLoopDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationscaleloopdirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationScaleLoopDirectionValues: readonly ["Horizontal", "Vertical", "TopLeft", "TopRight", "BottomLeft", "BottomRight", "All"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationSpinDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationspindirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationSpinDirectionValues: readonly ["Clockwise", "CounterClockwise"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationSpinLoopDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationspinloopdirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationSpinLoopDirectionValues: readonly ["Clockwise", "CounterClockwise"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationTypewriterTextWritingStyleValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationtypewritertextwritingstylevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationTypewriterTextWritingStyleValues: readonly ["Character", "Word"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: AnimationWipeDirectionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/animationwipedirectionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const AnimationWipeDirectionValues: readonly ["Up", "Right", "Down", "Left"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: BlendModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/blendmodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: BLUR_TYPES" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/blur_types/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: CameraClampingOvershootModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/cameraclampingovershootmodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const CameraClampingOvershootModeValues: readonly ["Center", "Reverse"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: CaptionHorizontalAlignmentValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/captionhorizontalalignmentvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const CaptionHorizontalAlignmentValues: readonly ["Left", "Right", "Center", "Auto"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: CaptionVerticalAlignmentValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/captionverticalalignmentvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const CaptionVerticalAlignmentValues: readonly ["Top", "Bottom", "Center"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: ColorPickerColorModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/colorpickercolormodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const ColorPickerColorModeValues: readonly ["RGB", "CMYK", "Any"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: ContentFillModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/contentfillmodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const ContentFillModeValues: readonly ["Crop", "Cover", "Contain"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: CutoutTypeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/cutouttypevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const CutoutTypeValues: readonly ["Solid", "Dashed"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: DESIGN_BLOCK_TYPES" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/design_block_types/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: DoubleClickSelectionModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/doubleclickselectionmodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const DoubleClickSelectionModeValues: readonly ["Direct", "Hierarchical"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: EFFECT_TYPES" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/effect_types/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: FILL_TYPES" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/fill_types/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: FillPixelStreamOrientationValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/fillpixelstreamorientationvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const FillPixelStreamOrientationValues: readonly ["Up", "Down", "Left", "Right", "UpMirrored", "DownMirrored", "LeftMirrored", "RightMirrored"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: HeightModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/heightmodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const HeightModeValues: readonly ["Absolute", "Percent", "Auto"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: HorizontalContentFillAlignmentValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/horizontalcontentfillalignmentvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const HorizontalContentFillAlignmentValues: readonly ["Left", "Center", "Right"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: LogLevel" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/loglevel/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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 | Name | Type | | ------ | ------ | | `Info` | `"Info"` | | `Warning` | `"Warning"` | | `Error` | `"Error"` | ## Deprecated Specifying log levels via `LogLevel.Info` has been deprecated. Please use the desired LogLevel string directly. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: MimeType" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/mimetype/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const MimeType: object; ``` Represents the MIME types used in the editor. ## Type Declaration | Name | Type | | ------ | ------ | | `Png` | `"image/png"` | | `Jpeg` | `"image/jpeg"` | | `WebP` | `"image/webp"` | | `Tga` | `"image/x-tga"` | | `Svg` | `"image/svg+xml"` | | `Wav` | `"audio/wav"` | | `Mp4Audio` | `"audio/mp4"` | | `Mp4` | `"video/mp4"` | | `QuickTime` | `"video/quicktime"` | | `Binary` | `"application/octet-stream"` | | `Pdf` | `"application/pdf"` | | `Zip` | `"application/zip"` | ## Deprecated Use the `MimeType` string literal types instead. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: PageGuidesSourceValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/pageguidessourcevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const PageGuidesSourceValues: readonly ["Document", "Custom"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: PositionXModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/positionxmodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const PositionXModeValues: readonly ["Absolute", "Percent", "Auto"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: PositionYModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/positionymodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const PositionYModeValues: readonly ["Absolute", "Percent", "Auto"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: SceneDesignUnitValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/scenedesignunitvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const SceneDesignUnitValues: readonly ["Pixel", "Millimeter", "Inch"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: SceneFontSizeUnitValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/scenefontsizeunitvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const SceneFontSizeUnitValues: readonly ["Pixel", "Point"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: SceneLayoutValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/scenelayoutvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const SceneLayoutValues: readonly ["Free", "VerticalStack", "HorizontalStack", "DepthStack"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: SceneModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/scenemodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const SceneModeValues: readonly ["Design", "Video"]; ``` ## Deprecated Since v1.72. Scene mode no longer affects engine behavior. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: SHAPE_TYPES" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/shape_types/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts 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)`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: ShapeVectorPathFillRuleValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/shapevectorpathfillrulevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const ShapeVectorPathFillRuleValues: readonly ["EvenOdd", "NonZero"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: StrokeCapValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/strokecapvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const StrokeCapValues: readonly ["Butt", "Round", "Square"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: StrokeCornerGeometryValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/strokecornergeometryvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const StrokeCornerGeometryValues: readonly ["Bevel", "Miter", "Round"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: StrokePositionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/strokepositionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const StrokePositionValues: readonly ["Center", "Inner", "Outer"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: StrokeStyleValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/strokestylevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const StrokeStyleValues: readonly ["Dashed", "DashedRound", "Dotted", "LongDashed", "LongDashedRound", "Solid"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: TextAnimationWritingStyleValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/textanimationwritingstylevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const TextAnimationWritingStyleValues: readonly ["Block", "Line", "Character", "Word"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: TextHorizontalAlignmentValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/texthorizontalalignmentvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const TextHorizontalAlignmentValues: readonly ["Left", "Right", "Center", "Auto"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: TextVerticalAlignmentValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/textverticalalignmentvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const TextVerticalAlignmentValues: readonly ["Top", "Bottom", "Center"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: TimelineTrackVisibilityValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/timelinetrackvisibilityvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const TimelineTrackVisibilityValues: readonly ["all", "active"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: TouchPinchActionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/touchpinchactionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const TouchPinchActionValues: readonly ["None", "Zoom", "Scale", "Auto", "Dynamic"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: TouchRotateActionValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/touchrotateactionvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const TouchRotateActionValues: readonly ["None", "Rotate"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: VerticalContentFillAlignmentValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/verticalcontentfillalignmentvalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const VerticalContentFillAlignmentValues: readonly ["Top", "Center", "Bottom"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Variable: WidthModeValues" description: "" platform: angular package: engine url: "https://img.ly/docs/cesdk/angular/api/engine/variables/widthmodevalues/" --- > This is one page of the CE.SDK Angular `@cesdk/engine` API reference. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md) or the [engine API Index](https://img.ly/docs/cesdk/angular/api/engine/). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- ```ts const WidthModeValues: readonly ["Absolute", "Percent", "Auto"]; ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[engine API Reference](https://img.ly/docs/cesdk/angular/api/engine/)** - Full engine API reference - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Automate Workflows" description: "Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale." platform: angular url: "https://img.ly/docs/cesdk/angular/automation-715209/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/angular/automation-715209/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/angular/automation/overview-34d971/) - Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale. - [Batch Processing](https://img.ly/docs/cesdk/angular/automation/batch-processing-ab2d18/) - Manage batch processing workflows in web apps with CE.SDK - [Auto-Resize](https://img.ly/docs/cesdk/angular/automation/auto-resize-4c2d58/) - Configure blocks to dynamically adjust dimensions using Absolute, Percent, and Auto sizing modes for responsive layouts and content-driven expansion. - [Data Merge](https://img.ly/docs/cesdk/angular/automation/data-merge-ae087c/) - Generate personalized designs from templates by merging external data using text variables and placeholder blocks - [Automate Design Generation](https://img.ly/docs/cesdk/angular/automation/design-generation-98a99e/) - Generate on-brand designs programmatically using templates, variables, and CE.SDK’s headless API. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Auto-Resize" description: "Configure blocks to dynamically adjust dimensions using Absolute, Percent, and Auto sizing modes for responsive layouts and content-driven expansion." platform: angular url: "https://img.ly/docs/cesdk/angular/automation/auto-resize-4c2d58/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/angular/automation-715209/) > [Auto-Resize](https://img.ly/docs/cesdk/angular/automation/auto-resize-4c2d58/) --- Configure blocks to dynamically adjust their dimensions using three sizing modes: Absolute for fixed values, Percent for parent-relative sizing, and Auto for content-driven expansion. ![Auto-Resize example showing text blocks with automatic sizing](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-automation-auto-resize-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-automation-auto-resize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-automation-auto-resize-browser/) CE.SDK provides three sizing modes for controlling block dimensions. Absolute mode uses fixed pixel values. Percent mode sizes blocks relative to their parent container. Auto mode automatically expands blocks to fit their content. You can set width and height modes independently, allowing flexible combinations like fixed width with auto height for text that wraps. ```typescript file=@cesdk_web_examples/guides-automation-auto-resize-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Auto-Resize Guide * * Demonstrates block sizing modes and responsive layout patterns: * - Setting width and height modes (Absolute, Percent, Auto) * - Reading computed frame dimensions after layout * - Centering text blocks based on computed dimensions * - Creating responsive layouts with percentage-based sizing */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a text block with Auto sizing mode // Auto mode makes the block expand to fit its content const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Auto-Resize Demo'); engine.block.setFloat(titleBlock, 'text/fontSize', 64); // Set width and height modes to Auto // The block will automatically size to fit the text content engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); // Read computed frame dimensions after layout // getFrameWidth/getFrameHeight return the actual rendered size const titleWidth = engine.block.getFrameWidth(titleBlock); const titleHeight = engine.block.getFrameHeight(titleBlock); console.log( `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed( 0 )} pixels` ); // Calculate centered position using frame dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const centerX = (pageWidth - titleWidth) / 2; const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout // Position the title at center engine.block.setPositionX(titleBlock, centerX); engine.block.setPositionY(titleBlock, centerY); // Create a block using Percent mode for responsive sizing // Percent mode sizes the block relative to its parent const backgroundBlock = engine.block.create('graphic'); engine.block.setShape(backgroundBlock, engine.block.createShape('rect')); const fill = engine.block.createFill('color'); engine.block.setColor(fill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 0.3 }); engine.block.setFill(backgroundBlock, fill); // Set to Percent mode - values are normalized (0-1) engine.block.setWidthMode(backgroundBlock, 'Percent'); engine.block.setHeightMode(backgroundBlock, 'Percent'); engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height // Center the background block engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin engine.block.setPositionY(backgroundBlock, pageHeight * 0.6); engine.block.appendChild(page, backgroundBlock); // Create a subtitle with Auto mode const subtitleBlock = engine.block.create('text'); engine.block.replaceText( subtitleBlock, 'Text automatically sizes to fit content' ); engine.block.setFloat(subtitleBlock, 'text/fontSize', 32); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); // Read computed dimensions and center const subtitleWidth = engine.block.getFrameWidth(subtitleBlock); const subtitleCenterX = (pageWidth - subtitleWidth) / 2; engine.block.setPositionX(subtitleBlock, subtitleCenterX); engine.block.setPositionY(subtitleBlock, pageHeight * 0.7); // Verify sizing modes const titleWidthMode = engine.block.getWidthMode(titleBlock); const titleHeightMode = engine.block.getHeightMode(titleBlock); const bgWidthMode = engine.block.getWidthMode(backgroundBlock); const bgHeightMode = engine.block.getHeightMode(backgroundBlock); console.log( `Title modes: width=${titleWidthMode}, height=${titleHeightMode}` ); console.log( `Background modes: width=${bgWidthMode}, height=${bgHeightMode}` ); // Select the title block to show the auto-sized result engine.block.select(titleBlock); console.log( 'Auto-resize guide initialized. Try changing text content to see auto-sizing in action.' ); } } export default Example; ``` This guide covers how to set and query sizing modes, read computed frame dimensions after layout, center blocks using frame dimensions, and create responsive layouts with percentage-based sizing. ## Initialize the Editor We start by initializing CE.SDK with a Design scene and setting up the page dimensions for our layout. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; ``` ## Size Modes CE.SDK supports three sizing modes for block dimensions: - **Absolute**: Fixed dimensions in design units. The default mode where `setWidth()` and `setHeight()` set exact pixel values. - **Percent**: Dimensions relative to parent container. A value of 80 makes the block 80% of its parent's size. - **Auto**: Content-driven sizing. The block expands or contracts to fit its content, primarily useful for text blocks. ## Setting Size Modes Use `setWidthMode()` and `setHeightMode()` to configure how a block calculates its dimensions. Width and height modes can be set independently. ### Auto Mode for Text Auto mode makes text blocks expand to fit their content: ```typescript highlight=highlight-auto-mode // Create a text block with Auto sizing mode // Auto mode makes the block expand to fit its content const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Auto-Resize Demo'); engine.block.setFloat(titleBlock, 'text/fontSize', 64); // Set width and height modes to Auto // The block will automatically size to fit the text content engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); ``` With Auto mode, the block's dimensions are calculated automatically based on the content. This is useful when the text content varies and you want the block to always fit exactly. ### Percent Mode for Responsive Layouts Percent mode sizes blocks relative to their parent: ```typescript highlight=highlight-percent-mode // Create a block using Percent mode for responsive sizing // Percent mode sizes the block relative to its parent const backgroundBlock = engine.block.create('graphic'); engine.block.setShape(backgroundBlock, engine.block.createShape('rect')); const fill = engine.block.createFill('color'); engine.block.setColor(fill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 0.3 }); engine.block.setFill(backgroundBlock, fill); // Set to Percent mode - values are normalized (0-1) engine.block.setWidthMode(backgroundBlock, 'Percent'); engine.block.setHeightMode(backgroundBlock, 'Percent'); engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height // Center the background block engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin engine.block.setPositionY(backgroundBlock, pageHeight * 0.6); engine.block.appendChild(page, backgroundBlock); ``` Percent values represent the percentage of the parent container. A width of 80 with Percent mode means 80% of the parent's width. ## Reading Frame Dimensions After layout, use `getFrameWidth()` and `getFrameHeight()` to read the computed dimensions: ```typescript highlight=highlight-read-frame-dimensions // Read computed frame dimensions after layout // getFrameWidth/getFrameHeight return the actual rendered size const titleWidth = engine.block.getFrameWidth(titleBlock); const titleHeight = engine.block.getFrameHeight(titleBlock); console.log( `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed( 0 )} pixels` ); ``` Frame dimensions return the actual rendered size regardless of the sizing mode. This is essential when using Auto mode since you need the computed size for positioning calculations. ## Centering Blocks Combine Auto mode with frame dimensions to center blocks based on their actual size: ```typescript highlight=highlight-center-block // Calculate centered position using frame dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const centerX = (pageWidth - titleWidth) / 2; const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout // Position the title at center engine.block.setPositionX(titleBlock, centerX); engine.block.setPositionY(titleBlock, centerY); ``` This pattern reads the computed dimensions after Auto sizing and calculates the centered position. ## Additional Auto-Sized Content You can create multiple auto-sized blocks and position them relative to each other: ```typescript highlight=highlight-subtitle-auto // Create a subtitle with Auto mode const subtitleBlock = engine.block.create('text'); engine.block.replaceText( subtitleBlock, 'Text automatically sizes to fit content' ); engine.block.setFloat(subtitleBlock, 'text/fontSize', 32); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); // Read computed dimensions and center const subtitleWidth = engine.block.getFrameWidth(subtitleBlock); const subtitleCenterX = (pageWidth - subtitleWidth) / 2; engine.block.setPositionX(subtitleBlock, subtitleCenterX); engine.block.setPositionY(subtitleBlock, pageHeight * 0.7); ``` ## Verifying Size Modes Query the current size modes to verify your configuration: ```typescript highlight=highlight-check-modes // Verify sizing modes const titleWidthMode = engine.block.getWidthMode(titleBlock); const titleHeightMode = engine.block.getHeightMode(titleBlock); const bgWidthMode = engine.block.getWidthMode(backgroundBlock); const bgHeightMode = engine.block.getHeightMode(backgroundBlock); console.log( `Title modes: width=${titleWidthMode}, height=${titleHeightMode}` ); console.log( `Background modes: width=${bgWidthMode}, height=${bgHeightMode}` ); ``` ## Troubleshooting **Frame dimensions return 0**: Layout may not have updated yet. Read frame dimensions after all content is set and the block is attached to the scene hierarchy. **Percent mode not working**: The block must have a parent container. Percent mode calculates size relative to the parent's dimensions. **Auto mode not resizing**: Auto mode works with content that has intrinsic size, primarily text blocks. Graphics require explicit dimensions. **Unexpected dimensions**: Check which mode is active using `getWidthMode()` and `getHeightMode()`. The mode affects how width and height values are interpreted. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.getWidth(block)` | Get block width in current mode | | `engine.block.setWidth(block, value)` | Set block width in current mode | | `engine.block.getWidthMode(block)` | Get current width mode: Absolute, Percent, or Auto | | `engine.block.setWidthMode(block, mode)` | Set width mode: Absolute, Percent, or Auto | | `engine.block.getHeight(block)` | Get block height in current mode | | `engine.block.setHeight(block, value)` | Set block height in current mode | | `engine.block.getHeightMode(block)` | Get current height mode: Absolute, Percent, or Auto | | `engine.block.setHeightMode(block, mode)` | Set height mode: Absolute, Percent, or Auto | | `engine.block.getFrameWidth(block)` | Get computed width after layout | | `engine.block.getFrameHeight(block)` | Get computed height after layout | | `engine.block.setPositionX(block, value)` | Set block X position | | `engine.block.setPositionY(block, value)` | Set block Y position | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Batch Processing" description: "Manage batch processing workflows in web apps with CE.SDK" platform: angular url: "https://img.ly/docs/cesdk/angular/automation/batch-processing-ab2d18/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/angular/automation-715209/) > [Batch Processing](https://img.ly/docs/cesdk/angular/automation/batch-processing-ab2d18/) --- This guide shows you how to use CE.SDK to create and manage batch processing workflows in the browser. Batch processing automates creative operations at scale, from enabling template population and multi-format exports, to bulk transformations and production pipelines. In the browser, batch processing means automating the same CreativeEngine workflow while the tab stays open. Instead of the user editing/exporting items one by one, your front-end: 1. Loops through a dataset. 2. Produces a series of outputs. This guides helps you understand how the CE.SDK can work in a batch process workflow. ## What You’ll Learn - Two different batch processing approaches: - Sequential - Parallel - How to batch: - Templates population with data. - Exports to different formats (PNG, JPEG, PDF, MP4). - Thumbnails generation. - How to optimize memory usage. ## Batch Processing Strategies You can run batch operations in two ways: - **Sequential:** a single engine loop. - **Parallel:** multiple workers spinning up. The following examples show both approaches when running a batch export in the browser: ```ts // ... downloadBlob logic //Start the engine and download the scene const engine = await CreativeEngine.init({ license: LICENSE_KEY }); for (const record of records) { await engine.scene.loadFromString(record.scene); const blob = await engine.block.export(engine.scene.getPages()[0], 'image/png'); await downloadBlob(blob, `${record.id}.png`); } engine.dispose(); ``` 1. `CreativeEngine.init` spins up a single engine instance for the tab. 2. The loop iterates over the `record` dataset. 3. The Engine loads the scene. 4. The `export` call renders the first page as a PNG blob. 5. The code disposes of the engine to free resources. ```ts const workers = [new Worker('worker.js'), new Worker('worker.js')]; await Promise.all( records.map((record, idx) => workers[idx % workers.length].postMessage({ type: 'PROCESS', record }) ) ); ``` In this code: 1. 2 workers run in separate threads. 2. Each worker receives a different data set. 3. Each worker runs the heavier CreativeEngine work off the main thread. 4. `Promise.all` waits for every worker call to finish before moving on. The following table summarizes the pros and cons of each approach: | Approach | When to use | Pros | Cons | | --- | --- | --- | --- | | **Sequential** | - Default browser workload
- Small batch sizes
- Limited RAM on user devices | - Lower memory footprint
- Simpler code path
- Easy cleanup |- Slower total runtime
- UI can feel locked if not chunked
| | **Parallel** | - Big datasets
Enough resources in user devices
| - Higher throughput
- Can keep UI responsive
| - More memory consumption per tab
Coordination complexity
- Throttling risk | ## How To Batch Template Population For this operation, you generate personalized outputs at scale by combining: - Templates - Structured data ### Set the Data Sources Batch workflows can use a variety of data sources to populate a template, such as: - CSV files with parsing libraries - JSON from REST APIs - Databases (SQL, NoSQL) - Stream data The following examples show how to set three different data sources: ```ts await fetch('path/to/dataset.json').then((r) => r.json()); ``` ```ts await fetch('https://api.example.com/dataset').then((r) => r.json()); ``` ```ts // Define key variables let textVariables = { first_name: '', last_name: '', address: '', city: '', }; ``` ### Update the Template You can automate template population, update media, and show conditional content based on data. Find some examples in existing guides: | Action | EngineAPI function | Related guide | | --- | --- | --- | | Set text variables | `engine.variable.setString(variableId, value)` | [Text Variables](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/) | | Update image fills | `engine.block.setString(block, 'fill/image/imageFileURI', url)` | [Insert Images](https://img.ly/docs/cesdk/angular/insert-media/images-63848a/) | | Edit block properties | `engine.block.setFloat(block, key, value)` / `engine.block.setColor(block, key, color)` | [Apply Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) | ### Batch Export the Design The CE.SDK provides a set of format options when exporting the edited designs: | Format | EngineAPI function | Related guide | | --- | --- | --- | | PNG | `engine.block.export(block, 'image/png')` | [PNG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-png-f87eaf/) | | JPEG | `engine.block.export(block, 'image/jpeg', 0.95)` | [JPEG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-jpeg-6f88e9/) | | PDF | `engine.block.export(block, 'application/pdf')` | [PDF](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) | | MP4 | `engine.block.exportVideo(block, MimeType.Mp4)` | [MP4](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-mp4-c998a8/) | Check all the export options in the [Export section](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/). ### Batch Thumbnail Generation from Static Scenes The export feature allows you to automate thumbnails generation by tweaking the format and the size of the design, for example: ```ts // Example: Real-time thumbnail generation const thumbnailEngine = await CreativeEngine.init({ container: null }); async function generateThumbnail(sceneData) { await thumbnailEngine.scene.loadFromString(sceneData); const page = thumbnailEngine.scene.getPages()[0]; // Generate small preview const thumbnail = await thumbnailEngine.block.export(page, 'image/jpeg', { targetWidth: 200, targetHeight: 200, quality: 0.7, }); return thumbnail; } ``` Read more about thumbnails generation in [the Engine guide](https://img.ly/docs/cesdk/angular/engine-interface-6fb7cf/). The CE.SDK also provides over 20 pre-designed text layouts to apply on thumbnails. Check the [relevant guide](https://img.ly/docs/cesdk/angular/text/text-designs-a1b2c3/) to use them. ### Batch Thumbnail Generation from Video Scenes Extract representative frames from videos efficiently, and automate this action using the dedicated CE.SDK features: | Action | EngineAPI function | Related guide | | --- | --- | --- | | Load video source | `engine.scene.createFromVideo()` | [Create from Video](https://img.ly/docs/cesdk/angular/create-video/control-daba54/) | | Seek to timestamp | `engine.block.setPlaybackTime()` | [Control Audio and Video](https://img.ly/docs/cesdk/angular/create-video/control-daba54/) | | Export single frame | `engine.block.export(block, options)` | [To PNG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-png-f87eaf/)
[Text Designs](https://img.ly/docs/cesdk/angular/text/text-designs-a1b2c3/) | | Generate sequence thumbnails | `engine.block.generateVideoThumbnailSequence()` | [Trim Video Clips](https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/) | | Size thumbnails consistently | `targetWidth / targetHeight` export options | [To PNG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-png-f87eaf/) | The following code shows how to **generate thumbnails from a video**: ```ts import CreativeEngine from '@cesdk/engine'; const engine = await CreativeEngine.init({ license: LICENSE_KEY }); await engine.scene.loadFromURL('/assets/video-scene.scene'); const [page] = engine.scene.getPages(); const videoBlock = engine.block .getChildren(page) .find((child) => engine.block.getType(child) === 'video'); if (videoBlock) { const videoFill = engine.block.getFill(videoBlock); await engine.block.setPlaybackTime(videoFill, 4.2); const thumbnail = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 640, targetHeight: 360 }); await downloadBlob(thumbnail, 'scene-thumb.png'); } engine.dispose(); ``` The preceding code: 1. Loads a scene containing a video. 2. Seeks to 4.2 s. 3. Exports the page as a PNG. 4. Saves the thumbnail. ## Optimize Memory Usage Every export produces and accumulates: - Blobs - URLs - Engine state Proper **cleanup** ensures batch processes complete without resource exhaustion. Without proper cleanup, the browser might: - Hits memory ceiling. - Crash. - Slow down. Consider the following actions to **avoid exhausting the client**: | Strategy | Code | | --- | --- | | Revoke blob URLs immediately after use | `URL.revokeObjectURL()` | | Dispose engine instances when finished | `engine.dispose()` | | Chunk large datasets into smaller batches | | | Consider garbage collection timing | | Treat cleanup as part of **each loop** iteration, by either: - Freeing resources **after each item**. - Chunking resources, by loading smaller parts of your datasets at a time. > **Note:** To **handle large batches**, consider the following workflows:- Split into smaller chunks. > - Log progress. > - Monitor status. ## Apply Error Handling Batch runs often work with **large records of data**. Some factors can make the job crash, such as: - A malformed asset - Timeouts When your job encounters one of these errors, you can proactively **avoid the job’s failure** using the following patterns: - Catch errors inside each loop iteration. - Log failing records so you can retry them later. - Decide whether to keep going or stop when an error happens. - Collect a summary of all failures for post-run review. For example, the preceding code to generate thumbnails now handles errors gracefully to avoid crashes: ```ts import CreativeEngine from '@cesdk/engine'; let engine; try { engine = await CreativeEngine.init({ license: LICENSE_KEY }); await engine.scene.loadFromURL('/assets/video-scene.scene'); const [page] = engine.scene.getPages(); if (!page) throw new Error('Scene has no pages.'); const videoBlock = engine.block .getChildren(page) .find((child) => engine.block.getType(child) === 'video'); if (!videoBlock) throw new Error('No video block found.'); const videoFill = engine.block.getFill(videoBlock); if (!videoFill) throw new Error('Video block is missing its fill.'); await engine.block.setPlaybackTime(videoFill, 4.2); const thumbnail = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 640, targetHeight: 360 }); await downloadBlob(thumbnail, 'scene-thumb.png'); } catch (error) { console.error('Failed to generate thumbnail', error); } finally { engine?.dispose(); } ``` ### Use Retry Logic Some errors are temporary due to factors such as: - Network hiccup - Rate limits - Busy CDN To avoid saturating the related service, you can use smart retries after a short delay. If the error persist: 1. Double the delay. 2. Retry 3. Double again the delay exponentially after each retry. This strategy allows you to identify temporary failures that could be resolved later. For **API failures**, consider using circuit breaking patterns that: - Pause the calls on repeated errors. - Test again after a delay. ### Check the Input Data Before Processing Lightweight checks can help you with: - Catching bad inputs early. - Preventing waste of time and compute on batches that’ll fail. Add checks **before**: - Launching the CE.SDK. - Loading scenes. - Exporting large scenes. The following table contains some checks **examples**: | Check | Example | | --- | --- | | Check input data structure | `if (!isValidRecord(record)) throw new Error('Invalid payload');` | | Check file existence and accessibility | `await fs.promises.access(filePath, fs.constants.R_OK);` | | Verify templates load correctly | `await engine.scene.loadFromURL(templateUrl);` | | Use dry-run mode for testing | `if (options.dryRun) return simulate(record);` | For example, the following **data validation function** checks: - The record type - The `id` - The HTTPS template URL - The presence of variants It throws descriptive errors if any of these elements are missing. ```ts function validateRecord(record) { if (typeof record !== 'object' || record === null) { throw new Error('Record must be an object'); } if (typeof record.id !== 'string') { throw new Error('Missing record id'); } if (!record.templateUrl?.startsWith('https://')) { throw new Error('Invalid template URL'); } if (!Array.isArray(record.variants) || record.variants.length === 0) { throw new Error('Record requires at least one variant'); } return true; } ``` ## Batch Process on Production When running on production, enhance browser-based batch processes with architecture and UX decisions that help the user run the workflow, such as: - **User-initiated batches**: keep work tied to explicit user actions; show confirmation dialogs for large jobs. - **Chunked processing**: split datasets into small slices (for example, 20 records) to avoid blocking the main thread. - **Resource caps**: document safe limits (for example, 50–100 exports per session) and enforce them in the UI. - **Persistence**: use `localStorage` or IndexedDB to cache progress so reloads can resume work. ### Monitor the Process Give users visibility inside the tab and send lightweight telemetry upstream. - Render UI elements that show the state, such as: - Progress bars - Per-item status chips - Send `fetch` calls to your backend for: - Error logs - Aggregated stats - When a chunk fails: 1. Show in-app notifications/snackbars. 2. Offer retries. For example, the following code: - Structures logging. - Renders it with timestamps. ```ts function reportBatchMetrics(batchMetrics) { const entry = { timestamp: new Date().toISOString(), ...batchMetrics, }; console.table([entry]); return fetch('/api/logs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(entry), }); } ``` ## Troubleshooting | Issue | Cause | Solution | | -------------------------- | ------------------------------------------ | --------------------------------------------------- | | Out of memory errors | Blob URLs not revoked, engine not disposed | Call `URL.revokeObjectURL()` and `engine.dispose()` | | Slow processing speed | Template loaded each iteration | Load template once, modify variables only | | Items fail silently | Missing error handling | Wrap processing in try-catch blocks | | Inconsistent outputs | Shared state between iterations | Reset state or reload template each iteration | | Process hangs indefinitely | Uncaught promise rejection | Use error handling and timeouts | | Performance bottlenecks | Multiple | - Profile batch operations
- Identify slow operations
- Optimize export settings
- Reduce template complexity
| ### Debugging Strategies Effective troubleshooting techniques for batch processing in web apps include: - Retry with small batches. - Console log detailed error information. - Isolate problematic items. ## Next Steps - [Headless Mode](https://img.ly/docs/cesdk/angular/concepts/headless-mode/browser-24ab98/) - Learn headless engine operation basics - [Design Generation](https://img.ly/docs/cesdk/angular/automation/design-generation-98a99e/) - Automate single design generation workflows - [Export Designs](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Deep dive into export options and formats - [Text Variables](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/) - Work with dynamic text content in templates - [Source Sets](https://img.ly/docs/cesdk/angular/import-media/source-sets-5679c8/) - Specify assets sources for each block. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Data Merge" description: "Generate personalized designs from templates by merging external data using text variables and placeholder blocks" platform: angular url: "https://img.ly/docs/cesdk/angular/automation/data-merge-ae087c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/angular/automation-715209/) > [Data Merge](https://img.ly/docs/cesdk/angular/automation/data-merge-ae087c/) --- Generate personalized designs from a single template by merging external data into CE.SDK templates using text variables and placeholder blocks. ![Data Merge example showing personalized business card design](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-automation-data-merge-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-automation-data-merge-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-automation-data-merge-browser/) Data merge generates multiple personalized designs from a single template by replacing variable content with external data. Use it for certificates, badges, team cards, or any design requiring consistent layout with varying content. ```typescript file=@cesdk_web_examples/guides-automation-data-merge-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Data Merge Guide * * Demonstrates merging external data into templates: * - Setting text variables with engine.variable.setString() * - Finding variables with engine.variable.findAll() * - Finding blocks by name with engine.block.findByName() * - Updating image content in placeholder blocks * - Exporting personalized designs */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 400, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Sample data to merge into the template const sampleData = { name: 'Alex Smith', title: 'Creative Developer', email: 'alex.smith@example.com', photoUrl: 'https://img.ly/static/ubq_samples/sample_1.jpg' }; // Create a profile photo block with a semantic name const photoBlock = engine.block.create('graphic'); engine.block.setShape(photoBlock, engine.block.createShape('rect')); const photoFill = engine.block.createFill('image'); engine.block.setString( photoFill, 'fill/image/imageFileURI', sampleData.photoUrl ); engine.block.setFill(photoBlock, photoFill); engine.block.setWidth(photoBlock, 150); engine.block.setHeight(photoBlock, 150); engine.block.setPositionX(photoBlock, 50); engine.block.setPositionY(photoBlock, 125); engine.block.setName(photoBlock, 'profile-photo'); engine.block.appendChild(page, photoBlock); // Create a text block with variable placeholders const textBlock = engine.block.create('text'); const textContent = `{{name}} {{title}} {{email}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 32); engine.block.setPositionX(textBlock, 230); engine.block.setPositionY(textBlock, 140); engine.block.appendChild(page, textBlock); // Set the variable values from data engine.variable.setString('name', sampleData.name); engine.variable.setString('title', sampleData.title); engine.variable.setString('email', sampleData.email); // Discover all variables in the scene const variables = engine.variable.findAll(); console.log('Variables in scene:', variables); // Check if the text block references any variables const hasVariables = engine.block.referencesAnyVariables(textBlock); console.log('Text block has variables:', hasVariables); // Find blocks by their semantic name const [foundPhotoBlock] = engine.block.findByName('profile-photo'); if (foundPhotoBlock) { console.log('Found profile-photo block:', foundPhotoBlock); // Update the image content const fill = engine.block.getFill(foundPhotoBlock); engine.block.setString( fill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); } // Export the personalized design const blob = await engine.block.export(page, { mimeType: 'image/png' }); console.log('Exported PNG blob:', blob.size, 'bytes'); // Create a download link for the exported image const url = URL.createObjectURL(blob); console.log('Download URL created:', url); // Select the text block to show the variable values engine.block.select(textBlock); console.log( 'Data merge guide initialized. Try changing variable values in the console.' ); } } export default Example; ``` This guide covers how to prepare templates with variables, set values from data, and export personalized designs. ## Initialize the Editor We start by initializing CE.SDK with a Design scene and setting up the page dimensions for our template. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 400, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; ``` ## Prepare Sample Data In a real application, data comes from a CSV file, database, or API. Here we define a sample record with the fields we want to merge into the template. ```typescript highlight=highlight-sample-data // Sample data to merge into the template const sampleData = { name: 'Alex Smith', title: 'Creative Developer', email: 'alex.smith@example.com', photoUrl: 'https://img.ly/static/ubq_samples/sample_1.jpg' }; ``` Each data record contains field names that map to template variables and placeholder blocks. ## Create Template Layout We build the template by creating blocks and assigning semantic names. The profile photo block uses `setName()` so we can find and update it later. ```typescript highlight=highlight-create-template // Create a profile photo block with a semantic name const photoBlock = engine.block.create('graphic'); engine.block.setShape(photoBlock, engine.block.createShape('rect')); const photoFill = engine.block.createFill('image'); engine.block.setString( photoFill, 'fill/image/imageFileURI', sampleData.photoUrl ); engine.block.setFill(photoBlock, photoFill); engine.block.setWidth(photoBlock, 150); engine.block.setHeight(photoBlock, 150); engine.block.setPositionX(photoBlock, 50); engine.block.setPositionY(photoBlock, 125); engine.block.setName(photoBlock, 'profile-photo'); engine.block.appendChild(page, photoBlock); ``` Using semantic names like `profile-photo` makes it easy to locate and modify blocks when processing different data records. ## Add Text with Variables Text variables use double curly brace syntax: `{{variableName}}`. We create a text block with variable placeholders for name, title, and email. ```typescript highlight=highlight-create-text-with-variables // Create a text block with variable placeholders const textBlock = engine.block.create('text'); const textContent = `{{name}} {{title}} {{email}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 32); engine.block.setPositionX(textBlock, 230); engine.block.setPositionY(textBlock, 140); engine.block.appendChild(page, textBlock); ``` Variables in text blocks automatically display their values when set through the Variable API. ## Set Variable Values We use `engine.variable.setString()` to define the value for each variable. When a variable is set, all text blocks referencing that variable update automatically. ```typescript highlight=highlight-set-variables // Set the variable values from data engine.variable.setString('name', sampleData.name); engine.variable.setString('title', sampleData.title); engine.variable.setString('email', sampleData.email); ``` Variable values persist throughout the engine session. Setting a variable to a new value updates all references immediately. ## Discover Variables Use `engine.variable.findAll()` to discover which variables exist in the scene. Use `engine.block.referencesAnyVariables()` to check if a specific block contains variable references. ```typescript highlight=highlight-discover-variables // Discover all variables in the scene const variables = engine.variable.findAll(); console.log('Variables in scene:', variables); // Check if the text block references any variables const hasVariables = engine.block.referencesAnyVariables(textBlock); console.log('Text block has variables:', hasVariables); ``` This is useful when loading existing templates to determine which data fields are required. ## Find and Update Placeholder Blocks Use `engine.block.findByName()` to locate blocks by their semantic name. Once found, you can update properties like image content by modifying the fill URI. ```typescript highlight=highlight-find-by-name // Find blocks by their semantic name const [foundPhotoBlock] = engine.block.findByName('profile-photo'); if (foundPhotoBlock) { console.log('Found profile-photo block:', foundPhotoBlock); // Update the image content const fill = engine.block.getFill(foundPhotoBlock); engine.block.setString( fill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); } ``` This pattern works well for updating profile photos, logos, or other image placeholders in templates. ## Export the Design After merging data into the template, export the personalized design using `engine.block.export()`. ```typescript highlight=highlight-export // Export the personalized design const blob = await engine.block.export(page, { mimeType: 'image/png' }); console.log('Exported PNG blob:', blob.size, 'bytes'); // Create a download link for the exported image const url = URL.createObjectURL(blob); console.log('Download URL created:', url); ``` You can export to PNG, JPEG, WebP, or PDF formats. For batch processing, collect blobs in an array or write directly to a file system. ## Troubleshooting ### Variables Not Rendering If variable placeholders show instead of values: - Verify the variable name matches exactly (case-sensitive) - Use `engine.variable.findAll()` to check which variables are defined - Ensure `engine.variable.setString()` was called before rendering ### Block Not Found If `findByName()` returns an empty array: - Check the block name was set with `engine.block.setName()` - Verify the name string matches exactly (case-sensitive) - Ensure the block exists in the current scene ### Image Not Updating If placeholder images don't update: - Get the fill block first with `engine.block.getFill()` - Use the correct property path: `fill/image/imageFileURI` - Verify the image URL is accessible and valid ## API Reference | Method | Description | |--------|-------------| | `engine.variable.setString(name, value)` | Set a text variable's value | | `engine.variable.getString(name)` | Get a text variable's value | | `engine.variable.findAll()` | List all variable names in the scene | | `engine.variable.remove(name)` | Remove a variable | | `engine.block.findByName(name)` | Find blocks by their semantic name | | `engine.block.setName(block, name)` | Set a block's semantic name | | `engine.block.replaceText(block, text)` | Replace text content in a text block | | `engine.block.referencesAnyVariables(block)` | Check if block contains variable references | | `engine.block.getFill(block)` | Get the fill block of a design block | | `engine.block.setString(block, property, value)` | Set a string property value | | `engine.block.export(block, options)` | Export a block to an image format | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Automate Design Generation" description: "Generate on-brand designs programmatically using templates, variables, and CE.SDK’s headless API." platform: angular url: "https://img.ly/docs/cesdk/angular/automation/design-generation-98a99e/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/angular/automation-715209/) > [Design Generation](https://img.ly/docs/cesdk/angular/automation/design-generation-98a99e/) --- 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 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](https://img.ly/docs/cesdk/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](https://img.ly/docs/cesdk/angular/use-templates/overview-ae74e1/). 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](./assets/schema.excalidraw.svg) ## Example Workflow ### 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](./assets/scene-example-backside.png) ### 2. Load the Template into the Editor Initialize the CE.SDK and load your prepared template: ```ts example=basic-scene marker=cesdk-init-after // Load a template from your server or a CDN const sceneUrl = 'https://cdn.img.ly/assets/demo/v4/ly.img.template/templates/cesdk_postcard_2.scene'; await engine.scene.loadFromURL(sceneUrl); ``` ### 3. Provide Data to Populate the Template Populate your template with data from your chosen source: ```ts example=basic-scene marker=cesdk-init-after // Option 1: Prepare your data as a javascript object const 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 Once the template is populated, export the final design in your preferred format: ```ts example=basic-scene marker=cesdk-init-after 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](./assets/scene-example-backside-export.png) Need help with exports? Check out the [Export Guide](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) for detailed instructions and options. ## 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 --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale." platform: angular url: "https://img.ly/docs/cesdk/angular/automation/overview-34d971/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/angular/automation-715209/) > [Overview](https://img.ly/docs/cesdk/angular/automation/overview-34d971/) --- ### Output Formats --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Browser Support" description: "Find out which browsers and versions fully support CE.SDK features, including editing and video capabilities." platform: angular url: "https://img.ly/docs/cesdk/angular/browser-support-28c1b0/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/angular/compatibility-fef719/) > [Browser Support](https://img.ly/docs/cesdk/angular/browser-support-28c1b0/) --- The CreativeEditor SDK requires specific APIs to fully function. For video-related features, the required APIs are only supported in certain browsers. As a result, the list of supported browsers is currently limited to the following: | Supported Browser | Graphics Editing | Video Editing | Video Export | | ----------------- | --------------------------------------------- | ----------------- | ----------------- | | Chrome | **114** or newer | **114** or newer | **114** or newer | | Chrome Android | **114** or newer | not supported | not supported | | Chrome iOS | **114** or newer (on iOS/iPadOS 15 or newer) | not supported | not supported | | Edge | **114** or newer | **114** or newer | **114** or newer | | Firefox | **115** or newer | **130** or newer | not supported | | Safari | **15.6** or newer | **26.0** or newer | **26.0** or newer | | Safari iOS | **15.6** or newer (on iOS/iPadOS 15 or newer) | not supported | not supported | **Note:** Firefox supports video editing (decoding) starting with version 130 via the WebCodecs API. However, video export (encoding) is not supported because Firefox does not include the patent-encumbered H.264 and AAC codecs required for video encoding. For video features, CE.SDK automatically shows warning dialogs when unsupported browsers try to use video functionality. You can also detect video support programmatically using the `video.decode.checkSupport` and `video.encode.checkSupport` actions, or the silent `cesdk.utils.supportsVideoDecode()` and `cesdk.utils.supportsVideoEncode()` utilities. See the [Actions API](https://img.ly/docs/cesdk/angular/actions-6ch24x/) for implementation details. While other browsers based on the Chromium project might work fine (Arc, Brave, Opera, Vivaldi etc.) they are not officially supported. ## Host Platform Restrictions All supported browsers rely on the host's platform APIs for different kind of functionality (e.g. video support). Check our [known editor limitations](https://img.ly/docs/cesdk/angular/compatibility-139ef9/) for more details on these. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Capabilities" description: "Explore the full list of CE.SDK capabilities available for your platform, including design, video, image, text, and more." platform: angular url: "https://img.ly/docs/cesdk/angular/capabilities-e1906f/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) > [Capabilities](https://img.ly/docs/cesdk/angular/capabilities-e1906f/) --- A comprehensive overview of all CE.SDK capabilities available for . --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Colors" description: "Manage color usage in your designs, from applying brand palettes to handling print and screen formats." platform: angular url: "https://img.ly/docs/cesdk/angular/colors-a9b79c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/angular/colors/overview-16a177/) - Manage color usage in your designs, from applying brand palettes to handling print and screen formats. - [Color Basics](https://img.ly/docs/cesdk/angular/colors/basics-307115/) - Learn how color works in CE.SDK, including the three supported color spaces (sRGB, CMYK, and Spot) and when to use each for screen display or print workflows. - [For Print](https://img.ly/docs/cesdk/angular/colors/for-print-59bc05/) - Use print-ready color models and settings for professional-quality, production-ready exports. - [For Screen](https://img.ly/docs/cesdk/angular/colors/for-screen-1911f8/) - Documentation for For Screen - [Apply Colors](https://img.ly/docs/cesdk/angular/colors/apply-2211e3/) - Apply solid colors to shapes, backgrounds, and other design elements. - [Create a Color Palette](https://img.ly/docs/cesdk/angular/colors/create-color-palette-7012e0/) - Build reusable color palettes to maintain consistency and streamline user choices. - [Replace Individual Colors](https://img.ly/docs/cesdk/angular/colors/replace-48cd71/) - Selectively replace specific colors in images using CE.SDK's Recolor and Green Screen effects to swap colors or remove backgrounds. - [Adjust Colors](https://img.ly/docs/cesdk/angular/colors/adjust-590d1e/) - Fine-tune images and design elements by adjusting brightness, contrast, saturation, exposure, and other color properties using CE.SDK's adjustments effect system. - [Color Conversion](https://img.ly/docs/cesdk/angular/colors/conversion-bcd82b/) - Learn how to convert colors between color spaces in CE.SDK. Convert sRGB, CMYK, and spot colors programmatically for screen display or print workflows. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Adjust Colors" description: "Fine-tune images and design elements by adjusting brightness, contrast, saturation, exposure, and other color properties using CE.SDK's adjustments effect system." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/adjust-590d1e/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [Adjust Colors](https://img.ly/docs/cesdk/angular/colors/adjust-590d1e/) --- Fine-tune images and design elements using CE.SDK's color adjustments system to control brightness, contrast, saturation, and other visual properties. ![Adjust Colors example showing images with various color adjustments applied](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-adjust-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-adjust-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-adjust-browser/) Color adjustments allow you to modify the visual appearance of images and graphics by changing properties like brightness, contrast, saturation, and color temperature. CE.SDK implements color adjustments as an "adjustments" effect type that you can apply to compatible blocks. ```typescript file=@cesdk_web_examples/guides-colors-adjust-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Adjust Colors Guide * * Demonstrates how to adjust color properties of images and design elements: * - Creating adjustments effects * - Setting brightness, contrast, saturation, and other properties * - Enabling/disabling adjustments * - Reading adjustment values * - Applying different adjustment styles */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); // Enable adjustments in the inspector panel cesdk.feature.enable('ly.img.adjustment'); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a sample image to demonstrate color adjustments const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Check if a block supports effects before applying adjustments const imageBlock = await engine.block.addImage(imageUri, { size: { width: 400, height: 300 } }); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); const supportsEffects = engine.block.supportsEffects(imageBlock); console.log('Block supports effects:', supportsEffects); // Create an adjustments effect const adjustmentsEffect = engine.block.createEffect('adjustments'); // Attach the adjustments effect to the image block engine.block.appendEffect(imageBlock, adjustmentsEffect); // Set brightness - positive values lighten, negative values darken engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/brightness', 0.4 ); // Set contrast - increases or decreases tonal range engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/contrast', 0.35 ); // Set saturation - increases or decreases color intensity engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/saturation', 0.5 ); // Set temperature - positive for warmer, negative for cooler tones engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/temperature', 0.25 ); // Read current adjustment values const brightness = engine.block.getFloat( adjustmentsEffect, 'effect/adjustments/brightness' ); console.log('Current brightness:', brightness); // Discover all available adjustment properties const allProperties = engine.block.findAllProperties(adjustmentsEffect); console.log('Available adjustment properties:', allProperties); // Disable adjustments temporarily (effect remains attached) engine.block.setEffectEnabled(adjustmentsEffect, false); console.log( 'Adjustments enabled:', engine.block.isEffectEnabled(adjustmentsEffect) ); // Re-enable adjustments engine.block.setEffectEnabled(adjustmentsEffect, true); // Create a second image to demonstrate a different adjustment style const secondImageBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 150 } }); engine.block.appendChild(page, secondImageBlock); engine.block.setPositionX(secondImageBlock, 50); engine.block.setPositionY(secondImageBlock, 50); // Apply a contrasting style: darker, high contrast, desaturated (moody look) const combinedAdjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(secondImageBlock, combinedAdjustments); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/brightness', -0.15 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/contrast', 0.4 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/saturation', -0.3 ); // List all effects on the block const effects = engine.block.getEffects(secondImageBlock); console.log('Effects on second image:', effects.length); // Demonstrate removing an effect const tempBlock = await engine.block.addImage(imageUri, { size: { width: 150, height: 100 } }); engine.block.appendChild(page, tempBlock); engine.block.setPositionX(tempBlock, 550); engine.block.setPositionY(tempBlock, 50); const tempEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(tempBlock, tempEffect); engine.block.setFloat(tempEffect, 'effect/adjustments/brightness', 0.5); // Remove the effect by index 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); // Add refinement adjustments to demonstrate subtle enhancement properties const refinementEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(tempBlock, refinementEffect); // Sharpness - enhances edge definition engine.block.setFloat( refinementEffect, 'effect/adjustments/sharpness', 0.4 ); // Clarity - increases mid-tone contrast for more detail engine.block.setFloat(refinementEffect, 'effect/adjustments/clarity', 0.35); // Highlights - adjusts bright areas engine.block.setFloat( refinementEffect, 'effect/adjustments/highlights', -0.2 ); // Shadows - adjusts dark areas engine.block.setFloat(refinementEffect, 'effect/adjustments/shadows', 0.3); // Select the main image block to show adjustments panel engine.block.select(imageBlock); console.log( 'Color adjustments guide initialized. Select an image to see the adjustments panel.' ); } } export default Example; ``` This guide covers how to use the built-in adjustments UI panel and how to apply color adjustments programmatically using the block API. ## Using the Built-in Adjustments UI CE.SDK provides a built-in adjustments panel that allows users to modify color properties interactively. Users can access this panel by selecting an image or graphic block in the editor. ### Enable Adjustments Features To give users access to adjustments in the inspector panel, we enable the adjustments feature using CE.SDK's Feature API. ```typescript highlight=highlight-feature-enable // Enable adjustments in the inspector panel cesdk.feature.enable('ly.img.adjustment'); ``` With adjustments enabled, users can: - **Adjust sliders** for brightness, contrast, saturation, exposure, and more - **See real-time preview** of changes as they adjust values - **Reset adjustments** individually or all at once to restore defaults ## Programmatic Color Adjustments For applications that need to apply adjustments programmatically—whether for automation, batch processing, or dynamic user experiences—we use the block API. ### Check Block Compatibility Before applying adjustments, we verify the block supports effects. Not all block types support adjustments—for example, page blocks don't support effects directly, but image and graphic blocks do. ```typescript highlight=highlight-check-support // Check if a block supports effects before applying adjustments const imageBlock = await engine.block.addImage(imageUri, { size: { width: 400, height: 300 } }); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); const supportsEffects = engine.block.supportsEffects(imageBlock); console.log('Block supports effects:', supportsEffects); ``` ### Create and Apply Adjustments Effect Once we've confirmed a block supports effects, we create an adjustments effect and attach it to the block using `appendEffect()`. ```typescript highlight=highlight-create-adjustments // Create an adjustments effect const adjustmentsEffect = engine.block.createEffect('adjustments'); // Attach the adjustments effect to the image block engine.block.appendEffect(imageBlock, adjustmentsEffect); ``` Each block can have one adjustments effect in its effect stack. The adjustments effect provides access to all color adjustment properties through a single effect instance. ### Modify Adjustment Properties We set individual adjustment values using `setFloat()` with the effect block ID and property path. Each property uses the `effect/adjustments/` prefix followed by the property name. ```typescript highlight=highlight-set-properties // Set brightness - positive values lighten, negative values darken engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/brightness', 0.4 ); // Set contrast - increases or decreases tonal range engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/contrast', 0.35 ); // Set saturation - increases or decreases color intensity engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/saturation', 0.5 ); // Set temperature - positive for warmer, negative for cooler tones engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/temperature', 0.25 ); ``` CE.SDK provides the following adjustment properties: | Property | Description | |----------|-------------| | `brightness` | Overall lightness—positive values lighten, negative values darken | | `contrast` | Tonal range—increases or decreases the difference between light and dark | | `saturation` | Color intensity—positive values increase vibrancy, negative values desaturate | | `exposure` | Exposure compensation—simulates camera exposure adjustments | | `gamma` | Gamma curve—adjusts midtone brightness | | `highlights` | Bright area intensity—controls the lightest parts of the image | | `shadows` | Dark area intensity—controls the darkest parts of the image | | `whites` | White point—adjusts the brightest pixels | | `blacks` | Black point—adjusts the darkest pixels | | `temperature` | Warm/cool color cast—positive for warmer, negative for cooler tones | | `sharpness` | Edge sharpness—enhances or softens edges | | `clarity` | Midtone contrast—increases local contrast for more definition | All properties accept float values. Experiment with different values to achieve the desired visual result. ### Read Adjustment Values We can read current adjustment values using `getFloat()` with the same property paths. Use `findAllProperties()` to discover all available properties on an adjustments effect. ```typescript highlight=highlight-read-values // Read current adjustment values const brightness = engine.block.getFloat( adjustmentsEffect, 'effect/adjustments/brightness' ); console.log('Current brightness:', brightness); // Discover all available adjustment properties const allProperties = engine.block.findAllProperties(adjustmentsEffect); console.log('Available adjustment properties:', allProperties); ``` This is useful for building custom UI controls or syncing adjustment values across your application. ### Enable and Disable Adjustments CE.SDK allows you to temporarily toggle adjustments on and off without removing them from the block. This is useful for before/after comparisons. ```typescript highlight=highlight-enable-disable // Disable adjustments temporarily (effect remains attached) engine.block.setEffectEnabled(adjustmentsEffect, false); console.log( 'Adjustments enabled:', engine.block.isEffectEnabled(adjustmentsEffect) ); // Re-enable adjustments engine.block.setEffectEnabled(adjustmentsEffect, true); ``` When you disable an adjustments effect, it remains attached to the block but won't be rendered until you enable it again. This preserves all adjustment values while giving you control over when adjustments are applied. ## Applying Different Adjustment Styles You can apply different adjustment combinations to create distinct visual styles. This example demonstrates a contrasting moody look using negative brightness, high contrast, and desaturation. ```typescript highlight=highlight-combine-effects // Create a second image to demonstrate a different adjustment style const secondImageBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 150 } }); engine.block.appendChild(page, secondImageBlock); engine.block.setPositionX(secondImageBlock, 50); engine.block.setPositionY(secondImageBlock, 50); // Apply a contrasting style: darker, high contrast, desaturated (moody look) const combinedAdjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(secondImageBlock, combinedAdjustments); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/brightness', -0.15 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/contrast', 0.4 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/saturation', -0.3 ); // List all effects on the block const effects = engine.block.getEffects(secondImageBlock); console.log('Effects on second image:', effects.length); ``` By combining different adjustment properties, you can create warm and vibrant looks, cool and desaturated styles, or high-contrast dramatic effects. ## Refinement Adjustments Beyond basic color corrections, CE.SDK provides refinement adjustments for fine-tuning image detail and tonal balance. ```typescript highlight=highlight-refinement-adjustments // Add refinement adjustments to demonstrate subtle enhancement properties const refinementEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(tempBlock, refinementEffect); // Sharpness - enhances edge definition engine.block.setFloat( refinementEffect, 'effect/adjustments/sharpness', 0.4 ); // Clarity - increases mid-tone contrast for more detail engine.block.setFloat(refinementEffect, 'effect/adjustments/clarity', 0.35); // Highlights - adjusts bright areas engine.block.setFloat( refinementEffect, 'effect/adjustments/highlights', -0.2 ); // Shadows - adjusts dark areas engine.block.setFloat(refinementEffect, 'effect/adjustments/shadows', 0.3); ``` Refinement properties include: - **Sharpness** - Enhances edge definition for crisper details - **Clarity** - Increases mid-tone contrast for more depth and definition - **Highlights** - Controls the intensity of bright areas - **Shadows** - Controls the intensity of dark areas These adjustments are particularly useful for enhancing photos or preparing images for print. ## Managing Adjustments ### Remove Adjustments When you no longer need adjustments, you can remove them from the effect stack and free resources. Always destroy effects that are no longer in use to prevent memory leaks. ```typescript highlight=highlight-remove-adjustments // Demonstrate removing an effect const tempBlock = await engine.block.addImage(imageUri, { size: { width: 150, height: 100 } }); engine.block.appendChild(page, tempBlock); engine.block.setPositionX(tempBlock, 550); engine.block.setPositionY(tempBlock, 50); const tempEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(tempBlock, tempEffect); engine.block.setFloat(tempEffect, 'effect/adjustments/brightness', 0.5); // Remove the effect by index 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); ``` The `removeEffect()` method takes an index position. After removal, destroy the effect instance to ensure proper cleanup. ### Reset Adjustments To reset all adjustments to their default values, you can either: - Set each property to `0.0` individually using `setFloat()` - Remove the adjustments effect and create a new one For most cases, setting properties to `0.0` is more efficient than recreating the effect. ## Troubleshooting ### Adjustments Not Visible If adjustments don't appear after applying them: - Verify the block supports effects using `supportsEffects()` - Check that the effect is enabled with `isEffectEnabled()` - Ensure the adjustments effect was appended to the block, not just created - Confirm adjustment values are non-zero ### Unexpected Results If adjustments produce unexpected visual results: - Check the effect stack order—adjustments applied before or after other effects may produce different results - Verify property paths include the `effect/adjustments/` prefix - Use `findAllProperties()` to verify correct property names ### Property Not Found If you encounter property not found errors: - Use `findAllProperties()` to list all available properties - Ensure property paths use the correct `effect/adjustments/` prefix format ## API Reference | Method | Description | |--------|-------------| | `block.supportsEffects(block)` | Check if a block supports effects | | `block.createEffect('adjustments')` | Create an adjustments effect | | `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.getEffects(block)` | Get all effects applied to a block | | `block.removeEffect(block, index)` | Remove effect at the specified index | | `block.setEffectEnabled(effect, enabled)` | Enable or disable an effect | | `block.isEffectEnabled(effect)` | Check if an effect is enabled | | `block.setFloat(effect, property, value)` | Set a float property value | | `block.getFloat(effect, property)` | Get a float property value | | `block.findAllProperties(effect)` | List all properties of an effect | | `block.destroy(effect)` | Destroy an effect and free resources | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Apply Colors" description: "Apply solid colors to shapes, backgrounds, and other design elements." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/apply-2211e3/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [Apply Color](https://img.ly/docs/cesdk/angular/colors/apply-2211e3/) --- Apply solid colors to design elements like shapes, text, and backgrounds using CE.SDK's color system with support for RGB, CMYK, and spot colors. ![Apply Colors example showing a block with fill, stroke, and shadow colors applied](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-apply-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-apply-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-apply-browser/) Colors in CE.SDK are applied to block properties like fill, stroke, and shadow using `engine.block.setColor()`. The engine supports three color spaces: sRGB for screen display, CMYK for print production, and spot colors for specialized printing requirements. ```typescript file=@cesdk_web_examples/guides-colors-apply-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext, RGBAColor } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Apply Colors Guide * * Demonstrates how to apply solid colors to design elements: * - Creating color objects in RGB, CMYK, and spot color spaces * - Applying colors to fill, stroke, and shadow properties * - Defining and managing spot colors * - Converting colors between color spaces */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a graphic block to apply colors to 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, 200); engine.block.setHeight(block, 150); engine.block.setPositionX(block, 100); engine.block.setPositionY(block, 100); engine.block.appendChild(page, block); // Create RGB color (values 0.0-1.0) const rgbaBlue: RGBAColor = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }; // Create CMYK color (cyan, magenta, yellow, black, tint) const cmykRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; // Create spot color reference const spotPink = { name: 'Pink-Flamingo', tint: 1.0, externalReference: 'Brand-Colors' }; // Define spot colors with screen preview approximations engine.editor.setSpotColorRGB('Pink-Flamingo', 1.0, 0.41, 0.71); engine.editor.setSpotColorCMYK('Corporate-Blue', 1.0, 0.5, 0.0, 0.2); // Apply RGB color to fill const fill = engine.block.getFill(block); engine.block.setColor(fill, 'fill/color/value', rgbaBlue); // Read the current fill color const currentFillColor = engine.block.getColor(fill, 'fill/color/value'); console.log('Current fill color:', currentFillColor); // Enable and apply stroke color engine.block.setStrokeEnabled(block, true); engine.block.setStrokeWidth(block, 4); engine.block.setColor(block, 'stroke/color', cmykRed); // Enable and apply drop shadow color engine.block.setDropShadowEnabled(block, true); engine.block.setDropShadowOffsetX(block, 5); engine.block.setDropShadowOffsetY(block, 5); engine.block.setColor(block, 'dropShadow/color', spotPink); // Convert colors between color spaces const cmykFromRgb = engine.editor.convertColorToColorSpace( rgbaBlue, 'CMYK' ); console.log('CMYK from RGB:', cmykFromRgb); const rgbFromCmyk = engine.editor.convertColorToColorSpace(cmykRed, 'sRGB'); console.log('RGB from CMYK:', rgbFromCmyk); // List all defined spot colors const allSpotColors = engine.editor.findAllSpotColors(); console.log('Defined spot colors:', allSpotColors); // Update a spot color definition engine.editor.setSpotColorRGB('Pink-Flamingo', 1.0, 0.6, 0.8); console.log('Updated Pink-Flamingo spot color'); // Remove a spot color definition (falls back to magenta) engine.editor.removeSpotColor('Corporate-Blue'); console.log('Removed Corporate-Blue spot color'); // Select the block to show in the editor engine.block.select(block); console.log('Apply colors guide initialized.'); } } export default Example; ``` This guide covers how to create color objects in different color spaces, apply colors to fill, stroke, and shadow properties, work with spot colors including defining and managing them, and convert colors between color spaces. ## Create Color Objects CE.SDK represents colors as JavaScript objects with properties specific to each color space. We create color objects that match our target output—RGB for screens, CMYK for print, or spot colors for precise color matching. ```typescript highlight=highlight-create-colors // Create RGB color (values 0.0-1.0) const rgbaBlue: RGBAColor = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }; // Create CMYK color (cyan, magenta, yellow, black, tint) const cmykRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; // Create spot color reference const spotPink = { name: 'Pink-Flamingo', tint: 1.0, externalReference: 'Brand-Colors' }; ``` RGB colors use `{ r, g, b, a }` with values from 0.0 to 1.0 for each channel, where `a` is alpha (opacity). CMYK colors use `{ c, m, y, k, tint }` where tint controls the overall intensity. Spot colors use `{ name, tint, externalReference }` to reference a defined spot color by name. ## Define Spot Colors Before applying a spot color, we must define its screen preview approximation. The engine needs to know how to display the color since spot colors represent inks that can't be directly rendered on screens. ```typescript highlight=highlight-define-spot // Define spot colors with screen preview approximations engine.editor.setSpotColorRGB('Pink-Flamingo', 1.0, 0.41, 0.71); engine.editor.setSpotColorCMYK('Corporate-Blue', 1.0, 0.5, 0.0, 0.2); ``` Use `engine.editor.setSpotColorRGB()` to define the RGB approximation with red, green, and blue values from 0.0 to 1.0. Use `engine.editor.setSpotColorCMYK()` for the CMYK approximation with cyan, magenta, yellow, black, and tint values. A spot color can have both RGB and CMYK approximations defined. ## Apply Fill Colors To set a block's fill color, we first get the fill block using `engine.block.getFill()`, then apply the color using `engine.block.setColor()` with the `'fill/color/value'` property. ```typescript highlight=highlight-apply-fill // Apply RGB color to fill const fill = engine.block.getFill(block); engine.block.setColor(fill, 'fill/color/value', rgbaBlue); // Read the current fill color const currentFillColor = engine.block.getColor(fill, 'fill/color/value'); console.log('Current fill color:', currentFillColor); ``` The fill block is a separate entity from the design block. We can read the current color using `engine.block.getColor()` with the same property path. ## Apply Stroke Colors Stroke colors are applied directly to the design block using the `'stroke/color'` property. We enable the stroke first using `engine.block.setStrokeEnabled()`. ```typescript highlight=highlight-apply-stroke // Enable and apply stroke color engine.block.setStrokeEnabled(block, true); engine.block.setStrokeWidth(block, 4); engine.block.setColor(block, 'stroke/color', cmykRed); ``` The stroke renders around the edges of the block with the specified color. Set the stroke width using `engine.block.setStrokeWidth()` to control the line thickness. ## Apply Shadow Colors Drop shadow colors use the `'dropShadow/color'` property on the design block. Enable shadows first using `engine.block.setDropShadowEnabled()`. ```typescript highlight=highlight-apply-shadow // Enable and apply drop shadow color engine.block.setDropShadowEnabled(block, true); engine.block.setDropShadowOffsetX(block, 5); engine.block.setDropShadowOffsetY(block, 5); engine.block.setColor(block, 'dropShadow/color', spotPink); ``` Control the shadow position using `setDropShadowOffsetX()` and `setDropShadowOffsetY()`. Spot colors work with shadows just like RGB or CMYK colors. ## Convert Between Color Spaces Use `engine.editor.convertColorToColorSpace()` to convert any color to a different color space. This is useful when you need to output designs in a specific color format. ```typescript highlight=highlight-convert-color // Convert colors between color spaces const cmykFromRgb = engine.editor.convertColorToColorSpace( rgbaBlue, 'CMYK' ); console.log('CMYK from RGB:', cmykFromRgb); const rgbFromCmyk = engine.editor.convertColorToColorSpace(cmykRed, 'sRGB'); console.log('RGB from CMYK:', rgbFromCmyk); ``` Pass the source color object and target color space (`'sRGB'` or `'CMYK'`). Spot colors convert to their defined approximation in the target space. Note that color conversions are approximations—CMYK has a smaller color gamut than sRGB. ## List Defined Spot Colors Query all spot colors currently defined in the editor using `engine.editor.findAllSpotColors()`. This returns an array of spot color names. ```typescript highlight=highlight-list-spot // List all defined spot colors const allSpotColors = engine.editor.findAllSpotColors(); console.log('Defined spot colors:', allSpotColors); ``` This is useful for building color pickers or validating that required spot colors are defined before export. ## Update Spot Color Definitions Redefine a spot color's approximation by calling `setSpotColorRGB()` or `setSpotColorCMYK()` with the same name. All blocks using that spot color automatically update their rendered appearance. ```typescript highlight=highlight-update-spot // Update a spot color definition engine.editor.setSpotColorRGB('Pink-Flamingo', 1.0, 0.6, 0.8); console.log('Updated Pink-Flamingo spot color'); ``` This allows you to adjust how spot colors appear on screen without modifying every block that uses them. ## Remove Spot Color Definitions Remove a spot color definition using `engine.editor.removeSpotColor()`. Blocks still referencing that color fall back to the default magenta approximation. ```typescript highlight=highlight-remove-spot // Remove a spot color definition (falls back to magenta) engine.editor.removeSpotColor('Corporate-Blue'); console.log('Removed Corporate-Blue spot color'); ``` This is useful when cleaning up unused spot colors or when you need to signal that a spot color is no longer valid. ## Troubleshooting ### Spot Color Appears Magenta The spot color wasn't defined before use. Call `setSpotColorRGB()` or `setSpotColorCMYK()` with the exact spot color name before applying it to blocks. ### Stroke or Shadow Color Not Visible The effect isn't enabled. Call `setStrokeEnabled(block, true)` or `setDropShadowEnabled(block, true)` before setting the color. ### Color Looks Different After Conversion Color space conversions are approximations. CMYK has a smaller gamut than sRGB, so vibrant colors may appear muted after conversion. ### Can't Apply Color to Fill Apply colors to the fill block obtained from `getFill()`, not the parent design block. The fill is a separate entity with its own color property. ## API Reference | Method | Description | |--------|-------------| | `block.setColor(block, property, color)` | Set a color property on a block | | `block.getColor(block, property)` | Get a color property from a block | | `block.getFill(block)` | Get the fill block of a design block | | `block.setStrokeEnabled(block, enabled)` | Enable or disable stroke on a block | | `block.setDropShadowEnabled(block, enabled)` | Enable or disable drop shadow on a block | | `editor.setSpotColorRGB(name, r, g, b)` | Define a spot color with RGB approximation | | `editor.setSpotColorCMYK(name, c, m, y, k)` | Define a spot color with CMYK approximation | | `editor.findAllSpotColors()` | List all defined spot colors | | `editor.removeSpotColor(name)` | Remove a spot color definition | | `editor.convertColorToColorSpace(color, colorSpace)` | Convert a color to a different color space | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Color Basics" description: "Learn how color works in CE.SDK, including the three supported color spaces (sRGB, CMYK, and Spot) and when to use each for screen display or print workflows." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/basics-307115/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [Basics](https://img.ly/docs/cesdk/angular/colors/basics-307115/) --- Understand the three color spaces in CE.SDK and when to use each for screen or print workflows. ![Color Basics example showing three colored blocks representing sRGB, CMYK, and Spot color spaces](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-basics-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-basics-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-basics-browser/) CE.SDK supports three color spaces: **sRGB** for screen display, **CMYK** for print workflows, and **Spot Color** for specialized printing. Each color space serves different output types and has its own object format for the `setColor()` API. ```typescript file=@cesdk_web_examples/guides-colors-basics-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } // Enable spot color feature for the UI cesdk.feature.enable('ly.img.spotColor'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Calculate block sizes for three columns const margin = 40; const spacing = 30; const availableWidth = pageWidth - 2 * margin - 2 * spacing; const blockWidth = availableWidth / 3; const blockHeight = pageHeight - 2 * margin - 80; // Leave space for labels // Define a spot color with RGB approximation for screen preview engine.editor.setSpotColorRGB('MyBrand Red', 0.95, 0.25, 0.21); // Create three blocks to demonstrate each color space // Block 1: sRGB color (for screen display) const srgbBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( srgbBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const srgbFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using RGBAColor object (values 0.0-1.0) engine.block.setColor(srgbFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setFill(srgbBlock, srgbFill); engine.block.setWidth(srgbBlock, blockWidth); engine.block.setHeight(srgbBlock, blockHeight); engine.block.appendChild(page, srgbBlock); // Block 2: CMYK color (for print workflows) const cmykBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( cmykBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const cmykFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using CMYKColor object (values 0.0-1.0, tint controls opacity) engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, m: 0.8, y: 0.95, k: 0.0, tint: 1.0 }); engine.block.setFill(cmykBlock, cmykFill); engine.block.setWidth(cmykBlock, blockWidth); engine.block.setHeight(cmykBlock, blockHeight); engine.block.appendChild(page, cmykBlock); // Block 3: Spot color (for specialized printing) const spotBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( spotBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const spotFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using SpotColor object (references the defined spot color) engine.block.setColor(spotFill, 'fill/color/value', { name: 'MyBrand Red', tint: 1.0, externalReference: '' }); engine.block.setFill(spotBlock, spotFill); engine.block.setWidth(spotBlock, blockWidth); engine.block.setHeight(spotBlock, blockHeight); engine.block.appendChild(page, spotBlock); // Add strokes to demonstrate stroke color property engine.block.setStrokeEnabled(srgbBlock, true); engine.block.setStrokeWidth(srgbBlock, 4); engine.block.setColor(srgbBlock, 'stroke/color', { r: 0.1, g: 0.2, b: 0.5, a: 1.0 }); engine.block.setStrokeEnabled(cmykBlock, true); engine.block.setStrokeWidth(cmykBlock, 4); engine.block.setColor(cmykBlock, 'stroke/color', { c: 0.0, m: 0.5, y: 0.6, k: 0.2, tint: 1.0 }); engine.block.setStrokeEnabled(spotBlock, true); engine.block.setStrokeWidth(spotBlock, 4); engine.block.setColor(spotBlock, 'stroke/color', { name: 'MyBrand Red', tint: 0.7, externalReference: '' }); // Create labels for each color space const labelY = margin + blockHeight + 20; const fontSize = 24; const labels = [ { text: 'sRGB', x: margin + blockWidth / 2 }, { text: 'CMYK', x: margin + blockWidth + spacing + blockWidth / 2 }, { text: 'Spot Color', x: margin + 2 * (blockWidth + spacing) + blockWidth / 2 } ]; for (const label of labels) { const textBlock = engine.block.create('//ly.img.ubq/text'); engine.block.replaceText(textBlock, label.text); engine.block.setTextFontSize(textBlock, fontSize); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.appendChild(page, textBlock); // Center the label below each block const textWidth = engine.block.getWidth(textBlock); engine.block.setPositionX(textBlock, label.x - textWidth / 2); engine.block.setPositionY(textBlock, labelY); } // Position all color blocks engine.block.setPositionX(srgbBlock, margin); engine.block.setPositionY(srgbBlock, margin); engine.block.setPositionX(cmykBlock, margin + blockWidth + spacing); engine.block.setPositionY(cmykBlock, margin); engine.block.setPositionX(spotBlock, margin + 2 * (blockWidth + spacing)); engine.block.setPositionY(spotBlock, margin); // Retrieve and log color values to demonstrate getColor() const srgbColor = engine.block.getColor(srgbFill, 'fill/color/value'); const cmykColor = engine.block.getColor(cmykFill, 'fill/color/value'); const spotColor = engine.block.getColor(spotFill, 'fill/color/value'); console.log('sRGB Color:', srgbColor); console.log('CMYK Color:', cmykColor); console.log('Spot Color:', spotColor); console.log('Color Basics example loaded successfully'); } } export default Example; ``` This guide covers how to choose the correct color space, define and apply colors using the unified `setColor()` API, and configure spot colors with screen preview approximations. ## Color Spaces Overview CE.SDK represents colors as objects with different properties depending on the color space. Use `engine.block.setColor()` to apply any color type to supported properties. **Supported color properties:** - `'fill/color/value'` - Fill color of a block - `'stroke/color'` - Stroke/outline color - `'dropShadow/color'` - Drop shadow color - `'backgroundColor/color'` - Background color - `'camera/clearColor'` - Canvas clear color ## sRGB Colors sRGB is the default color space for screen display. Pass an `RGBAColor` object with `r`, `g`, `b`, `a` components, each in the range 0.0 to 1.0. The `a` (alpha) component controls transparency. ```typescript highlight=highlight-srgb-color // Block 1: sRGB color (for screen display) const srgbBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( srgbBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const srgbFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using RGBAColor object (values 0.0-1.0) engine.block.setColor(srgbFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setFill(srgbBlock, srgbFill); engine.block.setWidth(srgbBlock, blockWidth); engine.block.setHeight(srgbBlock, blockHeight); engine.block.appendChild(page, srgbBlock); ``` sRGB colors are ideal for web and digital content where the output is displayed on screens. ## CMYK Colors CMYK is the color space for print workflows. Pass a `CMYKColor` object with `c`, `m`, `y`, `k` components (0.0 to 1.0) plus a `tint` value that controls opacity. ```typescript highlight=highlight-cmyk-color // Block 2: CMYK color (for print workflows) const cmykBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( cmykBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const cmykFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using CMYKColor object (values 0.0-1.0, tint controls opacity) engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, m: 0.8, y: 0.95, k: 0.0, tint: 1.0 }); engine.block.setFill(cmykBlock, cmykFill); engine.block.setWidth(cmykBlock, blockWidth); engine.block.setHeight(cmykBlock, blockHeight); engine.block.appendChild(page, cmykBlock); ``` When rendered on screen, CMYK colors are converted to RGB using standard conversion formulas. The `tint` value (0.0 to 1.0) is rendered as transparency. > **Note:** During PDF export, CMYK colors are currently converted to RGB using the standard conversion. Tint values are retained in the alpha channel. ## Spot Colors Spot colors are named colors used for specialized printing. Before using a spot color, you must define it with an RGB or CMYK approximation for screen preview. ### Defining Spot Colors Use `engine.editor.setSpotColorRGB()` or `engine.editor.setSpotColorCMYK()` to register a spot color with its screen preview approximation. ```typescript highlight=highlight-define-spot-color // Define a spot color with RGB approximation for screen preview engine.editor.setSpotColorRGB('MyBrand Red', 0.95, 0.25, 0.21); ``` ### Applying Spot Colors Reference a defined spot color using a `SpotColor` object with the `name`, `tint`, and `externalReference` properties. ```typescript highlight=highlight-spot-color // Block 3: Spot color (for specialized printing) const spotBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( spotBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const spotFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using SpotColor object (references the defined spot color) engine.block.setColor(spotFill, 'fill/color/value', { name: 'MyBrand Red', tint: 1.0, externalReference: '' }); engine.block.setFill(spotBlock, spotFill); engine.block.setWidth(spotBlock, blockWidth); engine.block.setHeight(spotBlock, blockHeight); engine.block.appendChild(page, spotBlock); ``` When rendered on screen, the spot color uses its RGB or CMYK approximation. During PDF export, spot colors are saved as a [Separation Color Space](https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/pdfreference1.6.pdf#G9.1850648) that preserves print information. > **Note:** If a block references an undefined spot color, CE.SDK displays magenta (RGB: 1, 0, 1) as a fallback. ## Applying Stroke Colors Strokes support all three color spaces. Enable the stroke, set its width, then apply a color using the `'stroke/color'` property. ```typescript highlight=highlight-stroke-color // Add strokes to demonstrate stroke color property engine.block.setStrokeEnabled(srgbBlock, true); engine.block.setStrokeWidth(srgbBlock, 4); engine.block.setColor(srgbBlock, 'stroke/color', { r: 0.1, g: 0.2, b: 0.5, a: 1.0 }); engine.block.setStrokeEnabled(cmykBlock, true); engine.block.setStrokeWidth(cmykBlock, 4); engine.block.setColor(cmykBlock, 'stroke/color', { c: 0.0, m: 0.5, y: 0.6, k: 0.2, tint: 1.0 }); engine.block.setStrokeEnabled(spotBlock, true); engine.block.setStrokeWidth(spotBlock, 4); engine.block.setColor(spotBlock, 'stroke/color', { name: 'MyBrand Red', tint: 0.7, externalReference: '' }); ``` ## Reading Color Values Use `engine.block.getColor()` to retrieve the current color value from a property. The returned object's shape indicates the color space (RGBAColor, CMYKColor, or SpotColor). ```typescript highlight=highlight-get-color // Retrieve and log color values to demonstrate getColor() const srgbColor = engine.block.getColor(srgbFill, 'fill/color/value'); const cmykColor = engine.block.getColor(cmykFill, 'fill/color/value'); const spotColor = engine.block.getColor(spotFill, 'fill/color/value'); console.log('sRGB Color:', srgbColor); console.log('CMYK Color:', cmykColor); console.log('Spot Color:', spotColor); ``` ## Choosing the Right Color Space | Color Space | Use Case | Output | |-------------|----------|--------| | **sRGB** | Web, digital, screen display | PNG, JPEG, WebP | | **CMYK** | Print workflows (converts to RGB) | PDF (converted) | | **Spot Color** | Specialized printing, brand colors | PDF (Separation Color Space) | ## API Reference | Method | Description | |--------|-------------| | `engine.block.setColor(id, property, value)` | Set a color property on a block. Pass an `RGBAColor`, `CMYKColor`, or `SpotColor` object. | | `engine.block.getColor(id, property)` | Get the current color value from a property. Returns an `RGBAColor`, `CMYKColor`, or `SpotColor` object. | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color with an RGB approximation for screen preview. Components range from 0.0 to 1.0. | | `engine.editor.setSpotColorCMYK(name, c, m, y, k)` | Define a spot color with a CMYK approximation for screen preview. Components range from 0.0 to 1.0. | | Type | Properties | Description | |------|------------|-------------| | `RGBAColor` | `r`, `g`, `b`, `a` (0.0-1.0) | sRGB color for screen display. Alpha controls transparency. | | `CMYKColor` | `c`, `m`, `y`, `k`, `tint` (0.0-1.0) | CMYK color for print. Tint controls opacity. | | `SpotColor` | `name`, `tint`, `externalReference` | Named color for specialized printing. | ## Next Steps - [Apply Colors](https://img.ly/docs/cesdk/angular/colors/apply-2211e3/) - Apply colors to design elements programmatically - [CMYK Colors](https://img.ly/docs/cesdk/angular/colors/for-print/cmyk-8a1334/) - Work with CMYK for print workflows - [Spot Colors](https://img.ly/docs/cesdk/angular/colors/for-print/spot-c3a150/) - Define and manage spot colors for specialized printing --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Color Conversion" description: "Learn how to convert colors between color spaces in CE.SDK. Convert sRGB, CMYK, and spot colors programmatically for screen display or print workflows." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/conversion-bcd82b/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [Color Conversion](https://img.ly/docs/cesdk/angular/colors/conversion-bcd82b/) --- Convert colors between sRGB, CMYK, and spot color spaces programmatically in CE.SDK. ![Color Conversion example showing color blocks with different color spaces](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-conversion-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-conversion-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-conversion-browser/) CE.SDK supports three color spaces: sRGB, CMYK, and SpotColor. When building color interfaces or preparing designs for export, you may need to convert colors between these spaces. The engine handles the mathematical conversion automatically through the `convertColorToColorSpace()` API. ```typescript file=@cesdk_web_examples/guides-colors-conversion-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; // Type guard helpers for identifying color types function isRGBAColor( color: any ): color is { r: number; g: number; b: number; a: number } { return 'r' in color && 'g' in color && 'b' in color && 'a' in color; } function isCMYKColor( color: any ): color is { c: number; m: number; y: number; k: number; tint: number } { return 'c' in color && 'm' in color && 'y' in color && 'k' in color; } function isSpotColor( color: any ): color is { name: string; tint: number; externalReference: string } { return 'name' in color && 'tint' in color && 'externalReference' in color; } 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 spot color feature for the UI cesdk.feature.enable('ly.img.spotColor'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Calculate block sizes for three columns const margin = 40; const spacing = 30; const availableWidth = pageWidth - 2 * margin - 2 * spacing; const blockWidth = availableWidth / 3; const blockHeight = pageHeight - 2 * margin - 80; // Leave space for labels // Define a spot color with RGB approximation for screen preview engine.editor.setSpotColorRGB('Brand Red', 0.95, 0.25, 0.21); // Create three blocks with different color spaces // Block 1: sRGB color (for screen display) const srgbBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( srgbBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const srgbFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(srgbFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setFill(srgbBlock, srgbFill); engine.block.setWidth(srgbBlock, blockWidth); engine.block.setHeight(srgbBlock, blockHeight); engine.block.appendChild(page, srgbBlock); // Block 2: CMYK color (for print workflows) const cmykBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( cmykBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const cmykFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, m: 0.8, y: 0.95, k: 0.0, tint: 1.0 }); engine.block.setFill(cmykBlock, cmykFill); engine.block.setWidth(cmykBlock, blockWidth); engine.block.setHeight(cmykBlock, blockHeight); engine.block.appendChild(page, cmykBlock); // Block 3: Spot color (for specialized printing) const spotBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( spotBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const spotFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(spotFill, 'fill/color/value', { name: 'Brand Red', tint: 1.0, externalReference: '' }); engine.block.setFill(spotBlock, spotFill); engine.block.setWidth(spotBlock, blockWidth); engine.block.setHeight(spotBlock, blockHeight); engine.block.appendChild(page, spotBlock); // Position all color blocks engine.block.setPositionX(srgbBlock, margin); engine.block.setPositionY(srgbBlock, margin); engine.block.setPositionX(cmykBlock, margin + blockWidth + spacing); engine.block.setPositionY(cmykBlock, margin); engine.block.setPositionX(spotBlock, margin + 2 * (blockWidth + spacing)); engine.block.setPositionY(spotBlock, margin); // Create labels for each color space const labelY = margin + blockHeight + 20; const fontSize = 24; const labels = [ { text: 'sRGB', x: margin + blockWidth / 2 }, { text: 'CMYK', x: margin + blockWidth + spacing + blockWidth / 2 }, { text: 'Spot Color', x: margin + 2 * (blockWidth + spacing) + blockWidth / 2 } ]; for (const label of labels) { const textBlock = engine.block.create('//ly.img.ubq/text'); engine.block.replaceText(textBlock, label.text); engine.block.setTextFontSize(textBlock, fontSize); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.appendChild(page, textBlock); // Center the label below each block const textWidth = engine.block.getWidth(textBlock); engine.block.setPositionX(textBlock, label.x - textWidth / 2); engine.block.setPositionY(textBlock, labelY); } // Convert colors to sRGB for screen display const srgbColor = engine.block.getColor(srgbFill, 'fill/color/value'); const cmykColor = engine.block.getColor(cmykFill, 'fill/color/value'); const spotColor = engine.block.getColor(spotFill, 'fill/color/value'); // Convert CMYK to sRGB const cmykToRgba = engine.editor.convertColorToColorSpace( cmykColor, 'sRGB' ); console.log('CMYK converted to sRGB:', cmykToRgba); // Convert Spot color to sRGB (uses defined RGB approximation) const spotToRgba = engine.editor.convertColorToColorSpace( spotColor, 'sRGB' ); console.log('Spot color converted to sRGB:', spotToRgba); // Convert colors to CMYK for print workflows const srgbToCmyk = engine.editor.convertColorToColorSpace( srgbColor, 'CMYK' ); console.log('sRGB converted to CMYK:', srgbToCmyk); // Convert Spot color to CMYK for print output // First define CMYK approximation for the spot color engine.editor.setSpotColorCMYK('Brand Red', 0.0, 0.85, 0.9, 0.05); const spotToCmyk = engine.editor.convertColorToColorSpace( spotColor, 'CMYK' ); console.log('Spot color converted to CMYK:', spotToCmyk); // Use type guards to identify color space before conversion if (isRGBAColor(srgbColor)) { console.log( 'sRGB color components:', `R: ${srgbColor.r}, G: ${srgbColor.g}, B: ${srgbColor.b}, A: ${srgbColor.a}` ); } if (isCMYKColor(cmykColor)) { console.log( 'CMYK color components:', `C: ${cmykColor.c}, M: ${cmykColor.m}, Y: ${cmykColor.y}, K: ${cmykColor.k}, Tint: ${cmykColor.tint}` ); } if (isSpotColor(spotColor)) { console.log('Spot color name:', spotColor.name, 'Tint:', spotColor.tint); } console.log('Color Conversion example loaded successfully'); } } export default Example; ``` This guide covers how to convert colors between sRGB and CMYK, handle spot color conversions, identify color types with type guards, and understand how tint and alpha values are preserved during conversion. ## Supported Color Spaces CE.SDK supports conversion between three color spaces: | Color Space | Format | Use Case | |-------------|--------|----------| | **sRGB** | `RGBAColor` with `r`, `g`, `b`, `a` (0.0-1.0) | Screen display, web output | | **CMYK** | `CMYKColor` with `c`, `m`, `y`, `k`, `tint` (0.0-1.0) | Print workflows | | **SpotColor** | `SpotColor` with `name`, `tint`, `externalReference` | Specialized printing | ## Setting Up Colors Before converting colors, you need colors in different spaces. This example creates blocks with sRGB, CMYK, and spot colors. First, define a spot color with its RGB approximation for screen preview: ```typescript highlight=highlight-define-spot-color // Define a spot color with RGB approximation for screen preview engine.editor.setSpotColorRGB('Brand Red', 0.95, 0.25, 0.21); ``` Create an sRGB color block for screen display: ```typescript highlight=highlight-srgb-color // Block 1: sRGB color (for screen display) const srgbBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( srgbBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const srgbFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(srgbFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setFill(srgbBlock, srgbFill); engine.block.setWidth(srgbBlock, blockWidth); engine.block.setHeight(srgbBlock, blockHeight); engine.block.appendChild(page, srgbBlock); ``` Create a CMYK color block for print workflows: ```typescript highlight=highlight-cmyk-color // Block 2: CMYK color (for print workflows) const cmykBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( cmykBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const cmykFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, m: 0.8, y: 0.95, k: 0.0, tint: 1.0 }); engine.block.setFill(cmykBlock, cmykFill); engine.block.setWidth(cmykBlock, blockWidth); engine.block.setHeight(cmykBlock, blockHeight); engine.block.appendChild(page, cmykBlock); ``` Create a spot color block for specialized printing: ```typescript highlight=highlight-spot-color // Block 3: Spot color (for specialized printing) const spotBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( spotBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const spotFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(spotFill, 'fill/color/value', { name: 'Brand Red', tint: 1.0, externalReference: '' }); engine.block.setFill(spotBlock, spotFill); engine.block.setWidth(spotBlock, blockWidth); engine.block.setHeight(spotBlock, blockHeight); engine.block.appendChild(page, spotBlock); ``` ## Converting to sRGB Use `engine.editor.convertColorToColorSpace(color, 'sRGB')` to convert any color to sRGB format. This is useful for displaying color values on screen or when you need RGB components for CSS or other web-based color operations. ```typescript highlight=highlight-convert-to-srgb // Convert colors to sRGB for screen display const srgbColor = engine.block.getColor(srgbFill, 'fill/color/value'); const cmykColor = engine.block.getColor(cmykFill, 'fill/color/value'); const spotColor = engine.block.getColor(spotFill, 'fill/color/value'); // Convert CMYK to sRGB const cmykToRgba = engine.editor.convertColorToColorSpace( cmykColor, 'sRGB' ); console.log('CMYK converted to sRGB:', cmykToRgba); // Convert Spot color to sRGB (uses defined RGB approximation) const spotToRgba = engine.editor.convertColorToColorSpace( spotColor, 'sRGB' ); console.log('Spot color converted to sRGB:', spotToRgba); ``` When converting CMYK or spot colors to sRGB, the engine returns an `RGBAColor` object with `r`, `g`, `b`, `a` properties. The tint value from CMYK or spot colors becomes the alpha value in the returned sRGB color. ## Converting to CMYK Use `engine.editor.convertColorToColorSpace(color, 'CMYK')` to convert any color to CMYK format. This is essential for print workflows where you need to ensure colors are in the correct space before export. ```typescript highlight=highlight-convert-to-cmyk // Convert colors to CMYK for print workflows const srgbToCmyk = engine.editor.convertColorToColorSpace( srgbColor, 'CMYK' ); console.log('sRGB converted to CMYK:', srgbToCmyk); // Convert Spot color to CMYK for print output // First define CMYK approximation for the spot color engine.editor.setSpotColorCMYK('Brand Red', 0.0, 0.85, 0.9, 0.05); const spotToCmyk = engine.editor.convertColorToColorSpace( spotColor, 'CMYK' ); console.log('Spot color converted to CMYK:', spotToCmyk); ``` When converting sRGB colors to CMYK, the alpha value becomes the tint value in the returned CMYK color. For spot colors, define a CMYK approximation with `setSpotColorCMYK()` before converting. > **Note:** Color space conversions may not be perfectly reversible. Some sRGB colors cannot be exactly represented in CMYK due to different color gamuts. ## Identifying Color Types Before converting a color, you may need to identify its current color space. CE.SDK provides type guard functions to check the color type. ```typescript highlight=highlight-type-guards // Use type guards to identify color space before conversion if (isRGBAColor(srgbColor)) { console.log( 'sRGB color components:', `R: ${srgbColor.r}, G: ${srgbColor.g}, B: ${srgbColor.b}, A: ${srgbColor.a}` ); } if (isCMYKColor(cmykColor)) { console.log( 'CMYK color components:', `C: ${cmykColor.c}, M: ${cmykColor.m}, Y: ${cmykColor.y}, K: ${cmykColor.k}, Tint: ${cmykColor.tint}` ); } if (isSpotColor(spotColor)) { console.log('Spot color name:', spotColor.name, 'Tint:', spotColor.tint); } ``` Import the type guards from `@cesdk/cesdk-js`: - `isRGBAColor()` - Returns true if the color is an sRGB color - `isCMYKColor()` - Returns true if the color is a CMYK color - `isSpotColor()` - Returns true if the color is a spot color ## Handling Tint and Alpha The tint and alpha values represent transparency in different color spaces: | Source | Target | Transformation | |--------|--------|----------------| | sRGB (alpha) | CMYK | Alpha becomes tint | | CMYK (tint) | sRGB | Tint becomes alpha | | SpotColor (tint) | sRGB | Tint becomes alpha | | SpotColor (tint) | CMYK | Tint is preserved | ## Practical Use Cases ### Building a Color Picker When displaying a color value from a block in a custom color picker, convert to sRGB to show RGB values: ```typescript const fillColor = engine.block.getColor(fillId, 'fill/color/value'); const rgbaColor = engine.editor.convertColorToColorSpace(fillColor, 'sRGB'); // Display: R: ${rgbaColor.r * 255}, G: ${rgbaColor.g * 255}, B: ${rgbaColor.b * 255} ``` ### Export Preparation Before PDF export for print, verify colors are in CMYK format: ```typescript const color = engine.block.getColor(blockId, 'fill/color/value'); if (!isCMYKColor(color)) { const cmykColor = engine.editor.convertColorToColorSpace(color, 'CMYK'); // Log or display the CMYK values console.log(`C: ${cmykColor.c}, M: ${cmykColor.m}, Y: ${cmykColor.y}, K: ${cmykColor.k}`); } ``` ## Troubleshooting | Issue | Cause | Solution | |-------|-------|----------| | Spot color converts to unexpected values | Spot color not defined | Call `setSpotColorRGB()` or `setSpotColorCMYK()` before conversion | | Colors look different after conversion | Color gamut differences | Some sRGB colors cannot be exactly represented in CMYK | | Type errors with converted colors | Wrong type assumption | Use type guards (`isRGBAColor`, `isCMYKColor`, `isSpotColor`) before accessing properties | ## API Reference | Method | Description | |--------|-------------| | `engine.editor.convertColorToColorSpace(color, colorSpace)` | Convert a color to the target color space. Returns an `RGBAColor` for 'sRGB' or `CMYKColor` for 'CMYK'. | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color with an RGB approximation. Components range from 0.0 to 1.0. | | `engine.editor.setSpotColorCMYK(name, c, m, y, k)` | Define a spot color with a CMYK approximation. Components range from 0.0 to 1.0. | | Type Guard | Description | |------------|-------------| | `isRGBAColor(color)` | Returns true if the color is an `RGBAColor` object | | `isCMYKColor(color)` | Returns true if the color is a `CMYKColor` object | | `isSpotColor(color)` | Returns true if the color is a `SpotColor` object | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create a Color Palette" description: "Build reusable color palettes to maintain consistency and streamline user choices." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/create-color-palette-7012e0/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [Create a Color Palette](https://img.ly/docs/cesdk/angular/colors/create-color-palette-7012e0/) --- Build custom color palettes that appear in the CE.SDK color picker using sRGB, CMYK, and Spot colors. ![Create a Color Palette example showing custom color library in the color picker](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-create-color-palette-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-create-color-palette-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-create-color-palette-browser/) Color libraries in CE.SDK are implemented as asset sources containing individual colors as assets. Each library has a unique source ID and can include sRGB colors for screen display, CMYK colors for print workflows, and Spot colors for specialized printing applications. You configure which libraries appear in the color picker through the `'ly.img.colors'` asset library entry. ```typescript file=@cesdk_web_examples/guides-colors-create-color-palette-browser/browser.ts reference-only import type { AssetDefinition, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; // Define color assets for each color space type const colors: AssetDefinition[] = [ { id: 'brand-blue', label: { en: 'Brand Blue' }, tags: { en: ['brand', 'blue', 'primary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 } } }, { id: 'brand-coral', label: { en: 'Brand Coral' }, tags: { en: ['brand', 'coral', 'secondary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.95, g: 0.45, b: 0.4 } } }, { id: 'print-magenta', label: { en: 'Print Magenta' }, tags: { en: ['print', 'magenta', 'cmyk'] }, payload: { color: { colorSpace: 'CMYK', c: 0, m: 0.9, y: 0.2, k: 0 } } }, { id: 'metallic-gold', label: { en: 'Metallic Gold' }, tags: { en: ['spot', 'metallic', 'gold'] }, payload: { color: { colorSpace: 'SpotColor', name: 'Metallic Gold Ink', externalReference: 'Custom Inks', representation: { colorSpace: 'sRGB', r: 0.85, g: 0.65, b: 0.13 } } } } ]; 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; // Create a local asset source and add each color const sourceId = 'my-brand-colors'; engine.asset.addLocalSource(sourceId); for (const color of colors) { await engine.asset.addAssetToSource(sourceId, color); } // Set labels for the color library using i18n cesdk.i18n.setTranslations({ en: { 'libraries.my-brand-colors.label': 'Brand Colors' } }); // Configure the color picker to show custom colors first, then defaults cesdk.ui.updateAssetLibraryEntry('ly.img.color.palette', { sourceIds: ['my-brand-colors', 'ly.img.color.palette'] }); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Configure the color picker to show custom colors alongside the defaults cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['my-brand-colors', 'ly.img.color.palette'] }); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); // Set up the page with dimensions const page = engine.block.findByType('page')[0]; // Apply a soft cream background to the page fill // This complements the Brand Blue rectangle const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.98, g: 0.96, b: 0.92, a: 1.0 }); // Create a graphic block with Brand Blue from the custom palette const block = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( block, engine.block.createShape('//ly.img.ubq/shape/rect') ); const fill = engine.block.createFill('//ly.img.ubq/fill/color'); // Use Brand Blue from our custom palette engine.block.setColor(fill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }); engine.block.setFill(block, fill); engine.block.setWidth(block, 200); engine.block.setHeight(block, 200); // Center the block on the page const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); engine.block.setPositionX(block, (pageWidth - 200) / 2); engine.block.setPositionY(block, (pageHeight - 200) / 2); engine.block.appendChild(page, block); // Select the block and open the fill inspector to show the color picker engine.block.select(block); cesdk.ui.openPanel('//ly.img.panel/inspector/fill'); console.log('Create Color Palette example loaded successfully'); } } export default Example; ``` This guide covers how to define colors in different color spaces, create and configure color libraries, set custom labels, and control the display order in the color picker. ## Defining Color Assets Colors are added to libraries as `AssetDefinition` objects. Each color asset has an `id`, optional `label` and `tags` for display and search, and a `payload.color` property containing the color data. The color type determines which color space is used. ### sRGB Colors sRGB colors use the `AssetRGBColor` type with `colorSpace: 'sRGB'` and `r`, `g`, `b` components as floats from 0.0 to 1.0. Use sRGB colors for screen-based designs and web content. ```typescript highlight=highlight-definitions // Define color assets for each color space type const colors: AssetDefinition[] = [ { id: 'brand-blue', label: { en: 'Brand Blue' }, tags: { en: ['brand', 'blue', 'primary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 } } }, { id: 'brand-coral', label: { en: 'Brand Coral' }, tags: { en: ['brand', 'coral', 'secondary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.95, g: 0.45, b: 0.4 } } }, { id: 'print-magenta', label: { en: 'Print Magenta' }, tags: { en: ['print', 'magenta', 'cmyk'] }, payload: { color: { colorSpace: 'CMYK', c: 0, m: 0.9, y: 0.2, k: 0 } } }, { id: 'metallic-gold', label: { en: 'Metallic Gold' }, tags: { en: ['spot', 'metallic', 'gold'] }, payload: { color: { colorSpace: 'SpotColor', name: 'Metallic Gold Ink', externalReference: 'Custom Inks', representation: { colorSpace: 'sRGB', r: 0.85, g: 0.65, b: 0.13 } } } } ]; ``` The example defines four colors demonstrating different color spaces. The first two colors—"Brand Blue" and "Brand Coral"—use sRGB for screen display. ### CMYK Colors CMYK colors use the `AssetCMYKColor` type with `colorSpace: 'CMYK'` and `c`, `m`, `y`, `k` components as floats from 0.0 to 1.0. Use CMYK colors for print workflows where color accuracy in printing is critical. The "Print Magenta" color in the example demonstrates the CMYK color space with cyan at 0, magenta at 0.9, yellow at 0.2, and black at 0. ### Spot Colors Spot colors use the `AssetSpotColor` type with `colorSpace: 'SpotColor'`, a `name` that identifies the spot color, an `externalReference` indicating the color book or ink system, and a `representation` using sRGB or CMYK for screen preview. The "Metallic Gold" color demonstrates the spot color format, using a custom ink reference with an sRGB representation for on-screen preview. ## Creating a Color Library We create a local asset source using `engine.asset.addLocalSource()` with a unique source ID. Then we add each color asset using `engine.asset.addAssetToSource()`. ```typescript highlight=highlight-add-library // Create a local asset source and add each color const sourceId = 'my-brand-colors'; engine.asset.addLocalSource(sourceId); for (const color of colors) { await engine.asset.addAssetToSource(sourceId, color); } ``` The source ID `'my-brand-colors'` identifies this library throughout the application. You can create multiple libraries with different source IDs to organize colors by purpose—for example, separate libraries for brand colors, print colors, and seasonal palettes. ## Configuring Library Labels We set display labels for color libraries using `cesdk.i18n.setTranslations()`. Labels use the pattern `libraries..label` where `` matches the ID used when creating the source. ```typescript highlight=highlight-config-labels // Set labels for the color library using i18n cesdk.i18n.setTranslations({ en: { 'libraries.my-brand-colors.label': 'Brand Colors' } }); ``` The label "Brand Colors" appears as the section header in the color picker. You can provide translations for multiple locales by adding additional language keys to the translations object. ## Configuring the Color Picker We control which libraries appear in the color picker and their display order using `cesdk.ui.updateAssetLibraryEntry()`. The `sourceIds` array determines both visibility and order—libraries appear in the picker in the same order as the array. ```typescript highlight=highlight-config-order // Configure the color picker to show custom colors first, then defaults cesdk.ui.updateAssetLibraryEntry('ly.img.color.palette', { sourceIds: ['my-brand-colors', 'ly.img.color.palette'] }); ``` The special source ID `'ly.img.color.palette'` represents CE.SDK's built-in default color palette. Include it in the array to show the default colors alongside your custom library. Remove it from the array to hide the default palette entirely. ## Removing Colors You can remove individual colors from a library using `engine.asset.removeAssetFromSource()` with the source ID and the color's asset ID. ```typescript engine.asset.removeAssetFromSource('my-brand-colors', 'brand-blue'); ``` This removes the color from the library immediately. The color picker updates to reflect the change the next time it renders. ## Troubleshooting ### Colors Not Appearing in Picker If your colors don't appear in the color picker: - Verify the source ID is included in the `sourceIds` array passed to `updateAssetLibraryEntry()` - Check that colors were added using `addAssetToSource()` with the correct source ID - Ensure the asset source was created with `addLocalSource()` before adding colors ### Label Not Showing If the library label doesn't appear: - Verify the translation key follows the `libraries..label` pattern exactly - Check that the source ID in the translation key matches the source ID used in `addLocalSource()` - Ensure `setTranslations()` was called before the color picker renders ### Spot Color Appears Incorrect If a spot color displays incorrectly: - Check that the `representation` property contains a valid sRGB or CMYK color for screen preview - Verify the `name` property is defined and not empty - Ensure the `colorSpace` is set to `'SpotColor'` ### Wrong Library Order The order of libraries in the color picker matches the order in the `sourceIds` array. To change the order: - Reorder the source IDs in the array passed to `updateAssetLibraryEntry()` - The first source ID appears at the top of the color picker ## API Reference | Method | Description | |--------|-------------| | `engine.asset.addLocalSource(sourceId)` | Create a local asset source for colors | | `engine.asset.addAssetToSource(sourceId, asset)` | Add a color asset to a source | | `engine.asset.removeAssetFromSource(sourceId, assetId)` | Remove a color asset from a source | | `cesdk.ui.updateAssetLibraryEntry(entryId, config)` | Configure color library display order | | `cesdk.i18n.setTranslations(translations)` | Set labels for color libraries | | Type | Properties | Description | |------|------------|-------------| | `AssetRGBColor` | `colorSpace`, `r`, `g`, `b` | sRGB color for screen display | | `AssetCMYKColor` | `colorSpace`, `c`, `m`, `y`, `k` | CMYK color for print workflows | | `AssetSpotColor` | `colorSpace`, `name`, `externalReference`, `representation` | Named spot color for specialized printing | | `AssetDefinition` | `id`, `label`, `tags`, `payload` | Color asset structure with metadata | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "For Print" description: "Use print-ready color models and settings for professional-quality, production-ready exports." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/for-print-59bc05/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [For Print](https://img.ly/docs/cesdk/angular/colors/for-print-59bc05/) --- --- ## Related Pages - [CMYK Colors](https://img.ly/docs/cesdk/angular/colors/for-print/cmyk-8a1334/) - Work with CMYK colors in CE.SDK for professional print production workflows with support for color space conversion and tint control. - [Spot Colors](https://img.ly/docs/cesdk/angular/colors/for-print/spot-c3a150/) - Define, apply, and manage spot colors for professional print workflows with premixed inks. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "CMYK Colors" description: "Work with CMYK colors in CE.SDK for professional print production workflows with support for color space conversion and tint control." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/for-print/cmyk-8a1334/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [For Print](https://img.ly/docs/cesdk/angular/colors/for-print-59bc05/) > [CMYK Colors](https://img.ly/docs/cesdk/angular/colors/for-print/cmyk-8a1334/) --- Work with CMYK colors in CE.SDK for professional print production workflows with support for color space conversion and tint control. ![CMYK Colors example showing blocks with cyan, magenta, yellow, and black colors for print](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-print-cmyk-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-for-print-cmyk-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-for-print-cmyk-browser/) CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard color model for print production. Unlike RGB which is additive and designed for screens, CMYK uses subtractive color mixing to represent how inks combine on paper. CE.SDK supports CMYK colors natively, allowing you to prepare designs for professional print output while maintaining accurate color representation. ```typescript file=@cesdk_web_examples/guides-colors-for-print-cmyk-browser/browser.ts reference-only import type { CMYKColor, EditorPlugin, EditorPluginContext, RGBAColor } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; // Type guard to check if a color is CMYK // Color can be RGBAColor, CMYKColor, or SpotColor const isCMYKColor = (color: unknown): color is CMYKColor => { return ( typeof color === 'object' && color !== null && 'c' in color && 'm' in color && 'y' in color && 'k' in color ); }; /** * CE.SDK Plugin: CMYK Colors Guide * * This example demonstrates: * - Creating CMYK color values for print workflows * - Applying CMYK colors to fills, strokes, and shadows * - Using the tint property for color intensity control * - Converting between RGB and CMYK color spaces * - Checking color types with type guards */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK convenience method await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); 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 background to light gray for visibility (using CMYK) const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.04, tint: 1.0 }); // Helper function to create a graphic block with a color fill const createColorBlock = ( x: number, y: number, width: number, height: number, shape: 'rect' | 'ellipse' = 'rect' ): { block: number; fill: number } => { const block = engine.block.create('graphic'); const blockShape = engine.block.createShape(shape); engine.block.setShape(block, blockShape); engine.block.setWidth(block, width); engine.block.setHeight(block, height); engine.block.setPositionX(block, x); engine.block.setPositionY(block, y); engine.block.appendChild(page, block); const colorFill = engine.block.createFill('color'); engine.block.setFill(block, colorFill); return { block, fill: colorFill }; }; // Create CMYK color objects for print production // CMYK values range from 0.0 to 1.0 const cmykCyan: CMYKColor = { c: 1.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }; const cmykMagenta: CMYKColor = { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 1.0 }; const cmykYellow: CMYKColor = { c: 0.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }; const cmykBlack: CMYKColor = { c: 0.0, m: 0.0, y: 0.0, k: 1.0, tint: 1.0 }; // Example 1: Apply CMYK Cyan to a fill const { fill: cyanFill } = createColorBlock(50, 50, 150, 150); engine.block.setColor(cyanFill, 'fill/color/value', cmykCyan); // Example 2: Apply CMYK Magenta to a fill const { fill: magentaFill } = createColorBlock(220, 50, 150, 150); engine.block.setColor(magentaFill, 'fill/color/value', cmykMagenta); // Example 3: Apply CMYK Yellow to a fill const { fill: yellowFill } = createColorBlock(390, 50, 150, 150); engine.block.setColor(yellowFill, 'fill/color/value', cmykYellow); // Example 4: Apply CMYK Black to a fill const { fill: blackFill } = createColorBlock(560, 50, 150, 150); engine.block.setColor(blackFill, 'fill/color/value', cmykBlack); // Example 5: Use tint for partial color intensity // Tint of 0.5 gives 50% color intensity const cmykHalfMagenta: CMYKColor = { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 0.5 }; const { fill: tintedFill } = createColorBlock(50, 220, 150, 150, 'ellipse'); engine.block.setColor(tintedFill, 'fill/color/value', cmykHalfMagenta); // Example 6: Apply CMYK color to stroke const { block: strokeBlock, fill: strokeBlockFill } = createColorBlock( 220, 220, 150, 150 ); // Set fill to white (using CMYK) engine.block.setColor(strokeBlockFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }); // Enable stroke and set CMYK color engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 8); const cmykStrokeColor: CMYKColor = { c: 0.8, m: 0.2, y: 0.0, k: 0.1, tint: 1.0 }; engine.block.setColor(strokeBlock, 'stroke/color', cmykStrokeColor); // Example 7: Apply CMYK color to drop shadow const { block: shadowBlock, fill: shadowBlockFill } = createColorBlock( 390, 220, 150, 150 ); // Set fill to light gray (using CMYK) engine.block.setColor(shadowBlockFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.05, tint: 1.0 }); // Enable drop shadow and set CMYK color engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowOffsetX(shadowBlock, 10); engine.block.setDropShadowOffsetY(shadowBlock, 10); engine.block.setDropShadowBlurRadiusX(shadowBlock, 15); engine.block.setDropShadowBlurRadiusY(shadowBlock, 15); const cmykShadowColor: CMYKColor = { c: 0.0, m: 0.0, y: 0.0, k: 0.6, tint: 0.8 }; engine.block.setColor(shadowBlock, 'dropShadow/color', cmykShadowColor); // Example 8: Read CMYK color from a block const { fill: readFill } = createColorBlock(560, 220, 150, 150, 'ellipse'); const cmykOrange: CMYKColor = { c: 0.0, m: 0.5, y: 1.0, k: 0.0, tint: 1.0 }; engine.block.setColor(readFill, 'fill/color/value', cmykOrange); // Retrieve and check the color const retrievedColor = engine.block.getColor(readFill, 'fill/color/value'); if (isCMYKColor(retrievedColor)) { // eslint-disable-next-line no-console console.log( `CMYK Color - C: ${retrievedColor.c}, M: ${retrievedColor.m}, Y: ${retrievedColor.y}, K: ${retrievedColor.k}, Tint: ${retrievedColor.tint}` ); } // Example 9: Convert RGB to CMYK const rgbBlue: RGBAColor = { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }; const convertedCmyk = engine.editor.convertColorToColorSpace( rgbBlue, 'CMYK' ); const { fill: convertedFill } = createColorBlock(50, 390, 150, 150); engine.block.setColor(convertedFill, 'fill/color/value', convertedCmyk); // eslint-disable-next-line no-console console.log('RGB to CMYK conversion:', convertedCmyk); // Example 10: Convert CMYK to RGB (for demonstration) const cmykGreen: CMYKColor = { c: 0.7, m: 0.0, y: 1.0, k: 0.2, tint: 1.0 }; const convertedRgb = engine.editor.convertColorToColorSpace( cmykGreen, 'sRGB' ); // eslint-disable-next-line no-console console.log('CMYK to RGB conversion:', convertedRgb); // Display using original CMYK color const { fill: previewFill } = createColorBlock(220, 390, 150, 150); engine.block.setColor(previewFill, 'fill/color/value', cmykGreen); // Example 11: Use CMYK colors in gradients const gradientBlock = engine.block.create('graphic'); const gradientShape = engine.block.createShape('rect'); engine.block.setShape(gradientBlock, gradientShape); engine.block.setWidth(gradientBlock, 320); engine.block.setHeight(gradientBlock, 150); engine.block.setPositionX(gradientBlock, 390); engine.block.setPositionY(gradientBlock, 390); engine.block.appendChild(page, gradientBlock); const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setFill(gradientBlock, gradientFill); // Set gradient stops with CMYK colors engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { c: 1.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }, stop: 0 }, { color: { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 1.0 }, stop: 0.5 }, { color: { c: 0.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 1 } ]); // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide covers how to create CMYK color values, apply them to fills, strokes, and shadows, use the tint property for color intensity control, and convert between color spaces. ## Understanding CMYK Colors ### When to Use CMYK Use CMYK colors when preparing designs for commercial printing or when print service providers require CMYK values. Screen displays convert CMYK to RGB for preview, but exported PDFs retain the original CMYK values for accurate print reproduction. CMYK colors in CE.SDK have five properties: - `c` (Cyan): 0.0 to 1.0 - `m` (Magenta): 0.0 to 1.0 - `y` (Yellow): 0.0 to 1.0 - `k` (Key/Black): 0.0 to 1.0 - `tint`: 0.0 to 1.0 (controls overall color intensity) ## Creating CMYK Colors Create CMYK color objects using the `CMYKColor` interface. All component values range from 0.0 to 1.0: ```typescript highlight-create-cmyk // Create CMYK color objects for print production // CMYK values range from 0.0 to 1.0 const cmykCyan: CMYKColor = { c: 1.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }; const cmykMagenta: CMYKColor = { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 1.0 }; const cmykYellow: CMYKColor = { c: 0.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }; const cmykBlack: CMYKColor = { c: 0.0, m: 0.0, y: 0.0, k: 1.0, tint: 1.0 }; ``` The tint property acts as a multiplier for the entire color—a tint of 1.0 applies the full color, while 0.5 applies 50% intensity. ## Applying CMYK Colors to Fills Apply CMYK colors to color fills using `engine.block.setColor()`. First create a color fill with `engine.block.createFill('color')`, then set its color value: ```typescript highlight-apply-fill // Example 1: Apply CMYK Cyan to a fill const { fill: cyanFill } = createColorBlock(50, 50, 150, 150); engine.block.setColor(cyanFill, 'fill/color/value', cmykCyan); ``` The same method works for any color type—RGBA, CMYK, or SpotColor. CE.SDK automatically handles the color representation internally. ## Using the Tint Property The tint property provides fine-grained control over color intensity without modifying the base CMYK values. This is useful for creating lighter variations of a color: ```typescript highlight-tint // Example 5: Use tint for partial color intensity // Tint of 0.5 gives 50% color intensity const cmykHalfMagenta: CMYKColor = { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 0.5 }; const { fill: tintedFill } = createColorBlock(50, 220, 150, 150, 'ellipse'); engine.block.setColor(tintedFill, 'fill/color/value', cmykHalfMagenta); ``` A tint of 0.5 creates a 50% lighter version of the color, useful for secondary elements or subtle backgrounds. ## Applying CMYK to Strokes Apply CMYK colors to strokes using the `stroke/color` property path: ```typescript highlight-stroke // Example 6: Apply CMYK color to stroke const { block: strokeBlock, fill: strokeBlockFill } = createColorBlock( 220, 220, 150, 150 ); // Set fill to white (using CMYK) engine.block.setColor(strokeBlockFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }); // Enable stroke and set CMYK color engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 8); const cmykStrokeColor: CMYKColor = { c: 0.8, m: 0.2, y: 0.0, k: 0.1, tint: 1.0 }; engine.block.setColor(strokeBlock, 'stroke/color', cmykStrokeColor); ``` Enable the stroke first with `setStrokeEnabled()`, set the stroke width, then apply the CMYK color. ## Applying CMYK to Drop Shadows Apply CMYK colors to drop shadows using the `dropShadow/color` property path: ```typescript highlight-shadow // Example 7: Apply CMYK color to drop shadow const { block: shadowBlock, fill: shadowBlockFill } = createColorBlock( 390, 220, 150, 150 ); // Set fill to light gray (using CMYK) engine.block.setColor(shadowBlockFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.05, tint: 1.0 }); // Enable drop shadow and set CMYK color engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowOffsetX(shadowBlock, 10); engine.block.setDropShadowOffsetY(shadowBlock, 10); engine.block.setDropShadowBlurRadiusX(shadowBlock, 15); engine.block.setDropShadowBlurRadiusY(shadowBlock, 15); const cmykShadowColor: CMYKColor = { c: 0.0, m: 0.0, y: 0.0, k: 0.6, tint: 0.8 }; engine.block.setColor(shadowBlock, 'dropShadow/color', cmykShadowColor); ``` Enable the drop shadow first, configure its offset and blur radius, then apply the CMYK color. ## Reading CMYK Colors Retrieve color values from blocks using `engine.block.getColor()`. The returned color could be RGBA, CMYK, or SpotColor, so use the `isCMYKColor()` type guard to check: ```typescript highlight-read-color // Example 8: Read CMYK color from a block const { fill: readFill } = createColorBlock(560, 220, 150, 150, 'ellipse'); const cmykOrange: CMYKColor = { c: 0.0, m: 0.5, y: 1.0, k: 0.0, tint: 1.0 }; engine.block.setColor(readFill, 'fill/color/value', cmykOrange); // Retrieve and check the color const retrievedColor = engine.block.getColor(readFill, 'fill/color/value'); if (isCMYKColor(retrievedColor)) { // eslint-disable-next-line no-console console.log( `CMYK Color - C: ${retrievedColor.c}, M: ${retrievedColor.m}, Y: ${retrievedColor.y}, K: ${retrievedColor.k}, Tint: ${retrievedColor.tint}` ); } ``` The `isCMYKColor()` type guard checks if a color has the CMYK properties (`c`, `m`, `y`, `k`). ## Converting Between Color Spaces Use `engine.editor.convertColorToColorSpace()` to convert colors between 'sRGB' and 'CMYK': ```typescript highlight-convert // Example 9: Convert RGB to CMYK const rgbBlue: RGBAColor = { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }; const convertedCmyk = engine.editor.convertColorToColorSpace( rgbBlue, 'CMYK' ); const { fill: convertedFill } = createColorBlock(50, 390, 150, 150); engine.block.setColor(convertedFill, 'fill/color/value', convertedCmyk); // eslint-disable-next-line no-console console.log('RGB to CMYK conversion:', convertedCmyk); // Example 10: Convert CMYK to RGB (for demonstration) const cmykGreen: CMYKColor = { c: 0.7, m: 0.0, y: 1.0, k: 0.2, tint: 1.0 }; const convertedRgb = engine.editor.convertColorToColorSpace( cmykGreen, 'sRGB' ); // eslint-disable-next-line no-console console.log('CMYK to RGB conversion:', convertedRgb); // Display using original CMYK color const { fill: previewFill } = createColorBlock(220, 390, 150, 150); engine.block.setColor(previewFill, 'fill/color/value', cmykGreen); ``` Note that color conversions may not be perfectly reversible due to differences in color gamuts between RGB and CMYK. Some RGB colors cannot be accurately represented in CMYK and vice versa. ## Using CMYK in Gradients CMYK colors work in gradient color stops. Create a gradient fill and set stops using `engine.block.setGradientColorStops()`: ```typescript highlight-gradient // Example 11: Use CMYK colors in gradients const gradientBlock = engine.block.create('graphic'); const gradientShape = engine.block.createShape('rect'); engine.block.setShape(gradientBlock, gradientShape); engine.block.setWidth(gradientBlock, 320); engine.block.setHeight(gradientBlock, 150); engine.block.setPositionX(gradientBlock, 390); engine.block.setPositionY(gradientBlock, 390); engine.block.appendChild(page, gradientBlock); const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setFill(gradientBlock, gradientFill); // Set gradient stops with CMYK colors engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { c: 1.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }, stop: 0 }, { color: { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 1.0 }, stop: 0.5 }, { color: { c: 0.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 1 } ]); ``` This creates a gradient transitioning through the primary CMYK colors—cyan, magenta, and yellow. ## Troubleshooting ### Colors Look Different on Screen vs Print Screen displays convert CMYK to RGB for preview. The exported PDF retains original CMYK values. For accurate color preview, use calibrated monitors and proof prints. ### Tint Not Having Expected Effect Ensure the tint value is between 0 and 1. A tint of 0 makes the color fully transparent, while 1 applies full intensity. ### Type Guard Returns False Make sure you're checking a `Color` value returned from `engine.block.getColor()`. The `isCMYKColor()` function only works with color values, not arbitrary objects. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.setColor()` | Set a color property value | | `engine.block.getColor()` | Get a color property from a block | | `engine.editor.convertColorToColorSpace()` | Convert color to a different color space | | `engine.block.createFill()` | Create a color fill | | `engine.block.setFill()` | Assign a fill to a block | | `engine.block.getFill()` | Get the fill from a block | | `engine.block.setGradientColorStops()` | Set gradient color stops | | `isCMYKColor()` | Check if a color is CMYK | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Spot Colors" description: "Define, apply, and manage spot colors for professional print workflows with premixed inks." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/for-print/spot-c3a150/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [For Print](https://img.ly/docs/cesdk/angular/colors/for-print-59bc05/) > [Spot Colors](https://img.ly/docs/cesdk/angular/colors/for-print/spot-c3a150/) --- Define and manage spot colors programmatically for professional print workflows with exact color matching through premixed inks. ![Spot Colors example showing blocks with various spot color fills and tints](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-print-spot-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-for-print-spot-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-for-print-spot-browser/) Spot colors are named colors reproduced using premixed inks in print production, providing exact color matching that CMYK process colors cannot guarantee. CE.SDK maintains a registry of spot color definitions at the editor level, where each spot color has a name and screen approximations (RGB and/or CMYK) for display purposes. The actual premixed ink is used during printing based on the color name. ```typescript file=@cesdk_web_examples/guides-colors-for-print-spot-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext, SpotColor } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; // Type guard to check if a color is a SpotColor // Color can be RGBAColor, CMYKColor, or SpotColor const isSpotColor = (color: unknown): color is SpotColor => { return ( typeof color === 'object' && color !== null && 'name' in color && 'tint' in color && 'externalReference' in color ); }; /** * CE.SDK Plugin: Spot Colors Guide * * This example demonstrates: * - Defining spot colors with RGB and CMYK approximations * - Applying spot colors to fills, strokes, and shadows * - Using tints for lighter color variations * - Querying and updating spot color definitions * - Removing spot colors and handling the magenta fallback * - Assigning spot colors to cutout types */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK convenience method await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); 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 background to light gray for visibility 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 }); // Helper function to create a graphic block with a color fill const createColorBlock = ( x: number, y: number, width: number, height: number, shape: 'rect' | 'ellipse' = 'rect' ): { block: number; fill: number } => { const block = engine.block.create('graphic'); const blockShape = engine.block.createShape(shape); engine.block.setShape(block, blockShape); engine.block.setWidth(block, width); engine.block.setHeight(block, height); engine.block.setPositionX(block, x); engine.block.setPositionY(block, y); engine.block.appendChild(page, block); const colorFill = engine.block.createFill('color'); engine.block.setFill(block, colorFill); return { block, fill: colorFill }; }; // Define a spot color with RGB approximation // RGB values range from 0.0 to 1.0 engine.editor.setSpotColorRGB('Brand-Primary', 0.8, 0.1, 0.2); // Add CMYK approximation for the same spot color // This provides print-accurate preview in addition to screen display engine.editor.setSpotColorCMYK('Brand-Primary', 0.05, 0.95, 0.85, 0.0); // Define another spot color with both approximations engine.editor.setSpotColorRGB('Brand-Accent', 0.2, 0.4, 0.8); engine.editor.setSpotColorCMYK('Brand-Accent', 0.75, 0.5, 0.0, 0.0); // Apply spot colors to fills using SpotColor objects // The tint property (0.0 to 1.0) controls color intensity // The externalReference field stores metadata like color system origin const brandPrimary: SpotColor = { name: 'Brand-Primary', tint: 1.0, externalReference: '' }; // Create a block and apply the Brand-Primary spot color const { fill: primaryFill } = createColorBlock(50, 50, 150, 150); engine.block.setColor(primaryFill, 'fill/color/value', brandPrimary); // Apply Brand-Accent to another block const brandAccent: SpotColor = { name: 'Brand-Accent', tint: 1.0, externalReference: '' }; const { fill: accentFill } = createColorBlock(220, 50, 150, 150); engine.block.setColor(accentFill, 'fill/color/value', brandAccent); // Use tints for lighter variations without defining new spot colors // Tint of 0.5 gives 50% color intensity const brandPrimaryHalfTint: SpotColor = { name: 'Brand-Primary', tint: 0.5, externalReference: '' }; const { fill: tintedFill } = createColorBlock(390, 50, 150, 150, 'ellipse'); engine.block.setColor(tintedFill, 'fill/color/value', brandPrimaryHalfTint); // Create a gradient of tints const brandAccentLightTint: SpotColor = { name: 'Brand-Accent', tint: 0.3, externalReference: '' }; const { fill: lightTintFill } = createColorBlock(560, 50, 150, 150); engine.block.setColor( lightTintFill, 'fill/color/value', brandAccentLightTint ); // Apply spot colors to strokes and shadows const { block: strokeBlock, fill: strokeBlockFill } = createColorBlock( 50, 220, 150, 150 ); // Set fill to white engine.block.setColor(strokeBlockFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Enable stroke and apply spot color engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 8); const strokeColor: SpotColor = { name: 'Brand-Primary', tint: 1.0, externalReference: '' }; engine.block.setColor(strokeBlock, 'stroke/color', strokeColor); // Apply spot color to drop shadow const { block: shadowBlock, fill: shadowBlockFill } = createColorBlock( 220, 220, 150, 150 ); engine.block.setColor(shadowBlockFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowOffsetX(shadowBlock, 10); engine.block.setDropShadowOffsetY(shadowBlock, 10); engine.block.setDropShadowBlurRadiusX(shadowBlock, 15); engine.block.setDropShadowBlurRadiusY(shadowBlock, 15); const shadowColor: SpotColor = { name: 'Brand-Accent', tint: 0.8, externalReference: '' }; engine.block.setColor(shadowBlock, 'dropShadow/color', shadowColor); // Query all defined spot colors const spotColors = engine.editor.findAllSpotColors(); // eslint-disable-next-line no-console console.log('Defined spot colors:', spotColors); // Query RGB approximation for a spot color const rgbaApprox = engine.editor.getSpotColorRGBA('Brand-Primary'); // eslint-disable-next-line no-console console.log('Brand-Primary RGB approximation:', rgbaApprox); // Query CMYK approximation for a spot color const cmykApprox = engine.editor.getSpotColorCMYK('Brand-Primary'); // eslint-disable-next-line no-console console.log('Brand-Primary CMYK approximation:', cmykApprox); // Read back the color from a block and check if it's a spot color const retrievedColor = engine.block.getColor( primaryFill, 'fill/color/value' ); if (isSpotColor(retrievedColor)) { // eslint-disable-next-line no-console console.log( `Retrieved SpotColor - Name: ${retrievedColor.name}, Tint: ${retrievedColor.tint}` ); } // Update an existing spot color's approximation // This changes how the color appears on screen without affecting the color name engine.editor.setSpotColorRGB('Brand-Accent', 0.3, 0.5, 0.9); // eslint-disable-next-line no-console console.log('Updated Brand-Accent RGB approximation'); // Show the updated color in a new block const { fill: updatedFill } = createColorBlock(390, 220, 150, 150); const updatedAccent: SpotColor = { name: 'Brand-Accent', tint: 1.0, externalReference: '' }; engine.block.setColor(updatedFill, 'fill/color/value', updatedAccent); // Define a temporary spot color engine.editor.setSpotColorRGB('Temporary-Color', 0.5, 0.8, 0.3); // Create a block using the temporary color const { fill: tempFill } = createColorBlock(560, 220, 150, 150); const tempColor: SpotColor = { name: 'Temporary-Color', tint: 1.0, externalReference: '' }; engine.block.setColor(tempFill, 'fill/color/value', tempColor); // Remove the spot color definition // Blocks using this color will display magenta (default fallback) engine.editor.removeSpotColor('Temporary-Color'); // eslint-disable-next-line no-console console.log('Removed Temporary-Color - block now shows magenta fallback'); // Verify the color is no longer defined const remainingSpotColors = engine.editor.findAllSpotColors(); // eslint-disable-next-line no-console console.log('Remaining spot colors:', remainingSpotColors); // Assign spot colors to cutout types for die-cutting operations // First define a spot color for the die line engine.editor.setSpotColorRGB('DieLine', 1.0, 0.0, 1.0); engine.editor.setSpotColorCMYK('DieLine', 0.0, 1.0, 0.0, 0.0); // Associate the spot color with a cutout type // CutoutType can be 'Solid' or 'Dashed' engine.editor.setSpotColorForCutoutType('Solid', 'DieLine'); // Query the assigned spot color const cutoutSpotColor = engine.editor.getSpotColorForCutoutType('Solid'); // eslint-disable-next-line no-console console.log('Cutout type Solid uses spot color:', cutoutSpotColor); // Create a legend block with text const textBlock = engine.block.create('text'); engine.block.replaceText(textBlock, 'Spot Colors Demo'); engine.block.setTextFontSize(textBlock, 36); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setPositionX(textBlock, 50); engine.block.setPositionY(textBlock, 400); engine.block.appendChild(page, textBlock); // Create smaller label texts const labels = [ { text: 'Brand-Primary', x: 50, y: 205 }, { text: 'Brand-Accent', x: 220, y: 205 }, { text: 'Primary 50%', x: 390, y: 205 }, { text: 'Accent 30%', x: 560, y: 205 }, { text: 'Stroke', x: 50, y: 375 }, { text: 'Shadow', x: 220, y: 375 }, { text: 'Updated', x: 390, y: 375 }, { text: 'Removed', x: 560, y: 375 } ]; for (const label of labels) { const labelBlock = engine.block.create('text'); engine.block.replaceText(labelBlock, label.text); engine.block.setTextFontSize(labelBlock, 14); engine.block.setWidthMode(labelBlock, 'Auto'); engine.block.setHeightMode(labelBlock, 'Auto'); engine.block.setPositionX(labelBlock, label.x); engine.block.setPositionY(labelBlock, label.y); engine.block.appendChild(page, labelBlock); } // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide covers how to define spot colors with RGB and CMYK approximations, apply them to design elements with varying tints, query and update definitions, and assign spot colors to cutout types for die-cutting operations. ## Understanding Spot Colors Spot colors differ from CMYK process colors in several important ways: - **Exact color matching** - Premixed inks guarantee consistent color reproduction across print runs - **Brand consistency** - Essential for logos and corporate brand colors - **Specialty effects** - Enable metallic, fluorescent, and other specialty inks - **Color gamut** - Some colors are unreproducible with CMYK process inks In CE.SDK, spot colors have three components: - **Name** - The identifier used in print output (e.g., "Brand-Red-485") - **Approximations** - RGB and/or CMYK values for screen display - **Tint** - A value from 0.0 to 1.0 controlling color intensity ## Define Spot Colors ### RGB Approximation We register spot colors using `engine.editor.setSpotColorRGB()`. This creates a new spot color if the name doesn't exist, or updates the approximation if it does. ```typescript highlight-define-spot-rgb // Define a spot color with RGB approximation // RGB values range from 0.0 to 1.0 engine.editor.setSpotColorRGB('Brand-Primary', 0.8, 0.1, 0.2); ``` RGB approximations display the spot color on screen during editing. The values range from 0.0 to 1.0 for each channel. ### CMYK Approximation We can add a CMYK approximation using `engine.editor.setSpotColorCMYK()`. This provides print-accurate previews alongside the RGB screen display. ```typescript highlight-define-spot-cmyk // Add CMYK approximation for the same spot color // This provides print-accurate preview in addition to screen display engine.editor.setSpotColorCMYK('Brand-Primary', 0.05, 0.95, 0.85, 0.0); // Define another spot color with both approximations engine.editor.setSpotColorRGB('Brand-Accent', 0.2, 0.4, 0.8); engine.editor.setSpotColorCMYK('Brand-Accent', 0.75, 0.5, 0.0, 0.0); ``` For best results, provide both RGB and CMYK approximations for each spot color. RGB displays on screen while CMYK enables accurate print preview. ## Apply Spot Colors to Design Elements We apply spot colors to blocks using `engine.block.setColor()` with a SpotColor object containing `name`, `tint`, and `externalReference`. ```typescript highlight-apply-spot-fill // Apply spot colors to fills using SpotColor objects // The tint property (0.0 to 1.0) controls color intensity // The externalReference field stores metadata like color system origin const brandPrimary: SpotColor = { name: 'Brand-Primary', tint: 1.0, externalReference: '' }; // Create a block and apply the Brand-Primary spot color const { fill: primaryFill } = createColorBlock(50, 50, 150, 150); engine.block.setColor(primaryFill, 'fill/color/value', brandPrimary); ``` The SpotColor object has these properties: - **name** - Must match a defined spot color exactly (case-sensitive) - **tint** - Controls intensity from 0.0 (transparent) to 1.0 (full strength) - **externalReference** - Optional metadata identifying the color system origin (e.g., your in-house brand palette or a print vendor's spot-color library) > **Note:** The spot color must be defined before applying it to blocks. Undefined spot colors display as magenta—the default fallback color. ### Using Tints Tints create lighter variations without defining separate spot colors for each shade. A tint of 0.5 gives 50% color intensity. ```typescript highlight-tint // Use tints for lighter variations without defining new spot colors // Tint of 0.5 gives 50% color intensity const brandPrimaryHalfTint: SpotColor = { name: 'Brand-Primary', tint: 0.5, externalReference: '' }; const { fill: tintedFill } = createColorBlock(390, 50, 150, 150, 'ellipse'); engine.block.setColor(tintedFill, 'fill/color/value', brandPrimaryHalfTint); // Create a gradient of tints const brandAccentLightTint: SpotColor = { name: 'Brand-Accent', tint: 0.3, externalReference: '' }; const { fill: lightTintFill } = createColorBlock(560, 50, 150, 150); engine.block.setColor( lightTintFill, 'fill/color/value', brandAccentLightTint ); ``` Use tints for: - Color variations in design systems - Lighter backgrounds using brand colors - Gradient-like effects with consistent spot color names ### Strokes and Shadows Spot colors work with any color property, including strokes and drop shadows. ```typescript highlight-stroke-shadow // Apply spot colors to strokes and shadows const { block: strokeBlock, fill: strokeBlockFill } = createColorBlock( 50, 220, 150, 150 ); // Set fill to white engine.block.setColor(strokeBlockFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Enable stroke and apply spot color engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 8); const strokeColor: SpotColor = { name: 'Brand-Primary', tint: 1.0, externalReference: '' }; engine.block.setColor(strokeBlock, 'stroke/color', strokeColor); // Apply spot color to drop shadow const { block: shadowBlock, fill: shadowBlockFill } = createColorBlock( 220, 220, 150, 150 ); engine.block.setColor(shadowBlockFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowOffsetX(shadowBlock, 10); engine.block.setDropShadowOffsetY(shadowBlock, 10); engine.block.setDropShadowBlurRadiusX(shadowBlock, 15); engine.block.setDropShadowBlurRadiusY(shadowBlock, 15); const shadowColor: SpotColor = { name: 'Brand-Accent', tint: 0.8, externalReference: '' }; engine.block.setColor(shadowBlock, 'dropShadow/color', shadowColor); ``` The `stroke/color` and `dropShadow/color` properties accept the same SpotColor objects as fill colors. ## Query Spot Color Definitions ### List Defined Spot Colors We retrieve all defined spot colors with `engine.editor.findAllSpotColors()`. ```typescript highlight-query-spot // Query all defined spot colors const spotColors = engine.editor.findAllSpotColors(); // eslint-disable-next-line no-console console.log('Defined spot colors:', spotColors); // Query RGB approximation for a spot color const rgbaApprox = engine.editor.getSpotColorRGBA('Brand-Primary'); // eslint-disable-next-line no-console console.log('Brand-Primary RGB approximation:', rgbaApprox); // Query CMYK approximation for a spot color const cmykApprox = engine.editor.getSpotColorCMYK('Brand-Primary'); // eslint-disable-next-line no-console console.log('Brand-Primary CMYK approximation:', cmykApprox); // Read back the color from a block and check if it's a spot color const retrievedColor = engine.block.getColor( primaryFill, 'fill/color/value' ); if (isSpotColor(retrievedColor)) { // eslint-disable-next-line no-console console.log( `Retrieved SpotColor - Name: ${retrievedColor.name}, Tint: ${retrievedColor.tint}` ); } ``` This returns an array of spot color names currently registered in the editor. ### Get Color Approximations Query individual color approximations with `engine.editor.getSpotColorRGBA()` or `engine.editor.getSpotColorCMYK()`. Querying an undefined spot color returns magenta values—use this to detect missing definitions. ### Read Colors from Blocks When reading a color back from a block, `engine.block.getColor()` can return an `RGBAColor`, `CMYKColor`, or `SpotColor`. Use a type guard to check if it's a SpotColor: ```typescript const isSpotColor = (color: unknown): color is SpotColor => { return ( typeof color === 'object' && color !== null && 'name' in color && 'tint' in color && 'externalReference' in color ); }; const retrievedColor = engine.block.getColor(fill, 'fill/color/value'); if (isSpotColor(retrievedColor)) { console.log(`Name: ${retrievedColor.name}, Tint: ${retrievedColor.tint}`); } ``` ## Update and Remove Spot Colors ### Update Approximations We update spot colors by calling the set methods again with the same name. This changes how the color appears on screen without affecting the color name in the print output. ```typescript highlight-update-spot // Update an existing spot color's approximation // This changes how the color appears on screen without affecting the color name engine.editor.setSpotColorRGB('Brand-Accent', 0.3, 0.5, 0.9); // eslint-disable-next-line no-console console.log('Updated Brand-Accent RGB approximation'); // Show the updated color in a new block const { fill: updatedFill } = createColorBlock(390, 220, 150, 150); const updatedAccent: SpotColor = { name: 'Brand-Accent', tint: 1.0, externalReference: '' }; engine.block.setColor(updatedFill, 'fill/color/value', updatedAccent); ``` Existing blocks using that spot color automatically reflect the updated approximation. ### Remove Spot Colors We remove spot colors with `engine.editor.removeSpotColor()` when they're no longer needed. ```typescript highlight-remove-spot // Define a temporary spot color engine.editor.setSpotColorRGB('Temporary-Color', 0.5, 0.8, 0.3); // Create a block using the temporary color const { fill: tempFill } = createColorBlock(560, 220, 150, 150); const tempColor: SpotColor = { name: 'Temporary-Color', tint: 1.0, externalReference: '' }; engine.block.setColor(tempFill, 'fill/color/value', tempColor); // Remove the spot color definition // Blocks using this color will display magenta (default fallback) engine.editor.removeSpotColor('Temporary-Color'); // eslint-disable-next-line no-console console.log('Removed Temporary-Color - block now shows magenta fallback'); // Verify the color is no longer defined const remainingSpotColors = engine.editor.findAllSpotColors(); // eslint-disable-next-line no-console console.log('Remaining spot colors:', remainingSpotColors); ``` Removing a spot color doesn't affect blocks already using it—they display magenta until redefined or until you apply a different color. ## Spot Colors for Cutouts CE.SDK supports assigning spot colors to cutout types for die-cutting, embossing, and other print finishing operations. ```typescript highlight-cutout // Assign spot colors to cutout types for die-cutting operations // First define a spot color for the die line engine.editor.setSpotColorRGB('DieLine', 1.0, 0.0, 1.0); engine.editor.setSpotColorCMYK('DieLine', 0.0, 1.0, 0.0, 0.0); // Associate the spot color with a cutout type // CutoutType can be 'Solid' or 'Dashed' engine.editor.setSpotColorForCutoutType('Solid', 'DieLine'); // Query the assigned spot color const cutoutSpotColor = engine.editor.getSpotColorForCutoutType('Solid'); // eslint-disable-next-line no-console console.log('Cutout type Solid uses spot color:', cutoutSpotColor); ``` Use `engine.editor.setSpotColorForCutoutType()` to associate a spot color with a specific cutout type. Available cutout types are `'Solid'` and `'Dashed'`, representing different die-line styles used in print finishing. All cutout blocks of that type automatically use the assigned spot color in the output. Query the assignment with `engine.editor.getSpotColorForCutoutType()`. ## Best Practices **Define early** - Register spot colors at initialization before applying them to blocks. Undefined colors display as magenta, which can confuse users. **Use descriptive names** - Match your print vendor's reference (e.g., "Brand-Red-485") to ensure correct ink matching in production. **Provide both approximations** - RGB for screen display, CMYK for print-accurate previews. This gives designers the best experience across different workflows. **Use tints sparingly** - Prefer tints (0.0-1.0) for lighter variations rather than defining separate spot colors for each shade. This keeps your spot color list manageable. **Validate before export** - Query `findAllSpotColors()` to verify all expected spot colors are defined before exporting for print. ## Troubleshooting ### Spot Color Displays as Magenta The spot color hasn't been defined. Call `setSpotColorRGB()` or `setSpotColorCMYK()` with the color name before applying it to blocks. ### Color Approximation Looks Wrong Update the approximation values using `setSpotColorRGB()` or `setSpotColorCMYK()`. Remember that RGB values are for screen display while CMYK values are for print preview. ### Spot Color Not in Output Verify the spot color name matches exactly (names are case-sensitive). Check that the block is using a SpotColor object, not an RGB or CMYK color value. ### Can't Remove Spot Color Ensure you're using the exact name string. Note that removing a spot color doesn't update existing blocks—they'll show magenta until redefined or replaced with a different color. ## API Reference | Method | Description | | ------------------------------------------------- | ------------------------------------------------ | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define/update spot color with RGB approximation | | `engine.editor.setSpotColorCMYK(name, c, m, y, k)` | Define/update spot color with CMYK approximation | | `engine.editor.findAllSpotColors()` | Get array of all defined spot color names | | `engine.editor.getSpotColorRGBA(name)` | Query RGB approximation for a spot color | | `engine.editor.getSpotColorCMYK(name)` | Query CMYK approximation for a spot color | | `engine.editor.removeSpotColor(name)` | Remove a spot color from the registry | | `engine.editor.setSpotColorForCutoutType(type, color)` | Assign spot color to a cutout type | | `engine.editor.getSpotColorForCutoutType(type)` | Get spot color assigned to a cutout type | | `engine.block.setColor(block, property, color)` | Apply color (including SpotColor) to a property | | `engine.block.getColor(block, property)` | Read color from a block property | ## Next Steps - [Export for Printing](https://img.ly/docs/cesdk/angular/export-save-publish/for-printing-bca896/) - Export designs with spot colors for professional print production - [Apply Colors](https://img.ly/docs/cesdk/angular/colors/apply-2211e3/) - Apply colors to fills, strokes, and shadows - [CMYK Colors](https://img.ly/docs/cesdk/angular/colors/for-print/cmyk-8a1334/) - Work with CMYK process colors --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "For Screen" description: "Documentation for For Screen" platform: angular url: "https://img.ly/docs/cesdk/angular/colors/for-screen-1911f8/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [For Screen](https://img.ly/docs/cesdk/angular/colors/for-screen-1911f8/) --- --- ## Related Pages - [sRGB Colors](https://img.ly/docs/cesdk/angular/colors/for-screen/srgb-e6f59b/) - Work with sRGB colors for screen-based designs including creating RGBA colors, applying them to design elements, and converting from other color spaces. - [P3 Colors](https://img.ly/docs/cesdk/angular/colors/for-screen/p3-706127/) - Understand the P3 wide color gamut, its platform availability in CE.SDK, and alternatives for Web development. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "P3 Colors" description: "Understand the P3 wide color gamut, its platform availability in CE.SDK, and alternatives for Web development." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/for-screen/p3-706127/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [For Screen](https://img.ly/docs/cesdk/angular/colors/for-screen-1911f8/) > [P3 Colors](https://img.ly/docs/cesdk/angular/colors/for-screen/p3-706127/) --- Understand the P3 wide color gamut and its availability across CE.SDK platforms. > **Not Available on Web:** P3 colors are not currently supported on Web platforms. Use [sRGB colors](https://img.ly/docs/cesdk/angular/colors/for-screen/srgb-e6f59b/) instead. P3 enables more vibrant reds, greens, and other colors beyond the standard sRGB gamut. This is valuable for displays that support the DCI-P3 color space, including modern Apple devices and high-end monitors. ## What is P3? The DCI-P3 color space was developed for digital cinema and has been widely adopted in consumer displays, particularly by Apple since 2016. P3 covers roughly 25% more visible colors than sRGB, especially in the red, orange, and green-cyan regions. Key differences from sRGB: - **Gamut size**: P3 encompasses a larger color range - **Primary colors**: P3 red and green are more saturated - **Backwards compatibility**: P3 content on sRGB displays is automatically converted P3 colors only appear more vibrant on P3-capable displays. On sRGB displays, colors are converted and may appear less saturated. ## Platform Support **Supported platforms:** - **Android**: `supportsP3()` and `checkP3Support()` APIs - **iOS/Swift**: `supportsP3()` and `checkP3Support()` APIs **Not supported:** - Browser - Server (Node.js) On Web platforms, CE.SDK uses sRGB as the working color space. The Web binding supports sRGB, CMYK, and Spot Colors. ## P3 vs sRGB: When to Use Each | Use Case | Recommended | | --- | --- | | Native mobile apps (Apple devices) | P3 | | Photo/video editing with color accuracy | P3 | | Web applications | sRGB | | Cross-platform consistency | sRGB | ## Next Steps - [sRGB Colors](https://img.ly/docs/cesdk/angular/colors/for-screen/srgb-e6f59b/) — Apply sRGB colors for screen output - [Color Conversion](https://img.ly/docs/cesdk/angular/colors/conversion-bcd82b/) — Convert between color spaces --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "sRGB Colors" description: "Work with sRGB colors for screen-based designs including creating RGBA colors, applying them to design elements, and converting from other color spaces." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/for-screen/srgb-e6f59b/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [For Screen](https://img.ly/docs/cesdk/angular/colors/for-screen-1911f8/) > [sRGB Colors](https://img.ly/docs/cesdk/angular/colors/for-screen/srgb-e6f59b/) --- Apply sRGB colors to design elements for screen-based output using RGBA color values with red, green, blue, and alpha components. ![sRGB Colors example showing colored shapes with fills, strokes, shadows, and transparency](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-screen-srgb-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-for-screen-srgb-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-for-screen-srgb-browser/) sRGB is the standard color space for screen displays. CE.SDK represents sRGB colors as RGBA objects where each component (red, green, blue, alpha) uses floating-point values between 0.0 and 1.0. This differs from the traditional 0-255 integer range used in many design tools. ```typescript file=@cesdk_web_examples/guides-colors-for-screen-srgb-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { isRGBAColor } from '@cesdk/engine'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: sRGB Colors Guide * * This example demonstrates: * - Creating sRGB/RGBA colors * - Applying sRGB colors to fills, strokes, and shadows * - Retrieving colors from design elements * - Converting colors to sRGB * - Working with alpha transparency * - Using type guards to identify RGBA colors */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); 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'); } // Create RGBA color objects for sRGB color space // Values are floating-point numbers between 0.0 and 1.0 const blueColor = { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }; const redColor = { r: 0.9, g: 0.2, b: 0.2, a: 1.0 }; const greenColor = { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }; // Create semi-transparent colors using the alpha channel // Alpha of 0.5 means 50% opacity const semiTransparentPurple = { r: 0.6, g: 0.2, b: 0.8, a: 0.5 }; const semiTransparentOrange = { r: 1.0, g: 0.5, b: 0.0, a: 0.7 }; // Create blocks to demonstrate color application const block1 = engine.block.create('graphic'); engine.block.setShape(block1, engine.block.createShape('rect')); engine.block.setWidth(block1, 150); engine.block.setHeight(block1, 150); engine.block.setPositionX(block1, 50); engine.block.setPositionY(block1, 50); engine.block.appendChild(page, block1); const block2 = engine.block.create('graphic'); engine.block.setShape(block2, engine.block.createShape('ellipse')); engine.block.setWidth(block2, 150); engine.block.setHeight(block2, 150); engine.block.setPositionX(block2, 250); engine.block.setPositionY(block2, 50); engine.block.appendChild(page, block2); const block3 = engine.block.create('graphic'); engine.block.setShape(block3, engine.block.createShape('rect')); engine.block.setWidth(block3, 150); engine.block.setHeight(block3, 150); engine.block.setPositionX(block3, 450); engine.block.setPositionY(block3, 50); engine.block.appendChild(page, block3); // Apply sRGB colors to block fills // First create a color fill, then set its color value const fill1 = engine.block.createFill('color'); engine.block.setFill(block1, fill1); engine.block.setColor(fill1, 'fill/color/value', blueColor); const fill2 = engine.block.createFill('color'); engine.block.setFill(block2, fill2); engine.block.setColor(fill2, 'fill/color/value', redColor); const fill3 = engine.block.createFill('color'); engine.block.setFill(block3, fill3); engine.block.setColor(fill3, 'fill/color/value', greenColor); // Create blocks for stroke demonstration const strokeBlock = engine.block.create('graphic'); engine.block.setShape(strokeBlock, engine.block.createShape('rect')); engine.block.setWidth(strokeBlock, 150); engine.block.setHeight(strokeBlock, 150); engine.block.setPositionX(strokeBlock, 50); engine.block.setPositionY(strokeBlock, 250); engine.block.appendChild(page, strokeBlock); const strokeFill = engine.block.createFill('color'); engine.block.setFill(strokeBlock, strokeFill); engine.block.setColor(strokeFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Apply sRGB color to stroke engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 5); engine.block.setColor(strokeBlock, 'stroke/color', { r: 0.1, g: 0.1, b: 0.5, a: 1.0 }); // Create block for drop shadow demonstration const shadowBlock = engine.block.create('graphic'); engine.block.setShape(shadowBlock, engine.block.createShape('rect')); engine.block.setWidth(shadowBlock, 150); engine.block.setHeight(shadowBlock, 150); engine.block.setPositionX(shadowBlock, 250); engine.block.setPositionY(shadowBlock, 250); engine.block.appendChild(page, shadowBlock); const shadowFill = engine.block.createFill('color'); engine.block.setFill(shadowBlock, shadowFill); engine.block.setColor(shadowFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Apply sRGB color to drop shadow engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowBlurRadiusX(shadowBlock, 10); engine.block.setDropShadowBlurRadiusY(shadowBlock, 10); engine.block.setDropShadowOffsetX(shadowBlock, 5); engine.block.setDropShadowOffsetY(shadowBlock, 5); engine.block.setColor(shadowBlock, 'dropShadow/color', { r: 0.0, g: 0.0, b: 0.0, a: 0.4 }); // Create blocks for transparency demonstration const transparentBlock1 = engine.block.create('graphic'); engine.block.setShape(transparentBlock1, engine.block.createShape('rect')); engine.block.setWidth(transparentBlock1, 150); engine.block.setHeight(transparentBlock1, 150); engine.block.setPositionX(transparentBlock1, 450); engine.block.setPositionY(transparentBlock1, 250); engine.block.appendChild(page, transparentBlock1); const transparentFill1 = engine.block.createFill('color'); engine.block.setFill(transparentBlock1, transparentFill1); engine.block.setColor( transparentFill1, 'fill/color/value', semiTransparentPurple ); // Overlapping block to show transparency const transparentBlock2 = engine.block.create('graphic'); engine.block.setShape( transparentBlock2, engine.block.createShape('ellipse') ); engine.block.setWidth(transparentBlock2, 150); engine.block.setHeight(transparentBlock2, 150); engine.block.setPositionX(transparentBlock2, 500); engine.block.setPositionY(transparentBlock2, 300); engine.block.appendChild(page, transparentBlock2); const transparentFill2 = engine.block.createFill('color'); engine.block.setFill(transparentBlock2, transparentFill2); engine.block.setColor( transparentFill2, 'fill/color/value', semiTransparentOrange ); // Retrieve the current color from a design element const currentColor = engine.block.getColor(fill1, 'fill/color/value'); console.log('Current color:', currentColor); // Use type guard to check if color is RGBA (sRGB) if (isRGBAColor(currentColor)) { console.log('Color is sRGB/RGBA'); console.log('Red:', currentColor.r); console.log('Green:', currentColor.g); console.log('Blue:', currentColor.b); console.log('Alpha:', currentColor.a); } // Convert a CMYK color to sRGB const cmykColor = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; const convertedToSrgb = engine.editor.convertColorToColorSpace( cmykColor, 'sRGB' ); console.log('Converted to sRGB:', convertedToSrgb); // Zoom to fit content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide covers creating RGBA color objects, applying them to fills, strokes, and shadows, retrieving colors from elements, converting colors to sRGB, and working with transparency. ## Using the Built-in Color Picker UI The built-in color picker allows users to select sRGB colors visually. Users can pick colors from a gradient, enter hex values, or adjust RGB sliders. The color picker automatically handles value conversion between hex and floating-point formats. The UI includes: - Color picker gradient and hue slider - Hex value input field - RGB component sliders - Opacity/alpha slider for transparency control ## Creating sRGB Colors Programmatically We first set up a design scene and get a reference to the page. ```typescript highlight=highlight-setup // Create a design scene using CE.SDK await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); 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'); } ``` We create RGBA color objects by specifying r, g, b, and a properties. All four components are required and use values from 0.0 to 1.0. ```typescript highlight=highlight-create-rgba // Create RGBA color objects for sRGB color space // Values are floating-point numbers between 0.0 and 1.0 const blueColor = { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }; const redColor = { r: 0.9, g: 0.2, b: 0.2, a: 1.0 }; const greenColor = { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }; ``` The alpha channel controls transparency. A value of 1.0 is fully opaque, while 0.0 is fully transparent. ```typescript highlight=highlight-create-transparent // Create semi-transparent colors using the alpha channel // Alpha of 0.5 means 50% opacity const semiTransparentPurple = { r: 0.6, g: 0.2, b: 0.8, a: 0.5 }; const semiTransparentOrange = { r: 1.0, g: 0.5, b: 0.0, a: 0.7 }; ``` ## Applying sRGB Colors to Fills We use `engine.block.setColor()` to apply colors to block properties. For fills, we first create a color fill and then set its color value. ```typescript highlight=highlight-apply-fill // Apply sRGB colors to block fills // First create a color fill, then set its color value const fill1 = engine.block.createFill('color'); engine.block.setFill(block1, fill1); engine.block.setColor(fill1, 'fill/color/value', blueColor); const fill2 = engine.block.createFill('color'); engine.block.setFill(block2, fill2); engine.block.setColor(fill2, 'fill/color/value', redColor); const fill3 = engine.block.createFill('color'); engine.block.setFill(block3, fill3); engine.block.setColor(fill3, 'fill/color/value', greenColor); ``` ## Applying sRGB Colors to Strokes We can apply sRGB colors to strokes using the `'stroke/color'` property path. ```typescript highlight=highlight-apply-stroke // Apply sRGB color to stroke engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 5); engine.block.setColor(strokeBlock, 'stroke/color', { r: 0.1, g: 0.1, b: 0.5, a: 1.0 }); ``` ## Applying sRGB Colors to Shadows Drop shadows also support sRGB colors. We use the `'dropShadow/color'` property path. A semi-transparent black creates a natural shadow effect. ```typescript highlight=highlight-apply-shadow // Apply sRGB color to drop shadow engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowBlurRadiusX(shadowBlock, 10); engine.block.setDropShadowBlurRadiusY(shadowBlock, 10); engine.block.setDropShadowOffsetX(shadowBlock, 5); engine.block.setDropShadowOffsetY(shadowBlock, 5); engine.block.setColor(shadowBlock, 'dropShadow/color', { r: 0.0, g: 0.0, b: 0.0, a: 0.4 }); ``` ## Retrieving Colors from Elements We use `engine.block.getColor()` to read the current color from a design element. The returned color could be RGBA, CMYK, or a spot color depending on what was set. ```typescript highlight=highlight-get-color // Retrieve the current color from a design element const currentColor = engine.block.getColor(fill1, 'fill/color/value'); console.log('Current color:', currentColor); ``` ## Identifying sRGB Colors We use the `isRGBAColor()` type guard to check if a color is sRGB. This is useful when working with colors that could be from any supported color space. ```typescript highlight=highlight-identify-rgba // Use type guard to check if color is RGBA (sRGB) if (isRGBAColor(currentColor)) { console.log('Color is sRGB/RGBA'); console.log('Red:', currentColor.r); console.log('Green:', currentColor.g); console.log('Blue:', currentColor.b); console.log('Alpha:', currentColor.a); } ``` ## Converting Colors to sRGB We use `engine.editor.convertColorToColorSpace()` to convert CMYK or spot colors to sRGB for screen display. ```typescript highlight=highlight-convert-to-srgb // Convert a CMYK color to sRGB const cmykColor = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; const convertedToSrgb = engine.editor.convertColorToColorSpace( cmykColor, 'sRGB' ); console.log('Converted to sRGB:', convertedToSrgb); ``` ## API Reference | Method | Description | | ---------------------------------------- | ---------------------------------------------- | | `createFill('color')` | Create a new color fill object | | `setFill(block, fill)` | Assign fill to a block | | `setColor(block, property, color)` | Set color value (RGBA) | | `getColor(block, property)` | Get current color value | | `setStrokeEnabled(block, enabled)` | Enable or disable stroke rendering | | `setStrokeWidth(block, width)` | Set stroke width | | `setDropShadowEnabled(block, enabled)` | Enable or disable drop shadow | | `convertColorToColorSpace(color, space)` | Convert color to specified color space | | `isRGBAColor(color)` | Type guard to check if color is RGBA | ## Troubleshooting **Colors appear incorrect:** Verify values are in the 0.0-1.0 range, not 0-255. A value of 255 would be clamped to 1.0. **Color not visible:** Check that the alpha value is not 0.0 and that the fill or stroke is enabled on the block. **Type errors:** Ensure all four components (r, g, b, a) are provided for RGBA colors. Omitting alpha will cause validation errors. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Manage color usage in your designs, from applying brand palettes to handling print and screen formats." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/overview-16a177/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [Overview](https://img.ly/docs/cesdk/angular/colors/overview-16a177/) --- 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](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Replace Individual Colors" description: "Selectively replace specific colors in images using CE.SDK's Recolor and Green Screen effects to swap colors or remove backgrounds." platform: angular url: "https://img.ly/docs/cesdk/angular/colors/replace-48cd71/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) > [Replace Individual Colors](https://img.ly/docs/cesdk/angular/colors/replace-48cd71/) --- Selectively replace specific colors in images using CE.SDK's Recolor and Green Screen effects. ![Replace Colors Hero](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-replace-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-replace-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-replace-browser/) CE.SDK provides two specialized effects for color replacement: the **Recolor** effect swaps pixels matching a source color with a target color, while the **Green Screen** effect removes pixels matching a specified color to create transparency. Both effects use configurable tolerance parameters to control which pixels are affected, enabling use cases from product color variations to background removal. ```typescript file=@cesdk_web_examples/guides-colors-replace-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; 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'); // 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 covers how to enable the built-in effects panel for interactive editing and how to apply and manage color replacement effects programmatically using the Block API. ## Using the Built-in Effects UI The CE.SDK editor provides a visual effects panel where users can add and configure Recolor and Green Screen effects interactively. Enable the effects feature using the Feature API, then users can access effects through the inspector panel. To enable effects in your editor configuration: ```typescript highlight=highlight-enable-effects-panel // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); ``` With effects enabled, users can: - Select an image block and open the effects panel - Add Recolor or Green Screen effects from the available options - Use visual color pickers to select source and target colors - Adjust tolerance sliders for color match, brightness match, and smoothness - See changes applied in real-time on the canvas ## Programmatic Color Replacement For automation workflows or custom implementations, you can create and apply color replacement effects programmatically using the Block API. Effects are created as blocks, configured with properties, and appended to target blocks. ### Creating a Recolor Effect The Recolor effect replaces pixels matching a source color with a target color. Use `engine.block.createEffect('recolor')` to create the effect, then set the `fromColor` and `toColor` properties using `engine.block.setColor()`. ```typescript highlight=highlight-create-recolor-effect // 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); ``` The `fromColor` specifies which color to match in the image, and `toColor` defines the replacement color. Colors use RGBA format with values from 0 to 1. ### Configuring Color Matching Precision Fine-tune which pixels are affected by adjusting the tolerance parameters with `engine.block.setFloat()`: ```typescript highlight=highlight-configure-recolor-matching // 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); ``` The Recolor effect has three precision parameters: - **colorMatch** (0-1): Controls hue tolerance. Higher values include more color variations around the source color. - **brightnessMatch** (0-1): Controls luminance tolerance. Higher values include pixels with different brightness levels. - **smoothness** (0-1): Controls edge blending. Higher values create softer transitions at the boundaries of affected areas. ### Creating a Green Screen Effect The Green Screen effect removes pixels matching a specified color, making them transparent. This is commonly used for background removal. ```typescript highlight=highlight-create-green-screen-effect // 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); ``` Set the `fromColor` property to specify which color to remove. The effect will make matching pixels transparent. ### Configuring Green Screen Parameters Control the precision of color removal using these parameters: ```typescript highlight=highlight-configure-green-screen // 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); ``` The Green Screen effect parameters: - **colorMatch**: Tolerance for matching the background color - **smoothness**: Edge softness for cleaner cutouts around subjects - **spill**: Reduces color bleed from the removed background onto the subject, useful when the background color reflects onto edges ## Managing Multiple Effects A single block can have multiple effects applied. Use the effect management APIs to list, toggle, and remove effects. ```typescript highlight=highlight-manage-effects // 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 ``` Key effect management methods: - `engine.block.getEffects(blockId)`: Returns an array of all effect IDs attached to a block - `engine.block.setEffectEnabled(effectId, enabled)`: Toggle an effect on/off without removing it - `engine.block.isEffectEnabled(effectId)`: Check whether an effect is currently active - `engine.block.removeEffect(blockId, index)`: Remove an effect by its index in the effects array Stacking multiple Recolor effects enables complex color transformations, such as replacing multiple colors in a single image or creating variations. ## Troubleshooting **Colors not matching as expected**: Increase the `colorMatch` tolerance for broader selection, or decrease it for more precise matching. Check that your source color closely matches the actual color in the image. **Harsh edges around replaced areas**: Increase the `smoothness` value to create softer transitions at the boundaries of affected pixels. **Color spill on Green Screen subjects**: Increase the `spill` value to reduce the green tint that often appears on edges when removing green backgrounds. **Effect not visible**: Verify that the effect is enabled using `isEffectEnabled()` and that it has been appended to the block using `appendEffect()`. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "System Compatibility" description: "Learn how device performance and hardware limits affect CE.SDK editing, rendering, and export capabilities." platform: angular url: "https://img.ly/docs/cesdk/angular/compatibility-139ef9/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/angular/compatibility-fef719/) > [System Compatibility](https://img.ly/docs/cesdk/angular/compatibility-139ef9/) --- ## Recommended Hardware | Platform | Hardware | | ---------------- | ------------------------------------------------------------------------------ | | Desktop | A notebook or desktop released in the last 7 years and at least 4GB of memory. | | Mobile (Apple) | iPhone 8, iPad (6th gen) or newer | | Mobile (Android) | Phones & tablets released in the last 4 years | ## Video Our video feature introduces additional requirements and we generally distinguish playback (decoding) and export (encoding) capabilities. On the web, certain browser features directly depend on the host operating system. For video, this currently introduces the following limitations: - Transparency in H.265 videos is **not supported** on Windows hosts. - **Chrome on Linux** generally doesn't ship with encoder support for H.264 & AAC, which can cause video exports to fail even though decoding of non-free codecs is supported. - **Firefox** supports video editing (decoding) starting with version 130 via the WebCodecs API. However, video export is **not supported** because Firefox does not include the patent-encumbered H.264 and AAC codecs required for encoding. - **Chromium** although technically the base of Chrome doesn't include any codecs for licensing reasons and therefore can't be used for video editing. It does fall back to system-provided media libraries on e.g. macOS, but support is not guaranteed in any way. - **Linux browsers** generally have limited video support due to codec licensing. Video editing may work if the browser can decode H.264/AAC, but video export typically fails because open-source browser builds do not include the required encoders. - Video is **not supported** on mobile browsers on any platform due to technical limitations which result in performance issues. To detect these limitations at runtime, use the `video.decode.checkSupport` and `video.encode.checkSupport` actions, or the `cesdk.utils.supportsVideoDecode()` and `cesdk.utils.supportsVideoEncode()` utilities. ## Export Limitations The export size is limited by the hardware capabilities of the device, e.g., due to the maximum texture size that can be allocated. The maximum possible export size can be queried via API, see [export guide](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/). --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Compatibility & Security" description: "Learn about CE.SDK's compatibility and security features." platform: angular url: "https://img.ly/docs/cesdk/angular/compatibility-fef719/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/angular/compatibility-fef719/) --- CE.SDK provides robust compatibility and security features across platforms. Learn about supported browsers, frameworks, file formats, language support, and how CE.SDK ensures secure operation in your applications. --- ## Related Pages - [Browser Support](https://img.ly/docs/cesdk/angular/browser-support-28c1b0/) - Find out which browsers and versions fully support CE.SDK features, including editing and video capabilities. - [System Compatibility](https://img.ly/docs/cesdk/angular/compatibility-139ef9/) - Learn how device performance and hardware limits affect CE.SDK editing, rendering, and export capabilities. - [File Format Support](https://img.ly/docs/cesdk/angular/file-format-support-3c4b2a/) - See which image, video, audio, font, and template formats CE.SDK supports for import and export. - [Security](https://img.ly/docs/cesdk/angular/security-777bfd/) - Learn how CE.SDK keeps your data private with client-side processing, secure licensing, and GDPR-compliant practices. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Concepts" description: "Key concepts and principles of CE.SDK" platform: angular url: "https://img.ly/docs/cesdk/angular/concepts-c9ff51/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) --- Key Concepts and principles of CE.SDK. --- ## Related Pages - [Key Concepts](https://img.ly/docs/cesdk/angular/key-concepts-21a270/) - Explore CE.SDK’s key features—manual editing, automation, templates, AI tools, and full UI and API control. - [Key Capabilities](https://img.ly/docs/cesdk/angular/key-capabilities-dbb5b1/) - Explore CE.SDK’s key features—manual editing, automation, templates, AI tools, and full UI and API control. - [Architecture](https://img.ly/docs/cesdk/angular/concepts/architecture-6ea9b2/) - Understand how CE.SDK is structured around the CreativeEngine—the core runtime with six APIs for scenes, blocks, assets, events, variables, and editor state. - [Terminology](https://img.ly/docs/cesdk/angular/concepts/terminology-99e82d/) - Definitions for the core terms and concepts used throughout CE.SDK documentation, including Engine, Scene, Block, Fill, Shape, Effect, and more. - [Editing Workflow](https://img.ly/docs/cesdk/angular/concepts/editing-workflow-032d27/) - Control editing access with Creator, Adopter, Viewer, and Presenter roles using global and block-level scopes for tailored permissions. - [Blocks](https://img.ly/docs/cesdk/angular/concepts/blocks-90241e/) - Learn how blocks define elements in a scene and how to structure them for rendering in CE.SDK. - [Scenes](https://img.ly/docs/cesdk/angular/concepts/scenes-e8596d/) - Create, configure, save, and load scenes—the root container for all design elements in CE.SDK. - [Pages](https://img.ly/docs/cesdk/angular/concepts/pages-7b6bae/) - Pages structure scenes in CE.SDK and must share the same dimensions to ensure consistent rendering. - [Assets](https://img.ly/docs/cesdk/angular/concepts/assets-a84fdd/) - Learn how assets provide external content to CE.SDK designs and how asset sources make them available programmatically. - [Editor State](https://img.ly/docs/cesdk/angular/concepts/edit-modes-1f5b6c/) - Control how users interact with content by switching between edit modes like transform, crop, and text. - [Templating](https://img.ly/docs/cesdk/angular/concepts/templating-f94385/) - Understand how templates work in CE.SDK—reusable designs with variables for dynamic text and placeholders for swappable media. - [Events](https://img.ly/docs/cesdk/angular/concepts/events-353f97/) - Subscribe to block creation, update, and deletion events to track changes in your CE.SDK scene. - [Buffers](https://img.ly/docs/cesdk/angular/concepts/buffers-9c565b/) - Use buffers to store temporary, non-serializable data in CE.SDK via the CreativeEngine API. - [Resources](https://img.ly/docs/cesdk/angular/concepts/resources-a58d71/) - Learn how CE.SDK loads and manages external media files, including preloading for performance, handling transient data, and relocating resources when URLs change. - [Undo and History](https://img.ly/docs/cesdk/angular/concepts/undo-and-history-99479d/) - Manage undo and redo stacks in CE.SDK using multiple histories, callbacks, and API-based controls. - [Design Units](https://img.ly/docs/cesdk/angular/concepts/design-units-cc6597/) - Configure design units (pixels, millimeters, inches) and DPI settings for print-ready output in CE.SDK. - [Font Size Unit](https://img.ly/docs/cesdk/angular/concepts/font-size-unit-3b2d60/) - Configure how font sizes are interpreted (Point vs Pixel) per scene in the CE.SDK Web engine. - [Headless](https://img.ly/docs/cesdk/angular/concepts/headless-mode/browser-24ab98/) - Run headless CE.SDK's Engine inside a browser-based app. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Architecture" description: "Understand how CE.SDK is structured around the CreativeEngine—the core runtime with six APIs for scenes, blocks, assets, events, variables, and editor state." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/architecture-6ea9b2/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Architecture](https://img.ly/docs/cesdk/angular/concepts/architecture-6ea9b2/) --- Understand how CE.SDK is structured around the CreativeEngine and its six interconnected APIs. CE.SDK is built around the **CreativeEngine**—a single-threaded core runtime that manages state, rendering, and coordination between six specialized APIs. Understanding how these pieces connect helps you navigate the SDK effectively. ## The CreativeEngine The *Engine* is the central coordinator. All operations—creating content, manipulating blocks, rendering, and exporting—flow through it. Initialize it once and access everything else through its API namespaces. The *Engine* manages: - **One active scene** containing all design content - **Six API namespaces** for different domains of functionality - **Event dispatching** for reactive state management - **Resource loading** and caching - **Rendering** to a canvas element (browser) or headless export (server) ## Content Hierarchy CE.SDK organizes content in a tree: *Scene* → *Pages* → *Blocks*. - **Scene**: The root container. One scene per engine instance. Supports both static designs and time-based video editing. - **Pages**: Containers within a scene. Artboards for static designs, time-based compositions for video editing. - **Blocks**: The atomic units—graphics, text, audio, video. Everything visible is a block. The **Scene API** manages this hierarchy. The **Block API** manipulates individual blocks within it. See [Scenes](https://img.ly/docs/cesdk/angular/concepts/scenes-e8596d/), [Pages](https://img.ly/docs/cesdk/angular/concepts/pages-7b6bae/), and [Blocks](https://img.ly/docs/cesdk/angular/concepts/blocks-90241e/) for details. ## The Six APIs The engine exposes six API namespaces. Here's how they interconnect: ### Scene API (`engine.scene`) Creates and manages the content hierarchy. Works with the *Block API* to populate scenes with content and the *Event API* to notify when structure changes. ### Block API (`engine.block`) The most-used API. Creates, modifies, and queries blocks. Every visual element flows through here. Blocks reference *Assets* loaded through the *Asset API* and can contain *Variables* managed by the *Variable API*. ### Asset API (`engine.asset`) Provides content to the *Block API*. Registers asset sources (images, videos, stickers, templates) and handles queries. When you add an image to a block, the *Asset API* resolves it and the *Block API* applies it. ### Variable API (`engine.variable`) Enables data-driven designs. Define variables at the scene level; reference them in text blocks with `{{variableName}}` syntax. When variable values change, affected blocks update automatically—coordinated through the *Event API*. ### Editor API (`engine.editor`) Controls application state: edit modes, undo/redo history, user roles, and permissions. The *Editor API* determines what operations the *Block API* can perform based on current role and scope settings. ### Event API (`engine.event`) The reactive backbone. Subscribe to changes across all other APIs—block modifications, selection changes, history updates. Build UIs that stay synchronized with engine state. ## How They Connect A typical flow shows the interconnection: 1. **Scene API** creates the content structure 2. **Asset API** provides images, templates, or other content 3. **Block API** creates blocks and applies assets to them 4. **Variable API** injects dynamic data into text blocks 5. **Editor API** controls what users can modify 6. **Event API** notifies your UI of every change Each API focuses on one domain but works through the others. The *Engine* coordinates these interactions. ## Scene Capabilities CE.SDK scenes support a range of capabilities: - **Static designs**: Social posts, print materials, graphics. Blocks positioned spatially. - **Time-based content**: Duration, playback time, and animation. Blocks arranged across time. The scene configuration determines which *Block API* properties and *Editor API* capabilities are available. See [Scenes](https://img.ly/docs/cesdk/angular/concepts/scenes-e8596d/) for details. ## Integration Patterns CE.SDK runs in two contexts: - **Browser**: The engine renders to a canvas element. Append `engine.element` to your DOM. Use with the built-in UI or build your own. - **Headless**: No rendering, just processing. Use for server-side exports, automation, and batch operations. See [Headless Mode](https://img.ly/docs/cesdk/angular/concepts/headless-mode/browser-24ab98/). Both contexts use the same six APIs—only rendering differs. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Assets" description: "Learn how assets provide external content to CE.SDK designs and how asset sources make them available programmatically." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/assets-a84fdd/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Assets](https://img.ly/docs/cesdk/angular/concepts/assets-a84fdd/) --- Understand the asset system—how external media and resources like images, stickers, or videos are handled in CE.SDK. ![Assets example showing asset source and applied content](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-assets-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-assets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-assets-browser/) Images, videos, audio, fonts, stickers, and templates—every premade resource you can add to a design is what we call an *Asset*. The editor gets access to these Assets through *Asset Sources*. When you apply an Asset, CE.SDK creates or modifies a Block to display that content. ```typescript file=@cesdk_web_examples/guides-concepts-assets-browser/browser.ts reference-only import type { AssetQueryData, AssetResult, AssetSource, AssetsQueryResult, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; /** * CE.SDK Plugin: Assets Concepts Guide * * Demonstrates the core concepts of the asset system: * - What assets are and how they differ from blocks * - Creating and registering asset sources * - Querying and applying assets */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; // An asset is a content definition with metadata // It describes content that can be added to designs const stickerAsset: AssetResult = { id: 'sticker-smile', label: 'Smile Sticker', tags: ['emoji', 'happy'], groups: ['stickers'], meta: { uri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_smile.svg', thumbUri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_smile.svg', blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', width: 62, height: 58, mimeType: 'image/svg+xml' } }; // Asset sources provide assets to the editor // Each source has an id and a findAssets() method const customSource: AssetSource = { id: 'my-assets', async findAssets(query: AssetQueryData): Promise { // Return paginated results matching the query return { assets: [stickerAsset], total: 1, currentPage: query.page, nextPage: undefined }; } }; engine.asset.addSource(customSource); // Query assets from a source const results = await engine.asset.findAssets('my-assets', { page: 0, perPage: 10 }); console.log('Found assets:', results.total); // Narrow a query with structured predicates. The top-level array is // an implicit AND of its entries. const happyStickers = await engine.asset.findAssets('my-assets', { page: 0, perPage: 10, filter: [ // Either tag matches (combinators nest arbitrarily). { or: [ { property: 'tags', equals: 'happy' }, { property: 'tags', equals: 'celebratory' } ] }, // Exclude archived items. { not: { property: 'meta.kind', equals: 'archived' } } ] }); console.log('Filtered stickers:', happyStickers.total); // Apply an asset to create a block in the scene if (results.assets.length > 0) { const blockId = await engine.asset.apply('my-assets', results.assets[0]); console.log('Created block:', blockId); // Center the sticker on the page const page = engine.scene.getCurrentPage(); if (page && blockId) { const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // SVG is 62x58, scale to fit nicely const stickerWidth = 62; const stickerHeight = 58; engine.block.setWidth(blockId, stickerWidth); engine.block.setHeight(blockId, stickerHeight); engine.block.setPositionX(blockId, (pageWidth - stickerWidth) / 2); engine.block.setPositionY(blockId, (pageHeight - stickerHeight) / 2); } } // Local sources support dynamic add/remove operations engine.asset.addLocalSource('uploads', ['image/svg+xml', 'image/png']); engine.asset.addAssetToSource('uploads', { id: 'uploaded-1', label: { en: 'Heart Sticker' }, meta: { uri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_love.svg', thumbUri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_love.svg', blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', mimeType: 'image/svg+xml' } }); // Subscribe to asset source lifecycle events const unsubscribe = engine.asset.onAssetSourceUpdated((sourceId) => { console.log('Source updated:', sourceId); }); // Notify that source contents changed engine.asset.assetSourceContentsChanged('uploads'); unsubscribe(); } } export default Example; ``` This guide covers the core concepts of the Asset system. For detailed instructions on inserting specific media types, see the [Images](https://img.ly/docs/cesdk/angular/insert-media/images-63848a/), [Videos](https://img.ly/docs/cesdk/angular/insert-media/videos-a5fa03/), and [Shapes & Stickers](https://img.ly/docs/cesdk/angular/insert-media/shapes-or-stickers-20ac68/) guides. ## Assets vs Blocks **Assets** are content definitions with metadata (URIs, dimensions, labels) that exist outside the scene. **Blocks** are the visual elements in the scene tree that display content. When you apply an asset, CE.SDK creates a block configured according to the asset's properties. Multiple blocks can reference the same asset, and assets can exist without being used in any block. ## The Asset Data Model An asset describes content that can be added to designs. Each asset has an `id` and optional properties: ```typescript highlight-asset-definition // An asset is a content definition with metadata // It describes content that can be added to designs const stickerAsset: AssetResult = { id: 'sticker-smile', label: 'Smile Sticker', tags: ['emoji', 'happy'], groups: ['stickers'], meta: { uri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_smile.svg', thumbUri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_smile.svg', blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', width: 62, height: 58, mimeType: 'image/svg+xml' } }; ``` Key properties include: - **`id`** — Unique identifier for the asset - **`label`** — Display name (can be localized) - **`tags`** — Searchable keywords - **`groups`** — Categories for filtering - **`meta`** — Content-specific data including `uri`, `thumbUri`, `blockType`, `fillType`, `width`, `height`, and `mimeType` > **Note:** See the [Content JSON Schema](https://img.ly/docs/cesdk/angular/import-media/content-json-schema-a7b3d2/) guide for the complete property reference. ## Asset Sources Asset sources provide assets to the editor. Each source has an `id` and implements a `findAssets()` method that returns paginated results. ```typescript highlight-asset-source // Asset sources provide assets to the editor // Each source has an id and a findAssets() method const customSource: AssetSource = { id: 'my-assets', async findAssets(query: AssetQueryData): Promise { // Return paginated results matching the query return { assets: [stickerAsset], total: 1, currentPage: query.page, nextPage: undefined }; } }; engine.asset.addSource(customSource); ``` The `findAssets()` callback receives query parameters (`page`, `perPage`, `query`, `tags`, `groups`) and returns a result object with `assets`, `total`, `currentPage`, and `nextPage`. Sources can also implement optional methods like `getGroups()`, `getSupportedMimeTypes()`, and `applyAsset()` for custom behavior. ## Querying Assets Search and filter assets from registered sources using `findAssets()`: ```typescript highlight-query-assets // Query assets from a source const results = await engine.asset.findAssets('my-assets', { page: 0, perPage: 10 }); console.log('Found assets:', results.total); ``` Results include pagination info. Loop through pages until `nextPage` is undefined to retrieve all matching assets. ### Filtering by property The optional `filter` parameter narrows a query with structured predicates against the resolved asset. All entries in the top-level array must match (implicit AND). Each entry is either a property predicate (`{ property, contains?, equals? }`) or a logical combinator (`{ and: [...] }`, `{ or: [...] }`, `{ not: ... }`). Combinators nest. ```typescript highlight-filter-assets // Narrow a query with structured predicates. The top-level array is // an implicit AND of its entries. const happyStickers = await engine.asset.findAssets('my-assets', { page: 0, perPage: 10, filter: [ // Either tag matches (combinators nest arbitrarily). { or: [ { property: 'tags', equals: 'happy' }, { property: 'tags', equals: 'celebratory' } ] }, // Exclude archived items. { not: { property: 'meta.kind', equals: 'archived' } } ] }); console.log('Filtered stickers:', happyStickers.total); ``` The `property` field is a dot-path against the resolved asset: `label`, `tags`, `id`, `groups`, or `meta.`. Use `equals` for categorical or single-value fields and `contains` for free-text or list-encoded values. Both operators are case-insensitive. On a string array (`tags`, `groups`), the predicate matches if any element matches. > **\`not\` against a missing key:** A predicate evaluates to `false` on an asset that lacks the targeted field, so `not { property: 'meta.legacy', equals: 'true' }` matches every asset where `meta.legacy !== 'true'` **and** every asset that lacks `meta.legacy` entirely. If you need "field is present and not equal to x," combine with a presence check: `and: [{ property: 'meta.legacy', contains: '' }, { not: { ... } }]`. > **\`meta\` values are flat strings:** The engine stores every `meta.` value as a flat string. `equals: 'true'` matches the literal string `"true"`; if a meta value was originally serialized as a number or boolean, stringify it the same way before comparing. For multi-valued data, prefer separate `tags` / `groups` elements over comma-separated `meta` values so `equals` can be element-exact. `filter` and the legacy `tags` / `groups` / `excludeGroups` fields can be combined — they are AND-combined before pagination. Prefer `filter` for anything beyond a plain case-sensitive include/exclude list (substring matches, `meta.`, `or` / `not` combinators); reach for the legacy fields only when you want their case-sensitive exact-match semantics. Malformed filters reject the returned promise with the engine's parse-error message (for example, `"Unknown asset property '…'"` or `"Asset property filter must have exactly one of 'contains' or 'equals'."`). ## Applying Assets Use `apply()` to create a new block from an asset: ```typescript highlight-apply-asset // Apply an asset to create a block in the scene if (results.assets.length > 0) { const blockId = await engine.asset.apply('my-assets', results.assets[0]); console.log('Created block:', blockId); // Center the sticker on the page const page = engine.scene.getCurrentPage(); if (page && blockId) { const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // SVG is 62x58, scale to fit nicely const stickerWidth = 62; const stickerHeight = 58; engine.block.setWidth(blockId, stickerWidth); engine.block.setHeight(blockId, stickerHeight); engine.block.setPositionX(blockId, (pageWidth - stickerWidth) / 2); engine.block.setPositionY(blockId, (pageHeight - stickerHeight) / 2); } } ``` The method returns the new block ID, which you can use to position and configure the block. ## Local Asset Sources Local sources store assets in memory and support dynamic add/remove operations. Use these for user uploads or runtime-generated content: ```typescript highlight-local-source // Local sources support dynamic add/remove operations engine.asset.addLocalSource('uploads', ['image/svg+xml', 'image/png']); engine.asset.addAssetToSource('uploads', { id: 'uploaded-1', label: { en: 'Heart Sticker' }, meta: { uri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_love.svg', thumbUri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_love.svg', blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', mimeType: 'image/svg+xml' } }); ``` ## Source Events Subscribe to asset source lifecycle events for reactive UIs: ```typescript highlight-source-events // Subscribe to asset source lifecycle events const unsubscribe = engine.asset.onAssetSourceUpdated((sourceId) => { console.log('Source updated:', sourceId); }); // Notify that source contents changed engine.asset.assetSourceContentsChanged('uploads'); unsubscribe(); ``` Call `assetSourceContentsChanged()` after modifying a source to notify subscribers. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Blocks" description: "Learn how blocks define elements in a scene and how to structure them for rendering in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/blocks-90241e/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Blocks](https://img.ly/docs/cesdk/angular/concepts/blocks-90241e/) --- Work with blocks—the fundamental building units for all visual elements in CE.SDK designs. ![Blocks example showing a scene with graphic and text blocks](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-blocks-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-blocks-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-blocks-browser/) Every visual element in CE.SDK—images, text, shapes, and audio—is represented as a block. Blocks are organized in a tree structure within scenes and pages, where parent-child relationships determine rendering order and visibility. Each block has properties you can read and modify, a `Type` that defines its core behavior, and an optional `Kind` for custom categorization. ```typescript file=@cesdk_web_examples/guides-concepts-blocks-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Blocks Guide * * Demonstrates working with blocks in CE.SDK: * - Block types (graphic, text, audio, page, cutout) * - Block hierarchy (parent-child relationships) * - Block lifecycle (create, duplicate, destroy) * - Block properties and reflection * - Selection and visibility * - Block state management * - Serialization (save/load) */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the current scene and page const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Find the page block - pages contain all design elements const pages = engine.block.findByType('page'); const page = pages[0]; // Query the block type - returns the full type path const pageType = engine.block.getType(page); console.log('Page block type:', pageType); // '//ly.img.ubq/page' // Type is immutable, determined at creation // Kind is a custom label you can set and change engine.block.setKind(page, 'main-canvas'); const pageKind = engine.block.getKind(page); console.log('Page kind:', pageKind); // 'main-canvas' // Find blocks by kind const mainCanvasBlocks = engine.block.findByKind('main-canvas'); console.log('Blocks with kind "main-canvas":', mainCanvasBlocks.length); // Create a graphic block for an image const graphic = engine.block.create('graphic'); // Duplicate creates a copy with a new UUID const graphicCopy = engine.block.duplicate(graphic); // Destroy removes a block - the duplicate is no longer needed engine.block.destroy(graphicCopy); // Check if a block ID is still valid after operations const isOriginalValid = engine.block.isValid(graphic); const isCopyValid = engine.block.isValid(graphicCopy); console.log('Original valid:', isOriginalValid); // true console.log('Copy valid after destroy:', isCopyValid); // false // Create a rect shape to define the graphic's bounds const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); // Position and size the graphic (centered horizontally on 800px page) engine.block.setPositionX(graphic, 200); engine.block.setPositionY(graphic, 100); engine.block.setWidth(graphic, 400); engine.block.setHeight(graphic, 300); // Create an image fill and attach it to the 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); // Set content fill mode so the image fills the block bounds engine.block.setEnum(graphic, 'contentFill/mode', 'Cover'); // Blocks form a tree: scene > page > elements // Append the graphic to the page to make it visible engine.block.appendChild(page, graphic); // Query parent-child relationships const graphicParent = engine.block.getParent(graphic); console.log('Graphic parent is page:', graphicParent === page); // true const pageChildren = engine.block.getChildren(page); console.log('Page has children:', pageChildren.length); // Create a text block with content const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Position the text block (centered horizontally on 800px page) engine.block.setPositionX(textBlock, 200); engine.block.setPositionY(textBlock, 450); engine.block.setWidth(textBlock, 400); engine.block.setHeight(textBlock, 80); // Set text content engine.block.setString( textBlock, 'text/text', 'Blocks are the building units of CE.SDK designs' ); // Set font size to 72pt engine.block.setFloat(textBlock, 'text/fontSize', 72); // Center-align the text engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); // Check the text block type const textType = engine.block.getType(textBlock); console.log('Text block type:', textType); // '//ly.img.ubq/text' // Use reflection to discover available properties const graphicProperties = engine.block.findAllProperties(graphic); console.log('Graphic block has', graphicProperties.length, 'properties'); // Get property type information const opacityType = engine.block.getPropertyType('opacity'); console.log('Opacity property type:', opacityType); // 'Float' // Check if properties are readable/writable const isOpacityReadable = engine.block.isPropertyReadable('opacity'); const isOpacityWritable = engine.block.isPropertyWritable('opacity'); console.log( 'Opacity readable:', isOpacityReadable, 'writable:', isOpacityWritable ); // Use type-specific getters and setters // Float properties engine.block.setFloat(graphic, 'opacity', 0.9); const opacity = engine.block.getFloat(graphic, 'opacity'); console.log('Graphic opacity:', opacity); // Bool properties engine.block.setBool(page, 'page/marginEnabled', false); const marginEnabled = engine.block.getBool(page, 'page/marginEnabled'); console.log('Page margin enabled:', marginEnabled); // Enum properties - get allowed values first const blendModes = engine.block.getEnumValues('blend/mode'); console.log( 'Available blend modes:', blendModes.slice(0, 3).join(', '), '...' ); engine.block.setEnum(graphic, 'blend/mode', 'Multiply'); const blendMode = engine.block.getEnum(graphic, 'blend/mode'); console.log('Graphic blend mode:', blendMode); // Each block has a stable UUID across save/load cycles const graphicUUID = engine.block.getUUID(graphic); console.log('Graphic UUID:', graphicUUID); // Block names are mutable labels for organization engine.block.setName(graphic, 'Hero Image'); engine.block.setName(textBlock, 'Caption'); const graphicName = engine.block.getName(graphic); console.log('Graphic name:', graphicName); // 'Hero Image' // Select a block programmatically engine.block.select(graphic); // Selects graphic, deselects others // Check selection state const isGraphicSelected = engine.block.isSelected(graphic); console.log('Graphic is selected:', isGraphicSelected); // true // Add to selection without deselecting others engine.block.setSelected(textBlock, true); // Get all selected blocks const selectedBlocks = engine.block.findAllSelected(); console.log('Selected blocks count:', selectedBlocks.length); // 2 // Subscribe to selection changes const unsubscribeSelection = engine.block.onSelectionChanged(() => { const selected = engine.block.findAllSelected(); console.log( 'Selection changed, now selected:', selected.length, 'blocks' ); }); // Control block visibility engine.block.setVisible(graphic, true); const isVisible = engine.block.isVisible(graphic); console.log('Graphic is visible:', isVisible); // Control export inclusion engine.block.setIncludedInExport(graphic, true); const inExport = engine.block.isIncludedInExport(graphic); console.log('Graphic included in export:', inExport); // Control clipping behavior engine.block.setClipped(graphic, false); const isClipped = engine.block.isClipped(graphic); console.log('Graphic is clipped:', isClipped); // Query block state - indicates loading status const graphicState = engine.block.getState(graphic); console.log('Graphic state:', graphicState.type); // 'Ready', 'Pending', or 'Error' // Subscribe to state changes (useful for loading indicators) const unsubscribeState = engine.block.onStateChanged( [graphic], (changedBlocks) => { for (const blockId of changedBlocks) { const state = engine.block.getState(blockId); console.log(`Block ${blockId} state changed to:`, state.type); if (state.type === 'Pending' && state.progress !== undefined) { console.log( 'Loading progress:', Math.round(state.progress * 100) + '%' ); } } } ); // Save blocks to a string for persistence // Include 'bundle' scheme to allow serialization of blocks with bundled fonts const savedString = await engine.block.saveToString( [graphic, textBlock], ['buffer', 'http', 'https', 'bundle'] ); console.log('Blocks saved to string, length:', savedString.length); // Alternatively, blocks can also be saved with their assets to an archive // const savedBlocksArchive = await engine.block.saveToArchive([ // graphic, // textBlock // ]); // Load blocks from string (creates new blocks, not attached to scene) const loadedBlocks = await engine.block.loadFromString(savedString); console.log('Loaded blocks from string:', loadedBlocks.length); // Alternatively, blocks can also be loaded from an archive // const loadedBlocks = await engine.block.loadFromArchiveURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1_blocks.zip' // ); // console.log('Loaded blocks from archive URL:', loadedBlocks.length); // Alternatively, blocks can be loaded from an extracted zip file created with block.saveToArchive // const loadedBlocks = await engine.block.loadFromURL( // 'https://cdn.img.ly/assets/v6/ly.img.text.components/box/blocks.blocks' // ); // console.log('Loaded blocks from URL:', loadedBlocks.length); // Loaded blocks must be parented to appear in the scene // For demo purposes, we won't add them to avoid duplicates for (const block of loadedBlocks) { engine.block.destroy(block); } // Clean up subscriptions when done // In a real application, you'd keep these active as needed unsubscribeSelection(); unsubscribeState(); console.log('Blocks guide initialized successfully.'); console.log('Created graphic block with image fill and text block.'); console.log( 'Demonstrated: types, hierarchy, properties, selection, state, and serialization.' ); } } export default Example; ``` This guide covers block types and their uses, how to create and manage blocks programmatically, how to work with block properties using the reflection system, and how to handle selection, visibility, and state changes. ## Block Types CE.SDK provides several block types, each designed for specific content: - **graphic** (`//ly.img.ubq/graphic`): Visual blocks for images, shapes, and graphics - **text** (`//ly.img.ubq/text`): Text content with typography controls - **audio** (`//ly.img.ubq/audio`): Audio content for video scenes - **page** (`//ly.img.ubq/page`): Container blocks representing canvases or artboards - **cutout** (`//ly.img.ubq/cutout`): Blocks for masking operations We query a block's type using `getType()` and find blocks of a specific type with `findByType()`: ```typescript highlight-block-types // Get the current scene and page const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Find the page block - pages contain all design elements const pages = engine.block.findByType('page'); const page = pages[0]; // Query the block type - returns the full type path const pageType = engine.block.getType(page); console.log('Page block type:', pageType); // '//ly.img.ubq/page' ``` Block types are immutable—once created, a block's type cannot change. This distinguishes type from kind. ## Type vs Kind Type and kind serve different purposes. The **type** is determined at creation and defines core behavior. The **kind** is a custom string label you assign for application-specific categorization. ```typescript highlight-type-vs-kind // Type is immutable, determined at creation // Kind is a custom label you can set and change engine.block.setKind(page, 'main-canvas'); const pageKind = engine.block.getKind(page); console.log('Page kind:', pageKind); // 'main-canvas' // Find blocks by kind const mainCanvasBlocks = engine.block.findByKind('main-canvas'); console.log('Blocks with kind "main-canvas":', mainCanvasBlocks.length); ``` Use kind to tag blocks for your application's logic. You can set it with `setKind()`, query it with `getKind()`, and find blocks by kind with `findByKind()`. ## Block Hierarchy Blocks form a tree structure where scenes contain pages, and pages contain design elements. ```typescript highlight-block-hierarchy // Blocks form a tree: scene > page > elements // Append the graphic to the page to make it visible engine.block.appendChild(page, graphic); // Query parent-child relationships const graphicParent = engine.block.getParent(graphic); console.log('Graphic parent is page:', graphicParent === page); // true const pageChildren = engine.block.getChildren(page); console.log('Page has children:', pageChildren.length); ``` Only blocks that are direct or indirect children of a page block are rendered. A scene without any page children won't display content in the editor. Use `appendChild()` to add blocks to parents, `getParent()` to query a block's parent, and `getChildren()` to get a block's children. ## Block Lifecycle Create new blocks with `create()`, duplicate existing blocks with `duplicate()`, and remove blocks with `destroy()`. After destroying a block, `isValid()` returns `false` for that block ID. ```typescript highlight-block-lifecycle // Create a graphic block for an image const graphic = engine.block.create('graphic'); // Duplicate creates a copy with a new UUID const graphicCopy = engine.block.duplicate(graphic); // Destroy removes a block - the duplicate is no longer needed engine.block.destroy(graphicCopy); // Check if a block ID is still valid after operations const isOriginalValid = engine.block.isValid(graphic); const isCopyValid = engine.block.isValid(graphicCopy); console.log('Original valid:', isOriginalValid); // true console.log('Copy valid after destroy:', isCopyValid); // false ``` When duplicating a block, all children are included, and the duplicate receives a new UUID. ## Working with Fills Graphic blocks display content through fills. We create a fill, attach it to a block, and configure its source. ```typescript highlight-fill // Create a rect shape to define the graphic's bounds const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); // Position and size the graphic (centered horizontally on 800px page) engine.block.setPositionX(graphic, 200); engine.block.setPositionY(graphic, 100); engine.block.setWidth(graphic, 400); engine.block.setHeight(graphic, 300); // Create an image fill and attach it to the 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); // Set content fill mode so the image fills the block bounds engine.block.setEnum(graphic, 'contentFill/mode', 'Cover'); ``` CE.SDK supports several fill types including image, video, color, and gradient fills. See the [Fills guide](https://img.ly/docs/cesdk/angular/filters-and-effects/gradients-0ff079/) for details on available fill types. ## Creating Text Blocks Text blocks display formatted text content. We create a text block, position it, and set its content. ```typescript highlight-text-block // Create a text block with content const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Position the text block (centered horizontally on 800px page) engine.block.setPositionX(textBlock, 200); engine.block.setPositionY(textBlock, 450); engine.block.setWidth(textBlock, 400); engine.block.setHeight(textBlock, 80); // Set text content engine.block.setString( textBlock, 'text/text', 'Blocks are the building units of CE.SDK designs' ); // Set font size to 72pt engine.block.setFloat(textBlock, 'text/fontSize', 72); // Center-align the text engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); // Check the text block type const textType = engine.block.getType(textBlock); console.log('Text block type:', textType); // '//ly.img.ubq/text' ``` Text blocks support extensive typography controls covered in the [Text guides](https://img.ly/docs/cesdk/angular/text-8a993a/). ## Block Properties The reflection system lets you discover and manipulate any block property dynamically. Use `findAllProperties()` to get all available properties for a block—they're prefixed by category like `shape/star/points` or `text/fontSize`. ```typescript highlight-block-properties // Use reflection to discover available properties const graphicProperties = engine.block.findAllProperties(graphic); console.log('Graphic block has', graphicProperties.length, 'properties'); // Get property type information const opacityType = engine.block.getPropertyType('opacity'); console.log('Opacity property type:', opacityType); // 'Float' // Check if properties are readable/writable const isOpacityReadable = engine.block.isPropertyReadable('opacity'); const isOpacityWritable = engine.block.isPropertyWritable('opacity'); console.log( 'Opacity readable:', isOpacityReadable, 'writable:', isOpacityWritable ); ``` Query property types with `getPropertyType()`. Returns include `Bool`, `Int`, `Float`, `Double`, `String`, `Color`, `Enum`, or `Struct`. For enum properties, use `getEnumValues()` to get allowed values. ### Property Accessors Use type-specific getters and setters matching the property type: ```typescript highlight-property-accessors // Use type-specific getters and setters // Float properties engine.block.setFloat(graphic, 'opacity', 0.9); const opacity = engine.block.getFloat(graphic, 'opacity'); console.log('Graphic opacity:', opacity); // Bool properties engine.block.setBool(page, 'page/marginEnabled', false); const marginEnabled = engine.block.getBool(page, 'page/marginEnabled'); console.log('Page margin enabled:', marginEnabled); // Enum properties - get allowed values first const blendModes = engine.block.getEnumValues('blend/mode'); console.log( 'Available blend modes:', blendModes.slice(0, 3).join(', '), '...' ); engine.block.setEnum(graphic, 'blend/mode', 'Multiply'); const blendMode = engine.block.getEnum(graphic, 'blend/mode'); console.log('Graphic blend mode:', blendMode); ``` Using the wrong accessor type for a property will cause an error. Always check `getPropertyType()` if you're unsure which accessor to use. ## UUID, Names, and Identity Each block has a UUID that remains stable across save and load operations. Block names are mutable labels for organization. ```typescript highlight-uuid-identity // Each block has a stable UUID across save/load cycles const graphicUUID = engine.block.getUUID(graphic); console.log('Graphic UUID:', graphicUUID); // Block names are mutable labels for organization engine.block.setName(graphic, 'Hero Image'); engine.block.setName(textBlock, 'Caption'); const graphicName = engine.block.getName(graphic); console.log('Graphic name:', graphicName); // 'Hero Image' ``` Use `getUUID()` when you need a persistent identifier for a block. Names are useful for user-facing labels and can be changed freely with `setName()`. ## Selection Control which blocks are selected programmatically. Use `select()` to select a single block (deselecting others) or `setSelected()` to modify selection without affecting other blocks. ```typescript highlight-selection // Select a block programmatically engine.block.select(graphic); // Selects graphic, deselects others // Check selection state const isGraphicSelected = engine.block.isSelected(graphic); console.log('Graphic is selected:', isGraphicSelected); // true // Add to selection without deselecting others engine.block.setSelected(textBlock, true); // Get all selected blocks const selectedBlocks = engine.block.findAllSelected(); console.log('Selected blocks count:', selectedBlocks.length); // 2 // Subscribe to selection changes const unsubscribeSelection = engine.block.onSelectionChanged(() => { const selected = engine.block.findAllSelected(); console.log( 'Selection changed, now selected:', selected.length, 'blocks' ); }); ``` Subscribe to selection changes with `onSelectionChanged()` to update your UI when the selection state changes. ## Visibility Control whether blocks appear on the canvas and are included in exports. ```typescript highlight-visibility // Control block visibility engine.block.setVisible(graphic, true); const isVisible = engine.block.isVisible(graphic); console.log('Graphic is visible:', isVisible); // Control export inclusion engine.block.setIncludedInExport(graphic, true); const inExport = engine.block.isIncludedInExport(graphic); console.log('Graphic included in export:', inExport); ``` A block with `isVisible()` returning true may still not appear if it hasn't been added to a parent, the parent is hidden, or another block obscures it. ### Clipping Clipping determines whether a block's content is constrained to its parent's bounds. When `setClipped(block, true)` is set, any portion of the block extending beyond its parent's boundaries is hidden. When clipping is disabled, the block renders fully even if it overflows its parent container. ```typescript highlight-clipping // Control clipping behavior engine.block.setClipped(graphic, false); const isClipped = engine.block.isClipped(graphic); console.log('Graphic is clipped:', isClipped); ``` ## Block State Blocks track loading progress and error conditions through a state system with three possible states: - **Ready**: Normal state, no pending operations - **Pending**: Operation in progress with optional progress value (0-1) - **Error**: Operation failed (`ImageDecoding`, `VideoDecoding`, `FileFetch`, `AudioDecoding`, `Unknown`) ```typescript highlight-block-state // Query block state - indicates loading status const graphicState = engine.block.getState(graphic); console.log('Graphic state:', graphicState.type); // 'Ready', 'Pending', or 'Error' // Subscribe to state changes (useful for loading indicators) const unsubscribeState = engine.block.onStateChanged( [graphic], (changedBlocks) => { for (const blockId of changedBlocks) { const state = engine.block.getState(blockId); console.log(`Block ${blockId} state changed to:`, state.type); if (state.type === 'Pending' && state.progress !== undefined) { console.log( 'Loading progress:', Math.round(state.progress * 100) + '%' ); } } } ); ``` Subscribe to state changes with `onStateChanged()` to show loading indicators or handle errors in your UI. ## Serialization Save blocks to strings for persistence and restore them later. ```typescript highlight-serialization // Save blocks to a string for persistence // Include 'bundle' scheme to allow serialization of blocks with bundled fonts const savedString = await engine.block.saveToString( [graphic, textBlock], ['buffer', 'http', 'https', 'bundle'] ); console.log('Blocks saved to string, length:', savedString.length); // Alternatively, blocks can also be saved with their assets to an archive // const savedBlocksArchive = await engine.block.saveToArchive([ // graphic, // textBlock // ]); // Load blocks from string (creates new blocks, not attached to scene) const loadedBlocks = await engine.block.loadFromString(savedString); console.log('Loaded blocks from string:', loadedBlocks.length); // Alternatively, blocks can also be loaded from an archive // const loadedBlocks = await engine.block.loadFromArchiveURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1_blocks.zip' // ); // console.log('Loaded blocks from archive URL:', loadedBlocks.length); // Alternatively, blocks can be loaded from an extracted zip file created with block.saveToArchive // const loadedBlocks = await engine.block.loadFromURL( // 'https://cdn.img.ly/assets/v6/ly.img.text.components/box/blocks.blocks' // ); // console.log('Loaded blocks from URL:', loadedBlocks.length); // Loaded blocks must be parented to appear in the scene // For demo purposes, we won't add them to avoid duplicates for (const block of loadedBlocks) { engine.block.destroy(block); } ``` Use `saveToString()` for lightweight serialization or `saveToArchive()` to include all referenced assets. Blocks can be loaded with `loadFromString()`, `loadFromArchiveURL()`, or `loadFromURL()`. For `loadFromArchiveURL()`, the URL should point to the zipped archive file previously saved with `saveToArchive()`, whereas for `loadFromURL()`, it should point to a blocks file within an unzipped archive directory. Loaded blocks are not automatically attached to the scene—you must parent them with `appendChild()` to make them visible. ## Troubleshooting **Block not visible**: Ensure the block is a child of a page that's a child of the scene. **Property setter fails**: Verify the property type matches the setter method used. Use `getPropertyType()` to check. **Block ID invalid after destroy**: Use `isValid()` before operations on potentially destroyed blocks. **State stuck in Pending**: Check network connectivity for remote resources or use state change events to monitor progress. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Buffers" description: "Use buffers to store temporary, non-serializable data in CE.SDK via the CreativeEngine API." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/buffers-9c565b/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Buffers](https://img.ly/docs/cesdk/angular/concepts/buffers-9c565b/) --- Store and manage temporary binary data directly in memory using CE.SDK's buffer API for dynamically generated content. ![Buffers example showing audio waveform generated from buffer data](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-buffers-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-buffers-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-buffers-browser/) Buffers are in-memory containers for binary data referenced via `buffer://` URIs. Unlike external files that require network or file I/O, buffers exist only during the current session and are not serialized when saving scenes. This makes them ideal for procedural audio, real-time image data, or streaming content that doesn't need to persist beyond the current editing session. ```typescript file=@cesdk_web_examples/guides-concepts-buffers-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; // Helper function to create a WAV file from audio samples function createWavFile( samples: Float32Array, sampleRate: number, numChannels: number ): Uint8Array { const bytesPerSample = 2; // 16-bit audio const blockAlign = numChannels * bytesPerSample; const byteRate = sampleRate * blockAlign; const dataSize = samples.length * bytesPerSample; const fileSize = 44 + dataSize; // WAV header is 44 bytes const buffer = new ArrayBuffer(fileSize); const view = new DataView(buffer); // Write WAV header // "RIFF" chunk descriptor writeString(view, 0, 'RIFF'); view.setUint32(4, fileSize - 8, true); // File size minus RIFF header writeString(view, 8, 'WAVE'); // "fmt " sub-chunk writeString(view, 12, 'fmt '); view.setUint32(16, 16, true); // Subchunk1Size (16 for PCM) view.setUint16(20, 1, true); // AudioFormat (1 = PCM) view.setUint16(22, numChannels, true); // NumChannels view.setUint32(24, sampleRate, true); // SampleRate view.setUint32(28, byteRate, true); // ByteRate view.setUint16(32, blockAlign, true); // BlockAlign view.setUint16(34, bytesPerSample * 8, true); // BitsPerSample // "data" sub-chunk writeString(view, 36, 'data'); view.setUint32(40, dataSize, true); // Subchunk2Size // Write audio samples as 16-bit PCM let offset = 44; for (let i = 0; i < samples.length; i++) { // Convert float (-1 to 1) to 16-bit integer const sample = Math.max(-1, Math.min(1, samples[i])); const intSample = sample < 0 ? sample * 0x8000 : sample * 0x7fff; view.setInt16(offset, intSample, true); offset += 2; } return new Uint8Array(buffer); } function writeString(view: DataView, offset: number, str: string): void { for (let i = 0; i < str.length; i++) { view.setUint8(offset + i, str.charCodeAt(i)); } } 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); const engine = cesdk.engine; // Get the page (first container in video scenes) const pages = engine.block.findByType('page'); const page = pages[0]; // Add a centered text block to explain the example const textBlock = engine.block.create('text'); engine.block.setString( textBlock, 'text/text', 'The audio track in this scene lives in a buffer.' ); engine.block.setFloat(textBlock, 'text/fontSize', 108); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setHeightMode(textBlock, 'Auto'); // Set text color to white engine.block.setColor(textBlock, 'fill/solid/color', { r: 1, g: 1, b: 1, a: 1 }); // Get page dimensions and position with 10% horizontal margin const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const horizontalMargin = pageWidth * 0.1; const textWidth = pageWidth - horizontalMargin * 2; engine.block.setWidth(textBlock, textWidth); engine.block.setPositionX(textBlock, horizontalMargin); // Append to page first so layout can be computed engine.block.appendChild(page, textBlock); // Force layout computation and get the actual frame height const textHeight = engine.block.getFrameHeight(textBlock); engine.block.setPositionY(textBlock, (pageHeight - textHeight) / 2); // Set duration to match the scene engine.block.setDuration(textBlock, 2); // Create a buffer and get its URI const bufferUri = engine.editor.createBuffer(); console.log('Buffer URI:', bufferUri); // Generate sine wave audio samples const sampleRate = 44100; const duration = 2; // 2 seconds const frequency = 440; // A4 note const numChannels = 2; // Stereo // Create Float32Array for audio samples (interleaved stereo) const numSamples = sampleRate * duration * numChannels; const samples = new Float32Array(numSamples); // Generate a 440 Hz sine wave for (let i = 0; i < numSamples; i += numChannels) { const sampleIndex = i / numChannels; const time = sampleIndex / sampleRate; const value = Math.sin(2 * Math.PI * frequency * time) * 0.5; // 50% amplitude // Write to both left and right channels samples[i] = value; // Left channel samples[i + 1] = value; // Right channel } // Convert samples to WAV format and write to buffer const wavData = createWavFile(samples, sampleRate, numChannels); engine.editor.setBufferData(bufferUri, 0, wavData); // Verify the buffer length const bufferLength = engine.editor.getBufferLength(bufferUri); console.log('Buffer length:', bufferLength, 'bytes'); // Create an audio block const audioBlock = engine.block.create('audio'); // Assign the buffer URI to the audio block engine.block.setString(audioBlock, 'audio/fileURI', bufferUri); // Set audio duration to match the generated samples engine.block.setDuration(audioBlock, duration); // Append the audio block to the page engine.block.appendChild(page, audioBlock); // Demonstrate reading buffer data back const readData = engine.editor.getBufferData(bufferUri, 0, 100); console.log('First 100 bytes of buffer data:', readData); // Demonstrate resizing a buffer with a separate demo buffer const demoBuffer = engine.editor.createBuffer(); engine.editor.setBufferData( demoBuffer, 0, new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8]) ); const demoLength = engine.editor.getBufferLength(demoBuffer); console.log('Demo buffer length before resize:', demoLength); engine.editor.setBufferLength(demoBuffer, demoLength / 2); console.log( 'Demo buffer length after resize:', engine.editor.getBufferLength(demoBuffer) ); engine.editor.destroyBuffer(demoBuffer); // Find all transient resources (including our buffer) const transientResources = engine.editor.findAllTransientResources(); console.log('Transient resources in scene:'); for (const resource of transientResources) { console.log(` URL: ${resource.URL}, Size: ${resource.size} bytes`); } // Demonstrate persisting buffer data using a Blob URL // In production, you would upload to CDN/cloud storage instead const bufferData = engine.editor.getBufferData(bufferUri, 0, bufferLength); const blob = new Blob([new Uint8Array(bufferData)], { type: 'audio/wav' }); const persistentUrl = URL.createObjectURL(blob); // Update all references from buffer:// to the new URL engine.editor.relocateResource(bufferUri, persistentUrl); console.log('Buffer relocated to:', persistentUrl); console.log('Buffers example loaded successfully'); console.log( 'Note: Audio playback requires user interaction in most browsers' ); } } export default Example; ``` This guide covers how to create and manage buffers, write and read binary data, assign buffers to block properties like audio sources, and handle transient resources when saving scenes. ## Setting Up the Scene We first create a scene and set up a page for our audio composition. ```typescript highlight-create-video-scene await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); ``` ## Creating and Managing Buffers We use `engine.editor.createBuffer()` to allocate a new buffer and receive its URI. This URI follows the `buffer://` scheme and uniquely identifies the buffer within the engine instance. ```typescript highlight-create-buffer // Create a buffer and get its URI const bufferUri = engine.editor.createBuffer(); console.log('Buffer URI:', bufferUri); ``` Buffers persist in memory until you explicitly destroy them with `engine.editor.destroyBuffer()` or the engine instance is disposed. For large buffers or long editing sessions, you should destroy buffers when they're no longer needed to free memory. ## Writing Data to Buffers To populate a buffer with binary data, we use `engine.editor.setBufferData()`. This method takes the buffer URI, an offset in bytes, and a `Uint8Array` containing the data to write. In this example, we generate a 440 Hz sine wave as stereo PCM audio samples. We create a `Float32Array` for the sample values that will be converted to a valid audio format. ```typescript highlight-generate-samples // Generate sine wave audio samples const sampleRate = 44100; const duration = 2; // 2 seconds const frequency = 440; // A4 note const numChannels = 2; // Stereo // Create Float32Array for audio samples (interleaved stereo) const numSamples = sampleRate * duration * numChannels; const samples = new Float32Array(numSamples); // Generate a 440 Hz sine wave for (let i = 0; i < numSamples; i += numChannels) { const sampleIndex = i / numChannels; const time = sampleIndex / sampleRate; const value = Math.sin(2 * Math.PI * frequency * time) * 0.5; // 50% amplitude // Write to both left and right channels samples[i] = value; // Left channel samples[i + 1] = value; // Right channel } ``` When using buffers for audio, the data must be in a recognized audio format like WAV. We convert the raw samples to a WAV file by adding the appropriate headers, then write the complete file to the buffer. ```typescript highlight-write-buffer // Convert samples to WAV format and write to buffer const wavData = createWavFile(samples, sampleRate, numChannels); engine.editor.setBufferData(bufferUri, 0, wavData); // Verify the buffer length const bufferLength = engine.editor.getBufferLength(bufferUri); console.log('Buffer length:', bufferLength, 'bytes'); ``` ## Reading Data from Buffers To read data back from a buffer, we use `engine.editor.getBufferData()` with the buffer URI, a starting offset, and the number of bytes to read. We first query the buffer length with `engine.editor.getBufferLength()` to determine how much data is available. ```typescript highlight-read-buffer // Demonstrate reading buffer data back const readData = engine.editor.getBufferData(bufferUri, 0, 100); console.log('First 100 bytes of buffer data:', readData); ``` This returns a `Uint8Array` that you can convert back to other typed arrays as needed. Partial reads are supported—you can read any range within the buffer bounds. ## Resizing Buffers You can change a buffer's size at any time with `engine.editor.setBufferLength()`. Increasing the size allocates additional space, while decreasing it truncates the data. Here we demonstrate resizing with a separate demo buffer to avoid truncating our audio data. ```typescript highlight-resize-buffer // Demonstrate resizing a buffer with a separate demo buffer const demoBuffer = engine.editor.createBuffer(); engine.editor.setBufferData( demoBuffer, 0, new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8]) ); const demoLength = engine.editor.getBufferLength(demoBuffer); console.log('Demo buffer length before resize:', demoLength); engine.editor.setBufferLength(demoBuffer, demoLength / 2); console.log( 'Demo buffer length after resize:', engine.editor.getBufferLength(demoBuffer) ); engine.editor.destroyBuffer(demoBuffer); ``` Keep in mind that truncating a buffer permanently discards data beyond the new length. Always query the current length first if you need to preserve the original size, or create a copy before resizing. ## Assigning Buffers to Blocks Buffer URIs work like any other resource URI in CE.SDK. We assign them to block properties using `engine.block.setString()`. For audio blocks, we set the `audio/fileURI` property. ```typescript highlight-create-audio-block // Create an audio block const audioBlock = engine.block.create('audio'); // Assign the buffer URI to the audio block engine.block.setString(audioBlock, 'audio/fileURI', bufferUri); // Set audio duration to match the generated samples engine.block.setDuration(audioBlock, duration); // Append the audio block to the page engine.block.appendChild(page, audioBlock); ``` The same approach works for other resource properties: - **Audio blocks**: `audio/fileURI` - **Image fills**: `fill/image/imageFileURI` - **Video fills**: `fill/video/fileURI` Any property that accepts a URI can reference a buffer. ## Transient Resources and Scene Serialization Buffers are transient resources—the URI gets serialized when you save a scene, but the actual binary data does not persist. This means a saved scene will contain references to `buffer://` URIs that won't resolve when the scene is loaded again. We use `engine.editor.findAllTransientResources()` to discover all transient resources in the current scene, including buffers. Each resource includes its URL and size in bytes. ```typescript highlight-find-transient // Find all transient resources (including our buffer) const transientResources = engine.editor.findAllTransientResources(); console.log('Transient resources in scene:'); for (const resource of transientResources) { console.log(` URL: ${resource.URL}, Size: ${resource.size} bytes`); } ``` > **Note:** **Limitations**Buffers are intended for temporary data only.* Buffer data is not part of scene serialization > * Changes to buffers can't be undone using the history system Note that `engine.scene.saveToString()` does NOT include `buffer://` in its default allowed resource schemes, while `engine.block.saveToString()` does include it. You may need to configure the allowed schemes depending on your serialization needs. ## Persisting Buffer Data To permanently save buffer content, you must extract the data, upload it to persistent storage, then update the block references to point to the new URL. This example demonstrates the pattern using a Blob URL—in production, you would upload to a CDN or cloud storage instead. ```typescript highlight-persist-buffer // Demonstrate persisting buffer data using a Blob URL // In production, you would upload to CDN/cloud storage instead const bufferData = engine.editor.getBufferData(bufferUri, 0, bufferLength); const blob = new Blob([new Uint8Array(bufferData)], { type: 'audio/wav' }); const persistentUrl = URL.createObjectURL(blob); // Update all references from buffer:// to the new URL engine.editor.relocateResource(bufferUri, persistentUrl); console.log('Buffer relocated to:', persistentUrl); ``` We read the buffer data, create a persistent URL from it, then use `engine.editor.relocateResource()` to update all references to the old buffer URI throughout the scene. After relocation, you can save the scene and the new persistent URLs will be serialized. ## Troubleshooting **Buffer data not appearing in exported scene** Buffers are transient and don't persist with scene saves. Use `findAllTransientResources()` to identify buffers, then relocate them to persistent storage before exporting. **Memory usage growing unexpectedly** Call `engine.editor.destroyBuffer()` when buffers are no longer needed. Unlike external resources that can be garbage collected, buffers remain in memory until explicitly destroyed. **Data corruption when writing** Ensure the offset plus data length doesn't exceed the intended buffer bounds. Resize the buffer first with `setBufferLength()` if you need more space. **Buffer URI not recognized by block** Verify the buffer was created in the same engine instance. Buffer URIs are not portable between different engine instances or sessions. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Design Units" description: "Configure design units (pixels, millimeters, inches) and DPI settings for print-ready output in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/design-units-cc6597/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Design Units](https://img.ly/docs/cesdk/angular/concepts/design-units-cc6597/) --- Control measurement systems for precise physical dimensions—create print-ready documents with millimeter or inch units and configurable DPI for export quality. ![Design Units example showing an A4 document configured with millimeter units](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-design-units-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-design-units-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-design-units-browser/) Design units determine the coordinate system for all layout values in CE.SDK—positions, sizes, and margins. The engine supports three unit types: **Pixel** for screen-based designs, **Millimeter** for metric print dimensions, and **Inch** for imperial print formats. ```typescript file=@cesdk_web_examples/guides-concepts-design-units-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Design Units Guide * * Demonstrates working with design units in CE.SDK: * - Understanding unit types (Pixel, Millimeter, Inch) * - Getting and setting the design unit * - Configuring DPI for print output * - Setting up print-ready dimensions */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 210, height: 297, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the current scene const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Get the current design unit const currentUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Current design unit:', currentUnit); // 'Pixel' by default // Set design unit to Millimeter for print workflow engine.scene.setDesignUnit('Millimeter'); // Verify the change const newUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Design unit changed to:', newUnit); // 'Millimeter' // Set DPI to 300 for print-quality exports // Higher DPI produces higher resolution output engine.block.setFloat(scene, 'scene/dpi', 300); // Verify the DPI setting const dpi = engine.block.getFloat(scene, 'scene/dpi'); // eslint-disable-next-line no-console console.log('DPI set to:', dpi); // 300 // Get the page and set A4 dimensions (210 x 297 mm) const page = engine.block.findByType('page')[0]; // Verify dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // eslint-disable-next-line no-console console.log(`Page dimensions: ${pageWidth}mm x ${pageHeight}mm`); // Create a text block with millimeter dimensions const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Position text at 20mm from left, 30mm from top engine.block.setPositionX(textBlock, 20); engine.block.setPositionY(textBlock, 30); // Set text block size to 170mm x 50mm engine.block.setWidth(textBlock, 170); engine.block.setHeight(textBlock, 50); // Add content to the text block engine.block.setString( textBlock, 'text/text', 'This A4 document uses millimeter units with 300 DPI for print-ready output.' ); // Demonstrate unit comparison // At 300 DPI: 1 inch = 300 pixels, 1 mm = ~11.81 pixels // eslint-disable-next-line no-console console.log('Unit comparison at 300 DPI:'); // eslint-disable-next-line no-console console.log( '- A4 width (210mm) will export as', 210 * (300 / 25.4), 'pixels' ); // eslint-disable-next-line no-console console.log( '- A4 height (297mm) will export as', 297 * (300 / 25.4), 'pixels' ); // eslint-disable-next-line no-console console.log( 'Design units guide initialized. Scene configured for A4 print output.' ); } } export default Example; ``` This guide covers how to get and set design units, configure DPI for export quality, and set up scenes for specific physical dimensions like A4 paper. ## Understanding Design Units ### Supported Unit Types CE.SDK supports three design unit types, each suited for different output scenarios: - **Pixel** — Default unit, ideal for screen-based designs, web graphics, and video content. One unit equals one pixel in the design coordinate space. - **Millimeter** — For print designs targeting metric dimensions (A4, A5, business cards). One unit equals one millimeter at the scene's DPI setting. - **Inch** — For print designs targeting imperial dimensions (letter, legal, US business cards). One unit equals one inch at the scene's DPI setting. ### Design Unit and DPI Relationship DPI (dots per inch) determines how physical units convert to pixels during export. At 300 DPI, a 1-inch block exports as 300 pixels wide. Higher DPI values produce higher-resolution exports suitable for professional printing. For pixel-based scenes, DPI primarily affects font size conversions since font sizes are always specified in points. ## Getting the Current Design Unit Use `engine.scene.getDesignUnit()` to retrieve the current scene's design unit. This returns one of three values: `'Pixel'`, `'Millimeter'`, or `'Inch'`. ```typescript highlight-get-design-unit // Get the current scene const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Get the current design unit const currentUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Current design unit:', currentUnit); // 'Pixel' by default ``` ## Setting the Design Unit Use `engine.scene.setDesignUnit()` to change the measurement system. When you change the design unit, CE.SDK automatically converts existing layout values to maintain visual appearance. ```typescript highlight-set-design-unit // Set design unit to Millimeter for print workflow engine.scene.setDesignUnit('Millimeter'); // Verify the change const newUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Design unit changed to:', newUnit); // 'Millimeter' ``` ## Configuring DPI Access DPI through the scene's `scene/dpi` property. For print workflows, 300 DPI is the standard for high-quality output. ```typescript highlight-configure-dpi // Set DPI to 300 for print-quality exports // Higher DPI produces higher resolution output engine.block.setFloat(scene, 'scene/dpi', 300); // Verify the DPI setting const dpi = engine.block.getFloat(scene, 'scene/dpi'); // eslint-disable-next-line no-console console.log('DPI set to:', dpi); // 300 ``` DPI affects different aspects depending on the design unit: - **Physical units (mm, in)**: DPI determines the pixel resolution of exported files - **Pixel units**: DPI only affects the conversion of font sizes from points to pixels ## Setting Up Print-Ready Designs For print workflows, combine `setDesignUnit()` with appropriate DPI and page dimensions. Here's how to set up an A4 document ready for print export: ```typescript highlight-set-page-dimensions // Get the page and set A4 dimensions (210 x 297 mm) const page = engine.block.findByType('page')[0]; // Verify dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // eslint-disable-next-line no-console console.log(`Page dimensions: ${pageWidth}mm x ${pageHeight}mm`); ``` ## Font Sizes and Design Units Font sizes are always specified in points (`pt`), regardless of the scene's design unit. The DPI setting affects how points convert to pixels for rendering. ```typescript highlight-create-text-block // Create a text block with millimeter dimensions const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Position text at 20mm from left, 30mm from top engine.block.setPositionX(textBlock, 20); engine.block.setPositionY(textBlock, 30); // Set text block size to 170mm x 50mm engine.block.setWidth(textBlock, 170); engine.block.setHeight(textBlock, 50); // Add content to the text block engine.block.setString( textBlock, 'text/text', 'This A4 document uses millimeter units with 300 DPI for print-ready output.' ); ``` When DPI changes, text blocks automatically adjust their rendered size to maintain visual consistency. ## Understanding Export Resolution The relationship between design units and export resolution is important for print workflows: ```typescript highlight-compare-units // Demonstrate unit comparison // At 300 DPI: 1 inch = 300 pixels, 1 mm = ~11.81 pixels // eslint-disable-next-line no-console console.log('Unit comparison at 300 DPI:'); // eslint-disable-next-line no-console console.log( '- A4 width (210mm) will export as', 210 * (300 / 25.4), 'pixels' ); // eslint-disable-next-line no-console console.log( '- A4 height (297mm) will export as', 297 * (300 / 25.4), 'pixels' ); ``` At 300 DPI: - An A4 page (210 × 297 mm) exports as 2480 × 3508 pixels - A letter page (8.5 × 11 in) exports as 2550 × 3300 pixels ## Troubleshooting ### Exported Dimensions Don't Match Expected Size Verify that DPI is set correctly for physical units. At 300 DPI, 1 inch becomes 300 pixels. Check that your design unit matches your target output format. ### Text Appears Wrong Size After Unit Change Font sizes in points auto-adjust based on DPI. If text looks incorrect, verify the DPI setting matches your workflow requirements. ### Blocks Shift Position After Changing Units CE.SDK preserves visual appearance during unit conversion. If positions seem unexpected, check the original coordinate values—the numeric values change but visual positions should remain stable. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Editor State" description: "Control how users interact with content by switching between edit modes like transform, crop, and text." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/edit-modes-1f5b6c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Editor State](https://img.ly/docs/cesdk/angular/concepts/edit-modes-1f5b6c/) --- Editor state determines how users interact with content on the canvas by controlling which editing mode is active and tracking cursor behavior. This guide covers edit modes, state change subscriptions, cursor state, and interaction detection. ![CE.SDK Editor State Hero Image](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-editor-state-browser/) Edit modes define what type of content users can currently modify. Each mode enables different interaction behaviors—Transform mode for moving and resizing, Crop mode for adjusting content within frames, Text mode for inline text editing, and so on. The engine maintains the current edit mode as part of its state and notifies subscribers when it changes. ```typescript file=@cesdk_web_examples/guides-concepts-editor-state-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Editor State Guide * * Demonstrates working with editor state in CE.SDK: * - Understanding edit modes and switching between them * - Subscribing to state changes * - Reading cursor type and rotation * - Tracking text cursor position * - Detecting active interactions */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Add an image block to demonstrate Crop mode const imageBlock = engine.block.create('graphic'); engine.block.appendChild(page, imageBlock); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); engine.block.setWidth(imageBlock, 350); engine.block.setHeight(imageBlock, 250); engine.block.setPositionX(imageBlock, 50); engine.block.setPositionY(imageBlock, 175); 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); // Add a text block to demonstrate Text mode const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); engine.block.replaceText(textBlock, 'Edit this text'); engine.block.setTextFontSize(textBlock, 48); engine.block.setTextColor(textBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setPositionX(textBlock, 450); engine.block.setPositionY(textBlock, 275); // Subscribe to state changes to track mode transitions // The returned function can be called to unsubscribe when no longer needed const unsubscribeFromStateChanges = engine.editor.onStateChanged(() => { const currentMode = engine.editor.getEditMode(); console.log('Edit mode changed to:', currentMode); // Also log cursor state when state changes const cursorType = engine.editor.getCursorType(); console.log('Current cursor type:', cursorType); }); console.log('State change subscription active'); // Example: Unsubscribe after a delay (in a real app, call when component unmounts) setTimeout(() => { unsubscribeFromStateChanges(); console.log('Unsubscribed from state changes'); }, 10000); // Get the current edit mode (default is Transform) const initialMode = engine.editor.getEditMode(); console.log('Initial edit mode:', initialMode); // Select the image block and switch to Crop mode engine.block.select(imageBlock); engine.editor.setEditMode('Crop'); console.log('Switched to Crop mode on image block'); // After a moment, switch to Transform mode engine.editor.setEditMode('Transform'); console.log('Switched back to Transform mode'); // Create a custom edit mode that inherits from Crop behavior engine.editor.setEditMode('MyCustomCropMode', 'Crop'); console.log( 'Created custom mode based on Crop:', engine.editor.getEditMode() ); // Switch back to Transform for the demo engine.editor.setEditMode('Transform'); // Get the cursor type to display the appropriate mouse cursor const cursorType = engine.editor.getCursorType(); console.log('Cursor type:', cursorType); // Returns: 'Arrow', 'Move', 'MoveNotPermitted', 'Resize', 'Rotate', or 'Text' // Get cursor rotation for directional cursors like resize handles const cursorRotation = engine.editor.getCursorRotation(); console.log('Cursor rotation (radians):', cursorRotation); // Apply to cursor element: transform: rotate(${cursorRotation}rad) // Select the text block and switch to Text mode to get cursor position engine.block.select(textBlock); engine.editor.setEditMode('Text'); // Get text cursor position in screen space const textCursorX = engine.editor.getTextCursorPositionInScreenSpaceX(); const textCursorY = engine.editor.getTextCursorPositionInScreenSpaceY(); console.log('Text cursor position:', { x: textCursorX, y: textCursorY }); // Use these coordinates to position a floating toolbar near the text cursor // Check if a user interaction is currently in progress const isInteracting = engine.editor.unstable_isInteractionHappening(); console.log('Is interaction happening:', isInteracting); // Use this to defer expensive operations during drag/resize operations if (!isInteracting) { console.log('Safe to perform heavy updates'); } // Switch back to Transform mode and select the image for the hero screenshot engine.editor.setEditMode('Transform'); engine.block.select(imageBlock); // Zoom to fit the page engine.scene.enableZoomAutoFit(page, 'Both'); console.log('Editor State guide initialized successfully.'); console.log('Try clicking on blocks to see edit modes change.'); console.log('Double-click on the text block to enter Text mode.'); console.log('Select the image and use the crop handle to enter Crop mode.'); } } export default Example; ``` This guide covers: - Understanding the built-in edit modes (Transform, Crop, Text, Trim, Playback, Vector) - Switching edit modes programmatically - Creating custom edit modes that inherit from built-in modes - Subscribing to state changes for UI synchronization - Reading cursor type and rotation for custom cursors - Tracking text cursor position for overlays - Detecting active user interactions ## Edit Modes CE.SDK supports five built-in edit modes, each designed for a specific type of interaction with canvas content. ### Transform Mode Transform is the default mode that allows users to move, resize, and rotate blocks on the canvas. When a block is selected in Transform mode, control handles appear for manipulation. ```typescript highlight=highlight-get-edit-mode // Get the current edit mode (default is Transform) const initialMode = engine.editor.getEditMode(); console.log('Initial edit mode:', initialMode); ``` Query the current mode using `engine.editor.getEditMode()`. The initial mode is always `'Transform'`. ### Switching Edit Modes Use `engine.editor.setEditMode()` to change the current editing mode. The mode determines what interactions are available on selected blocks. ```typescript highlight=highlight-set-edit-mode // Select the image block and switch to Crop mode engine.block.select(imageBlock); engine.editor.setEditMode('Crop'); console.log('Switched to Crop mode on image block'); // After a moment, switch to Transform mode engine.editor.setEditMode('Transform'); console.log('Switched back to Transform mode'); ``` Available modes include: - **Transform**: Move, resize, and rotate blocks (default) - **Crop**: Adjust media content within block frames - **Text**: Edit text content inline - **Trim**: Adjust clip start and end points (video scenes) - **Playback**: Play video or audio content (limited interactions) - **Vector**: Edit vector path anchor points and bezier handles ### Custom Edit Modes You can create custom modes that inherit behavior from a built-in base mode. Pass an optional second parameter to `setEditMode()` specifying the base mode. ```typescript highlight=highlight-custom-edit-mode // Create a custom edit mode that inherits from Crop behavior engine.editor.setEditMode('MyCustomCropMode', 'Crop'); console.log( 'Created custom mode based on Crop:', engine.editor.getEditMode() ); // Switch back to Transform for the demo engine.editor.setEditMode('Transform'); ``` Custom modes are useful when you need to track application-specific states while maintaining standard editing behavior. For example, you might use a custom mode to indicate that a specific tool is active in your UI while still allowing Transform interactions. ## Subscribing to State Changes The engine notifies subscribers whenever the editor state changes, including mode switches and cursor updates. ### Using onStateChanged Subscribe to state changes using `engine.editor.onStateChanged()`. The callback fires at the end of each engine update where state changed. The subscription returns an unsubscribe function for cleanup. ```typescript highlight=highlight-on-state-changed // Subscribe to state changes to track mode transitions // The returned function can be called to unsubscribe when no longer needed const unsubscribeFromStateChanges = engine.editor.onStateChanged(() => { const currentMode = engine.editor.getEditMode(); console.log('Edit mode changed to:', currentMode); // Also log cursor state when state changes const cursorType = engine.editor.getCursorType(); console.log('Current cursor type:', cursorType); }); console.log('State change subscription active'); // Example: Unsubscribe after a delay (in a real app, call when component unmounts) setTimeout(() => { unsubscribeFromStateChanges(); console.log('Unsubscribed from state changes'); }, 10000); ``` Common use cases include: - Updating toolbar UI to reflect the current mode - Showing mode-specific panels or controls - Disabling certain actions during Playback mode - Logging state transitions for analytics Always call the unsubscribe function when your component unmounts or when you no longer need updates. This prevents memory leaks and unnecessary callback invocations. ## Cursor State The engine tracks what cursor type should be displayed based on the current context and hovered element. Use this information to display the appropriate mouse cursor in your custom UI. ### Reading Cursor Type Use `engine.editor.getCursorType()` to get the cursor type to display. ```typescript highlight=highlight-cursor-type // Get the cursor type to display the appropriate mouse cursor const cursorType = engine.editor.getCursorType(); console.log('Cursor type:', cursorType); // Returns: 'Arrow', 'Move', 'MoveNotPermitted', 'Resize', 'Rotate', or 'Text' ``` The method returns one of these values: - **Arrow**: Default pointer cursor - **Move**: Indicates the element can be moved - **MoveNotPermitted**: Element cannot be moved in the current context - **Resize**: Resize handle is hovered - **Rotate**: Rotation handle is hovered - **Text**: Text editing cursor - **Cell**: Crosshair cursor for precise placement (vector editing) ### Reading Cursor Rotation For directional cursors like resize handles, use `engine.editor.getCursorRotation()` to get the rotation angle in radians. ```typescript highlight=highlight-cursor-rotation // Get cursor rotation for directional cursors like resize handles const cursorRotation = engine.editor.getCursorRotation(); console.log('Cursor rotation (radians):', cursorRotation); // Apply to cursor element: transform: rotate(${cursorRotation}rad) ``` Apply this rotation to your cursor image for correct visual feedback. For example, when hovering over a corner resize handle at 45 degrees, the rotation value reflects that angle so your cursor points in the correct direction. ## Text Cursor Position When in Text edit mode, you can track the text cursor (caret) position for rendering custom overlays or toolbars near the insertion point. ### Screen Space Coordinates Use `engine.editor.getTextCursorPositionInScreenSpaceX()` and `engine.editor.getTextCursorPositionInScreenSpaceY()` to get the cursor position in screen pixels. ```typescript highlight=highlight-text-cursor-position // Select the text block and switch to Text mode to get cursor position engine.block.select(textBlock); engine.editor.setEditMode('Text'); // Get text cursor position in screen space const textCursorX = engine.editor.getTextCursorPositionInScreenSpaceX(); const textCursorY = engine.editor.getTextCursorPositionInScreenSpaceY(); console.log('Text cursor position:', { x: textCursorX, y: textCursorY }); // Use these coordinates to position a floating toolbar near the text cursor ``` These values update as the user moves through text. Use them to position floating toolbars, formatting menus, or other UI elements relative to where the user is editing. ## Detecting Active Interactions Determine whether the user is currently in the middle of an interaction like dragging or resizing. ### Using unstable\_isInteractionHappening Call `engine.editor.unstable_isInteractionHappening()` to check if a user interaction is in progress. ```typescript highlight=highlight-interaction-happening // Check if a user interaction is currently in progress const isInteracting = engine.editor.unstable_isInteractionHappening(); console.log('Is interaction happening:', isInteracting); // Use this to defer expensive operations during drag/resize operations if (!isInteracting) { console.log('Safe to perform heavy updates'); } ``` This is useful for: - Deferring expensive operations until after the interaction completes - Showing different UI states during drag operations - Optimizing performance by batching updates Note that this API is marked unstable and may change in future releases. ## Troubleshooting ### Mode Doesn't Change Visually Ensure a block is selected that supports the target mode. For example, switching to Crop mode requires an image or video block to be selected. Switching to Text mode requires a text block. ### State Change Callback Not Firing Verify the subscription is active before the operation that changes state. If you subscribe after the state change occurs, you won't receive the initial notification. ### Cursor Type Always Arrow Check that the mouse is over an interactive element and the element supports the current edit mode. The cursor type only changes when hovering over actionable areas like handles or selectable content. ### Text Cursor Position is 0,0 Confirm the editor is in Text mode with an active text selection. The text cursor position is only valid when actively editing text content. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Editing Workflow" description: "Control editing access with Creator, Adopter, Viewer, and Presenter roles using global and block-level scopes for tailored permissions." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/editing-workflow-032d27/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Editing Workflow](https://img.ly/docs/cesdk/angular/concepts/editing-workflow-032d27/) --- CE.SDK controls editing access through roles and scopes, enabling template workflows where designers create locked layouts and end-users customize only permitted elements. ![Editing workflow with role-based permissions in CE.SDK](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-editing-workflow-browser/) CE.SDK uses a two-tier permission system: **roles** define user types with preset permissions, while **scopes** control specific capabilities. This enables workflows where templates can be prepared by designers and safely customized by end-users. ```typescript file=@cesdk_web_examples/guides-concepts-editing-workflow-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * Demonstrates CE.SDK's role-based permission system with scopes. */ 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Roles define user types: 'Creator', 'Adopter', 'Viewer', 'Presenter' const role = engine.editor.getRole(); console.log('Current role:', role); // 'Creator' // Configure scopes when role changes (role change resets to defaults) engine.editor.onRoleChanged(() => { // Set global scopes to 'Defer' so block-level scopes take effect engine.editor.setGlobalScope('editor/select', 'Defer'); engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('text/edit', 'Defer'); engine.editor.setGlobalScope('lifecycle/destroy', 'Defer'); }); // Get page dimensions for centering const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a locked text block (brand element) const lockedText = engine.block.create('text'); engine.block.replaceText(lockedText, 'Locked Text'); engine.block.setTextFontSize(lockedText, 40); engine.block.setEnum(lockedText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(lockedText, pageWidth); engine.block.setHeightMode(lockedText, 'Auto'); engine.block.setPositionX(lockedText, 0); engine.block.setPositionY(lockedText, pageHeight / 2 - 50); engine.block.appendChild(page, lockedText); // Lock the block - Adopters cannot select, edit, or move it engine.block.setScopeEnabled(lockedText, 'editor/select', false); engine.block.setScopeEnabled(lockedText, 'text/edit', false); engine.block.setScopeEnabled(lockedText, 'layer/move', false); engine.block.setScopeEnabled(lockedText, 'lifecycle/destroy', false); // Create an editable text block (user content) const editableText = engine.block.create('text'); engine.block.replaceText(editableText, 'Editable Text'); engine.block.setTextFontSize(editableText, 40); engine.block.setEnum(editableText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(editableText, pageWidth); engine.block.setHeightMode(editableText, 'Auto'); engine.block.setPositionX(editableText, 0); engine.block.setPositionY(editableText, pageHeight / 2 + 10); engine.block.appendChild(page, editableText); // Center both texts vertically as a group const lockedHeight = engine.block.getFrameHeight(lockedText); const editableHeight = engine.block.getFrameHeight(editableText); const gap = 20; const totalHeight = lockedHeight + gap + editableHeight; const topMargin = (pageHeight - totalHeight) / 2; engine.block.setPositionY(lockedText, topMargin); engine.block.setPositionY(editableText, topMargin + lockedHeight + gap); // Editable block - enable selection and editing engine.block.setScopeEnabled(editableText, 'editor/select', true); engine.block.setScopeEnabled(editableText, 'text/edit', true); engine.block.setScopeEnabled(editableText, 'layer/move', true); // Check resolved permissions (role + global + block scopes) const canEditLocked = engine.block.isAllowedByScope( lockedText, 'text/edit' ); const canEditEditable = engine.block.isAllowedByScope( editableText, 'text/edit' ); // As Creator: both return true (Creators bypass restrictions) console.log( 'Can edit locked:', canEditLocked, 'Can edit editable:', canEditEditable ); // Switch to Adopter to apply restrictions engine.editor.setRole('Adopter'); // Select the editable block to show it's interactive engine.block.select(editableText); } } export default Example; ``` This guide covers: - The four user roles and their purposes - How scopes control editing capabilities - The permission resolution hierarchy - Common template workflow patterns ## Roles Roles define user types with different default permissions: | Role | Purpose | Default Access | |------|---------|----------------| | **Creator** | Designers building templates | Full access to all operations | | **Adopter** | End-users customizing templates | Limited by block-level scopes | | **Viewer** | Preview-only users | Read-only access | | **Presenter** | Slideshow/video presenters | Read-only with playback controls | Creators set the block-level scopes that constrain what Adopters can do. This separation enables brand consistency while allowing personalization. ```typescript highlight-roles // Roles define user types: 'Creator', 'Adopter', 'Viewer', 'Presenter' const role = engine.editor.getRole(); console.log('Current role:', role); // 'Creator' ``` ## Scopes Scopes define specific capabilities organized into categories: - **Text**: Editing content and character formatting - **Fill/Stroke**: Changing colors and shapes - **Layer**: Moving, resizing, rotating, cropping - **Appearance**: Filters, effects, shadows, animations - **Lifecycle**: Deleting and duplicating elements - **Editor**: Adding new elements and selecting ## Global vs Block-Level Scopes **Global scopes** apply editor-wide and determine whether block-level settings are checked: - `'Allow'` — Always permit the operation - `'Deny'` — Always block the operation - `'Defer'` — Check block-level scope settings **Block-level scopes** control permissions on individual blocks. These settings only take effect when the corresponding global scope is set to `'Defer'`. ```typescript highlight-global-scopes // Configure scopes when role changes (role change resets to defaults) engine.editor.onRoleChanged(() => { // Set global scopes to 'Defer' so block-level scopes take effect engine.editor.setGlobalScope('editor/select', 'Defer'); engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('text/edit', 'Defer'); engine.editor.setGlobalScope('lifecycle/destroy', 'Defer'); }); ``` To lock a specific block, disable its scopes: ```typescript highlight-block-scopes // Lock the block - Adopters cannot select, edit, or move it engine.block.setScopeEnabled(lockedText, 'editor/select', false); engine.block.setScopeEnabled(lockedText, 'text/edit', false); engine.block.setScopeEnabled(lockedText, 'layer/move', false); engine.block.setScopeEnabled(lockedText, 'lifecycle/destroy', false); ``` ## Permission Resolution Permissions resolve in this order: 1. **Role defaults** — Each role has preset global scope values 2. **Global scope** — If `'Allow'` or `'Deny'`, this is the final answer 3. **Block-level scope** — If global is `'Defer'`, check the block's settings Use `isAllowedByScope()` to check the final computed permission for any block and scope combination: ```typescript highlight-check-permissions // Check resolved permissions (role + global + block scopes) const canEditLocked = engine.block.isAllowedByScope( lockedText, 'text/edit' ); const canEditEditable = engine.block.isAllowedByScope( editableText, 'text/edit' ); // As Creator: both return true (Creators bypass restrictions) console.log( 'Can edit locked:', canEditLocked, 'Can edit editable:', canEditEditable ); ``` ## Template Workflow Pattern A typical template workflow: 1. **Designer (Creator)** creates the template layout 2. **Designer** locks brand elements using block scopes 3. **Designer** keeps personalization fields editable 4. **End-user (Adopter)** opens the template 5. **End-user** edits only permitted elements 6. **End-user** exports the personalized result This pattern ensures brand consistency while enabling personalization. ## Implementation Guides For detailed implementation, see these guides: [Lock Design Elements](https://img.ly/docs/cesdk/angular/create-templates/lock-131489/) — Step-by-step instructions for locking specific elements in templates [Set Editing Constraints](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/set-editing-constraints-c892c0/) — Configure which properties users can modify --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Events" description: "Subscribe to block creation, update, and deletion events to track changes in your CE.SDK scene." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/events-353f97/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Events](https://img.ly/docs/cesdk/angular/concepts/events-353f97/) --- Monitor and react to block changes in real time by subscribing to creation, update, and destruction events in your CE.SDK scene. ![Events example showing a scene with event subscriptions](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-events-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-events-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-events-browser/) Events enable real-time monitoring of block changes in CE.SDK. When blocks are created, modified, or destroyed, the engine delivers these changes through callback subscriptions at the end of each update cycle. This push-based notification system eliminates the need for polling and enables efficient reactive architectures. ```typescript file=@cesdk_web_examples/guides-concepts-events-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Events Guide * * Demonstrates working with block lifecycle events in CE.SDK: * - Subscribing to all block events * - Filtering events to specific blocks * - Processing Created, Updated, and Destroyed event types * - Event batching and deduplication behavior * - Safe handling of destroyed blocks * - Proper unsubscription for cleanup */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Subscribe to events from all blocks in the scene // Pass an empty array to receive events from every block const unsubscribeAll = engine.event.subscribe([], (events) => { for (const event of events) { console.log( `[All Blocks] ${event.type} event for block ${event.block}` ); } }); // Get the current page to add blocks to const pages = engine.block.findByType('page'); const page = pages[0]; // Create a graphic block - this triggers a Created event const graphic = engine.block.create('graphic'); // Set up the graphic with a shape and fill const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); // Position and size the graphic engine.block.setPositionX(graphic, 200); engine.block.setPositionY(graphic, 150); engine.block.setWidth(graphic, 400); engine.block.setHeight(graphic, 300); // Add an image fill 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.setEnum(graphic, 'contentFill/mode', 'Cover'); // Append to page to make it visible engine.block.appendChild(page, graphic); console.log('Created graphic block:', graphic); // Subscribe to events for specific blocks only // This is more efficient when you only care about certain blocks const unsubscribeSpecific = engine.event.subscribe([graphic], (events) => { for (const event of events) { console.log( `[Specific Block] ${event.type} event for block ${event.block}` ); } }); // Modify the block - this triggers Updated events // Due to deduplication, multiple rapid changes result in one Updated event engine.block.setRotation(graphic, 0.1); // Rotate slightly engine.block.setFloat(graphic, 'opacity', 0.9); // Adjust opacity console.log('Modified graphic block - rotation and opacity changed'); // Process events by checking the type property const unsubscribeProcess = engine.event.subscribe([], (events) => { for (const event of events) { switch (event.type) { case 'Created': { // Block was just created - safe to use Block API const blockType = engine.block.getType(event.block); console.log(`Block created with type: ${blockType}`); break; } case 'Updated': { // Block property changed - safe to use Block API console.log(`Block ${event.block} was updated`); break; } case 'Destroyed': { // Block was destroyed - must check validity before using Block API const isValid = engine.block.isValid(event.block); console.log( `Block ${event.block} destroyed, still valid: ${isValid}` ); break; } } } }); // When handling Destroyed events, always check block validity // The block ID is no longer valid after destruction const unsubscribeDestroyed = engine.event.subscribe([], (events) => { for (const event of events) { if (event.type === 'Destroyed') { // IMPORTANT: Check validity before any Block API calls if (engine.block.isValid(event.block)) { // Block is still valid (this shouldn't happen for Destroyed events) console.log('Block is unexpectedly still valid'); } else { // Block is invalid - expected for Destroyed events // Clean up any references to this block ID console.log( `Block ${event.block} has been destroyed and is invalid` ); } } } }); // Create a second block to demonstrate destruction const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); engine.block.setPositionX(textBlock, 200); engine.block.setPositionY(textBlock, 500); engine.block.setWidth(textBlock, 400); engine.block.setHeight(textBlock, 50); engine.block.setString(textBlock, 'text/text', 'Events Demo'); engine.block.setFloat(textBlock, 'text/fontSize', 48); console.log('Created text block:', textBlock); // Destroy the text block - this triggers a Destroyed event engine.block.destroy(textBlock); console.log('Destroyed text block'); // After destruction, the block ID is no longer valid const isTextBlockValid = engine.block.isValid(textBlock); console.log('Text block still valid after destroy:', isTextBlockValid); // false // Clean up subscriptions when no longer needed // This prevents memory leaks and reduces engine overhead unsubscribeAll(); unsubscribeSpecific(); unsubscribeProcess(); unsubscribeDestroyed(); console.log('Unsubscribed from all event listeners'); // Re-subscribe with a single listener for the demo UI engine.event.subscribe([], (events) => { for (const event of events) { console.log(`Event: ${event.type} - Block: ${event.block}`); } }); console.log('Events guide initialized successfully.'); console.log( 'Demonstrated: subscribing, event types, processing, and cleanup.' ); } } export default Example; ``` This guide covers subscribing to block lifecycle events, processing the three event types (`Created`, `Updated`, `Destroyed`), filtering events to specific blocks, understanding batching and deduplication behavior, and properly cleaning up subscriptions. ## Event Types CE.SDK provides three event types that capture the block lifecycle: - **`Created`**: Fires when a new block is added to the scene - **`Updated`**: Fires when any property of a block changes - **`Destroyed`**: Fires when a block is removed from the scene Each event contains a `block` property with the block ID and a `type` property indicating which event occurred. ## Subscribing to All Blocks Use `engine.event.subscribe()` to register a callback that receives batched events. Pass an empty array to receive events from all blocks in the scene: ```typescript highlight-subscribe-all // Subscribe to events from all blocks in the scene // Pass an empty array to receive events from every block const unsubscribeAll = engine.event.subscribe([], (events) => { for (const event of events) { console.log( `[All Blocks] ${event.type} event for block ${event.block}` ); } }); ``` The callback receives an array of events at the end of each engine update cycle. The function returns an unsubscribe function you should store for cleanup. ## Subscribing to Specific Blocks For better performance when you only care about certain blocks, pass an array of block IDs to filter events: ```typescript highlight-subscribe-specific // Subscribe to events for specific blocks only // This is more efficient when you only care about certain blocks const unsubscribeSpecific = engine.event.subscribe([graphic], (events) => { for (const event of events) { console.log( `[Specific Block] ${event.type} event for block ${event.block}` ); } }); ``` This reduces overhead since the engine only needs to prepare events for the blocks you're tracking. ## Creating Blocks and Handling `Created` Events When you create a block, the engine fires a `Created` event. You can safely use Block API methods on the block ID since the block is valid: ```typescript highlight-event-created // Create a graphic block - this triggers a Created event const graphic = engine.block.create('graphic'); // Set up the graphic with a shape and fill const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); // Position and size the graphic engine.block.setPositionX(graphic, 200); engine.block.setPositionY(graphic, 150); engine.block.setWidth(graphic, 400); engine.block.setHeight(graphic, 300); // Add an image fill 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.setEnum(graphic, 'contentFill/mode', 'Cover'); // Append to page to make it visible engine.block.appendChild(page, graphic); console.log('Created graphic block:', graphic); ``` Use `Created` events to initialize tracking, update UI state, or set up additional subscriptions for the new block. ## Updating Blocks and Handling `Updated` Events Modifying any property of a block triggers an `Updated` event. Due to deduplication, you receive at most one `Updated` event per block per engine update cycle, regardless of how many properties changed: ```typescript highlight-event-updated // Modify the block - this triggers Updated events // Due to deduplication, multiple rapid changes result in one Updated event engine.block.setRotation(graphic, 0.1); // Rotate slightly engine.block.setFloat(graphic, 'opacity', 0.9); // Adjust opacity console.log('Modified graphic block - rotation and opacity changed'); ``` Multiple rapid changes to the same block result in a single `Updated` event, making event handling efficient even during complex operations. ## Processing Events by Type Handle each event type appropriately by checking the `type` property. For `Created` and `Updated` events, you can safely use Block API methods. For `Destroyed` events, the block ID is no longer valid: ```typescript highlight-process-events // Process events by checking the type property const unsubscribeProcess = engine.event.subscribe([], (events) => { for (const event of events) { switch (event.type) { case 'Created': { // Block was just created - safe to use Block API const blockType = engine.block.getType(event.block); console.log(`Block created with type: ${blockType}`); break; } case 'Updated': { // Block property changed - safe to use Block API console.log(`Block ${event.block} was updated`); break; } case 'Destroyed': { // Block was destroyed - must check validity before using Block API const isValid = engine.block.isValid(event.block); console.log( `Block ${event.block} destroyed, still valid: ${isValid}` ); break; } } } }); ``` ## Handling `Destroyed` Events Safely When a block is destroyed, the block ID becomes invalid. Calling Block API methods on a destroyed block throws an exception. Always check validity with `engine.block.isValid()` before operations: ```typescript highlight-destroyed-safety // When handling Destroyed events, always check block validity // The block ID is no longer valid after destruction const unsubscribeDestroyed = engine.event.subscribe([], (events) => { for (const event of events) { if (event.type === 'Destroyed') { // IMPORTANT: Check validity before any Block API calls if (engine.block.isValid(event.block)) { // Block is still valid (this shouldn't happen for Destroyed events) console.log('Block is unexpectedly still valid'); } else { // Block is invalid - expected for Destroyed events // Clean up any references to this block ID console.log( `Block ${event.block} has been destroyed and is invalid` ); } } } }); ``` After verifying the block is invalid, you can safely clean up any local references. The destroy operation itself triggers the `Destroyed` event: ```typescript highlight-event-destroyed // Destroy the text block - this triggers a Destroyed event engine.block.destroy(textBlock); console.log('Destroyed text block'); // After destruction, the block ID is no longer valid const isTextBlockValid = engine.block.isValid(textBlock); console.log('Text block still valid after destroy:', isTextBlockValid); // false ``` Use `isValid()` to clean up any references to destroyed blocks in your application state. ## Unsubscribing from Events The `subscribe()` method returns an unsubscribe function. Call it when you no longer need events to prevent memory leaks and reduce engine overhead: ```typescript highlight-unsubscribe // Clean up subscriptions when no longer needed // This prevents memory leaks and reduces engine overhead unsubscribeAll(); unsubscribeSpecific(); unsubscribeProcess(); unsubscribeDestroyed(); console.log('Unsubscribed from all event listeners'); ``` Always unsubscribe when your component unmounts, the editor closes, or you no longer need to track changes. Keeping unnecessary subscriptions active forces the engine to prepare event lists for each subscriber at every update. ## Event Batching and Deduplication Events are collected during an engine update and delivered together at the end. The engine deduplicates events, so you receive at most one `Updated` event per block per update cycle. Event order in the callback does not reflect the actual order of changes within the update. This batching behavior means: - Multiple property changes to a single block result in one `Updated` event - You cannot determine which specific property changed from the event alone - If you need to track specific property changes, compare against cached values ## Use Cases Events support various reactive patterns in CE.SDK applications: - **Syncing external state**: Keep state management systems (Redux, MobX, Zustand) synchronized with scene changes - **Building reactive UIs**: Update UI components when blocks change without polling - **Tracking changes for undo/redo**: Monitor all block changes for custom history implementations - **Validating scene constraints**: React to block creation or property changes to enforce design rules ## Troubleshooting **Events not firing**: Ensure you haven't unsubscribed prematurely. Verify the blocks you're filtering to still exist. **Exception on `Destroyed` event**: Never call Block API methods on a destroyed block without first checking `engine.block.isValid()`. **Missing events**: Events are deduplicated—multiple rapid changes to the same property result in one `Updated` event. **Memory leaks**: Store the unsubscribe function and call it during cleanup. Forgetting to unsubscribe keeps listeners active. **Event order confusion**: Don't rely on event array order within a single callback—it doesn't reflect chronological order of changes. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Font Size Unit" description: "Configure how font sizes are interpreted (Point vs Pixel) per scene in the CE.SDK Web engine." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/font-size-unit-3b2d60/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Font Size Unit](https://img.ly/docs/cesdk/angular/concepts/font-size-unit-3b2d60/) --- Pick the unit your scene uses for `setTextFontSize` / `getTextFontSizes`. The engine continues to store font sizes in points; this setting only changes how values are interpreted at the API boundary, with optional per-call overrides when you need them. ![A CE.SDK editor with a text block whose font size is being controlled by the scene's font-size unit](./assets/browser.hero.webp) > **Reading time:** 6 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-font-size-unit-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-font-size-unit-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-font-size-unit-browser/) A scene's `fontSizeUnit` is the unit `setTextFontSize` and `getTextFontSizes` use when the caller doesn't specify one. CE.SDK supports two values: `'Point'` (the typographic default) and `'Pixel'` (matches Pixel-based design coordinates). The engine still stores font sizes in points internally; the unit only controls the API boundary. ```typescript file=@cesdk_web_examples/guides-concepts-font-size-unit-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextComponentAssetSource, TypefaceAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Font Size Unit Guide * * Demonstrates working with the scene's font-size unit: * - Reading the scene's current `fontSizeUnit` * - Switching the unit between `'Pixel'` and `'Point'` at runtime * - Setting and reading font sizes that follow the scene unit * - Overriding the unit on a per-call basis with `TextFontSizeOptions` */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins so the editor has its standard panels. await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new DemoAssetSources()); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); // Create a default Pixel-based design scene. await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; // Read the scene's current font-size unit. // For a Pixel-based scene this defaults to 'Pixel'. const initialUnit = engine.scene.getFontSizeUnit(); console.log('Initial font-size unit:', initialUnit); // 'Pixel' // Switch the scene-wide default to Point. Existing text keeps its visual // size; only the unit used by `setTextFontSize` / `getTextFontSizes` // (when no `unit` option is passed) changes. engine.scene.setFontSizeUnit('Point'); console.log('After switch:', engine.scene.getFontSizeUnit()); // 'Point' // Add a text block to demonstrate how the unit flows through the text APIs. const page = engine.block.findByType('page')[0]; const text = engine.block.create('text'); engine.block.appendChild(page, text); engine.block.setString(text, 'text/text', 'Font Size Unit'); engine.block.setPositionX(text, 80); engine.block.setPositionY(text, 480); engine.block.setWidth(text, 920); engine.block.setHeight(text, 120); // No `unit` option: the value is interpreted in the scene's `fontSizeUnit`, // which we set to 'Point' above. The engine reads this as 18 pt. engine.block.setTextFontSize(text, 18); // Override the unit for a single call. CE.SDK converts the supplied // value into the scene's unit using the scene's DPI, so the same text // can be sized in pixels even though the scene default is points. engine.block.setTextFontSize(text, 24, { unit: 'Pixel' }); // Without `unit`, the returned values are in the scene's unit (Point). const sizesInSceneUnit = engine.block.getTextFontSizes(text); console.log('Sizes (scene unit, pt):', sizesInSceneUnit); // Pass `{ unit }` to read the same sizes in a different unit. const sizesInPixels = engine.block.getTextFontSizes(text, { unit: 'Pixel' }); console.log('Sizes (px):', sizesInPixels); } } export default Example; ``` This guide covers reading and changing the scene's font-size unit, how that default flows through the text APIs, how to override the unit per call, and how to pair the unit with the design unit at scene creation. ## Reading the Current Font-Size Unit Use `engine.scene.getFontSizeUnit()` to retrieve the unit the current scene uses for font size APIs. New scenes default to `'Pixel'` when `designUnit` is `'Pixel'`, and to `'Point'` for `'Millimeter'` or `'Inch'`. Loaded scenes from before the setting was introduced default to `'Point'` to preserve historic behavior. ```typescript highlight-get-font-size-unit // Read the scene's current font-size unit. // For a Pixel-based scene this defaults to 'Pixel'. const initialUnit = engine.scene.getFontSizeUnit(); console.log('Initial font-size unit:', initialUnit); // 'Pixel' ``` ## Setting the Font-Size Unit `engine.scene.setFontSizeUnit('Point' | 'Pixel')` switches the scene-wide default. Existing text retains its visual size: the engine still stores values in points and converts on the way in and out. Only subsequent `setTextFontSize` / `getTextFontSizes` calls (without an explicit `unit` option) use the new unit. ```typescript highlight-set-font-size-unit // Switch the scene-wide default to Point. Existing text keeps its visual // size; only the unit used by `setTextFontSize` / `getTextFontSizes` // (when no `unit` option is passed) changes. engine.scene.setFontSizeUnit('Point'); console.log('After switch:', engine.scene.getFontSizeUnit()); // 'Point' ``` `setDesignUnit` does not change `fontSizeUnit`, so a deliberate font-unit choice survives changes to the design coordinate system. ## Setting Font Sizes Without a Unit Option When you call `setTextFontSize(text, value)` without a `unit` option, the value is interpreted in the scene's `fontSizeUnit`. The same applies to the float properties `text/fontSize`, `caption/fontSize`, and the matching auto-min/max companions accessed through `setFloat` / `getFloat`. ```typescript highlight-implicit-set // No `unit` option: the value is interpreted in the scene's `fontSizeUnit`, // which we set to 'Point' above. The engine reads this as 18 pt. engine.block.setTextFontSize(text, 18); ``` ## Overriding the Unit Per Call Pass `{ unit: 'Point' }` or `{ unit: 'Pixel' }` in `TextFontSizeOptions` to override the scene default for a single call. CE.SDK converts between the caller's unit and the scene's unit using the scene's DPI. Use this when your application has its own unit convention that differs from the scene's preference. ```typescript highlight-explicit-set // Override the unit for a single call. CE.SDK converts the supplied // value into the scene's unit using the scene's DPI, so the same text // can be sized in pixels even though the scene default is points. engine.block.setTextFontSize(text, 24, { unit: 'Pixel' }); ``` ## Reading Font Sizes `getTextFontSizes` returns values in the scene's `fontSizeUnit` by default and accepts the same `{ unit }` override. The same conversion applies on the way out, so you can read the same text in either unit without changing the scene. ```typescript highlight-read-sizes // Without `unit`, the returned values are in the scene's unit (Point). const sizesInSceneUnit = engine.block.getTextFontSizes(text); console.log('Sizes (scene unit, pt):', sizesInSceneUnit); // Pass `{ unit }` to read the same sizes in a different unit. const sizesInPixels = engine.block.getTextFontSizes(text, { unit: 'Pixel' }); console.log('Sizes (px):', sizesInPixels); ``` ## Pairing Units at Scene Creation `engine.scene.create('Free', { designUnit, fontSizeUnit })` accepts both options. When `fontSizeUnit` is omitted, CE.SDK pairs it with `designUnit` (`'Pixel'` ⇒ `'Pixel'`, `'Millimeter'` and `'Inch'` ⇒ `'Point'`). Pass both explicitly when you want to mix them, for example a Pixel design with Point-based typography. ```typescript const pixelDesignPointFonts = engine.scene.create('Free', { designUnit: 'Pixel', fontSizeUnit: 'Point' }); ``` `engine.scene.createFromImage()` and `engine.scene.createFromVideo()` use a hardcoded `'Pixel'` design unit but leave `fontSizeUnit` at the default `'Point'` so existing callers keep point-based font sizes. Call `engine.scene.setFontSizeUnit('Pixel')` after creation if you want the font-size unit to match the pixel-based design coordinates. ## Next Steps - [Design Units](https://img.ly/docs/cesdk/angular/concepts/design-units-cc6597/) covers the broader unit system that determines layout coordinates and DPI. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Headless" description: "Run headless CE.SDK's Engine inside a browser-based app." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/headless-mode/browser-24ab98/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Headless Mode](https://img.ly/docs/cesdk/angular/concepts/headless-mode/browser-24ab98/) --- 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 - **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 ## 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 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 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 1. Install the Engine package: ```bash npm install @cesdk/engine@$UBQ_VERSION$ ``` ```` 2. Configure your license and asset location. The global CDN works for prototypes; production apps commonly self-host the asset bundle for faster loads. ```ts const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets' }; ```` 3. Start the Engine from client-side code and reuse the instance across interactions. > **Tip:** 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 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. ```js import CreativeEngine from '@cesdk/engine'; const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/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 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): ```js // Grab the button element const downloadButton = document.querySelector('#download-headless'); // Register an async click handler downloadButton?.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: ```js ``` If you’re in a component-based setup (React, Vue, Svelte, etc.), include the same button inside the component’s render/template: ```js 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 ```js import CreativeEngine from '@cesdk/engine'; const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/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). ## Go Further Need a hybrid approach? [Engine interface guides](https://img.ly/docs/cesdk/angular/engine-interface-6fb7cf/) show how to combine headless logic with the standard editor UI. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Pages" description: "Pages structure scenes in CE.SDK and must share the same dimensions to ensure consistent rendering." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/pages-7b6bae/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Pages](https://img.ly/docs/cesdk/angular/concepts/pages-7b6bae/) --- Pages define the format of your designs—every graphic block, text element, and media file lives inside a page. This guide covers how pages fit into the scene hierarchy, their properties like margins and title templates, and how to configure page dimensions for different layout modes. ![CE.SDK Pages Hero Image](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-pages-browser/) Pages provide the canvas and frame for your designs. Whether you're building a multi-page document, a social media carousel, or a video composition, understanding how pages work will help you with structuring your content correctly. ```typescript file=@cesdk_web_examples/guides-concepts-pages-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Pages Guide * * Demonstrates working with pages in CE.SDK: * - Understanding the scene hierarchy (Scene → Pages → Blocks) * - Creating and managing multiple pages * - Setting page dimensions at the scene level * - Configuring page properties (margins, title templates, fills) * - Navigating between pages */ 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.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Create a scene with VerticalStack layout for multi-page designs engine.scene.create('VerticalStack'); // Get the stack container to configure spacing const [stack] = engine.block.findByType('stack'); engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Get the scene to set page dimensions const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Set page dimensions at the scene level (all pages share these dimensions) engine.block.setFloat(scene, 'scene/pageDimensions/width', 800); engine.block.setFloat(scene, 'scene/pageDimensions/height', 600); // Create the first page and set its dimensions const firstPage = engine.block.create('page'); engine.block.setWidth(firstPage, 800); engine.block.setHeight(firstPage, 600); engine.block.appendChild(stack, firstPage); // Create the second page with the same dimensions const secondPage = engine.block.create('page'); engine.block.setWidth(secondPage, 800); engine.block.setHeight(secondPage, 600); engine.block.appendChild(stack, secondPage); // Add an image block to the first page const imageBlock = engine.block.create('graphic'); engine.block.appendChild(firstPage, imageBlock); // Create a rect shape for the graphic block const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); // Configure size and position after appending to the page engine.block.setWidth(imageBlock, 400); engine.block.setHeight(imageBlock, 300); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); // Create and configure the image fill 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); // Add a text block to the second page const textBlock = engine.block.create('text'); engine.block.appendChild(secondPage, textBlock); // Configure text properties after appending to the page engine.block.replaceText(textBlock, 'Page 2'); engine.block.setTextFontSize(textBlock, 48); engine.block.setTextColor(textBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); // Center the text on the page const textWidth = engine.block.getFrameWidth(textBlock); const textHeight = engine.block.getFrameHeight(textBlock); engine.block.setPositionX(textBlock, (800 - textWidth) / 2); engine.block.setPositionY(textBlock, (600 - textHeight) / 2); // Configure page properties on the first page // Enable and set margins for print bleed engine.block.setBool(firstPage, 'page/marginEnabled', true); engine.block.setFloat(firstPage, 'page/margin/top', 10); engine.block.setFloat(firstPage, 'page/margin/bottom', 10); engine.block.setFloat(firstPage, 'page/margin/left', 10); engine.block.setFloat(firstPage, 'page/margin/right', 10); // Set a custom title template for the first page engine.block.setString(firstPage, 'page/titleTemplate', 'Cover'); // Set a custom title template for the second page engine.block.setString(secondPage, 'page/titleTemplate', 'Content'); // Set a background fill on the second page const colorFill = engine.block.createFill('color'); engine.block.setColor(colorFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 1.0, a: 1.0 }); engine.block.setFill(secondPage, colorFill); // Demonstrate finding pages const allPages = engine.scene.getPages(); console.log('All pages:', allPages); console.log('Number of pages:', allPages.length); // Get the current page (nearest to viewport center or containing selection) const currentPage = engine.scene.getCurrentPage(); console.log('Current page:', currentPage); // Alternative: Find pages using block API const pagesByType = engine.block.findByType('page'); console.log('Pages found by type:', pagesByType); // Select the first page and zoom to fit engine.block.select(firstPage); engine.scene.enableZoomAutoFit(firstPage, 'Both'); console.log('Pages guide initialized with a 2-page design.'); } } export default Example; ``` This guide covers: - Understanding the scene hierarchy: Scene → Pages → Blocks - Creating and managing multiple pages - Setting page dimensions at the scene level - Configuring page properties like margins and title templates - Navigating between pages programmatically ## Pages in the Scene Hierarchy In CE.SDK, content follows a strict hierarchy: a **scene** contains **pages**, and pages contain **content blocks**. Only blocks attached to a page are rendered on the canvas. ```typescript highlight=highlight-create-scene // Create a scene with VerticalStack layout for multi-page designs engine.scene.create('VerticalStack'); // Get the stack container to configure spacing const [stack] = engine.block.findByType('stack'); engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); ``` When you create a scene with a layout mode like `VerticalStack`, pages are automatically arranged according to that mode. Create pages using `engine.block.create('page')`, set their dimensions with `setWidth()` and `setHeight()`, then attach them to the scene (or its stack container) with `engine.block.appendChild()`. ```typescript highlight=highlight-create-pages // Create the first page and set its dimensions const firstPage = engine.block.create('page'); engine.block.setWidth(firstPage, 800); engine.block.setHeight(firstPage, 600); engine.block.appendChild(stack, firstPage); // Create the second page with the same dimensions const secondPage = engine.block.create('page'); engine.block.setWidth(secondPage, 800); engine.block.setHeight(secondPage, 600); engine.block.appendChild(stack, secondPage); ``` Content blocks must be added as children of a page to render. For graphic blocks, set both a shape and a fill for content to display. Append blocks to the page before configuring their properties. ```typescript highlight=highlight-add-content // Add an image block to the first page const imageBlock = engine.block.create('graphic'); engine.block.appendChild(firstPage, imageBlock); // Create a rect shape for the graphic block const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); // Configure size and position after appending to the page engine.block.setWidth(imageBlock, 400); engine.block.setHeight(imageBlock, 300); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); // Create and configure the image fill 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); // Add a text block to the second page const textBlock = engine.block.create('text'); engine.block.appendChild(secondPage, textBlock); // Configure text properties after appending to the page engine.block.replaceText(textBlock, 'Page 2'); engine.block.setTextFontSize(textBlock, 48); engine.block.setTextColor(textBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); // Center the text on the page const textWidth = engine.block.getFrameWidth(textBlock); const textHeight = engine.block.getFrameHeight(textBlock); engine.block.setPositionX(textBlock, (800 - textWidth) / 2); engine.block.setPositionY(textBlock, (600 - textHeight) / 2); ``` ## Page Dimensions and Consistency The CE.SDK engine supports pages with different dimensions. When using stacked layout modes (VerticalStack, HorizontalStack), the Editor UI expects all pages to share the same size. However, with the `Free` layout mode, you can set different dimensions for each page in the UI. ```typescript highlight=highlight-set-dimensions // Get the scene to set page dimensions const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Set page dimensions at the scene level (all pages share these dimensions) engine.block.setFloat(scene, 'scene/pageDimensions/width', 800); engine.block.setFloat(scene, 'scene/pageDimensions/height', 600); ``` You can set default page dimensions at the scene level using `engine.block.setFloat()` with `scene/pageDimensions/width` and `scene/pageDimensions/height`. The `scene/aspectRatioLock` property controls whether changing one dimension automatically adjusts the other. Individual pages can also have their dimensions set directly with `setWidth()` and `setHeight()`. ## Finding and Navigating Pages CE.SDK provides several methods to locate and navigate between pages in your scene. ```typescript highlight=highlight-find-pages // Demonstrate finding pages const allPages = engine.scene.getPages(); console.log('All pages:', allPages); console.log('Number of pages:', allPages.length); // Get the current page (nearest to viewport center or containing selection) const currentPage = engine.scene.getCurrentPage(); console.log('Current page:', currentPage); // Alternative: Find pages using block API const pagesByType = engine.block.findByType('page'); console.log('Pages found by type:', pagesByType); ``` Use these methods based on your needs: - `engine.scene.getPages()` returns all pages in sorted order - `engine.scene.getCurrentPage()` returns the page containing the current selection, or the page nearest to the viewport center - `engine.block.findByType('page')` finds all page blocks in the scene - `engine.scene.findNearestToViewPortCenterByType('page')` returns pages sorted by their distance from the viewport center ## Page Properties Each page has its own properties that control its appearance and behavior. These are set on the page block itself, not on the scene. ### Margins Page margins define bleed areas useful for print designs. Enable margins and configure each side individually: ```typescript highlight=highlight-page-properties // Configure page properties on the first page // Enable and set margins for print bleed engine.block.setBool(firstPage, 'page/marginEnabled', true); engine.block.setFloat(firstPage, 'page/margin/top', 10); engine.block.setFloat(firstPage, 'page/margin/bottom', 10); engine.block.setFloat(firstPage, 'page/margin/left', 10); engine.block.setFloat(firstPage, 'page/margin/right', 10); // Set a custom title template for the first page engine.block.setString(firstPage, 'page/titleTemplate', 'Cover'); // Set a custom title template for the second page engine.block.setString(secondPage, 'page/titleTemplate', 'Content'); ``` Set `page/marginEnabled` to `true` to enable margins, then use `page/margin/top`, `page/margin/bottom`, `page/margin/left`, and `page/margin/right` to configure each side. ### Title Template The `page/titleTemplate` property defines the display label shown for each page. It supports template variables like `{{ubq.page_index}}` for dynamic numbering. The default value is `"Page {{ubq.page_index}}"`. You can customize this to show labels like "Slide 1", "Cover", or any custom text. ### Fill and Background Pages support fills for background colors or images using the standard fill system. ```typescript highlight=highlight-page-background // Set a background fill on the second page const colorFill = engine.block.createFill('color'); engine.block.setColor(colorFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 1.0, a: 1.0 }); engine.block.setFill(secondPage, colorFill); ``` Create a fill using `engine.block.createFill('color')` or `engine.block.createFill('image')`, configure its properties, then apply it to the page with `engine.block.setFill(page, fill)`. ## Page Layout Modes The scene's layout mode controls how multiple pages are arranged. Set this using `engine.block.setEnum()` on the scene with the `scene/layout` property: - **VerticalStack** (default): Pages stack vertically, one below the other - **HorizontalStack**: Pages arrange horizontally, side by side - **DepthStack**: Pages overlay each other, typically used for video editing - **Free**: Pages can be positioned freely without automatic arrangement ## Pages for Static Designs vs. Video Editing Page behavior varies depending on how the scene is used. ### Static Designs For static designs, pages act like artboards. Each page is a separate canvas ideal for multi-page documents, social media posts, or print layouts. Pages exist side by side and don't have time-based properties. ### Video Editing For video editing, pages represent time-based compositions that transition sequentially during playback. Each page has playback properties: - `playback/duration` controls how long the page appears (in seconds) - `playback/time` tracks the current playback position ## Troubleshooting ### Content Not Visible If content blocks aren't appearing, check these common causes: - Verify the block is attached to a page with `engine.block.appendChild(page, block)` - For graphic blocks, ensure both a shape and fill are set - Append blocks to the page before setting their size and position ### Dimension Inconsistencies If pages appear at unexpected sizes when using stacked layouts, ensure all pages have consistent dimensions. With `Free` layout mode, pages can have different sizes. Set dimensions on individual pages using `setWidth()` and `setHeight()`. ### Page Not Found If `engine.scene.getPages()` returns an empty array, ensure a scene is loaded first. In headless mode, you must create both the scene and pages manually before querying them. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Resources" description: "Learn how CE.SDK loads and manages external media files, including preloading for performance, handling transient data, and relocating resources when URLs change." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/resources-a58d71/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Resources](https://img.ly/docs/cesdk/angular/concepts/resources-a58d71/) --- Manage external media files—images, videos, audio, and fonts—that blocks reference via URIs in CE.SDK. ![Resources example showing a scene with image and video blocks](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-resources-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-resources-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-resources-browser/) Resources are external media files that blocks reference through URI properties like `fill/image/imageFileURI` or `fill/video/fileURI`. CE.SDK loads resources automatically when needed, but you can preload them for better performance. When working with temporary data like buffers or blobs, you need to persist them before saving. If resource URLs change (such as during CDN migration), you can update the mappings without modifying scene data. ```typescript file=@cesdk_web_examples/guides-concepts-resources-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Resources Guide * * Demonstrates resource management in CE.SDK: * - On-demand resource loading * - Preloading resources with forceLoadResources() * - Preloading audio/video with forceLoadAVResource() * - Finding transient resources * - Persisting transient resources during save * - Relocating resources when URLs change * - Finding all media URIs in a scene * - Detecting MIME types */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); const engine = cesdk.engine; // Get the current scene and page const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } const pages = engine.block.findByType('page'); const page = pages[0]; // Layout configuration: two blocks with equal margins const margin = 30; const gap = 20; const blockWidth = 300; const blockHeight = 200; // Set page dimensions to hug the blocks const pageWidth = margin + blockWidth + gap + blockWidth + margin; const pageHeight = margin + blockHeight + margin; engine.block.setWidth(page, pageWidth); engine.block.setHeight(page, pageHeight); // Create a graphic block with an image fill // Resources are loaded on-demand when the engine renders the block const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); engine.block.setPositionX(imageBlock, margin); engine.block.setPositionY(imageBlock, margin); engine.block.setWidth(imageBlock, blockWidth); engine.block.setHeight(imageBlock, blockHeight); // Create an image fill - the image loads when the block is rendered const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setEnum(imageBlock, 'contentFill/mode', 'Cover'); engine.block.appendChild(page, imageBlock); console.log('Created image block - resource loads on-demand when rendered'); // Preload all resources in the scene before rendering // This ensures resources are cached and ready for display console.log('Preloading all resources in the scene...'); await engine.block.forceLoadResources([scene]); console.log('All resources preloaded successfully'); // Preload specific blocks only (useful for optimizing load order) await engine.block.forceLoadResources([imageBlock]); console.log('Image block resources preloaded'); // Create a second graphic block for video const videoBlock = engine.block.create('graphic'); const videoShape = engine.block.createShape('rect'); engine.block.setShape(videoBlock, videoShape); engine.block.setPositionX(videoBlock, margin + blockWidth + gap); engine.block.setPositionY(videoBlock, margin); engine.block.setWidth(videoBlock, blockWidth); engine.block.setHeight(videoBlock, blockHeight); // Create a video fill const videoFill = engine.block.createFill('video'); engine.block.setString( videoFill, 'fill/video/fileURI', 'https://img.ly/static/ubq_video_samples/bbb.mp4' ); engine.block.setFill(videoBlock, videoFill); engine.block.setEnum(videoBlock, 'contentFill/mode', 'Cover'); engine.block.appendChild(page, videoBlock); // Preload video resource to query its properties console.log('Preloading video resource...'); await engine.block.forceLoadAVResource(videoFill); console.log('Video resource preloaded'); // Now we can query video properties const videoDuration = engine.block.getAVResourceTotalDuration(videoFill); const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); console.log( `Video properties - Duration: ${videoDuration}s, Size: ${videoWidth}x${videoHeight}` ); // Find all transient resources that need persistence before export // Transient resources include buffers and blobs that won't survive serialization const transientResources = engine.editor.findAllTransientResources(); console.log(`Found ${transientResources.length} transient resources`); for (const resource of transientResources) { console.log( `Transient: URL=${resource.URL}, Size=${resource.size} bytes` ); } // Get all media URIs referenced in the scene // Useful for pre-fetching or validating resource availability const mediaURIs = engine.editor.findAllMediaURIs(); console.log(`Scene contains ${mediaURIs.length} media URIs:`); for (const uri of mediaURIs) { console.log(` - ${uri}`); } // List blocks that are not attached to any scene. // Useful for cleanup and for skipping resource relocation on unreachable blocks. const unusedBlocks = engine.block.findAllUnused(); console.log(`Scene contains ${unusedBlocks.length} unused blocks`); for (const blockId of unusedBlocks) { // Free memory before saving by destroying the dangling block. engine.block.destroy(blockId); } // Detect the MIME type of a resource // This downloads the resource if not already cached const imageUri = 'https://img.ly/static/ubq_samples/sample_4.jpg'; const mimeType = await engine.editor.getMimeType(imageUri); console.log(`MIME type of ${imageUri}: ${mimeType}`); // Relocate a resource when its URL changes // This updates the internal cache mapping without modifying scene data const oldUrl = 'https://example.com/old-location/image.jpg'; const newUrl = 'https://cdn.example.com/new-location/image.jpg'; // In a real scenario, you would relocate after uploading to a new location: // engine.editor.relocateResource(oldUrl, newUrl); console.log(`Resource relocation example: ${oldUrl} -> ${newUrl}`); console.log('Use relocateResource() after uploading to a CDN'); // When saving, use onDisallowedResourceScheme to handle transient resources // This callback is called for each resource with a disallowed scheme (like buffer: or blob:) const sceneString = await engine.block.saveToString( [scene], ['http', 'https'], // Only allow http and https URLs async (url: string) => { // In a real app, upload the resource and return the permanent URL // const response = await uploadToCDN(url); // return response.permanentUrl; // For this example, we'll just log the URL console.log(`Would upload transient resource: ${url}`); // Return the original URL since we're not actually uploading return url; } ); console.log(`Scene saved to string (${sceneString.length} characters)`); // Set playback time to show video content in the scene engine.block.setPlaybackTime(page, 2); console.log('Resources guide initialized successfully.'); console.log( 'Demonstrated: on-demand loading, preloading, transient resources, and relocation.' ); } } export default Example; ``` This guide covers on-demand and preloaded resource loading, identifying and persisting transient resources, relocating resources when URLs change, and discovering all media URIs in a scene. ## On-Demand Loading The engine fetches resources automatically when rendering blocks or preparing exports. This approach requires no extra code but may delay the initial render while resources download. ```typescript highlight-on-demand-loading // Get the current scene and page const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } const pages = engine.block.findByType('page'); const page = pages[0]; // Layout configuration: two blocks with equal margins const margin = 30; const gap = 20; const blockWidth = 300; const blockHeight = 200; // Set page dimensions to hug the blocks const pageWidth = margin + blockWidth + gap + blockWidth + margin; const pageHeight = margin + blockHeight + margin; engine.block.setWidth(page, pageWidth); engine.block.setHeight(page, pageHeight); // Create a graphic block with an image fill // Resources are loaded on-demand when the engine renders the block const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); engine.block.setPositionX(imageBlock, margin); engine.block.setPositionY(imageBlock, margin); engine.block.setWidth(imageBlock, blockWidth); engine.block.setHeight(imageBlock, blockHeight); // Create an image fill - the image loads when the block is rendered const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setEnum(imageBlock, 'contentFill/mode', 'Cover'); engine.block.appendChild(page, imageBlock); console.log('Created image block - resource loads on-demand when rendered'); ``` When you create a block with an image fill, the image doesn't load immediately. The engine fetches it when the block first renders on the canvas. ## Preloading Resources Load resources before they're needed with `forceLoadResources()`. Pass block IDs to load resources for those blocks and their children. Preloading eliminates render delays and is useful when you want the scene fully ready before displaying it. ```typescript highlight-preload-resources // Preload all resources in the scene before rendering // This ensures resources are cached and ready for display console.log('Preloading all resources in the scene...'); await engine.block.forceLoadResources([scene]); console.log('All resources preloaded successfully'); // Preload specific blocks only (useful for optimizing load order) await engine.block.forceLoadResources([imageBlock]); console.log('Image block resources preloaded'); ``` Pass the scene to preload all resources in the entire design, or pass specific blocks to load only what you need. Pass an empty array to load every resource currently known to the engine. ## Preloading Audio and Video Audio and video resources require `forceLoadAVResource()` for full metadata access. The engine needs to download and parse media files before you can query properties like duration or dimensions. ```typescript highlight-preload-av // Create a second graphic block for video const videoBlock = engine.block.create('graphic'); const videoShape = engine.block.createShape('rect'); engine.block.setShape(videoBlock, videoShape); engine.block.setPositionX(videoBlock, margin + blockWidth + gap); engine.block.setPositionY(videoBlock, margin); engine.block.setWidth(videoBlock, blockWidth); engine.block.setHeight(videoBlock, blockHeight); // Create a video fill const videoFill = engine.block.createFill('video'); engine.block.setString( videoFill, 'fill/video/fileURI', 'https://img.ly/static/ubq_video_samples/bbb.mp4' ); engine.block.setFill(videoBlock, videoFill); engine.block.setEnum(videoBlock, 'contentFill/mode', 'Cover'); engine.block.appendChild(page, videoBlock); // Preload video resource to query its properties console.log('Preloading video resource...'); await engine.block.forceLoadAVResource(videoFill); console.log('Video resource preloaded'); // Now we can query video properties const videoDuration = engine.block.getAVResourceTotalDuration(videoFill); const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); console.log( `Video properties - Duration: ${videoDuration}s, Size: ${videoWidth}x${videoHeight}` ); ``` Without preloading, properties like `getAVResourceTotalDuration()` or `getVideoWidth()` may return zero or incomplete values. ## Finding Transient Resources Transient resources are temporary data stored in buffers or blobs that won't survive scene serialization. Use `findAllTransientResources()` to discover them before saving. ```typescript highlight-find-transient // Find all transient resources that need persistence before export // Transient resources include buffers and blobs that won't survive serialization const transientResources = engine.editor.findAllTransientResources(); console.log(`Found ${transientResources.length} transient resources`); for (const resource of transientResources) { console.log( `Transient: URL=${resource.URL}, Size=${resource.size} bytes` ); } ``` Each entry includes the resource URL and its size in bytes. Common transient resources include images from clipboard paste operations, camera captures, or programmatically generated content. ## Finding Media URIs Get all media file URIs referenced in a scene with `findAllMediaURIs()`. This returns a deduplicated list of URIs from image fills, video fills, audio blocks, and other media sources. ```typescript highlight-find-media-uris // Get all media URIs referenced in the scene // Useful for pre-fetching or validating resource availability const mediaURIs = engine.editor.findAllMediaURIs(); console.log(`Scene contains ${mediaURIs.length} media URIs:`); for (const uri of mediaURIs) { console.log(` - ${uri}`); } ``` Use this for pre-fetching resources, validating availability, or building a manifest of all assets in a design. ## Finding Unused Blocks List every block that is not attached to any scene with `findAllUnused()`. A block is considered unused when it has no scene reference and no ancestor that belongs to a scene. Render blocks (fills, effects, shapes, blurs) are excluded. ```typescript highlight-find-unused-blocks // List blocks that are not attached to any scene. // Useful for cleanup and for skipping resource relocation on unreachable blocks. const unusedBlocks = engine.block.findAllUnused(); console.log(`Scene contains ${unusedBlocks.length} unused blocks`); for (const blockId of unusedBlocks) { // Free memory before saving by destroying the dangling block. engine.block.destroy(blockId); } ``` Pair this with `findAllMediaURIs()` to skip relocating resources for blocks that are no longer reachable, or call `engine.block.destroy()` on each id to free memory before saving. ## Detecting MIME Types Determine a resource's content type with `getMimeType()`. The engine downloads the resource if it's not already cached. ```typescript highlight-detect-mime-type // Detect the MIME type of a resource // This downloads the resource if not already cached const imageUri = 'https://img.ly/static/ubq_samples/sample_4.jpg'; const mimeType = await engine.editor.getMimeType(imageUri); console.log(`MIME type of ${imageUri}: ${mimeType}`); ``` Common return values include `image/jpeg`, `image/png`, `video/mp4`, and `audio/mpeg`. This is useful when you need to verify resource types or make format-dependent decisions. ## Relocating Resources Update URL mappings when resources move with `relocateResource()`. This updates all resource references in the scene and clears the internal cache. ```typescript highlight-relocate-resource // Relocate a resource when its URL changes // This updates the internal cache mapping without modifying scene data const oldUrl = 'https://example.com/old-location/image.jpg'; const newUrl = 'https://cdn.example.com/new-location/image.jpg'; // In a real scenario, you would relocate after uploading to a new location: // engine.editor.relocateResource(oldUrl, newUrl); console.log(`Resource relocation example: ${oldUrl} -> ${newUrl}`); console.log('Use relocateResource() after uploading to a CDN'); ``` Use relocation after uploading resources to a CDN or when migrating assets between storage locations. The engine updates all references in the scene and clears cached data so that the resource is fetched from the new URL. ## Persisting Transient Resources Handle transient resources during save with the `onDisallowedResourceScheme` callback in `saveToString()`. The callback receives each resource URL with a disallowed scheme (like `buffer:` or `blob:`) and returns the permanent URL after uploading. ```typescript highlight-persist-transient // When saving, use onDisallowedResourceScheme to handle transient resources // This callback is called for each resource with a disallowed scheme (like buffer: or blob:) const sceneString = await engine.block.saveToString( [scene], ['http', 'https'], // Only allow http and https URLs async (url: string) => { // In a real app, upload the resource and return the permanent URL // const response = await uploadToCDN(url); // return response.permanentUrl; // For this example, we'll just log the URL console.log(`Would upload transient resource: ${url}`); // Return the original URL since we're not actually uploading return url; } ); console.log(`Scene saved to string (${sceneString.length} characters)`); ``` This pattern lets you intercept temporary resources, upload them to permanent storage, and save the scene with stable URLs that will work when reloaded. ## Troubleshooting **Slow initial render**: Preload resources with `forceLoadResources()` before displaying the scene. **Export fails with missing resources**: Check `findAllTransientResources()` and persist any temporary resources before export. **Video duration returns 0**: Ensure the video resource is loaded with `forceLoadAVResource()` before querying properties. **Resources not found after reload**: Transient resources (buffers, blobs) are not serialized—relocate them to persistent URLs before saving. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Scenes" description: "Create, configure, save, and load scenes—the root container for all design elements in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/scenes-e8596d/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Scenes](https://img.ly/docs/cesdk/angular/concepts/scenes-e8596d/) --- Scenes are the root container for all designs in CE.SDK. They hold pages, blocks, and the camera that controls what you see in the canvas—and the engine manages only one active scene at a time. ![Scenes example showing a two-page design with different shapes on each page](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-scenes-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-scenes-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-scenes-browser/) Every design you create starts with a scene. Scenes contain pages, and pages contain the visible design elements—text, images, shapes, and other blocks. Understanding how scenes work is essential for building, saving, and restoring user designs. ```typescript file=@cesdk_web_examples/guides-concepts-scenes-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Scenes Guide * * Demonstrates the complete scene lifecycle in CE.SDK: * - Creating scenes with different layouts * - Managing pages within scenes * - Configuring scene properties * - Saving and loading scenes * - Camera control and zoom */ 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.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Create a new design scene with VerticalStack layout // The layout controls how pages are arranged in the canvas engine.scene.create('VerticalStack'); // Get the stack container and add spacing between pages const stack = engine.block.findByType('stack')[0]; engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Create the first page const page1 = engine.block.create('page'); engine.block.setWidth(page1, 800); engine.block.setHeight(page1, 600); engine.block.appendChild(stack, page1); // Create a second page const page2 = engine.block.create('page'); engine.block.setWidth(page2, 800); engine.block.setHeight(page2, 600); engine.block.appendChild(stack, page2); // Add a shape to the first page const graphic1 = engine.block.create('graphic'); engine.block.setShape(graphic1, engine.block.createShape('rect')); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1 }); engine.block.setFill(graphic1, fill1); engine.block.setWidth(graphic1, 400); engine.block.setHeight(graphic1, 300); engine.block.setPositionX(graphic1, 200); engine.block.setPositionY(graphic1, 150); engine.block.appendChild(page1, graphic1); // Add a different shape to the second page const graphic2 = engine.block.create('graphic'); engine.block.setShape(graphic2, engine.block.createShape('ellipse')); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.2, a: 1 }); engine.block.setFill(graphic2, fill2); engine.block.setWidth(graphic2, 350); engine.block.setHeight(graphic2, 350); engine.block.setPositionX(graphic2, 225); engine.block.setPositionY(graphic2, 125); engine.block.appendChild(page2, graphic2); // Query scene properties const currentUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Scene design unit:', currentUnit); // Get the scene layout const layout = engine.scene.getLayout(); // eslint-disable-next-line no-console console.log('Scene layout:', layout); // Access pages within the scene const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log('Number of pages:', pages.length); // Get the current page (nearest to viewport center) const currentPage = engine.scene.getCurrentPage(); // eslint-disable-next-line no-console console.log('Current page ID:', currentPage); // Zoom to show all pages in the scene const scene = engine.scene.get(); if (scene) { await engine.scene.zoomToBlock(scene, { padding: 50 }); } // Get the current zoom level const zoomLevel = engine.scene.getZoomLevel(); // eslint-disable-next-line no-console console.log('Current zoom level:', zoomLevel); // Save the scene to a string for persistence const sceneString = await engine.scene.saveToString(); // eslint-disable-next-line no-console console.log('Scene saved successfully. String length:', sceneString.length); // Demonstrate loading the scene from the saved string // This replaces the current scene with the saved version await engine.scene.loadFromString(sceneString); // eslint-disable-next-line no-console console.log('Scene loaded from saved string'); // Zoom to show all loaded pages const loadedScene = engine.scene.get(); if (loadedScene) { await engine.scene.zoomToBlock(loadedScene, { padding: 50 }); } // eslint-disable-next-line no-console console.log('Scenes guide initialized successfully.'); } } export default Example; ``` This guide covers how to create scenes from scratch, manage pages within scenes, configure scene properties, save and load designs, and control the camera's zoom and position. ## Scene Hierarchy Scenes form the root of CE.SDK's design structure. The hierarchy works as follows: - **Scene** — The root container holding all design content - **Pages** — Direct children of scenes, arranged according to the scene's layout - **Blocks** — Design elements (text, images, shapes) that belong to pages Only blocks attached to pages within the active scene are rendered in the canvas. Use `engine.scene.get()` to retrieve the current scene and `engine.scene.getPages()` to access its pages. ## Creating Scenes ### Creating an Empty Scene Use `engine.scene.create()` to create a new design scene with a configurable page layout. The layout parameter controls how pages are arranged in the canvas. ```typescript highlight-create-scene // Create a new design scene with VerticalStack layout // The layout controls how pages are arranged in the canvas engine.scene.create('VerticalStack'); // Get the stack container and add spacing between pages const stack = engine.block.findByType('stack')[0]; engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); ``` Available layouts include: - `VerticalStack` — Pages stacked vertically - `HorizontalStack` — Pages arranged horizontally - `DepthStack` — Pages layered on top of each other - `Free` — Manual positioning ### Adding Pages After creating a scene, add pages using `engine.block.create('page')`. Configure the page dimensions and append it to the scene's stack container. ```typescript highlight-create-page // Create the first page const page1 = engine.block.create('page'); engine.block.setWidth(page1, 800); engine.block.setHeight(page1, 600); engine.block.appendChild(stack, page1); // Create a second page const page2 = engine.block.create('page'); engine.block.setWidth(page2, 800); engine.block.setHeight(page2, 600); engine.block.appendChild(stack, page2); ``` ### Adding Blocks With pages in place, add design elements like shapes, text, or images. Create a graphic block, configure its shape and fill, then append it to a page. ```typescript highlight-create-block // Add a shape to the first page const graphic1 = engine.block.create('graphic'); engine.block.setShape(graphic1, engine.block.createShape('rect')); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1 }); engine.block.setFill(graphic1, fill1); engine.block.setWidth(graphic1, 400); engine.block.setHeight(graphic1, 300); engine.block.setPositionX(graphic1, 200); engine.block.setPositionY(graphic1, 150); engine.block.appendChild(page1, graphic1); // Add a different shape to the second page const graphic2 = engine.block.create('graphic'); engine.block.setShape(graphic2, engine.block.createShape('ellipse')); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.2, a: 1 }); engine.block.setFill(graphic2, fill2); engine.block.setWidth(graphic2, 350); engine.block.setHeight(graphic2, 350); engine.block.setPositionX(graphic2, 225); engine.block.setPositionY(graphic2, 125); engine.block.appendChild(page2, graphic2); ``` ## Scene Properties ### Design Units Query or configure how measurements are interpreted using `engine.scene.getDesignUnit()` and `engine.scene.setDesignUnit()`. This is useful for print workflows where precise physical dimensions matter. ```typescript highlight-scene-properties // Query scene properties const currentUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Scene design unit:', currentUnit); // Get the scene layout const layout = engine.scene.getLayout(); // eslint-disable-next-line no-console console.log('Scene layout:', layout); ``` Supported units are `'Pixel'`, `'Millimeter'`, and `'Inch'`. For more details, see the [Design Units](https://img.ly/docs/cesdk/angular/concepts/design-units-cc6597/) guide. ### Scene Layout Control how pages are arranged using `engine.scene.getLayout()` and `engine.scene.setLayout()`. The layout affects how users navigate between pages in multi-page designs. ## Page Navigation Access pages within your scene using these methods: ```typescript highlight-page-navigation // Access pages within the scene const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log('Number of pages:', pages.length); // Get the current page (nearest to viewport center) const currentPage = engine.scene.getCurrentPage(); // eslint-disable-next-line no-console console.log('Current page ID:', currentPage); ``` The `getCurrentPage()` method returns the page nearest to the viewport center—useful for determining which page the user is currently viewing. ## Camera and Zoom ### Zoom to Block Use `engine.scene.zoomToBlock()` to frame a specific block in the viewport with padding. Pass the scene block to show all pages: ```typescript highlight-camera-zoom // Zoom to show all pages in the scene const scene = engine.scene.get(); if (scene) { await engine.scene.zoomToBlock(scene, { padding: 50 }); } // Get the current zoom level const zoomLevel = engine.scene.getZoomLevel(); // eslint-disable-next-line no-console console.log('Current zoom level:', zoomLevel); ``` ### Zoom Level Get and set the zoom level directly with `engine.scene.getZoomLevel()` and `engine.scene.setZoomLevel()`. A zoom level of 1.0 means one design unit equals one screen pixel. ### Auto-Fit Zoom For continuous auto-framing, use `engine.scene.enableZoomAutoFit()` to automatically keep a block centered as the viewport resizes. ## Saving Scenes ### Saving to String Use `engine.scene.saveToString()` to serialize the current scene. This captures the complete scene structure—pages, blocks, and their properties—as a string you can store. ```typescript highlight-save-scene // Save the scene to a string for persistence const sceneString = await engine.scene.saveToString(); // eslint-disable-next-line no-console console.log('Scene saved successfully. String length:', sceneString.length); ``` The serialized string references external assets by URL rather than embedding them. For complete portability including assets, use `engine.scene.saveToArchive()`. ## Loading Scenes ### Loading from String Use `engine.scene.loadFromString()` to restore a scene from a saved string: ```typescript highlight-load-scene // Demonstrate loading the scene from the saved string // This replaces the current scene with the saved version await engine.scene.loadFromString(sceneString); // eslint-disable-next-line no-console console.log('Scene loaded from saved string'); // Zoom to show all loaded pages const loadedScene = engine.scene.get(); if (loadedScene) { await engine.scene.zoomToBlock(loadedScene, { padding: 50 }); } ``` Loading a new scene replaces any existing scene. The engine only holds one active scene at a time. ### Loading from URL Use `engine.scene.loadFromURL()` to load a scene directly from a remote location: ```typescript await engine.scene.loadFromURL('https://example.com/design.scene'); ``` ## Troubleshooting ### Blocks Not Visible Ensure blocks are attached to pages, and pages are attached to the scene. Orphaned blocks that aren't part of the scene hierarchy won't render. ### Scene Not Loading Check that the scene URL or string is valid. If assets fail to load, consider using the `waitForResources` option to ensure everything loads before rendering. ### Zoom Not Working Verify the scene has a valid camera. Some UI configurations may override programmatic zoom controls. ## 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 | 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., Crop, Cover, Contain)., 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 (Absolute, Percent, Auto)., 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 radians. | | `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. | | `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 (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Templating" description: "Understand how templates work in CE.SDK—reusable designs with variables for dynamic text and placeholders for swappable media." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/templating-f94385/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Templating](https://img.ly/docs/cesdk/angular/concepts/templating-f94385/) --- Templates transform static designs into dynamic, data-driven content. They combine reusable layouts with variable text and placeholder media, enabling personalization at scale. ![Templating example showing a personalized postcard design](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-templating-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-templating-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-templating-browser/) A template is a regular CE.SDK scene that contains **variable tokens** in text and **placeholder blocks** for media. When you load a template, you can populate the variables with data and swap placeholder content—producing personalized designs without modifying the underlying layout. ```typescript file=@cesdk_web_examples/guides-concepts-templating-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Templating Concepts * * Demonstrates the core template concepts in CE.SDK: * - Loading a template from URL * - Discovering and setting variables * - Discovering placeholders */ 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.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Load a postcard template from URL // Templates are scenes containing variable tokens and placeholder blocks const templateUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'; await engine.scene.loadFromURL(templateUrl); // Zoom to show the full page in the viewport const page = engine.scene.getCurrentPage(); if (page) { await engine.scene.zoomToBlock(page, { padding: 40 }); } // Discover what variables this template expects // Variables are named slots that can be populated with data const variableNames = engine.variable.findAll(); // eslint-disable-next-line no-console console.log('Template variables:', variableNames); // Set variable values to personalize the template // These values replace {{variableName}} tokens in text blocks engine.variable.setString('Name', 'Jane'); engine.variable.setString('Greeting', 'Wish you were here!'); // eslint-disable-next-line no-console console.log('Variables set successfully.'); // Discover placeholder blocks in the template // Placeholders mark content slots for user or automation replacement const placeholders = engine.block.findAllPlaceholders(); // eslint-disable-next-line no-console console.log('Template placeholders:', placeholders.length); // eslint-disable-next-line no-console console.log('Templating guide completed successfully.'); } } export default Example; ``` This guide explains the core concepts. For implementation details, see the guides linked in each section. ## What Makes a Template Any CE.SDK scene can become a template by adding dynamic elements: | Element | Purpose | Example | |---------|---------|---------| | **Variables** | Dynamic text replacement | `Hello, {{firstName}}!` | | **Placeholders** | Swappable media slots | Profile photo, product image | | **Editing Constraints** | Protected design elements | Locked logo, fixed layout | Templates separate **design** (created once by designers) from **content** (populated at runtime with data). This enables workflows like batch generation, form-based customization, and user personalization. ## Variables Variables enable dynamic text without modifying the design structure. Text blocks contain `{{variableName}}` tokens that CE.SDK resolves at render time. ```typescript highlight-set-variables // Set variable values to personalize the template // These values replace {{variableName}} tokens in text blocks engine.variable.setString('Name', 'Jane'); engine.variable.setString('Greeting', 'Wish you were here!'); // eslint-disable-next-line no-console console.log('Variables set successfully.'); ``` **How variables work:** - Define variables with `engine.variable.setString('name', 'value')` - Reference them in text: `Welcome, {{name}}!` - CE.SDK automatically updates all text blocks using that variable - Tokens are case-sensitive; unmatched tokens render as literal text Variables are scene-scoped and persist when you save the template. Use `engine.variable.findAll()` to discover what variables a template expects. [Learn more about text variables →](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/) ## Placeholders Placeholders mark blocks as content slots that users or automation can replace. When you enable placeholder behavior on an image block, it displays an overlay pattern and replacement button in the editor. **How placeholders work:** - Enable with `engine.block.setPlaceholderEnabled(block, true)` - Add visual UI with `engine.block.setPlaceholderBehaviorEnabled(fill, true)` - Users in Adopter mode can select and replace placeholder content - Other design elements remain locked Use `engine.block.findAllPlaceholders()` to discover all placeholder blocks in a loaded template. [Learn more about placeholders →](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/placeholders-d9ba8a/) ## Template Workflows Templates support several common workflows: ### Form-Based Customization Load a template, present a form for variable values, and let users customize text while the design stays consistent. The editor UI handles placeholder replacement through drag-and-drop. ### Batch Generation Load a template programmatically, iterate through data records, set variables for each record, and export personalized designs. This powers use cases like certificates, badges, and personalized marketing. ### Design Systems Create template libraries where designers maintain approved layouts and end users customize within defined boundaries using variables and placeholders. ## Loading and Applying Templates CE.SDK provides two approaches for working with templates: **Load a template** with `engine.scene.loadFromURL()` to replace the current scene entirely, including page dimensions: ```typescript highlight-load-template // Load a postcard template from URL // Templates are scenes containing variable tokens and placeholder blocks const templateUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'; await engine.scene.loadFromURL(templateUrl); // Zoom to show the full page in the viewport const page = engine.scene.getCurrentPage(); if (page) { await engine.scene.zoomToBlock(page, { padding: 40 }); } ``` **Apply a template** with `engine.scene.applyTemplateFromURL()` to merge template content into an existing scene while preserving current page dimensions. [Learn more about importing templates →](https://img.ly/docs/cesdk/angular/create-templates/import-e50084/) ## Creating Templates Build templates by adding variable tokens to text blocks and configuring placeholder behavior on media blocks. Save with `engine.scene.saveToString()` or `engine.scene.saveToArchive()`. [Learn more about creating templates →](https://img.ly/docs/cesdk/angular/create-templates/from-scratch-663cda/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Terminology" description: "Definitions for the core terms and concepts used throughout CE.SDK documentation, including Engine, Scene, Block, Fill, Shape, Effect, and more." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/terminology-99e82d/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Terminology](https://img.ly/docs/cesdk/angular/concepts/terminology-99e82d/) --- A reference guide to the core terms and concepts used throughout CE.SDK documentation. CE.SDK uses consistent terminology across all platforms. Understanding what we call things helps you navigate the API, read documentation efficiently, and communicate effectively with other developers working on CE.SDK integration. ## Core Architecture ### Engine All operations—creating scenes, manipulating blocks, rendering, and exporting—go through the *Engine*. Initialize it once and use it throughout your application's lifecycle. ### Scene The root container for all design content. A *Scene* contains *Pages*, which contain *Blocks*. Only one *Scene* can be active per *Engine* instance. You can create a *Scene* programmatically or load one from a file. *Scenes* support both static designs (social posts, print materials, graphics) and time-based content (duration, playback time, animation). See [Scenes](https://img.ly/docs/cesdk/angular/concepts/scenes-e8596d/) for details. ### Page *Pages* are containers within a *Scene* that hold content *Blocks* (see below) and define working area dimensions. For static designs, pages are individual artboards. For video editing, pages are time-based compositions where *Blocks* are arranged across time. See [Pages](https://img.ly/docs/cesdk/angular/concepts/pages-7b6bae/) for details. ### Block The fundamental building unit in CE.SDK. Everything visible in a design is a *Block*—images, text, shapes, graphics, audio, video—and even *Pages* themselves. *Blocks* form a parent-child hierarchy. Each *Block* has two identifiers: - **DesignBlockId**: A numeric handle (integer) used in API calls - **UUID**: A stable string identifier that persists across save and load operations See [Blocks](https://img.ly/docs/cesdk/angular/concepts/blocks-90241e/) for details. ## Block Anatomy Modify a *Block's* appearance and behavior by attaching *Fills*, *Shapes*, and *Effects*. Most of these modifiers must be created separately and then attached to a *Block*. ### Fill *Fills* cover the surface of a *Block's* shape: - **Color Fill**: Solid color - **Gradient Fill**: Linear, radial, or conical gradients - **Image Fill**: Image content - **Video Fill**: Video content See the [Color Fills](https://img.ly/docs/cesdk/angular/fills/color-7129cd/), [Gradient Fills](https://img.ly/docs/cesdk/angular/filters-and-effects/gradients-0ff079/), [Image Fills](https://img.ly/docs/cesdk/angular/fills/image-e9cb5c/), and [Video Fills](https://img.ly/docs/cesdk/angular/fills/video-ec7f9f/) guides. ### Shape *Shapes* define a *Block's* outline and dimensions, determining the silhouette and how the *Fill* is clipped. *Shape* types include: - **Rect**: Rectangles and squares - **Ellipse**: Circles and ovals - **Polygon**: Multi-sided shapes - **Star**: Star shapes with configurable points - **Line**: Straight lines - **Vector Path**: Custom vector shapes Like *Fills*, *Shapes* are created separately and attached to *Blocks*. See [Shapes](https://img.ly/docs/cesdk/angular/shapes-9f1b2c/) for details. ### Effect *Effects* are non-destructive visual modifications applied to a *Block*. Multiple *Effects* can be stacked. *Effect* categories include: - **Adjustments**: Brightness, contrast, saturation, and other image corrections - **Filters**: LUT-based color grading, duotone - **Stylization**: Pixelize, posterize, half-tone, dot pattern, linocut, outliner - **Distortion**: Liquid, mirror, shifter, cross-cut, extrude blur - **Focus**: Tilt-shift, vignette - **Color**: Recolor, green screen (chroma key) - **Other**: Glow, TV glitch The order determines how multiple effects attached to a single block interact. See [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) for details. ### Blur A modifier that reduces sharpness. *Blur* types include: - **Uniform Blur**: Even blur across the entire block - **Radial Blur**: Circular blur from a center point - **Mirrored Blur**: Blur with reflection > **Note:** **Blur has a dedicated API because it composites differently than other effects.** While most effects like brightness or saturation operate only on a block's own pixels, blur needs to sample pixels from the surrounding area to calculate the blurred result. This means blur interacts with the scene's layering and transparency in ways other effects don't—when you blur a partially transparent block, the engine must handle how that blur blends with whatever content sits behind it. See [Blur](https://img.ly/docs/cesdk/angular/filters-and-effects/blur-71d642/) for details. ### Drop Shadow A built-in block property (not an *Effect*) that renders a shadow beneath blocks. *Drop Shadow* has dedicated API methods for enabling, color, offset, and blur radius. > **Warning:** Unlike effects, drop shadow is configured directly on the block rather than created and attached separately. ## Block Handling These terms describe how *Blocks* are categorized and identified. ### Type The built-in *Type* defines a *Block's* core behavior and available properties. *Type* is immutable—you choose it when creating the *Block*. - `//ly.img.ubq/graphic` — Visual block for images, shapes, and graphics - `//ly.img.ubq/text` — Text content - `//ly.img.ubq/audio` — Audio content - `//ly.img.ubq/page` — Page container - `//ly.img.ubq/scene` — Root scene container - `//ly.img.ubq/track` — Video timeline track - `//ly.img.ubq/stack` — Stack container for layering - `//ly.img.ubq/group` — Group container for organizing blocks - `//ly.img.ubq/camera` — Camera for scene viewing - `//ly.img.ubq/cutout` — Cutout/mask block - `//ly.img.ubq/caption` — Caption/subtitle block - `//ly.img.ubq/captionTrack` — Track for captions The *Type* determines which properties and capabilities a *Block* has. ### Kind A custom string label you assign to categorize *Blocks* for your application. Unlike *Type*, *Kind* is mutable and application-defined. Changing the *Kind* has no effect on appearance or behavior at the engine level. You can query and search for *Blocks* by *Kind*. Common uses: - Categorizing template elements ("logo", "headline", "background") - Filtering blocks for custom UI - Automation workflows that process blocks by purpose ### Property A configurable attribute of a *Block*. *Properties* have types (`Bool`, `Int`, `Float`, `String`, `Color`, `Enum`) and paths like `text/fontSize` or `fill/image/imageFileURI`. Access *Properties* using type-specific getter and setter methods. Each *Block* type exposes different properties, which you can discover programmatically. See [Blocks](https://img.ly/docs/cesdk/angular/concepts/blocks-90241e/) for details. ## Assets and Resources ### Asset Think of *Assets* as media items that you can provide to your users: images, videos, audio files, fonts, stickers, or templates—anything that can be added to a design. *Assets* have metadata including: - **ID**: Unique identifier within an asset source - **Label**: Display name - **Meta**: Custom metadata (URI, dimensions, format) - **Thumbnail URI**: Preview image URL *Assets* are provided by *Asset Sources* and added through the UI or programmatically. ### Asset Source A provider of *Assets*. *Asset Sources* can be built-in (like the default sticker library) or custom. *Asset Sources* implement a query interface returning paginated results with search and filtering. - **Local Asset Source**: Assets defined in JSON, loaded at initialization - **Remote Asset Source**: Custom implementation fetching from external APIs Register *Asset Sources* with the *Engine* to make *Assets* available throughout your application. ### Resource Loaded data from an *Asset* URI. When you reference an image or video URL in a *Block*, the *Engine* fetches and caches the *Resource*. *Resources* include binary data and metadata for rendering. See [Resources](https://img.ly/docs/cesdk/angular/concepts/resources-a58d71/) for details. ### Buffer A resizable container for arbitrary binary data. *Buffers* are useful for dynamically generated content that doesn't come from a URL, such as synthesized audio or programmatically created images. Create a *Buffer*, write data to it, and reference it by URI in *Block* properties. *Buffer* data is not serialized with scenes and changes cannot be undone. See [Buffers](https://img.ly/docs/cesdk/angular/concepts/buffers-9c565b/) for details. ## Templating and Automation These terms describe dynamic content and reusable designs. ### Template A reusable design with predefined structure and styling. *Templates* typically contain *Placeholders* and *Variables* that users customize while maintaining overall layout and branding. *Templates* are scenes saved in a format that can be loaded and modified. ### Placeholder A *Block* marked for content replacement. When a *Block's* placeholder property is enabled, it signals that the *Block* expects user-provided content—an image drop zone or editable text field. *Placeholders* indicate which parts of a design should be customized versus fixed. See [Placeholders](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/placeholders-d9ba8a/) for details. ### Variable A named value referenced in text blocks using `{{variableName}}` syntax. *Variables* enable data-driven design generation by populating templates with dynamic content. Define *Variables* at the scene level and reference them in text blocks. When a *Variable* value changes, all referencing text blocks update automatically. See [Text Variables](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/) for details. ## Permissions and Scopes These terms relate to controlling what operations are allowed. ### Scope A permission setting controlling whether specific operations are allowed on a *Block*. *Scopes* enable fine-grained control over what users can modify—essential for template workflows where some elements should be editable and others locked. Common scopes: - `layer/move` — Allow or prevent moving - `layer/resize` — Allow or prevent resizing - `layer/rotate` — Allow or prevent rotation - `layer/visibility` — Allow or prevent hiding - `lifecycle/destroy` — Allow or prevent deletion - `editor/select` — Allow or prevent selection Enable or disable *Scopes* per *Block* to create controlled editing experiences. See [Lock Design Elements](https://img.ly/docs/cesdk/angular/create-templates/lock-131489/) for details. ### Role A preset collection of *Scope* settings. CE.SDK defines two built-in *Roles*: - **Creator**: Full access to all operations, for template authors - **Adopter**: Restricted access for end-users customizing templates *Roles* provide a convenient way to apply consistent permission sets. ## Layout and Units These terms relate to positioning and measurement. ### Design Unit The measurement unit for dimensions in a *Scene*. The choice affects how positions, sizes, and exports are interpreted. Options: - **Pixel**: Screen pixels, default for digital designs - **Millimeter**: Metric measurement for print - **Inch**: Imperial measurement for print Set the design unit at the scene level—all dimension values are interpreted in that unit. See [Design Units](https://img.ly/docs/cesdk/angular/concepts/design-units-cc6597/) for details. ### DPI (Dots Per Inch) Resolution setting affecting export quality and unit conversion. Higher DPI produces larger exports with more detail. The default is 300 DPI, suitable for print-quality output. DPI matters when working with physical units (millimeters, inches) as it determines how measurements translate to pixel dimensions during export. ## Operating Modes These terms describe how CE.SDK runs. ### Scene Capabilities Every *Scene* supports the full range of features: - **Static designs**: Content arranged spatially on pages. - **Video editing**: Blocks can have duration, time offset, playback time, and animation properties. See [Scenes](https://img.ly/docs/cesdk/angular/concepts/scenes-e8596d/) for details. ### Headless Mode Running CE.SDK without the built-in UI. Used for: - Server-side rendering and export - Automation pipelines - Custom UI implementations - Batch processing In *Headless Mode*, you work directly with *Engine* APIs without the visual editor. See [Headless Mode](https://img.ly/docs/cesdk/angular/concepts/headless-mode/browser-24ab98/) for setup. ## Events and State These terms relate to monitoring changes. ### Event / Subscription A callback mechanism for reacting to changes in the *Engine*. Subscribe to events and receive notifications when state changes. Common events: - Selection changes - Block state changes - History (undo/redo) changes Subscriptions return an unsubscribe function to call when you no longer need notifications. See [Events](https://img.ly/docs/cesdk/angular/concepts/events-353f97/) for details. ### Block State The current status of a *Block* indicating readiness or issues: - **Ready**: Normal state, no pending operations - **Pending**: Operation in progress, with optional progress value (0-1) - **Error**: Operation failed, with error type (`ImageDecoding`, `VideoDecoding`, `FileFetch`, etc.) *Block State* reflects the combined status of the *Block* and its attached *Fill*, *Shape*, and *Effects*. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Undo and History" description: "Manage undo and redo stacks in CE.SDK using multiple histories, callbacks, and API-based controls." platform: angular url: "https://img.ly/docs/cesdk/angular/concepts/undo-and-history-99479d/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/angular/concepts-c9ff51/) > [Undo and History](https://img.ly/docs/cesdk/angular/concepts/undo-and-history-99479d/) --- Implement undo/redo functionality and manage multiple history stacks to track editing operations. ![Undo and History example showing the CE.SDK editor with undo/redo controls](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-undo-and-history-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-undo-and-history-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-undo-and-history-browser/) CE.SDK automatically tracks editing operations, enabling users to undo and redo changes. The engine creates undo steps for most operations automatically. You can also create multiple independent history stacks to isolate different editing contexts, such as separate histories for a main canvas and an overlay editing panel. ```typescript file=@cesdk_web_examples/guides-concepts-undo-and-history-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; // Subscribe to history updates. const unsubscribe = engine.editor.onHistoryUpdatedWithKind((kind) => { if (kind === 'Activated') { console.log('Active history switched, scene unchanged.'); return; } const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log('History updated:', { canUndo, canRedo }); }); // Create a triangle shape and add an undo step to record it in history const block = engine.block.create('graphic'); engine.block.setPositionX(block, 140); engine.block.setPositionY(block, 95); engine.block.setWidth(block, 265); engine.block.setHeight(block, 265); const triangleShape = engine.block.createShape('polygon'); engine.block.setInt(triangleShape, 'shape/polygon/sides', 3); engine.block.setShape(block, triangleShape); const triangleFill = engine.block.createFill('color'); engine.block.setColor(triangleFill, 'fill/color/value', { r: 0.2, g: 0.5, b: 0.9, a: 1 }); engine.block.setFill(block, triangleFill); engine.block.appendChild(page, block); // Commit the block creation to history so it can be undone engine.editor.addUndoStep(); // Log current state - canUndo should now be true console.log('Block created. canUndo:', engine.editor.canUndo()); // Undo the block creation if (engine.editor.canUndo()) { engine.editor.undo(); console.log( 'After undo - canUndo:', engine.editor.canUndo(), 'canRedo:', engine.editor.canRedo() ); } // Redo to restore the block if (engine.editor.canRedo()) { engine.editor.redo(); console.log( 'After redo - canUndo:', engine.editor.canUndo(), 'canRedo:', engine.editor.canRedo() ); } // Create a second history stack for isolated operations const secondaryHistory = engine.editor.createHistory(); const primaryHistory = engine.editor.getActiveHistory(); console.log( 'Created secondary history. Primary:', primaryHistory, 'Secondary:', secondaryHistory ); // Switch to the secondary history engine.editor.setActiveHistory(secondaryHistory); console.log( 'Switched to secondary history. Active:', engine.editor.getActiveHistory() ); // Operations in secondary history are isolated from the primary history const secondBlock = engine.block.create('graphic'); engine.block.setPositionX(secondBlock, 440); engine.block.setPositionY(secondBlock, 95); engine.block.setWidth(secondBlock, 220); engine.block.setHeight(secondBlock, 220); const circleShape = engine.block.createShape('ellipse'); engine.block.setShape(secondBlock, circleShape); const circleFill = engine.block.createFill('color'); engine.block.setColor(circleFill, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.3, a: 1 }); engine.block.setFill(secondBlock, circleFill); engine.block.appendChild(page, secondBlock); // Commit changes to the secondary history engine.editor.addUndoStep(); console.log( 'Block added in secondary history. canUndo:', engine.editor.canUndo() ); // Switch back to primary history engine.editor.setActiveHistory(primaryHistory); console.log( 'Switched back to primary history. canUndo:', engine.editor.canUndo() ); // Clean up the secondary history when no longer needed engine.editor.destroyHistory(secondaryHistory); console.log('Secondary history destroyed'); // Manually add an undo step after custom operations engine.block.setPositionX(block, 190); engine.editor.addUndoStep(); console.log('Manual undo step added. canUndo:', engine.editor.canUndo()); // Remove the most recent undo step if needed if (engine.editor.canUndo()) { engine.editor.removeUndoStep(); console.log('Most recent undo step removed'); } // Reset block position to its original location engine.block.setPositionX(block, 140); // Add instruction text at the end (after all demo operations) const instructionText = engine.block.create('text'); engine.block.setPositionX(instructionText, 50); engine.block.setPositionY(instructionText, 430); engine.block.setWidth(instructionText, 700); engine.block.setHeight(instructionText, 120); engine.block.replaceText( instructionText, 'Open the browser console to see logs of the undo and redo operations in this example.' ); engine.block.setFloat(instructionText, 'text/fontSize', 90); engine.block.setEnum(instructionText, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, instructionText); // Clean up subscription when done (in a real app, call this on cleanup) // unsubscribe(); void unsubscribe; } } export default Example; ``` This guide covers how to use the built-in undo/redo UI controls, perform undo and redo operations programmatically, subscribe to history changes, manually manage undo steps, and work with multiple history stacks. ## Setup We start by initializing the CE.SDK editor and creating a design scene. The engine automatically creates a history stack when the editor is initialized. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; ``` ## Using the Built-in Undo/Redo UI The CE.SDK editor includes undo and redo buttons in the navigation bar. When users make changes, the undo button becomes active. After undoing, the redo button allows restoring changes. The UI automatically reflects the current history state, disabling buttons when no operations are available. ## Automatic Undo Step Creation Most editing operations automatically create undo steps. When we add a shape to the scene, the engine records this operation in the history stack. ```typescript highlight=highlight-create-block // Create a triangle shape and add an undo step to record it in history const block = engine.block.create('graphic'); engine.block.setPositionX(block, 140); engine.block.setPositionY(block, 95); engine.block.setWidth(block, 265); engine.block.setHeight(block, 265); const triangleShape = engine.block.createShape('polygon'); engine.block.setInt(triangleShape, 'shape/polygon/sides', 3); engine.block.setShape(block, triangleShape); const triangleFill = engine.block.createFill('color'); engine.block.setColor(triangleFill, 'fill/color/value', { r: 0.2, g: 0.5, b: 0.9, a: 1 }); engine.block.setFill(block, triangleFill); engine.block.appendChild(page, block); // Commit the block creation to history so it can be undone engine.editor.addUndoStep(); ``` After creating the shape, `canUndo()` returns `true` since the operation has been recorded as an undoable step. ## Performing Undo and Redo Operations We use `engine.editor.undo()` and `engine.editor.redo()` to programmatically revert or restore changes. Before calling these methods, check availability with `engine.editor.canUndo()` and `engine.editor.canRedo()` to prevent errors. ```typescript highlight=highlight-undo // Undo the block creation if (engine.editor.canUndo()) { engine.editor.undo(); console.log( 'After undo - canUndo:', engine.editor.canUndo(), 'canRedo:', engine.editor.canRedo() ); } ``` The undo operation reverts the most recent change. After undoing, `canRedo()` returns `true` since there's now a step available to restore. ```typescript highlight=highlight-redo // Redo to restore the block if (engine.editor.canRedo()) { engine.editor.redo(); console.log( 'After redo - canUndo:', engine.editor.canUndo(), 'canRedo:', engine.editor.canRedo() ); } ``` The redo operation restores the most recently undone change. After redoing, `canRedo()` returns `false` (unless there are more undo steps to restore). ## Subscribing to History Changes We use `engine.editor.onHistoryUpdatedWithKind()` to receive notifications when the history state changes. The callback receives a `HistoryUpdate` argument that distinguishes the kind of change: - `'Updated'` — the active history's snapshots changed because of an edit, an `addUndoStep` call, or an `undo`/`redo`. The scene reflects the new state. - `'Activated'` — a different history buffer was made active via `setActiveHistory()`. The undo/redo stack visible to the user changed, but no new snapshot was created and no undo or redo was applied. This separation matters for save-button or dirty-state logic: switching the active history (for example when toggling preview mode) should not be treated as an unsaved change. ```typescript highlight=highlight-subscribe-history // Subscribe to history updates. const unsubscribe = engine.editor.onHistoryUpdatedWithKind((kind) => { if (kind === 'Activated') { console.log('Active history switched, scene unchanged.'); return; } const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log('History updated:', { canUndo, canRedo }); }); ``` The subscription returns an unsubscribe function. Call it when you no longer need notifications, such as when unmounting a component. ## Managing Undo Steps Manually Most editing operations automatically create undo steps. However, some custom operations may require manual checkpoint creation using `engine.editor.addUndoStep()`. This is useful when you make multiple related changes that should be undone as a single unit. ```typescript highlight=highlight-manual-undo-step // Manually add an undo step after custom operations engine.block.setPositionX(block, 190); engine.editor.addUndoStep(); console.log('Manual undo step added. canUndo:', engine.editor.canUndo()); // Remove the most recent undo step if needed if (engine.editor.canUndo()) { engine.editor.removeUndoStep(); console.log('Most recent undo step removed'); } // Reset block position to its original location engine.block.setPositionX(block, 140); ``` We use `engine.editor.removeUndoStep()` to remove the most recent undo step. Always check `canUndo()` before calling this method to ensure an undo step is available. This can be useful when you need to discard changes without affecting the redo stack. ## Working with Multiple History Stacks CE.SDK supports multiple independent history stacks for isolated editing contexts. This is useful when you need separate undo/redo histories for different parts of your application, such as a main canvas and an overlay editor. ### Creating and Switching History Stacks We create a new history stack using `engine.editor.createHistory()`. Use `engine.editor.setActiveHistory()` to switch between stacks. Only the active history responds to undo/redo operations. ```typescript highlight=highlight-multiple-histories // Create a second history stack for isolated operations const secondaryHistory = engine.editor.createHistory(); const primaryHistory = engine.editor.getActiveHistory(); console.log( 'Created secondary history. Primary:', primaryHistory, 'Secondary:', secondaryHistory ); // Switch to the secondary history engine.editor.setActiveHistory(secondaryHistory); console.log( 'Switched to secondary history. Active:', engine.editor.getActiveHistory() ); // Operations in secondary history are isolated from the primary history const secondBlock = engine.block.create('graphic'); engine.block.setPositionX(secondBlock, 440); engine.block.setPositionY(secondBlock, 95); engine.block.setWidth(secondBlock, 220); engine.block.setHeight(secondBlock, 220); const circleShape = engine.block.createShape('ellipse'); engine.block.setShape(secondBlock, circleShape); const circleFill = engine.block.createFill('color'); engine.block.setColor(circleFill, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.3, a: 1 }); engine.block.setFill(secondBlock, circleFill); engine.block.appendChild(page, secondBlock); // Commit changes to the secondary history engine.editor.addUndoStep(); console.log( 'Block added in secondary history. canUndo:', engine.editor.canUndo() ); // Switch back to primary history engine.editor.setActiveHistory(primaryHistory); console.log( 'Switched back to primary history. canUndo:', engine.editor.canUndo() ); ``` Operations performed while a history is active only affect that history. When you switch back to the primary history, its undo/redo state remains unchanged by operations performed in the secondary history. ### Cleaning Up History Stacks We destroy unused history stacks with `engine.editor.destroyHistory()` to free resources. Always clean up secondary histories when they're no longer needed. ```typescript highlight=highlight-destroy-history // Clean up the secondary history when no longer needed engine.editor.destroyHistory(secondaryHistory); console.log('Secondary history destroyed'); ``` ## Troubleshooting Common issues when working with undo/redo functionality: - **Undo step not recorded**: Ensure changes occur after the history subscription is active. The engine only tracks operations that happen while the history is being monitored. - **Redo not available**: Performing any new action after undo clears the redo stack. This is standard behavior to prevent branching history states. - **Wrong history active**: Always verify the correct history is set with `getActiveHistory()` before performing undo/redo operations when using multiple stacks. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Configuration" description: "Learn how to configure CE.SDK to match your application's functional, visual, and performance requirements." platform: angular url: "https://img.ly/docs/cesdk/angular/configuration-2c1c3d/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Configuration](https://img.ly/docs/cesdk/angular/configuration-2c1c3d/) --- Set up CE.SDK with license keys, asset base URLs, user IDs, and runtime configuration options to match your application requirements. ![Configuration example showing CE.SDK editor with theme toggle in navigation bar](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-configuration-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-configuration-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-configuration-browser/) `CreativeEditorSDK.create()` initializes the full CE.SDK editor with UI components. The configuration object controls license validation, asset loading, user tracking, and UI behavior. ```typescript file=@cesdk_web_examples/guides-configuration-browser/index.ts reference-only import CreativeEditorSDK from '@cesdk/cesdk-js'; import Example from './browser'; const config = { // License key removes watermarks from exports // Get a free trial at https://img.ly/forms/free-trial // license: 'YOUR_CESDK_LICENSE_KEY', // User ID for accurate MAU tracking across devices userId: 'guides-user', // Custom logger for debugging and monitoring logger: (message: string, level?: string) => { console.log(`[CE.SDK ${level ?? 'Info'}] ${message}`); }, // Enable developer mode for diagnostics devMode: false, // Accessibility settings a11y: { headingsHierarchyStart: 1 as const }, // Location of core engine assets (WASM, data files) // Default: IMG.LY CDN. For production, host assets yourself. // baseURL: import.meta.env.VITE_IMGLY_LOCAL_ASSETS_URL, baseURL: import.meta.env.VITE_IMGLY_LOCAL_ASSETS_URL }; CreativeEditorSDK.create('#cesdk_container', config) .then(async (cesdk) => { // Expose cesdk for debugging and hero screenshot generation (window as any).cesdk = cesdk; // Load the example plugin await cesdk.addPlugin(new Example()); }) .catch((error: Error) => { // eslint-disable-next-line no-console console.error('Failed to initialize CE.SDK:', error); }); ``` ```typescript file=@cesdk_web_examples/guides-configuration-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Create a Scene engine.scene.create('VerticalStack', { page: { size: { width: 800, height: 600 } } }); const pages = engine.block.findByType('page'); const page = pages[0]; // ======================================== // Setup: Gradient Background with Title // ======================================== // Create gradient background const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.15, g: 0.1, b: 0.35, a: 1.0 }, stop: 0 }, { color: { r: 0.4, g: 0.2, b: 0.5, a: 1.0 }, stop: 0.5 }, { color: { r: 0.6, g: 0.3, b: 0.4, a: 1.0 }, stop: 1 } ]); engine.block.setFill(page, gradientFill); // Add centered title text const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const titleText = engine.block.create('text'); engine.block.replaceText(titleText, 'Configure your Editor'); engine.block.setFloat(titleText, 'text/fontSize', 12); engine.block.setTextColor(titleText, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setWidthMode(titleText, 'Auto'); engine.block.setHeightMode(titleText, 'Auto'); engine.block.appendChild(page, titleText); // Add IMG.LY subtext const subtitleText = engine.block.create('text'); engine.block.replaceText(subtitleText, 'Powered by IMG.LY'); engine.block.setFloat(subtitleText, 'text/fontSize', 6); engine.block.setTextColor(subtitleText, { r: 0.9, g: 0.9, b: 0.9, a: 0.8 }); engine.block.setWidthMode(subtitleText, 'Auto'); engine.block.setHeightMode(subtitleText, 'Auto'); engine.block.appendChild(page, subtitleText); // Center both texts const titleWidth = engine.block.getFrameWidth(titleText); const titleHeight = engine.block.getFrameHeight(titleText); const subtitleWidth = engine.block.getFrameWidth(subtitleText); const subtitleHeight = engine.block.getFrameHeight(subtitleText); const spacing = 12; const totalHeight = titleHeight + spacing + subtitleHeight; const startY = (pageHeight - totalHeight) / 2; engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleText, startY); engine.block.setPositionX(subtitleText, (pageWidth - subtitleWidth) / 2); engine.block.setPositionY(subtitleText, startY + titleHeight + spacing); // ======================================== // Runtime Configuration: Theme // ======================================== cesdk.ui.setTheme('light'); const currentTheme = cesdk.ui.getTheme(); console.log('Current theme:', currentTheme); // ======================================== // Runtime Configuration: Scale // ======================================== cesdk.ui.setScale('modern'); const currentScale = cesdk.ui.getScale(); console.log('Current scale:', currentScale); // ======================================== // Runtime Configuration: Actions // ======================================== cesdk.actions.register('customSave', async () => { const sceneBlob = await engine.scene.saveToArchive(); await cesdk.utils.downloadFile(sceneBlob, 'application/zip'); }); // ======================================== // Built-in Actions // ======================================== // Add built-in export and import actions to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.exportImage.navigationBar', 'ly.img.exportPDF.navigationBar', 'ly.img.exportScene.navigationBar', 'ly.img.exportArchive.navigationBar', 'ly.img.importScene.navigationBar', 'ly.img.importArchive.navigationBar' ] } ); // ======================================== // Engine Settings // ======================================== engine.editor.setSetting('doubleClickToCropEnabled', true); engine.editor.setSetting('highlightColor', { r: 0, g: 0.5, b: 1, a: 1 }); const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); console.log('Double-click crop enabled:', cropEnabled); // ======================================== // Internationalization: Locale // ======================================== cesdk.i18n.setLocale('en'); const currentLocale = cesdk.i18n.getLocale(); console.log('Current locale:', currentLocale); // ======================================== // Internationalization: Translations // ======================================== cesdk.i18n.setTranslations({ en: { 'common.back': 'Go Back', 'common.apply': 'Apply Changes' } }); // Enable Auto-Fit Zoom engine.scene.zoomToBlock(page); engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40); } } export default Example; ``` ## Required Configuration The `license` property is the only required configuration. All other properties have sensible defaults. | Property | Type | Purpose | |----------|------|---------| | `license` | `string` | License key to remove export watermarks | The license key validates your CE.SDK subscription and removes watermarks from exports. Get a free trial license at [https://img.ly/forms/free-trial](https://img.ly/forms/free-trial). ## Optional Configuration These properties customize engine behavior and are all optional. ### Engine Properties | Property | Type | Purpose | |----------|------|---------| | `baseURL` | `string` | Location of core engine assets (WASM, data files) | | `userId` | `string` | User identifier for MAU tracking | | `logger` | `function` | Custom logging function | | `role` | `'Creator'` | `'Adopter'` | `'Viewer'` | `'Presenter'` | User role for feature access | | `featureFlags` | `object` | Experimental feature toggles | ### Editor Properties | Property | Type | Purpose | |----------|------|---------| | `devMode` | `boolean` | Enable developer diagnostics | | `a11y` | `object` | Accessibility settings | | `ui` | `object` | User interface customization | ## Configuration Properties ### License Key The license key validates your CE.SDK subscription and removes watermarks from exports. Without a valid license, exports include a watermark. ```typescript highlight=highlight-license // License key removes watermarks from exports // Get a free trial at https://img.ly/forms/free-trial // license: 'YOUR_CESDK_LICENSE_KEY', ``` ### User ID Provide a unique user identifier for accurate Monthly Active User (MAU) tracking. This helps count users correctly when the same person accesses your application from multiple devices. ```typescript highlight=highlight-userId // User ID for accurate MAU tracking across devices userId: 'guides-user', ``` ### Custom Logger Replace the default console logging with a custom logger function. The logger receives a message string and an optional log level (`'Info'`, `'Warning'`, or `'Error'`). ```typescript highlight=highlight-logger // Custom logger for debugging and monitoring logger: (message: string, level?: string) => { console.log(`[CE.SDK ${level ?? 'Info'}] ${message}`); }, ``` ### Developer Mode Enable developer mode to get additional diagnostics and debugging information in the console. ```typescript highlight=highlight-devMode // Enable developer mode for diagnostics devMode: false, ``` ### Accessibility Settings Configure accessibility options like heading hierarchy for screen readers. The `headingsHierarchyStart` property sets which heading level (1-6) the editor should start from. ```typescript highlight=highlight-a11y // Accessibility settings a11y: { headingsHierarchyStart: 1 as const }, ``` ### Asset Base URL The `baseURL` property specifies the location of core engine assets, including WASM files, data files, and JavaScript workers. By default, these load from the IMG.LY CDN. For production deployments, host these assets yourself by copying the `assets` folder from `node_modules/@cesdk/engine/assets` to your server. Content assets like stickers and filters are loaded separately via asset source plugins (imported from `@cesdk/cesdk-js/plugins`), each of which accepts its own `baseURL` option defaulting to `https://cdn.img.ly/assets/v4`. ```typescript highlight=highlight-baseURL // Location of core engine assets (WASM, data files) // Default: IMG.LY CDN. For production, host assets yourself. // baseURL: import.meta.env.VITE_IMGLY_LOCAL_ASSETS_URL, ``` ### Initialization Pass the configuration object to `CreativeEditorSDK.create()` along with a container element selector. ```typescript highlight=highlight-create CreativeEditorSDK.create('#cesdk_container', config) .then(async (cesdk) => { ``` ## Runtime Configuration After initialization, use dedicated APIs to modify settings dynamically. ### Internationalization #### Locale Change the UI language using `cesdk.i18n.setLocale()`. ```typescript highlight=highlight-locale cesdk.i18n.setLocale('en'); const currentLocale = cesdk.i18n.getLocale(); console.log('Current locale:', currentLocale); ``` #### Translations Add or override UI text strings using `cesdk.i18n.setTranslations()`. ```typescript highlight=highlight-translations cesdk.i18n.setTranslations({ en: { 'common.back': 'Go Back', 'common.apply': 'Apply Changes' } }); ``` > **Note:** For complete localization including custom translations and RTL support, see [Localization](https://img.ly/docs/cesdk/angular/user-interface/localization-508e20/). ### Theme Set the UI theme using `cesdk.ui.setTheme()`. Options: `'light'`, `'dark'`, or `'system'`. ```typescript highlight=highlight-theme cesdk.ui.setTheme('light'); const currentTheme = cesdk.ui.getTheme(); console.log('Current theme:', currentTheme); ``` > **Note:** For advanced theming including custom CSS variables and color schemes, see [Theming](https://img.ly/docs/cesdk/angular/user-interface/appearance/theming-4b0938/). ### Actions Register custom actions for user interactions like save and export. ```typescript highlight=highlight-actions cesdk.actions.register('customSave', async () => { const sceneBlob = await engine.scene.saveToArchive(); await cesdk.utils.downloadFile(sceneBlob, 'application/zip'); }); ``` ### Built-in Actions CE.SDK provides built-in actions for common operations like saving, exporting, and importing. Add them to the navigation bar using `insertOrderComponent()`: ```typescript highlight=highlight-builtin-actions // Add built-in export and import actions to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.exportImage.navigationBar', 'ly.img.exportPDF.navigationBar', 'ly.img.exportScene.navigationBar', 'ly.img.exportArchive.navigationBar', 'ly.img.importScene.navigationBar', 'ly.img.importArchive.navigationBar' ] } ); ``` **Available built-in actions:** | Action ID | Purpose | |-----------|---------| | `ly.img.saveScene.navigationBar` | Save scene to cloud | | `ly.img.exportImage.navigationBar` | Export as image (PNG/JPEG) | | `ly.img.exportPDF.navigationBar` | Export as PDF | | `ly.img.exportScene.navigationBar` | Export scene file | | `ly.img.exportArchive.navigationBar` | Export as archive (ZIP) | | `ly.img.importScene.navigationBar` | Import scene file | | `ly.img.importArchive.navigationBar` | Import archive (ZIP) | > **Note:** For detailed navigation bar customization including adding buttons and rearranging elements, see [Navigation Bar](https://img.ly/docs/cesdk/angular/user-interface/customization/navigation-bar-4e5d39/). > **Note:** For a complete guide on registering and managing actions, see [Actions](https://img.ly/docs/cesdk/angular/actions-6ch24x/). ### Scale Adjust UI scale for different device types. Options: `'normal'`, `'large'`, or `'modern'`. ```typescript highlight=highlight-scale cesdk.ui.setScale('modern'); const currentScale = cesdk.ui.getScale(); console.log('Current scale:', currentScale); ``` > **Note:** For advanced scale configuration including responsive callbacks, see [Theming](https://img.ly/docs/cesdk/angular/user-interface/appearance/theming-4b0938/). ### Engine Settings Configure engine behavior using `engine.editor.setSetting()`. ```typescript highlight=highlight-settings engine.editor.setSetting('doubleClickToCropEnabled', true); engine.editor.setSetting('highlightColor', { r: 0, g: 0.5, b: 1, a: 1 }); const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); console.log('Double-click crop enabled:', cropEnabled); ``` > **Note:** For a complete reference of available engine settings, see [Engine Interface](https://img.ly/docs/cesdk/angular/engine-interface-6fb7cf/). ## API Reference | Method | Purpose | |--------|---------| | `CreativeEditorSDK.create()` | Initialize editor | | `cesdk.ui.setTheme()` | Set UI theme | | `cesdk.i18n.setLocale()` | Set UI locale | | `cesdk.i18n.setTranslations()` | Add translations | | `cesdk.ui.setScale()` | Set UI scale | | `cesdk.actions.register()` | Register custom actions | | `cesdk.ui.insertOrderComponent()` | Add built-in actions to navigation bar | | `cesdk.utils.downloadFile()` | Download blob as file | | `engine.editor.setSetting()` | Set engine setting | ## Next Steps - [Headless Mode](https://img.ly/docs/cesdk/angular/concepts/headless-mode/browser-24ab98/) - Use CE.SDK without the UI --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Conversion" description: "Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools." platform: angular url: "https://img.ly/docs/cesdk/angular/conversion-c3fbb3/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/angular/conversion-c3fbb3/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/angular/conversion/overview-44dc58/) - Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools. - [To Base64](https://img.ly/docs/cesdk/angular/conversion/to-base64-39ff25/) - Convert CE.SDK exports to Base64-encoded strings for embedding in URLs, storing in databases, or transmitting via APIs. - [To PNG](https://img.ly/docs/cesdk/angular/conversion/to-png-f1660c/) - Export designs and images to PNG format with compression settings and target dimensions using CE.SDK. - [To PDF](https://img.ly/docs/cesdk/angular/conversion/to-pdf-eb937f/) - Convert your design or document into a high-quality, print-ready PDF format. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools." platform: angular url: "https://img.ly/docs/cesdk/angular/conversion/overview-44dc58/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/angular/conversion-c3fbb3/) > [Overview](https://img.ly/docs/cesdk/angular/conversion/overview-44dc58/) --- ## Supported Input and Output Formats CE.SDK accepts a range of input formats when working with designs, including: When it comes to exporting or converting designs, the SDK supports the following output formats: Each format serves different use cases, giving you the flexibility to adapt designs for your application’s needs. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To Base64" description: "Convert CE.SDK exports to Base64-encoded strings for embedding in URLs, storing in databases, or transmitting via APIs." platform: angular url: "https://img.ly/docs/cesdk/angular/conversion/to-base64-39ff25/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/angular/conversion-c3fbb3/) > [To Base64](https://img.ly/docs/cesdk/angular/conversion/to-base64-39ff25/) --- Convert CE.SDK exports to Base64-encoded strings for embedding in HTML, storing in databases, or transmitting via JSON APIs. ![To Base64](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-base64-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-conversion-to-base64-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-conversion-to-base64-browser/) Base64 encoding transforms binary image data into ASCII text, enabling you to embed images directly in HTML, store them in text-only databases, or transmit them through JSON APIs without binary handling. ```typescript file=@cesdk_web_examples/guides-conversion-to-base64-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage()!; await engine.scene.zoomToBlock(page); cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', onClick: async () => { const currentPage = engine.scene.getCurrentPage()!; const blob = await engine.block.export(currentPage, { mimeType: 'image/png' }); const base64 = await this.blobToBase64(blob); await cesdk.utils.downloadFile(blob, 'image/png'); cesdk.ui.showNotification({ message: `Base64: ${(base64.length / 1024).toFixed(0)} KB`, type: 'success' }); }, key: 'export-base64', label: 'To Base64', icon: '@imgly/Save' } ] } ); cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage()!; const blob = await engine.block.export(currentPage, { mimeType: 'image/png' }); const base64 = await this.blobToBase64(blob); console.log(`Exported PNG as base64 (${base64.length} chars).`); await cesdk.utils.downloadFile(blob, 'image/png'); }); } private blobToBase64(blob: Blob): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result as string); reader.onerror = () => reject(reader.error); reader.readAsDataURL(blob); }); } } export default Example; ``` ## Export a Block to Base64 Use `engine.block.export()` to export a design block as a Blob, then convert it to a Base64 data URI. ```typescript const currentPage = engine.scene.getCurrentPage()!; const blob = await engine.block.export(currentPage, { mimeType: 'image/png' }); const base64 = await blobToBase64(blob); ``` The export returns a Blob containing the rendered image. You then convert this Blob to a Base64 data URI using the browser's `FileReader` API. The resulting string includes the MIME type prefix (`data:image/png;base64,...`), making it ready for immediate use as an image source. ## Convert Blob to Base64 Convert the exported Blob into a Base64 data URI using the browser's `FileReader` API. ```typescript highlight=highlight-convert-base64 private blobToBase64(blob: Blob): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result as string); reader.onerror = () => reject(reader.error); reader.readAsDataURL(blob); }); } ``` The `readAsDataURL()` method returns a complete data URI including the MIME type prefix (`data:image/png;base64,...`). This wrapper converts the callback-based FileReader into a Promise for cleaner async/await usage. ## Customize the Built-in Export Action Override the default `exportDesign` action to integrate Base64 conversion into CE.SDK's built-in export flow. ```typescript highlight=highlight-custom-action cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage()!; const blob = await engine.block.export(currentPage, { mimeType: 'image/png' }); const base64 = await this.blobToBase64(blob); console.log(`Exported PNG as base64 (${base64.length} chars).`); await cesdk.utils.downloadFile(blob, 'image/png'); }); ``` When registered, this action replaces the default export behavior. Any UI component or keyboard shortcut that triggers `exportDesign` will use your custom handler instead. ## Download the Export Use `cesdk.utils.downloadFile()` to save the exported Blob to the user's device. The method accepts a Blob and MIME type, triggering a browser download with the appropriate file extension. ## When to Use Base64 Base64 encoding works well for: - Embedding images directly in HTML or CSS without additional HTTP requests - Storing images in text-only databases like Redis or localStorage - Transmitting images through JSON APIs that don't support binary data - Generating data URIs for email templates > **Note:** Base64 increases file size by approximately 33%. For images larger than 100KB, consider binary storage or direct URL references instead. ## Troubleshooting **Base64 string too long** — Use JPEG or WebP formats with lower quality settings. Reduce dimensions with `targetWidth` and `targetHeight` export options. **Image not displaying** — Verify the data URI includes the correct MIME type prefix. Check that the string wasn't truncated during storage or transmission. **Performance issues** — FileReader operations are asynchronous but encoding large images can still block the UI. Consider Web Workers for images over 1MB. ## API Reference | Method | Description | |--------|-------------| | `engine.block.export(block, options)` | Export a block to a Blob with format options (`mimeType`, `jpegQuality`, `webpQuality`, `targetWidth`, `targetHeight`) | | `engine.scene.getCurrentPage()` | Get the currently active page block | | `FileReader.readAsDataURL(blob)` | Convert Blob to Base64 data URI (Browser API) | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a Blob as a file | | `cesdk.actions.register(name, handler)` | Register or override an action | | `cesdk.ui.showNotification(options)` | Display a notification to the user | ## Next Steps - [Export Options](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) — Explore all available export formats and configuration - [Export to PDF](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) — Generate PDFs for print and document workflows - [Partial Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/) — Export specific regions or individual elements - [Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) — Handle large exports and memory constraints --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To PDF" description: "Convert your design or document into a high-quality, print-ready PDF format." platform: angular url: "https://img.ly/docs/cesdk/angular/conversion/to-pdf-eb937f/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/angular/conversion-c3fbb3/) > [To PDF](https://img.ly/docs/cesdk/angular/conversion/to-pdf-eb937f/) --- 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. ![To PDF](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-pdf-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-conversion-to-pdf-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-conversion-to-pdf-browser/) 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. ```typescript file=@cesdk_web_examples/guides-conversion-to-pdf-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: To PDF Guide * * This example demonstrates: * - Exporting designs as PDF documents * - Configuring PDF output settings (DPI, compatibility, underlayer) * - Adding a custom PDF export button to the navigation bar */ 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'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load a template scene await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage()!; await engine.scene.zoomToBlock(page); // Add PDF export buttons to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-pdf', label: 'PDF', icon: '@imgly/Download', onClick: async () => { // Export scene as PDF (includes all pages) const scene = engine.scene.get()!; const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF exported successfully', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-high-compat', label: 'High Compat', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'High compatibility PDF exported', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-underlayer', label: 'Underlayer', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF with underlayer exported', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-dpi', label: 'Custom DPI', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Adjust the scene DPI for print-ready output // Higher DPI = better quality but larger file size engine.block.setFloat(scene, 'scene/dpi', 150); const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF exported at 150 DPI', type: 'success' }); } } ] } ); } } export default Example; ``` This guide covers exporting designs as PDF documents, configuring output settings like DPI and compatibility, adding underlayers for specialty printing, and integrating PDF export into the user interface. ## 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 The example below loads an image, applies transformations, and exports it as a PDF. ```ts // Prepare an image URL const imageURL = 'https://img.ly/static/ubq_samples/sample_4.jpg'; // Create a new scene by loading the image immediately await cesdk.createFromImage(imageURL); // Find the automatically added graphic block with an image fill const block = engine.block.findByType('graphic')[0]; // Apply crop with a scale ratio of 2.0 engine.block.setCropScaleRatio(block, 2.0); // Export as PDF Blob const 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 The example below demonstrates how to merge multiple images into a single PDF document. ```ts // Prepare image URLs const images = [ 'https://img.ly/static/ubq_samples/sample_1.jpg', 'https://img.ly/static/ubq_samples/sample_2.jpg', 'https://img.ly/static/ubq_samples/sample_3.jpg', ]; // Create an empty scene with a 'VerticalStack' layout const scene = engine.scene.create('VerticalStack'); const [stack] = engine.block.findByType('stack'); // Load all images as pages for (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 blob const blob = await engine.block.export(scene, { mimeType: 'application/pdf' }); // You can now save it or display it in your application ``` ## Export a Page as PDF Use `engine.block.export()` to export a design block as a PDF. The method accepts a block ID and export options including the MIME type. ```typescript highlight=highlight-export-pdf // Export scene as PDF (includes all pages) const scene = engine.scene.get()!; const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); ``` Export returns a Blob containing the PDF data. You can export a single page for a single-page PDF, or export the entire scene to include all pages in a multi-page PDF document. ## Download the PDF Use `cesdk.utils.downloadFile()` to save the exported PDF to the user's device. ```typescript highlight=highlight-download // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); ``` The utility handles creating a download link and triggering the browser's save dialog with the appropriate file extension. ## 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](https://img.ly/docs/cesdk/angular/insert-media/images-63848a/) and perform any edits or adjustments. ### Add a PDF Export Button Integrate PDF export into the CE.SDK interface by adding a custom button to the navigation bar. ```typescript highlight=highlight-export-button // Add PDF export buttons to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-pdf', label: 'PDF', icon: '@imgly/Download', onClick: async () => { // Export scene as PDF (includes all pages) const scene = engine.scene.get()!; const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF exported successfully', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-high-compat', label: 'High Compat', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'High compatibility PDF exported', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-underlayer', label: 'Underlayer', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF with underlayer exported', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-dpi', label: 'Custom DPI', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Adjust the scene DPI for print-ready output // Higher DPI = better quality but larger file size engine.block.setFloat(scene, 'scene/dpi', 150); const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF exported at 150 DPI', type: 'success' }); } } ] } ); ``` The button triggers the export workflow when clicked, providing users with a convenient way to download their designs as PDF documents. ### Alternative: Register a Custom Component You can also use `ui.registerComponent` to create a more customized button with full control over styling and behavior. ```ts // Register a custom button component cesdk.ui.registerComponent( 'convert.nav', ({ builder: { Button }, engine }) => { Button('convert-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 bar cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.navigation.bar' }), 'convert.nav', ]); ``` For more details on customizing the UI, see the [User Interface Configuration Guide](https://img.ly/docs/cesdk/angular/user-interface/customization-72b2f8/). ## Configure PDF Output Settings The SDK provides various options for customizing PDF exports. You can control resolution, compatibility, and underlayer 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. ### Adjust DPI for Print Quality Control the output resolution by setting the scene's DPI property before export. ```typescript highlight=highlight-dpi // Adjust the scene DPI for print-ready output // Higher DPI = better quality but larger file size engine.block.setFloat(scene, 'scene/dpi', 150); ``` Higher DPI values produce better quality output but result in larger file sizes. The default is 300 DPI, which is suitable for most print applications. ### Enable High Compatibility Mode Enable high compatibility mode for consistent rendering across different PDF viewers. ```typescript highlight=highlight-high-compatibility // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); ``` When enabled, complex elements like gradients with transparency are rasterized at the scene's DPI setting instead of being embedded as native PDF objects. This ensures consistent appearance in viewers like Safari and macOS Preview but increases file size. ### 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 ```typescript const scene = engine.scene.get()!; // For maximum performance (test with your print workflow first) engine.block.setFloat(scene, 'scene/dpi', 150); // Reduce from default 300 const 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 ### Add an Underlayer for Specialty Printing Add an underlayer for printing on non-white or transparent media like fabric or glass. ```typescript highlight=highlight-spot-color // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); ``` First define the spot color that will be used for the underlayer. The RGB values provide a preview representation in the editor. ```typescript highlight=highlight-underlayer // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); ``` The underlayer creates a solid background behind your design content. The negative offset shrinks the underlayer slightly to prevent visible edges around the printed output. ### Customizing PDF Output You can configure all PDF settings together when exporting. ```ts const scene = engine.scene.get()!; // Adjust the DPI to 72 engine.block.setFloat(scene, 'scene/dpi', 72); // Set spot color to be used as underlayer engine.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, }); ``` ## Troubleshooting **PDF file size too large** — Reduce the scene DPI or disable high compatibility mode. Use JPEG compression for embedded images where quality loss is acceptable. **Gradients look different in some viewers** — Enable `exportPdfWithHighCompatibility` to rasterize gradients at the scene's DPI setting for consistent appearance across all PDF viewers. **Underlayer not visible in print** — Verify the spot color name matches your print vendor's configuration exactly. Check that the PDF wasn't flattened during post-processing. ## API Reference | Method | Description | |--------|-------------| | `engine.block.export(block, options)` | Export a block to a Blob with format options (`mimeType`, `exportPdfWithHighCompatibility`, `exportPdfWithUnderlayer`, `underlayerSpotColorName`, `underlayerOffset`, `targetWidth`, `targetHeight`) | | `engine.block.setFloat(block, property, value)` | Set a float property on a block (use `scene/dpi` to control PDF resolution) | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color for underlayer printing | | `engine.scene.get()` | Get the current scene block ID | | `engine.scene.getCurrentPage()` | Get the currently active page block | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a Blob as a file | ## Next Steps - [Export Options](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) — Explore all available export formats and configuration - [Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) — Handle large exports and memory constraints - [Export for Printing](https://img.ly/docs/cesdk/angular/export-save-publish/for-printing-bca896/) — Learn more about print-specific export settings --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To PNG" description: "Export designs and images to PNG format with compression settings and target dimensions using CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/conversion/to-png-f1660c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/angular/conversion-c3fbb3/) > [To PNG](https://img.ly/docs/cesdk/angular/conversion/to-png-f1660c/) --- Export designs to PNG format with lossless quality and optional transparency support. ![Export to PNG example showing CE.SDK with PNG export buttons](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-png-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-conversion-to-png-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-conversion-to-png-browser/) PNG is a lossless image format that preserves image quality and supports transparency. It's ideal for designs requiring pixel-perfect fidelity, logos, graphics with transparent backgrounds, and any content where quality cannot be compromised. ```typescript file=@cesdk_web_examples/guides-conversion-to-png-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Export programmatically using the engine API const exportProgrammatically = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png' }); await cesdk.utils.downloadFile(blob, 'image/png'); }; // Export with compression level (0-9) // Higher values produce smaller files but take longer const exportWithCompression = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); await cesdk.utils.downloadFile(blob, 'image/png'); }; // Export with target dimensions // The block scales to fill the target while maintaining aspect ratio const exportWithDimensions = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(blob, 'image/png'); }; // Trigger the built-in export action const triggerExportAction = async () => { await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); }; // Override the default export action to customize behavior cesdk.actions.register('exportDesign', async (options) => { // Use the utils API to export with a loading dialog const { blobs, options: exportOptions } = await cesdk.utils.export( options ); // Custom logic: log the export details console.log( `Exported ${blobs.length} file(s) as ${exportOptions.mimeType}` ); // Download the exported file await cesdk.utils.downloadFile(blobs[0], exportOptions.mimeType); }); // Add export dropdown to navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-png', label: 'Export PNG', icon: '@imgly/Save', onClick: exportProgrammatically }, { id: 'ly.img.action.navigationBar', key: 'export-png-action', label: 'Export PNG (action)', icon: '@imgly/Save', onClick: triggerExportAction }, { id: 'ly.img.action.navigationBar', key: 'export-png-compressed', label: 'Export PNG (compressed)', icon: '@imgly/Save', onClick: exportWithCompression }, { id: 'ly.img.action.navigationBar', key: 'export-png-hd', label: 'Export PNG (HD)', icon: '@imgly/Save', onClick: exportWithDimensions } ] } ); } } export default Example; ``` This guide covers how to export designs to PNG, configure export options, and integrate with the built-in export action. ## Export to PNG Use `engine.block.export()` to export a design block to PNG. The method returns a Blob containing the image data. ```typescript highlight=highlight-export-programmatic // Export programmatically using the engine API const exportProgrammatically = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png' }); await cesdk.utils.downloadFile(blob, 'image/png'); }; ``` ## Compression Level Control the file size versus export speed tradeoff using `pngCompressionLevel`. Valid values are 0-9, where higher values produce smaller files but take longer to export. Since PNG is lossless, image quality remains unchanged. ```typescript highlight=highlight-options-compression // Export with compression level (0-9) // Higher values produce smaller files but take longer const exportWithCompression = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); await cesdk.utils.downloadFile(blob, 'image/png'); }; ``` The default compression level is 5, providing a good balance between file size and export speed. ## Target Dimensions Resize the output by setting `targetWidth` and `targetHeight`. The block scales to fill the target dimensions while maintaining its aspect ratio. ```typescript highlight=highlight-options-dimensions // Export with target dimensions // The block scales to fill the target while maintaining aspect ratio const exportWithDimensions = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(blob, 'image/png'); }; ``` ## Trigger the Export Action The built-in `exportDesign` action triggers the default export workflow with a loading dialog and automatically downloads the file. ```typescript highlight=highlight-export-action // Trigger the built-in export action const triggerExportAction = async () => { await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); }; ``` ## Override the Export Action Register a custom handler for the `exportDesign` action to customize behavior. This allows you to add custom logic such as uploading to a server or processing the exported file. ```typescript highlight=highlight-override-action // Override the default export action to customize behavior cesdk.actions.register('exportDesign', async (options) => { // Use the utils API to export with a loading dialog const { blobs, options: exportOptions } = await cesdk.utils.export( options ); // Custom logic: log the export details console.log( `Exported ${blobs.length} file(s) as ${exportOptions.mimeType}` ); // Download the exported file await cesdk.utils.downloadFile(blobs[0], exportOptions.mimeType); }); ``` The `cesdk.utils.export()` method handles the export with a loading dialog, while `cesdk.utils.downloadFile()` triggers the browser download. ## API Reference | API | Description | | --- | --- | | `engine.block.export(block, options)` | Exports a block to a Blob with the specified options | | `cesdk.actions.run('exportDesign', options)` | Triggers the default export workflow | | `cesdk.actions.register('exportDesign', handler)` | Overrides the default export action | | `cesdk.utils.export(options)` | Exports with a loading dialog, returns `{ blobs, options }` | | `cesdk.utils.downloadFile(blob, mimeType)` | Downloads a Blob as a file | ## Next Steps - [Conversion Overview](https://img.ly/docs/cesdk/angular/conversion/overview-44dc58/) - Learn about other export formats - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Understand the full export workflow - [To PDF](https://img.ly/docs/cesdk/angular/conversion/to-pdf-eb937f/) - Export designs to PDF format --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Audio" description: "Create audio in videos" platform: angular url: "https://img.ly/docs/cesdk/angular/create-audio/audio-2f700b/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/angular/create-audio/audio-2f700b/) --- The **CreativeEditor (CE.SDK)** provides different **audio features** you can leverage in web-based apps. This section covers how to **add audio blocks**, **extract** audio from videos, control **playback**, generate **waveforms**, and manage **multi-track audio**. ## Use Cases Use the CE.SDK audio features when you need to create: - Background music - Voice-overs - Sound effects - Podcasts ## How Audio Works in the CE.SDK The CE.SDK represents audio as audio blocks. Each block has: - Source (file or extracted track) - Playback properties (time, speed, volume, mute) - Time-based properties (offset, duration, trim length) - Optional waveform thumbnails for UI visualization ### What Are the Time-Based Properties Each audio block has properties that determine when and how much of the sound plays: - **Offset:** the delay before an audio block begins playing inside the scene. - **Trim length**: cuts the audio to keep only a specific part of it. - **Duration**: defines how long the audio plays. ### What Are Waveforms Waveforms are **visual representations** of the audio signal over time. They show the amplitude (volume level) of the sound at each moment, using peaks and valleys. The CE.SDK can generate sampled waveform data that you can render in your UI. This is especially helpful for editing tools. ### When to Create VS. Extract Audio The CE.SDK allows you to either create a blank audio block or extract the audio from a video. - **Create an empty audio block** when you want to add external or standalone audio that doesn’t come from a video. - **Extract the audio** when it comes from a video block already in your scene. ## CE.SDK Audio Features Overview The table below summarizes the main audio-related capabilities in CE.SDK.\ Each feature is related to an example further down the page. | **Category** | **Action** | **API Name** | **Notes** | |--------------------------|-----------------------------|---------------------------------------|-----------| | **Create Audio Blocks** | Create empty audio block | `create` | Creates an audio block with no source. | | | Extract audio from video | `createAudioFromVideo` | Requires a video block ID and track index. | | **Playback Control** | Set playback position | `setPlaybackTime` | Time in seconds. | | | Volume | `setVolume` | Range `0.0–1.0`. | | | Mute | `setMuted` | Boolean. | | | Playback speed | `setPlaybackSpeed` | Range `0.25–3.0`. | | **Time Management** | Offset | `setTimeOffset` | To move the playback starting point in the scene. | | | Duration | `setDuration` | Total length (seconds). | | | Trim length | `setTrimLength` | Cuts content to a defined length. | | **Replace Audio Source** | Reload edited scene | `scene.loadFromString` | Used when replacing audio at runtime. | | **Waveforms** | Generate thumbnails | `generateAudioThumbnailSequence` | Produces waveform sample data for UI. | | **Export Audio** | Export WAV | `exportAudio` | MIME type: `audio/wav`. | | | Export MP4 | `exportAudio` | MIME type: `audio/mp4`. | ## Examples Find in the following list of examples different API calls listed in the preceding table. ### Create Audio To create an empty audio block, use: ```ts const blockId = engine.block.create('audio'); ``` Use `engine.block.createAudioFromVideo(blockId, trackIndex: number);`. This example: 1. Extracts the first audio track (1) from a video. 2. Appends it to the page for further manipulation. > **Note:** `videoBlockId` and `pageId` must refer to existing blocks. ```ts const audioBlockId = engine.block.createAudioFromVideo(videoBlockId, 0); // Attach to the page so it’s part of the scene engine.block.appendChild(pageId, audioBlockId); ``` This example: 1. Creates an audio block. 2. Attaches the audio block to the page. 3. Sets the source for the audio from a remote URL. > **Note:** `pageId` must refer to an existing page. ```ts // Create an audio block const audioBlockId = engine.block.create('audio'); await engine.block.appendChild(pageId, audioBlockId); engine.block.setString( audioBlockId, 'audio/fileURI', 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a' ); ``` For details on loading sources, check [the dedicated guide](https://img.ly/docs/cesdk/angular/import-media/from-remote-source/unsplash-8f31f0/). This example exports the audio block in **mp4** format: > **Note:** `blockId` must refer to an existing audio block. ```ts engine.block.exportAudio(blockId, { mymeType: 'audio/mp4' } ); ``` This example exports the audio in **wav** format: ```ts const audioData = await engine.block.exportAudio(blockId, { mimeType: 'audio/wav' } ); ``` ### Control Audio Playback Use `engine.block.setPlaybackTime(blockId, time: number)`. This example sets the current playback at 3 seconds: ```ts engine.block.setPlaybackTime(blockId, 3) ``` Use `engine.block.setVolume(blockId, volume: number);`. This example sets the volume at 1 (max value): ```ts engine.block.setVolume(blockId, 1); ``` Use `engine.block.setMuted(blockId, muted: boolean);`. This example mutes the audio of the block: ```ts engine.block.setMuted(blockId, true); ``` Use `engine.block.setPlaybackSpeed(blockId, speed: number);`. This example multiplies the speed by 0.25: ```ts engine.block.setPlaybackSpeed(blockId, 0.25); ``` ### Manage Audio Timing If the audio has an offset of: - 0 s → It plays immediately when the scene starts. - 2 s → The CE.SDK waits 2 seconds before playing it. - 10 s → The audio only starts at the 10-second mark. Use `engine.block.setTimeOffset(blockId, offset: number)`. This example starts the audio at 2 s in the composition: ```ts engine.block.setTimeOffset(blockId, 2); ``` Use `engine.block.setDuration(blockId, duration: number)`. This example sets the audio duration for 300 seconds: ```ts engine.block.setDuration(blockId, 300) ``` Use `engine.block.setTrimLength(blockId, length: number);`. This example creates a new trim that: 1. Starts at the second 2 of the audio content. 2. Plays for 10 seconds. ```ts engine.block.setTrimOffset(blockId, 2) engine.block.setTrimLength(blockId, 10); ``` Use: ```ts engine.block.generateAudioThumbnailSequence( blockId, samplesPerChunk: number, timeBegin: number, timeEnd: number, numberOfSamples: number, numberOfChannels: number) ``` This example generates 1 audio sample that: - Produces 3 chunks of this sample. - Start at second 8. - End at second 18. - Is stereo audio (1 for mono, 2 for stereo) > **Note:** `audioBlockId` must refer to an existing block. ```ts const audioThumbnail = engine.block.generateAudioThumbnailSequence( audioBlockId, 3, // samplesPerChunk 8, // timeBegin 18, // timeEnd 1, // numberOfSamples 2, // numberOfChannels // Return the result (chunkIndex, result) => { if (result instanceof Error) { console.error('Thumbnail chunk failed', result); audioThumbnail(); return; } console.log(`Chunk ${chunkIndex}`, result); } ); ``` Once generated, integrate the waveform into your UI. ## Next Steps For each feature’s detailed instructions and options: - Explore the [CE.SDK API options](https://img.ly/docs/cesdk/angular/api-reference/overview-8f24e1/). - Check the dedicated guides in the audio section. --- ## Related Pages - [Add Sound Effects](https://img.ly/docs/cesdk/angular/create-audio/audio/add-sound-effects-9e984e/) - Learn how to use buffers with arbitrary data to generate sound effects programmatically - [Add Music](https://img.ly/docs/cesdk/angular/create-audio/audio/add-music-5b182c/) - Add background music and audio tracks to video projects using CE.SDK's audio block system. - [Adjust Audio Volume](https://img.ly/docs/cesdk/angular/create-video/audio/adjust-volume-7ecc4a/) - Learn how to adjust audio volume in CE.SDK to control playback levels, mute audio, and balance multiple audio sources in video projects. - [Adjust Audio Playback Speed](https://img.ly/docs/cesdk/angular/create-video/audio/adjust-speed-908d57/) - Learn how to adjust audio playback speed in CE.SDK to create slow-motion, time-stretched, and fast-forward audio effects. - [Loop Audio](https://img.ly/docs/cesdk/angular/create-audio/audio/loop-937be7/) - Create seamless repeating audio playback for background music and sound effects using CE.SDK's audio looping system. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Music" description: "Add background music and audio tracks to video projects using CE.SDK's audio block system." platform: angular url: "https://img.ly/docs/cesdk/angular/create-audio/audio/add-music-5b182c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/angular/create-audio/audio-2f700b/) > [Add Music](https://img.ly/docs/cesdk/angular/create-audio/audio/add-music-5b182c/) --- Add background music and audio tracks to video projects using CE.SDK's audio block system for rich multimedia experiences. ![Add Music example showing audio tracks in the timeline](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-add-music-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-audio-add-music-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-add-music-browser/) Audio blocks are standalone time-based blocks that play alongside video content, independent of video fills. You can add music from the built-in asset library or from custom URLs, position tracks in the composition, configure volume levels, and layer multiple audio tracks for complex soundscapes. ```typescript file=@cesdk_web_examples/guides-create-audio-add-music-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add Music Guide * * Demonstrates adding background music to video projects: * - Creating audio blocks programmatically * - Setting audio source URIs * - Configuring timeline position and duration * - Adjusting audio volume * - Querying audio assets from the library * - Managing audio 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'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found in scene'); } // Set page duration for timeline engine.block.setDuration(page, 30); // Enable audio and timeline features for the UI cesdk.feature.enable('ly.img.video.timeline'); cesdk.feature.enable('ly.img.video.timeline.audio'); cesdk.feature.enable('ly.img.video.timeline.controls.playback'); // Create an audio block for background music const audioBlock = engine.block.create('audio'); // Set the audio source file const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'; engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Append audio to the page (makes it part of the timeline) engine.block.appendChild(page, audioBlock); // Wait for audio to load to get duration await engine.block.forceLoadAVResource(audioBlock); // Get the total duration of the audio file const totalDuration = engine.block.getAVResourceTotalDuration(audioBlock); console.log('Audio total duration:', totalDuration, 'seconds'); // Set when the audio starts on the timeline (0 = beginning) engine.block.setTimeOffset(audioBlock, 0); // Set how long the audio plays (use full duration or page duration) const playbackDuration = Math.min(totalDuration, 30); engine.block.setDuration(audioBlock, playbackDuration); // Set the audio volume (0.0 = mute, 1.0 = full volume) engine.block.setVolume(audioBlock, 0.8); // Get current volume const currentVolume = engine.block.getVolume(audioBlock); console.log('Audio volume:', currentVolume); // Query available audio tracks from the asset library const audioAssets = await engine.asset.findAssets('ly.img.audio', { page: 0, perPage: 10 }); console.log('Available audio assets:', audioAssets.assets.length); // Log metadata for each audio asset audioAssets.assets.forEach((asset) => { console.log('Audio asset:', { id: asset.id, label: asset.label, duration: asset.meta?.duration, uri: asset.meta?.uri }); }); // Find all audio blocks in the scene const allAudioBlocks = engine.block.findByType('audio'); console.log('Total audio blocks:', allAudioBlocks.length); // Get information about each audio block allAudioBlocks.forEach((block, index) => { const uri = engine.block.getString(block, 'audio/fileURI'); const timeOffset = engine.block.getTimeOffset(block); const duration = engine.block.getDuration(block); const volume = engine.block.getVolume(block); console.log(`Audio block ${index + 1}:`, { uri: uri.split('/').pop(), // Just filename timeOffset: `${timeOffset}s`, duration: `${duration}s`, volume: `${(volume * 100).toFixed(0)}%` }); }); // Example: Remove the second audio block if it exists if (allAudioBlocks.length > 1) { const blockToRemove = allAudioBlocks[1]; // Destroy the block to remove it and free resources engine.block.destroy(blockToRemove); console.log('Removed second audio block'); } console.log( 'Add Music guide initialized. Open the timeline to see audio tracks.' ); } } export default Example; ``` This guide covers how to add music using the built-in audio UI and how to create and configure audio blocks programmatically using the Block API. ## Using the Built-in Audio UI ### Enable Audio Features Audio blocks require timeline support. Enable the audio and timeline features to give users access to audio capabilities through the UI. ```typescript highlight-enable-audio-features // Enable audio and timeline features for the UI cesdk.feature.enable('ly.img.video.timeline'); cesdk.feature.enable('ly.img.video.timeline.audio'); cesdk.feature.enable('ly.img.video.timeline.controls.playback'); ``` These features control: - `ly.img.video.timeline` - Shows the timeline for positioning audio tracks - `ly.img.video.timeline.audio` - Enables the audio library in the dock - `ly.img.video.timeline.controls.playback` - Adds playback controls for previewing audio ### User Workflow With audio features enabled, users can add music through the interface: 1. **Open the dock** - Access the asset library panel 2. **Select audio category** - Browse available music tracks 3. **Preview tracks** - Listen to audio before adding 4. **Drag to timeline** - Add audio to the project 5. **Position on timeline** - Adjust when audio starts and ends 6. **Adjust volume** - Use the inspector to set volume levels ## Programmatic Audio Creation ### Create Audio Block We create audio blocks using `engine.block.create('audio')` and set the source file using the `audio/fileURI` property. The audio block must be appended to a page to become part of the composition. ```typescript highlight-create-audio-block // Create an audio block for background music const audioBlock = engine.block.create('audio'); // Set the audio source file const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'; engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Append audio to the page (makes it part of the timeline) engine.block.appendChild(page, audioBlock); ``` Audio blocks support common formats including M4A, MP3, and WAV. The source URI can point to any accessible URL or local file. ### Configure Time Position Audio blocks have time-based properties that control when and how long they play. We use `setTimeOffset()` to set the start time and `setDuration()` to control playback length. ```typescript highlight-configure-timeline // Wait for audio to load to get duration await engine.block.forceLoadAVResource(audioBlock); // Get the total duration of the audio file const totalDuration = engine.block.getAVResourceTotalDuration(audioBlock); console.log('Audio total duration:', totalDuration, 'seconds'); // Set when the audio starts on the timeline (0 = beginning) engine.block.setTimeOffset(audioBlock, 0); // Set how long the audio plays (use full duration or page duration) const playbackDuration = Math.min(totalDuration, 30); engine.block.setDuration(audioBlock, playbackDuration); ``` The `forceLoadAVResource()` method ensures the audio file is loaded before we access its duration. This is important when you need to know the total length of the audio file for timing calculations. ### Configure Volume Volume is set using `setVolume()` with values from 0.0 (mute) to 1.0 (full volume). This volume level is applied during export and affects the final rendered output. ```typescript highlight-configure-volume // Set the audio volume (0.0 = mute, 1.0 = full volume) engine.block.setVolume(audioBlock, 0.8); // Get current volume const currentVolume = engine.block.getVolume(audioBlock); console.log('Audio volume:', currentVolume); ``` ## Working with Audio Assets ### Query Audio Library CE.SDK provides a demo audio library that you can query using the Asset API. This allows you to build custom audio selection interfaces or programmatically add tracks based on metadata. ```typescript highlight-query-audio-assets // Query available audio tracks from the asset library const audioAssets = await engine.asset.findAssets('ly.img.audio', { page: 0, perPage: 10 }); console.log('Available audio assets:', audioAssets.assets.length); // Log metadata for each audio asset audioAssets.assets.forEach((asset) => { console.log('Audio asset:', { id: asset.id, label: asset.label, duration: asset.meta?.duration, uri: asset.meta?.uri }); }); ``` Each asset includes metadata such as duration, file URI, and thumbnail URL, which you can use to display track information or make programmatic selections. ## Managing Audio Blocks ### List Audio Blocks Use `findByType('audio')` to retrieve all audio blocks in the scene. This is useful for building audio management interfaces or batch operations. ```typescript highlight-list-audio-blocks // Find all audio blocks in the scene const allAudioBlocks = engine.block.findByType('audio'); console.log('Total audio blocks:', allAudioBlocks.length); // Get information about each audio block allAudioBlocks.forEach((block, index) => { const uri = engine.block.getString(block, 'audio/fileURI'); const timeOffset = engine.block.getTimeOffset(block); const duration = engine.block.getDuration(block); const volume = engine.block.getVolume(block); console.log(`Audio block ${index + 1}:`, { uri: uri.split('/').pop(), // Just filename timeOffset: `${timeOffset}s`, duration: `${duration}s`, volume: `${(volume * 100).toFixed(0)}%` }); }); ``` ### Remove Audio To remove an audio block, call `destroy()` which removes it from the scene and frees its resources. ```typescript highlight-remove-audio // Example: Remove the second audio block if it exists if (allAudioBlocks.length > 1) { const blockToRemove = allAudioBlocks[1]; // Destroy the block to remove it and free resources engine.block.destroy(blockToRemove); console.log('Removed second audio block'); } ``` Always destroy blocks that are no longer needed to prevent memory leaks, especially when working with multiple audio files. ## API Reference | Method | Description | | -------------------------------------------------- | ----------------------------------- | | `feature.enable('ly.img.video.timeline')` | Show timeline for audio positioning | | `feature.enable('ly.img.video.timeline.audio')` | Enable audio library in dock | | `feature.enable('ly.img.video.timeline.controls.playback')` | Add playback controls | | `block.create('audio')` | Create a new audio block | | `block.setString(id, 'audio/fileURI', uri)` | Set the audio source file | | `block.setTimeOffset(id, seconds)` | Set when audio starts playing | | `block.setDuration(id, seconds)` | Set audio playback duration | | `block.setVolume(id, volume)` | Set volume (0.0 to 1.0) | | `block.getVolume(id)` | Get current volume level | | `block.getAVResourceTotalDuration(id)` | Get total audio file duration | | `block.forceLoadAVResource(id)` | Force load audio resource | | `block.findByType('audio')` | Find all audio blocks in scene | | `asset.findAssets(sourceId, query)` | Query audio assets | ## 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 | 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., Crop, Cover, Contain)., 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, in seconds. | | `playback/volume` | `Float` | `1` | Audio volume with a range of \[0, 1]. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Sound Effects" description: "Learn how to use buffers with arbitrary data to generate sound effects programmatically" platform: angular url: "https://img.ly/docs/cesdk/angular/create-audio/audio/add-sound-effects-9e984e/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/angular/create-audio/audio-2f700b/) > [Add Sound Effects](https://img.ly/docs/cesdk/angular/create-audio/audio/add-sound-effects-9e984e/) --- Generate sound effects programmatically using buffers with arbitrary audio data. Create notification chimes, alert tones, and melodies without external files. ![Sound Effects Demo showing programmatically generated audio on the timeline](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-add-sound-effects-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-audio-add-sound-effects-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-add-sound-effects-browser/) CE.SDK lets you create audio from code using buffers. This approach generates sound effects dynamically without external files—useful for notification tones, procedural audio, or any scenario where you need to synthesize audio at runtime. ```typescript file=@cesdk_web_examples/guides-create-audio-add-sound-effects-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * Creates a WAV file buffer from audio parameters and a sample generator function. * * @param sampleRate - Sample rate in Hz (e.g., 48000) * @param durationSeconds - Duration of the audio in seconds * @param generator - Function that generates sample values (-1.0 to 1.0) for each time point * @returns Uint8Array containing a stereo WAV file */ function createWavBuffer( sampleRate: number, durationSeconds: number, /* eslint-disable-next-line no-unused-vars -- Parameter name documents callback signature */ generator: (time: number) => number ): Uint8Array { const bitsPerSample = 16; const channels = 2; // Stereo output const numSamples = Math.floor(durationSeconds * sampleRate); const dataSize = numSamples * channels * (bitsPerSample / 8); // Create WAV file buffer (44-byte header + audio data) const wavBuffer = new ArrayBuffer(44 + dataSize); const view = new DataView(wavBuffer); // RIFF chunk descriptor view.setUint32(0, 0x52494646, false); // "RIFF" view.setUint32(4, 36 + dataSize, true); // File size - 8 view.setUint32(8, 0x57415645, false); // "WAVE" // fmt sub-chunk view.setUint32(12, 0x666d7420, false); // "fmt " view.setUint32(16, 16, true); // Sub-chunk size (16 for PCM) view.setUint16(20, 1, true); // Audio format (1 = PCM) view.setUint16(22, channels, true); // Number of channels view.setUint32(24, sampleRate, true); // Sample rate view.setUint32(28, sampleRate * channels * (bitsPerSample / 8), true); view.setUint16(32, channels * (bitsPerSample / 8), true); // Block align view.setUint16(34, bitsPerSample, true); // Bits per sample // data sub-chunk view.setUint32(36, 0x64617461, false); // "data" view.setUint32(40, dataSize, true); // Data size // Generate audio samples let offset = 44; for (let i = 0; i < numSamples; i++) { const time = i / sampleRate; // Generate mono sample and duplicate to both channels const value = generator(time); const sample = Math.max(-32768, Math.min(32767, Math.round(value * 32767))); view.setInt16(offset, sample, true); // Left channel view.setInt16(offset + 2, sample, true); // Right channel offset += 4; } return new Uint8Array(wavBuffer); } /** * Calculates an ADSR (Attack-Decay-Sustain-Release) envelope value for a note. * The envelope shapes the volume over time, creating natural-sounding tones. * * @param time - Current time in seconds * @param noteStart - When the note starts (seconds) * @param noteDuration - Total note duration including release (seconds) * @param attack - Time to reach peak volume (seconds) * @param decay - Time to fall from peak to sustain level (seconds) * @param sustain - Held volume level (0.0 to 1.0) * @param release - Time to fade to silence (seconds) * @returns Envelope amplitude (0.0 to 1.0) */ function adsr( time: number, noteStart: number, noteDuration: number, attack: number, decay: number, sustain: number, release: number ): number { const t = time - noteStart; if (t < 0) return 0; const noteEnd = noteDuration - release; if (t < attack) { // Attack phase: ramp up from 0 to 1 return t / attack; } else if (t < attack + decay) { // Decay phase: ramp down from 1 to sustain level return 1 - ((t - attack) / decay) * (1 - sustain); } else if (t < noteEnd) { // Sustain phase: hold at sustain level return sustain; } else if (t < noteDuration) { // Release phase: ramp down from sustain to 0 return sustain * (1 - (t - noteEnd) / release); } return 0; } // Musical note frequencies (Hz) for the 4th and 5th octaves const NOTE_FREQUENCIES = { C4: 261.63, D4: 293.66, E4: 329.63, F4: 349.23, G4: 392.0, A4: 440.0, B4: 493.88, C5: 523.25, D5: 587.33, E5: 659.25, F5: 698.46, G5: 783.99, A5: 880.0, B5: 987.77, C6: 1046.5 }; // Sound effect 1: Ascending "success" fanfare (2 seconds) // Creates a triumphant feeling with overlapping notes building to a chord const SUCCESS_CHIME = { notes: [ // Quick ascending arpeggio { freq: NOTE_FREQUENCIES.C4, start: 0.0, duration: 0.3 }, { freq: NOTE_FREQUENCIES.E4, start: 0.1, duration: 0.4 }, { freq: NOTE_FREQUENCIES.G4, start: 0.2, duration: 0.5 }, // Sustained major chord { freq: NOTE_FREQUENCIES.C5, start: 0.35, duration: 1.65 }, { freq: NOTE_FREQUENCIES.E5, start: 0.4, duration: 1.6 }, { freq: NOTE_FREQUENCIES.G5, start: 0.45, duration: 1.55 } ], totalDuration: 2.0 }; // Sound effect 2: Gentle notification melody (2 seconds) // A musical phrase that resolves pleasantly const NOTIFICATION_MELODY = { notes: [ { freq: NOTE_FREQUENCIES.E5, start: 0.0, duration: 0.4 }, { freq: NOTE_FREQUENCIES.G5, start: 0.25, duration: 0.5 }, { freq: NOTE_FREQUENCIES.A5, start: 0.6, duration: 0.3 }, { freq: NOTE_FREQUENCIES.G5, start: 0.85, duration: 0.4 }, { freq: NOTE_FREQUENCIES.E5, start: 1.15, duration: 0.85 } ], totalDuration: 2.0 }; // Sound effect 3: Alert/warning tone (2 seconds) // Descending pattern that grabs attention const ALERT_TONE = { notes: [ // Attention-grabbing high notes { freq: NOTE_FREQUENCIES.A5, start: 0.0, duration: 0.25 }, { freq: NOTE_FREQUENCIES.A5, start: 0.3, duration: 0.25 }, // Descending resolution { freq: NOTE_FREQUENCIES.F5, start: 0.6, duration: 0.4 }, { freq: NOTE_FREQUENCIES.D5, start: 0.9, duration: 0.5 }, { freq: NOTE_FREQUENCIES.A4, start: 1.3, duration: 0.7 } ], totalDuration: 2.0 }; /** * CE.SDK Plugin: Add Sound Effects Guide * * This example demonstrates: * - Creating audio buffers with arbitrary data * - Generating sound effects programmatically (chimes, notifications) * - Using WAV format for in-memory audio * - Positioning sound effects on the timeline */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a video scene (audio blocks require timeline support) await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); const engine = cesdk.engine; // Get the page (timeline) const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Calculate total duration: 3 effects × 2s + 2 gaps × 0.5s = 7s const effectDuration = 2.0; const gapDuration = 0.5; const totalDuration = 3 * effectDuration + 2 * gapDuration; // 7 seconds // Set page duration to match total effects length engine.block.setDuration(page, totalDuration); // Add a centered title text to the canvas const text = engine.block.create('text'); engine.block.appendChild(page, text); engine.block.replaceText(text, 'Sound Effects Demo'); engine.block.setTextColor(text, { r: 1, g: 1, b: 1, a: 1 }); engine.block.setFloat(text, 'text/fontSize', 48); // Center the text on the canvas const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); engine.block.setWidth(text, pageWidth); engine.block.setHeight(text, 70); engine.block.setPositionX(text, 0); engine.block.setPositionY(text, pageHeight / 2 - 35); engine.block.setEnum(text, 'text/horizontalAlignment', 'Center'); // Make text visible for the entire duration engine.block.setTimeOffset(text, 0); engine.block.setDuration(text, totalDuration); const sampleRate = 48000; // Create the "success chime" sound effect const chimeBuffer = engine.editor.createBuffer(); // Generate the chime using our helper function const chimeWav = createWavBuffer( sampleRate, SUCCESS_CHIME.totalDuration, (time) => { let sample = 0; // Mix all notes together for (const note of SUCCESS_CHIME.notes) { // Calculate envelope for this note const envelope = adsr( time, note.start, note.duration, 0.02, // Soft attack (20ms) 0.08, // Gentle decay (80ms) 0.7, // Sustain at 70% 0.25 // Smooth release (250ms) ); if (envelope > 0) { // Generate sine wave with slight harmonics for richness const fundamental = Math.sin(2 * Math.PI * note.freq * time); const harmonic2 = Math.sin(4 * Math.PI * note.freq * time) * 0.25; const harmonic3 = Math.sin(6 * Math.PI * note.freq * time) * 0.1; sample += (fundamental + harmonic2 + harmonic3) * envelope * 0.3; } } return sample; } ); // Write WAV data to the buffer engine.editor.setBufferData(chimeBuffer, 0, chimeWav); // Create audio block for the chime (starts at 0s) const chimeBlock = engine.block.create('audio'); engine.block.appendChild(page, chimeBlock); engine.block.setString(chimeBlock, 'audio/fileURI', chimeBuffer); engine.block.setTimeOffset(chimeBlock, 0); engine.block.setDuration(chimeBlock, SUCCESS_CHIME.totalDuration); engine.block.setVolume(chimeBlock, 0.8); // Create the "notification melody" sound effect const melodyBuffer = engine.editor.createBuffer(); const melodyWav = createWavBuffer( sampleRate, NOTIFICATION_MELODY.totalDuration, (time) => { let sample = 0; for (const note of NOTIFICATION_MELODY.notes) { const envelope = adsr( time, note.start, note.duration, 0.01, // Soft attack (10ms) 0.06, // Gentle decay (60ms) 0.6, // Sustain at 60% 0.2 // Smooth release (200ms) ); if (envelope > 0) { // Pure sine wave with light 2nd harmonic for gentle tone const fundamental = Math.sin(2 * Math.PI * note.freq * time); const harmonic2 = Math.sin(4 * Math.PI * note.freq * time) * 0.15; sample += (fundamental + harmonic2) * envelope * 0.4; } } return sample; } ); engine.editor.setBufferData(melodyBuffer, 0, melodyWav); // Starts at 2.5s (after 2s effect + 0.5s gap) const melodyBlock = engine.block.create('audio'); engine.block.appendChild(page, melodyBlock); engine.block.setString(melodyBlock, 'audio/fileURI', melodyBuffer); engine.block.setTimeOffset(melodyBlock, effectDuration + gapDuration); // 2.5s engine.block.setDuration(melodyBlock, NOTIFICATION_MELODY.totalDuration); engine.block.setVolume(melodyBlock, 0.8); // Create the "alert" sound effect const alertBuffer = engine.editor.createBuffer(); const alertWav = createWavBuffer( sampleRate, ALERT_TONE.totalDuration, (time) => { let sample = 0; for (const note of ALERT_TONE.notes) { const envelope = adsr( time, note.start, note.duration, 0.005, // Sharp attack (5ms) 0.05, // Quick decay (50ms) 0.5, // Sustain at 50% 0.15 // Medium release (150ms) ); if (envelope > 0) { // Slightly brighter tone for alert const fundamental = Math.sin(2 * Math.PI * note.freq * time); const harmonic2 = Math.sin(4 * Math.PI * note.freq * time) * 0.2; const harmonic3 = Math.sin(6 * Math.PI * note.freq * time) * 0.15; sample += (fundamental + harmonic2 + harmonic3) * envelope * 0.35; } } return sample; } ); engine.editor.setBufferData(alertBuffer, 0, alertWav); // Starts at 5s (after 2 effects + 2 gaps) const alertBlock = engine.block.create('audio'); engine.block.appendChild(page, alertBlock); engine.block.setString(alertBlock, 'audio/fileURI', alertBuffer); engine.block.setTimeOffset(alertBlock, 2 * (effectDuration + gapDuration)); // 5s engine.block.setDuration(alertBlock, ALERT_TONE.totalDuration); engine.block.setVolume(alertBlock, 0.75); // Select the chime block to show it in the UI engine.block.select(chimeBlock); // Zoom to fit the timeline await cesdk.actions.run('zoom.toPage', { autoFit: true }); // eslint-disable-next-line no-console console.log( `Sound effects: Success (0s), Melody (2.5s), Alert (5s) - each 2s, total ${totalDuration}s` ); } } export default Example; ``` This guide covers working with buffers to create audio data and position it in the composition. ## Working with Buffers CE.SDK provides a buffer API for creating and managing arbitrary binary data in memory. Use buffers when you need to generate content programmatically rather than loading from files. ### Creating a Buffer Create a buffer with `createBuffer()`, which returns a URI you can use to reference the buffer: ```typescript highlight-buffer-create // Create the "notification melody" sound effect const melodyBuffer = engine.editor.createBuffer(); ``` ### Writing Data Write data to a buffer using `setBufferData()`. The offset parameter specifies where to start writing: ```typescript highlight-buffer-write engine.editor.setBufferData(melodyBuffer, 0, melodyWav); ``` ### Reading Data Read data back from a buffer: ```typescript const length = engine.editor.getBufferLength(buffer); const data = engine.editor.getBufferData(buffer, 0, length); ``` ### Adding an Audio Track Create an audio block and assign the buffer URI to its `audio/fileURI` property. Append it to the page to add it to the composition: ```typescript highlight-audio-track // Starts at 2.5s (after 2s effect + 0.5s gap) const melodyBlock = engine.block.create('audio'); engine.block.appendChild(page, melodyBlock); engine.block.setString(melodyBlock, 'audio/fileURI', melodyBuffer); ``` ### Cleanup Destroy buffers when no longer needed (buffers are also cleaned up automatically with the scene): ```typescript engine.editor.destroyBuffer(buffer); ``` ## Generating Audio Data To use buffers for audio, you need valid audio data. The WAV format is straightforward to generate: a 44-byte header followed by raw PCM samples. ```typescript highlight-wav-body const bitsPerSample = 16; const channels = 2; // Stereo output const numSamples = Math.floor(durationSeconds * sampleRate); const dataSize = numSamples * channels * (bitsPerSample / 8); // Create WAV file buffer (44-byte header + audio data) const wavBuffer = new ArrayBuffer(44 + dataSize); const view = new DataView(wavBuffer); // RIFF chunk descriptor view.setUint32(0, 0x52494646, false); // "RIFF" view.setUint32(4, 36 + dataSize, true); // File size - 8 view.setUint32(8, 0x57415645, false); // "WAVE" // fmt sub-chunk view.setUint32(12, 0x666d7420, false); // "fmt " view.setUint32(16, 16, true); // Sub-chunk size (16 for PCM) view.setUint16(20, 1, true); // Audio format (1 = PCM) view.setUint16(22, channels, true); // Number of channels view.setUint32(24, sampleRate, true); // Sample rate view.setUint32(28, sampleRate * channels * (bitsPerSample / 8), true); view.setUint16(32, channels * (bitsPerSample / 8), true); // Block align view.setUint16(34, bitsPerSample, true); // Bits per sample // data sub-chunk view.setUint32(36, 0x64617461, false); // "data" view.setUint32(40, dataSize, true); // Data size // Generate audio samples let offset = 44; for (let i = 0; i < numSamples; i++) { const time = i / sampleRate; // Generate mono sample and duplicate to both channels const value = generator(time); const sample = Math.max(-32768, Math.min(32767, Math.round(value * 32767))); view.setInt16(offset, sample, true); // Left channel view.setInt16(offset + 2, sample, true); // Right channel offset += 4; } return new Uint8Array(wavBuffer); ``` This code builds a stereo WAV file by writing the RIFF header, format chunk, and data chunk, then iterating through time to generate samples from a generator function that returns values between -1.0 and 1.0. ## Creating a Sound Effect Combine the buffer API with the WAV helper to create a complete sound effect. This example generates a notification melody by mixing multiple notes with harmonics: ```typescript highlight-generate-melody const melodyWav = createWavBuffer( sampleRate, NOTIFICATION_MELODY.totalDuration, (time) => { let sample = 0; for (const note of NOTIFICATION_MELODY.notes) { const envelope = adsr( time, note.start, note.duration, 0.01, // Soft attack (10ms) 0.06, // Gentle decay (60ms) 0.6, // Sustain at 60% 0.2 // Smooth release (200ms) ); if (envelope > 0) { // Pure sine wave with light 2nd harmonic for gentle tone const fundamental = Math.sin(2 * Math.PI * note.freq * time); const harmonic2 = Math.sin(4 * Math.PI * note.freq * time) * 0.15; sample += (fundamental + harmonic2) * envelope * 0.4; } } return sample; } ); ``` The generator function mixes overlapping notes, each with its own start time and duration. The `adsr()` function shapes each note's volume over time (attack, decay, sustain, release), preventing harsh clicks. Adding a second harmonic at 15% creates a warmer tone than a pure sine wave. ## Positioning in Time Position audio blocks using time offset (when it starts) and duration (how long it plays): ```typescript highlight-timeline-position engine.block.setTimeOffset(melodyBlock, effectDuration + gapDuration); // 2.5s engine.block.setDuration(melodyBlock, NOTIFICATION_MELODY.totalDuration); ``` This example spaces three sound effects with 0.5-second gaps: ``` Timeline: |----|----|----|----|----|----|----| 0s 1s 2s 3s 4s 5s 6s 7s Success: |====| ^ 0s (2s) Melody: |====| ^ 2.5s (2s) Alert: |====| ^ 5s (2s) ``` Each effect is 2 seconds with 0.5-second gaps between them, for a total duration of 7 seconds. ## Troubleshooting ### No Sound - **Check scene setup** - Ensure the audio block is attached to a page in the scene - **Verify duration** - Ensure the audio block's duration is greater than 0 - **Check buffer data** - The buffer must contain valid WAV data ### Audio Sounds Wrong - **Clipping** - Reduce sample values if they exceed -1.0 to 1.0 - **Clicking** - Add attack/release envelope to avoid pops - **Wrong pitch** - Verify frequency calculations and sample rate (48 kHz) ### Buffer Errors - **Invalid WAV** - Ensure header size fields match actual data size - **Format mismatch** - Use 16-bit PCM, stereo, 48 kHz for best compatibility --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Loop Audio" description: "Create seamless repeating audio playback for background music and sound effects using CE.SDK's audio looping system." platform: angular url: "https://img.ly/docs/cesdk/angular/create-audio/audio/loop-937be7/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/angular/create-audio/audio-2f700b/) > [Loop](https://img.ly/docs/cesdk/angular/create-audio/audio/loop-937be7/) --- Create seamless repeating audio playback for background music, sound effects, and rhythmic elements using CE.SDK's audio looping system. ![Loop Audio example showing timeline with looping audio blocks](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-loop-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-audio-audio-loop-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-audio-loop-browser/) Audio looping allows media to play continuously by restarting from the beginning when it reaches the end. When you set a block's duration longer than the audio length and enable looping, CE.SDK automatically repeats the audio to fill the entire duration. This makes looping perfect for background music, ambient soundscapes, and repeating sound effects. ```typescript file=@cesdk_web_examples/guides-create-audio-audio-loop-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Audio Loop Guide * * Demonstrates audio looping capabilities in CE.SDK: * - Creating audio blocks with looping enabled * - Controlling looping behavior with duration * - Querying looping state * - Disabling looping for one-time playback * - Understanding loop and duration interaction */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1280, height: 720, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get()!; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; engine.block.setDuration(page, 30); // 30 second timeline // Use sample audio from demo assets const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'; // Create a basic audio block const audioBlock = engine.block.create('audio')!; engine.block.appendChild(page, audioBlock); // Set the audio source URI engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Load the audio resource to access metadata like duration await engine.block.forceLoadAVResource(audioBlock); // Get the total audio duration const audioDuration = engine.block.getDouble( audioBlock, 'audio/totalDuration' ); // eslint-disable-next-line no-console console.log('Audio duration:', audioDuration, 'seconds'); // Enable looping for this audio block engine.block.setLooping(audioBlock, true); // Set the block duration longer than the audio length // The audio will loop to fill the entire duration engine.block.setDuration(audioBlock, 15); // eslint-disable-next-line no-console console.log('Looping enabled - audio will repeat to fill 15 seconds'); // Check if an audio block is set to loop const isLooping = engine.block.isLooping(audioBlock); // eslint-disable-next-line no-console console.log('Is looping:', isLooping); // true // Create a second audio block to demonstrate non-looping behavior const nonLoopingAudio = engine.block.create('audio')!; engine.block.appendChild(page, nonLoopingAudio); engine.block.setString(nonLoopingAudio, 'audio/fileURI', audioUri); await engine.block.forceLoadAVResource(nonLoopingAudio); // Set time offset so it doesn't overlap with first audio engine.block.setTimeOffset(nonLoopingAudio, 16); // Disable looping (or leave it at default false) engine.block.setLooping(nonLoopingAudio, false); // Set duration longer than audio length // Audio will play once and stop (no looping) engine.block.setDuration(nonLoopingAudio, 12); // eslint-disable-next-line no-console console.log('Looping disabled - audio plays once and stops'); // Create a third audio block demonstrating looping with trim const trimmedLoopAudio = engine.block.create('audio')!; engine.block.appendChild(page, trimmedLoopAudio); engine.block.setString(trimmedLoopAudio, 'audio/fileURI', audioUri); await engine.block.forceLoadAVResource(trimmedLoopAudio); // Trim to a 2-second segment engine.block.setTrimOffset(trimmedLoopAudio, 1.0); engine.block.setTrimLength(trimmedLoopAudio, 2.0); // Enable looping and set duration longer than trim length engine.block.setLooping(trimmedLoopAudio, true); engine.block.setDuration(trimmedLoopAudio, 8.0); // Position in timeline engine.block.setTimeOffset(trimmedLoopAudio, 29); // eslint-disable-next-line no-console console.log('Trimmed loop - 2s segment will loop 4 times to fill 8s'); // Select the first audio block to show it in timeline engine.block.setSelected(audioBlock, true); // eslint-disable-next-line no-console console.log('Audio looping guide initialized successfully'); } } export default Example; ``` This guide covers how to enable and disable audio looping, control looping behavior with duration settings, and loop trimmed audio segments. ## Understanding Audio Looping When looping is enabled on an audio block, CE.SDK repeats the audio content from the beginning each time it reaches the end. This continues until the block's duration is filled. For example, a 5-second audio clip with looping enabled and a 15-second duration will play three complete times. The loop transitions are seamless—CE.SDK jumps immediately from the end back to the beginning without gaps or clicks. The audio content itself determines how smooth the loop sounds. Audio files designed for looping (with matching start and end points) create perfectly seamless loops, while non-looping audio may have audible transitions. ## Creating Audio Blocks ### Adding Audio Content Audio blocks use file URIs to reference audio sources. We create the block, add it to the page, and set the audio source. ```typescript highlight-create-audio-block // Create a basic audio block const audioBlock = engine.block.create('audio')!; engine.block.appendChild(page, audioBlock); // Set the audio source URI engine.block.setString(audioBlock, 'audio/fileURI', audioUri); ``` The `audio/fileURI` property points to the audio file. CE.SDK supports common audio formats including MP3, M4A, WAV, and AAC. ## Enabling Audio Looping ### Loading Audio Resources Before working with audio properties like duration or trim, we load the audio resource to ensure metadata is available. ```typescript highlight-load-audio-resource // Load the audio resource to access metadata like duration await engine.block.forceLoadAVResource(audioBlock); // Get the total audio duration const audioDuration = engine.block.getDouble( audioBlock, 'audio/totalDuration' ); // eslint-disable-next-line no-console console.log('Audio duration:', audioDuration, 'seconds'); ``` Loading the resource provides access to the total audio duration, which helps calculate how many times the audio will loop given a specific block duration. ### Setting Looping State We enable looping by calling `setLooping()` with `true`. When combined with a block duration longer than the audio length, the audio repeats to fill the full duration. ```typescript highlight-enable-looping // Enable looping for this audio block engine.block.setLooping(audioBlock, true); // Set the block duration longer than the audio length // The audio will loop to fill the entire duration engine.block.setDuration(audioBlock, 15); // eslint-disable-next-line no-console console.log('Looping enabled - audio will repeat to fill 15 seconds'); ``` In this example, if the audio is 5 seconds long and the block duration is 15 seconds, the audio loops three times (5 seconds × 3 = 15 seconds total). ## Querying and Controlling Looping ### Checking Looping State We can check whether an audio block has looping enabled at any time. ```typescript highlight-query-looping-state // Check if an audio block is set to loop const isLooping = engine.block.isLooping(audioBlock); // eslint-disable-next-line no-console console.log('Is looping:', isLooping); // true ``` This is useful when managing complex compositions with multiple audio tracks, allowing us to query and update looping states dynamically. ### Disabling Looping To play audio once without repeating, we set looping to `false`. ```typescript highlight-non-looping-audio const nonLoopingAudio = engine.block.create('audio')!; engine.block.appendChild(page, nonLoopingAudio); engine.block.setString(nonLoopingAudio, 'audio/fileURI', audioUri); await engine.block.forceLoadAVResource(nonLoopingAudio); // Set time offset so it doesn't overlap with first audio engine.block.setTimeOffset(nonLoopingAudio, 16); // Disable looping (or leave it at default false) engine.block.setLooping(nonLoopingAudio, false); // Set duration longer than audio length // Audio will play once and stop (no looping) engine.block.setDuration(nonLoopingAudio, 12); // eslint-disable-next-line no-console console.log('Looping disabled - audio plays once and stops'); ``` With looping disabled and a duration longer than the audio length, the audio plays once and then stops, leaving silence for the remaining duration. ## Looping with Trim Settings ### Trimming Looped Audio We can combine trimming with looping to create short repeating segments from longer audio files. ```typescript highlight-looping-with-trim // Create a third audio block demonstrating looping with trim const trimmedLoopAudio = engine.block.create('audio')!; engine.block.appendChild(page, trimmedLoopAudio); engine.block.setString(trimmedLoopAudio, 'audio/fileURI', audioUri); await engine.block.forceLoadAVResource(trimmedLoopAudio); // Trim to a 2-second segment engine.block.setTrimOffset(trimmedLoopAudio, 1.0); engine.block.setTrimLength(trimmedLoopAudio, 2.0); // Enable looping and set duration longer than trim length engine.block.setLooping(trimmedLoopAudio, true); engine.block.setDuration(trimmedLoopAudio, 8.0); // Position in timeline engine.block.setTimeOffset(trimmedLoopAudio, 29); // eslint-disable-next-line no-console console.log('Trimmed loop - 2s segment will loop 4 times to fill 8s'); ``` This trims the audio to a 2-second segment (from 1.0s to 3.0s of the source), then loops that segment four times to fill an 8-second duration. This technique is powerful for creating rhythmic loops or extracting repeatable portions from longer audio files. ### Choosing Loop Points For seamless loops, choose trim points where the audio content flows naturally from end to beginning. Audio with consistent rhythm, tone, and volume at trim boundaries creates the smoothest loops. Abrupt changes in content or volume at loop boundaries create noticeable transitions. ## API Reference | Method | Description | Parameters | Returns | | ------------------------------- | ---------------------------------- | ----------------------------------------- | --------------- | | `create(type)` | Create an audio block | `type: 'audio'` | `DesignBlockId` | | `setString(id, property, value)`| Set audio source URI | `id: DesignBlockId, property: string, value: string` | `void` | | `setLooping(id, enabled)` | Enable or disable audio looping | `id: DesignBlockId, enabled: boolean` | `void` | | `isLooping(id)` | Check if audio is set to loop | `id: DesignBlockId` | `boolean` | | `setDuration(id, duration)` | Set block playback duration | `id: DesignBlockId, duration: number` | `void` | | `getDuration(id)` | Get block duration | `id: DesignBlockId` | `number` | | `setTrimOffset(id, offset)` | Set trim start point | `id: DesignBlockId, offset: number` | `void` | | `setTrimLength(id, length)` | Set trim length | `id: DesignBlockId, length: number` | `void` | | `forceLoadAVResource(id)` | Load audio resource with metadata | `id: DesignBlockId` | `Promise` | | `getDouble(id, property)` | Get audio property value | `id: DesignBlockId, property: string` | `number` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Compositions" description: "Combine and arrange multiple elements to create complex, multi-page, or layered design compositions." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition-db709c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/angular/create-composition/overview-5b19c5/) - Combine and arrange multiple elements to create complex, multi-page, or layered design compositions. - [Multi-Page Layouts](https://img.ly/docs/cesdk/angular/create-composition/multi-page-4d2b50/) - Create and manage multi-page designs in CE.SDK for documents like brochures, presentations, and catalogs with multiple pages in a single scene. - [Create a Collage](https://img.ly/docs/cesdk/angular/create-composition/collage-f7d28d/) - Combine images into a collage using the CE.SDK. - [Design a Layout](https://img.ly/docs/cesdk/angular/create-composition/layout-b66311/) - Create structured compositions using scene layouts, positioning systems, and hierarchical block organization for collages, magazines, and multi-page documents. - [Add a Background](https://img.ly/docs/cesdk/angular/create-composition/add-background-375a47/) - Add backgrounds to designs using fills for pages and shapes, and the background color property for text blocks. - [Positioning and Alignment](https://img.ly/docs/cesdk/angular/insert-media/position-and-align-cc6b6a/) - Precisely position, align, and distribute objects using guides, snapping, and alignment tools. - [Group and Ungroup Objects](https://img.ly/docs/cesdk/angular/create-composition/group-and-ungroup-62565a/) - Group multiple design elements together so they move, scale, and transform as a single unit; ungroup to edit them individually. - [Layer Management](https://img.ly/docs/cesdk/angular/create-composition/layer-management-18f07a/) - Organize design elements using a layer stack for precise control over stacking and visibility. - [Lock Design](https://img.ly/docs/cesdk/angular/create-composition/lock-design-0a81de/) - Protect design elements from unwanted modifications using CE.SDK's scope-based permission system. Control which properties users can edit at both global and block levels. - [Blend Modes](https://img.ly/docs/cesdk/angular/create-composition/blend-modes-ad3519/) - Apply blend modes to elements to control how colors and layers interact visually. - [Programmatic Creation](https://img.ly/docs/cesdk/angular/create-composition/programmatic-a688bf/) - Documentation for Programmatic Creation --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add a Background" description: "Add backgrounds to designs using fills for pages and shapes, and the background color property for text blocks." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/add-background-375a47/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Add a Background](https://img.ly/docs/cesdk/angular/create-composition/add-background-375a47/) --- Add backgrounds to designs using fills for pages and shapes, and the background color property for text blocks. ![Add a Background example showing gradient page fill, text with background color, and image shape](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-add-background-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-add-background-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-add-background-browser/) CE.SDK provides two distinct approaches for adding backgrounds to design elements. Understanding when to use each approach ensures your designs render correctly and efficiently. ```typescript file=@cesdk_web_examples/guides-create-composition-add-background-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add a Background Guide * * This example demonstrates: * - Applying gradient fills to pages * - Adding background colors to text blocks * - Applying image fills to shapes */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Create a design scene and get the page await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Check if the page supports fill, then apply a pastel gradient if (engine.block.supportsFill(page)) { const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.85, g: 0.75, b: 0.95, a: 1.0 }, stop: 0 }, { color: { r: 0.7, g: 0.9, b: 0.95, a: 1.0 }, stop: 1 } ]); engine.block.setFill(page, gradientFill); } // Create header text (dark, no background) const headerText = engine.block.create('text'); engine.block.setString(headerText, 'text/text', 'Learn cesdk'); engine.block.setFloat(headerText, 'text/fontSize', 56); engine.block.setWidth(headerText, 350); engine.block.setHeightMode(headerText, 'Auto'); engine.block.setPositionX(headerText, 50); engine.block.setPositionY(headerText, 230); engine.block.setColor(headerText, 'fill/solid/color', { r: 0.15, g: 0.15, b: 0.2, a: 1.0 }); engine.block.appendChild(page, headerText); // Create "Backgrounds" text with white background const featuredText = engine.block.create('text'); engine.block.setString(featuredText, 'text/text', 'Backgrounds'); engine.block.setFloat(featuredText, 'text/fontSize', 48); engine.block.setWidth(featuredText, 280); engine.block.setHeightMode(featuredText, 'Auto'); // Offset X by paddingLeft (16) so background aligns with header at X=50 engine.block.setPositionX(featuredText, 66); engine.block.setPositionY(featuredText, 280); engine.block.setColor(featuredText, 'fill/solid/color', { r: 0.2, g: 0.2, b: 0.25, a: 1.0 }); engine.block.appendChild(page, featuredText); // Add white background color to the featured text block if (engine.block.supportsBackgroundColor(featuredText)) { engine.block.setBackgroundColorEnabled(featuredText, true); engine.block.setColor(featuredText, 'backgroundColor/color', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setFloat(featuredText, 'backgroundColor/paddingLeft', 16); engine.block.setFloat(featuredText, 'backgroundColor/paddingRight', 16); engine.block.setFloat(featuredText, 'backgroundColor/paddingTop', 10); engine.block.setFloat(featuredText, 'backgroundColor/paddingBottom', 10); engine.block.setFloat(featuredText, 'backgroundColor/cornerRadius', 8); } // Create an image block on the right side const imageBlock = engine.block.create('graphic'); const imageShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, imageShape); engine.block.setFloat(imageShape, 'shape/rect/cornerRadiusTL', 16); engine.block.setFloat(imageShape, 'shape/rect/cornerRadiusTR', 16); engine.block.setFloat(imageShape, 'shape/rect/cornerRadiusBL', 16); engine.block.setFloat(imageShape, 'shape/rect/cornerRadiusBR', 16); engine.block.setWidth(imageBlock, 340); engine.block.setHeight(imageBlock, 400); engine.block.setPositionX(imageBlock, 420); engine.block.setPositionY(imageBlock, 100); // Check if the block supports fill, then apply an image fill if (engine.block.supportsFill(imageBlock)) { 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.appendChild(page, imageBlock); // Create IMG.LY logo (bottom left) const logoBlock = engine.block.create('graphic'); const logoShape = engine.block.createShape('rect'); engine.block.setShape(logoBlock, logoShape); engine.block.setWidth(logoBlock, 100); engine.block.setHeight(logoBlock, 40); engine.block.setPositionX(logoBlock, 50); engine.block.setPositionY(logoBlock, 530); if (engine.block.supportsFill(logoBlock)) { const logoFill = engine.block.createFill('image'); engine.block.setString( logoFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logoBlock, logoFill); } engine.block.appendChild(page, logoBlock); // Check feature support on different blocks const pageSupportsFill = engine.block.supportsFill(page); const textSupportsBackground = engine.block.supportsBackgroundColor(featuredText); const imageSupportsFill = engine.block.supportsFill(imageBlock); console.log('Page supports fill:', pageSupportsFill); console.log('Text supports backgroundColor:', textSupportsBackground); console.log('Image supports fill:', imageSupportsFill); // Zoom to fit the page await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` ## Setup Create a design scene and get a reference to the page where we'll apply backgrounds. ```typescript highlight=highlight-setup // Create a design scene and get the page await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } ``` ## Fills Fills are visual content applied to pages and graphic blocks. Supported fill types include solid colors, linear gradients, radial gradients, and images. ### Check Fill Support Before applying a fill, verify the block supports it with `supportsFill()`. Pages and graphic blocks typically support fills, while text blocks handle their content differently. ```typescript highlight=highlight-check-support // Check feature support on different blocks const pageSupportsFill = engine.block.supportsFill(page); const textSupportsBackground = engine.block.supportsBackgroundColor(featuredText); const imageSupportsFill = engine.block.supportsFill(imageBlock); console.log('Page supports fill:', pageSupportsFill); console.log('Text supports backgroundColor:', textSupportsBackground); console.log('Image supports fill:', imageSupportsFill); ``` ### Apply a Gradient Fill Create a fill with `createFill()` specifying the type, configure its properties, then apply it with `setFill()`. The example below creates a linear gradient with two color stops. ```typescript highlight=highlight-page-fill // Check if the page supports fill, then apply a pastel gradient if (engine.block.supportsFill(page)) { const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.85, g: 0.75, b: 0.95, a: 1.0 }, stop: 0 }, { color: { r: 0.7, g: 0.9, b: 0.95, a: 1.0 }, stop: 1 } ]); engine.block.setFill(page, gradientFill); } ``` The gradient transitions from a pastel purple at the start to a light cyan at the end. ### Apply an Image Fill Image fills display images within the block's shape bounds. Create an image fill, set its URI, and apply it to a graphic block. ```typescript highlight=highlight-shape-fill // Check if the block supports fill, then apply an image fill if (engine.block.supportsFill(imageBlock)) { 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); } ``` The shape's corner radius creates rounded corners on the image. Image fills automatically scale to cover the shape area. ## Background Color Background color is a dedicated property available specifically on text blocks. Unlike fills, background colors include configurable padding and corner radius, creating highlighted text effects without additional graphic blocks. ### Check Background Color Support Use `supportsBackgroundColor()` to verify a block supports this feature. Currently, only text blocks support background colors. ```typescript highlight=highlight-check-support // Check feature support on different blocks const pageSupportsFill = engine.block.supportsFill(page); const textSupportsBackground = engine.block.supportsBackgroundColor(featuredText); const imageSupportsFill = engine.block.supportsFill(imageBlock); console.log('Page supports fill:', pageSupportsFill); console.log('Text supports backgroundColor:', textSupportsBackground); console.log('Image supports fill:', imageSupportsFill); ``` ### Apply Background Color Enable the background color with `setBackgroundColorEnabled()`, then configure its appearance using property paths for color, padding, and corner radius. ```typescript highlight=highlight-background-color // Add white background color to the featured text block if (engine.block.supportsBackgroundColor(featuredText)) { engine.block.setBackgroundColorEnabled(featuredText, true); engine.block.setColor(featuredText, 'backgroundColor/color', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setFloat(featuredText, 'backgroundColor/paddingLeft', 16); engine.block.setFloat(featuredText, 'backgroundColor/paddingRight', 16); engine.block.setFloat(featuredText, 'backgroundColor/paddingTop', 10); engine.block.setFloat(featuredText, 'backgroundColor/paddingBottom', 10); engine.block.setFloat(featuredText, 'backgroundColor/cornerRadius', 8); } ``` The padding properties (`backgroundColor/paddingLeft`, `backgroundColor/paddingRight`, `backgroundColor/paddingTop`, `backgroundColor/paddingBottom`) control the space between the text and the background edge. The `backgroundColor/cornerRadius` property rounds the corners. ## Troubleshooting ### Fill Not Visible If a fill doesn't appear: - Ensure all color components (r, g, b) are between 0 and 1 - Check that the alpha component is greater than 0 - Verify the block supports fills with `supportsFill()` ### Background Color Not Appearing If a background color doesn't appear: - Confirm the block supports it with `supportsBackgroundColor()` - Verify `setBackgroundColorEnabled(block, true)` was called - Check that the color's alpha value is greater than 0 ### Image Not Loading If an image fill doesn't display: - Verify the image URI is accessible - Check browser console for CORS or network errors - Ensure the image format is supported (PNG, JPEG, WebP) ## API Reference | Method | Description | | --- | --- | | `engine.block.supportsFill(block)` | Check if a block supports fills | | `engine.block.createFill(type)` | Create a fill (color, gradient/linear, gradient/radial, image) | | `engine.block.setFill(block, fill)` | Apply a fill to a block | | `engine.block.getFill(block)` | Get the fill applied to a block | | `engine.block.setGradientColorStops(fill, property, stops)` | Set gradient color stops | | `engine.block.supportsBackgroundColor(block)` | Check if a block supports background color | | `engine.block.setBackgroundColorEnabled(block, enabled)` | Enable or disable background color | | `engine.block.isBackgroundColorEnabled(block)` | Check if background color is enabled | | `engine.block.setColor(block, property, color)` | Set color properties | | `engine.block.setFloat(block, property, value)` | Set float properties (padding, radius) | ## Next Steps Explore related topics: - [Apply Colors](https://img.ly/docs/cesdk/angular/colors/apply-2211e3/) - Work with RGB, CMYK, and spot colors - [Fills Overview](https://img.ly/docs/cesdk/angular/fills/overview-3895ee/) - Learn about all fill types in depth --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Blend Modes" description: "Apply blend modes to elements to control how colors and layers interact visually." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/blend-modes-ad3519/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Blend Modes](https://img.ly/docs/cesdk/angular/create-composition/blend-modes-ad3519/) --- Control how design blocks visually blend with underlying layers using CE.SDK's blend mode system for professional layered compositions. ![Blend Modes example showing layered images with blend effects applied](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-blend-modes-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-blend-modes-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-blend-modes-browser/) Blend modes control how a block's colors combine with underlying layers, similar to blend modes in Photoshop or other design tools. CE.SDK provides 27 blend modes organized into categories: Normal, Darken, Lighten, Contrast, Inversion, and Component. Each category serves different compositing needs—darken modes make images darker, lighten modes make them brighter, and contrast modes increase midtone contrast. ```typescript file=@cesdk_web_examples/guides-create-composition-blend-modes-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Blend Modes Guide * * This example demonstrates: * - Checking if a block supports blend modes * - Setting blend modes on overlay layers * - Getting the current blend mode of a block * - Working with opacity values * - Available blend mode values */ 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; await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const page = engine.block.findByType('page')[0]; // Grid configuration: 3 columns x 2 rows const cols = 3; const rows = 2; const cellWidth = 280; const cellHeight = 210; const padding = 20; const pageWidth = cols * cellWidth + (cols + 1) * padding; const pageHeight = rows * cellHeight + (rows + 1) * padding; // Set page dimensions engine.block.setWidth(page, pageWidth); engine.block.setHeight(page, pageHeight); // Base and overlay image URLs const baseImageUrl = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const overlayImageUrl = 'https://img.ly/static/ubq_samples/sample_2.jpg'; // Six commonly used blend modes to demonstrate const blendModes: Array< 'Multiply' | 'Screen' | 'Overlay' | 'Darken' | 'Lighten' | 'ColorBurn' > = ['Multiply', 'Screen', 'Overlay', 'Darken', 'Lighten', 'ColorBurn']; // Create 6 image pairs in a grid layout for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const index = row * cols + col; const x = padding + col * (cellWidth + padding); const y = padding + row * (cellHeight + padding); // Create a background image block as the base layer const backgroundBlock = engine.block.create('graphic'); const backgroundShape = engine.block.createShape('rect'); engine.block.setShape(backgroundBlock, backgroundShape); engine.block.setWidth(backgroundBlock, cellWidth); engine.block.setHeight(backgroundBlock, cellHeight); engine.block.setPositionX(backgroundBlock, x); engine.block.setPositionY(backgroundBlock, y); // Set the image fill for the background const backgroundFill = engine.block.createFill('image'); engine.block.setString( backgroundFill, 'fill/image/imageFileURI', baseImageUrl ); engine.block.setFill(backgroundBlock, backgroundFill); engine.block.setContentFillMode(backgroundBlock, 'Cover'); engine.block.appendChild(page, backgroundBlock); // Create a second image block on top for blending const overlayBlock = engine.block.create('graphic'); const overlayShape = engine.block.createShape('rect'); engine.block.setShape(overlayBlock, overlayShape); engine.block.setWidth(overlayBlock, cellWidth); engine.block.setHeight(overlayBlock, cellHeight); engine.block.setPositionX(overlayBlock, x); engine.block.setPositionY(overlayBlock, y); // Set a different image fill for the overlay const overlayFill = engine.block.createFill('image'); engine.block.setString( overlayFill, 'fill/image/imageFileURI', overlayImageUrl ); engine.block.setFill(overlayBlock, overlayFill); engine.block.setContentFillMode(overlayBlock, 'Cover'); engine.block.appendChild(page, overlayBlock); // Check if the block supports blend modes before applying if (engine.block.supportsBlendMode(overlayBlock)) { // Apply a different blend mode to each overlay const blendMode = blendModes[index]; engine.block.setBlendMode(overlayBlock, blendMode); // Retrieve and log the current blend mode const currentMode = engine.block.getBlendMode(overlayBlock); // eslint-disable-next-line no-console console.log(`Cell ${index + 1} blend mode:`, currentMode); } // Check if the block supports opacity if (engine.block.supportsOpacity(overlayBlock)) { // Set the opacity to 80% for clear visibility engine.block.setOpacity(overlayBlock, 0.8); } // Retrieve and log the opacity value const opacity = engine.block.getOpacity(overlayBlock); // eslint-disable-next-line no-console console.log(`Cell ${index + 1} opacity:`, opacity); } } // Zoom to fit the composition await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide covers how to check blend mode support, apply blend modes programmatically, understand the available blend mode options, and combine blend modes with opacity for fine control over layer compositing. ## Checking Blend Mode Support Before applying a blend mode, verify that the block supports it using `supportsBlendMode()`. Most graphic blocks support blend modes, but always check to avoid errors. ```typescript highlight-check-support // Check if the block supports blend modes before applying if (engine.block.supportsBlendMode(overlayBlock)) { ``` Blend mode support is available for graphic blocks with image or video fills, shape blocks, and text blocks. Page blocks and scene blocks typically do not support blend modes directly. ## Setting and Getting Blend Modes Apply a blend mode with `setBlendMode()` and retrieve the current mode with `getBlendMode()`. The default blend mode is `'Normal'`, which displays the block without any blending effect. ```typescript highlight-set-blend-mode // Apply a different blend mode to each overlay const blendMode = blendModes[index]; engine.block.setBlendMode(overlayBlock, blendMode); ``` After setting a blend mode, you can confirm the change by retrieving the current value: ```typescript highlight-get-blend-mode // Retrieve and log the current blend mode const currentMode = engine.block.getBlendMode(overlayBlock); // eslint-disable-next-line no-console console.log(`Cell ${index + 1} blend mode:`, currentMode); ``` ## Available Blend Modes CE.SDK provides 27 blend modes organized into categories, each producing different visual results: ### Normal Modes - **`PassThrough`** - Allows children of a group to blend with layers below the group - **`Normal`** - Default mode with no blending effect ### Darken Modes These modes darken the result by comparing the base and blend colors: - **`Darken`** - Selects the darker of the base and blend colors - **`Multiply`** - Multiplies colors, producing darker results (great for shadows) - **`ColorBurn`** - Darkens base color by increasing contrast - **`LinearBurn`** - Darkens base color by decreasing brightness - **`DarkenColor`** - Selects the darker color based on luminosity ### Lighten Modes These modes lighten the result by comparing colors: - **`Lighten`** - Selects the lighter of the base and blend colors - **`Screen`** - Multiplies the inverse of colors, producing lighter results (great for highlights) - **`ColorDodge`** - Lightens base color by decreasing contrast - **`LinearDodge`** - Lightens base color by increasing brightness - **`LightenColor`** - Selects the lighter color based on luminosity ### Contrast Modes These modes increase midtone contrast: - **`Overlay`** - Combines Multiply and Screen based on the base color - **`SoftLight`** - Similar to Overlay but with a softer effect - **`HardLight`** - Similar to Overlay but based on the blend color - **`VividLight`** - Burns or dodges colors based on the blend color - **`LinearLight`** - Increases or decreases brightness based on blend color - **`PinLight`** - Replaces colors based on the blend color - **`HardMix`** - Reduces colors to white, black, or primary colors ### Inversion Modes These modes create inverted or subtracted effects: - **`Difference`** - Subtracts the darker from the lighter color - **`Exclusion`** - Similar to Difference with lower contrast - **`Subtract`** - Subtracts blend color from base color - **`Divide`** - Divides base color by blend color ### Component Modes These modes affect specific color components: - **`Hue`** - Uses the hue of the blend color with base saturation and luminosity - **`Saturation`** - Uses the saturation of the blend color - **`Color`** - Uses the hue and saturation of the blend color - **`Luminosity`** - Uses the luminosity of the blend color ## Combining Blend Modes with Opacity For finer control over compositing, combine blend modes with opacity. Opacity reduces overall visibility while the blend mode affects color interaction with underlying layers. ```typescript highlight-set-opacity // Check if the block supports opacity if (engine.block.supportsOpacity(overlayBlock)) { // Set the opacity to 80% for clear visibility engine.block.setOpacity(overlayBlock, 0.8); } ``` You can retrieve the current opacity value to confirm changes or read existing state: ```typescript highlight-get-opacity // Retrieve and log the opacity value const opacity = engine.block.getOpacity(overlayBlock); // eslint-disable-next-line no-console console.log(`Cell ${index + 1} opacity:`, opacity); ``` > **Tip:** Start with full opacity (1.0) when experimenting with blend modes, then reduce > opacity to soften the effect. Common values are 0.5-0.7 for subtle blending > effects. ## Troubleshooting ### Blend Mode Has No Visible Effect If a blend mode doesn't produce visible changes: - Ensure there are underlying layers for the block to blend with. Blend modes only affect compositing with content below. - Verify the blend mode is applied to the correct block using `getBlendMode()`. - Check that the block has visible content (fill or image) to blend. ### Cannot Set Blend Mode If `setBlendMode()` throws an error: - Check that `supportsBlendMode()` returns `true` for the block. - Verify the block ID is valid and the block exists in the scene. - Ensure you're passing a valid blend mode string from the available options. ### Unexpected Blending Results If the visual result doesn't match expectations: - Verify the blend mode category matches your intent (darken vs lighten vs contrast). - Check the stacking order of blocks—blend modes affect content below the block. - Experiment with different blend modes from the same category to find the best visual match. ## API Reference | Method | Description | | ---------------------------------------- | ------------------------------------------------- | | `engine.block.supportsBlendMode(id)` | Check if a block supports blend modes | | `engine.block.setBlendMode(id, mode)` | Set the blend mode for a block | | `engine.block.getBlendMode(id)` | Get the current blend mode of a block | | `engine.block.supportsOpacity(id)` | Check if a block supports opacity | | `engine.block.setOpacity(id, opacity)` | Set the opacity for a block (0-1) | | `engine.block.getOpacity(id)` | Get the current opacity of a block | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create a Collage" description: "Combine images into a collage using the CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/collage-f7d28d/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Create a Collage](https://img.ly/docs/cesdk/angular/create-composition/collage-f7d28d/) --- This guide shows you how to add a **Collage** feature in your web app with the help of the CE.SDK. A collage allows you to reuse images and assets as you change the layout of the scene. > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-layouts/src/components/case/CaseComponent.jsx) > > - [Open in StackBlitz](https://stackblitz.com/fork/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/showcase-layouts?title=IMG.LY+CE.SDK%3A+Layouts\&file=src%2Fcomponents%2Fcase%2FCaseComponent.jsx) > > - [Live demo](https://img.ly/showcases/cesdk/layouts/web) **Layouts** in CE.SDK are predefined templates that dictate how to arrange images and assets within a single composition. They allow you to create visually appealing collages by specifying each image’s: - Position - Size - Orientation relative to other assets on the page Layouts instantly create visuals and allow you to skip manually arranging each asset. ## What You’ll Learn In this guide, you will learn how to: - Set up the layout panel in the CE.SDK UI. - Use a layout file for collages. - Use TypeScript to apply layouts in your custom UI. ## When to Use Layouts The CE.SDK **Layout** feature is ideal for: - Photo collages - Grid layouts - Magazine spreads - Social media posts ## Difference Between Layouts and Templates Layouts are [custom assets](https://img.ly/docs/cesdk/angular/import-media/concepts-5e6197/) that differ from templates: - **Templates:** Load **new assets** and replace the existing scene. - **Layouts:** Keep existing assets but change their arrangement on the page. Preserving assets while changing the layout **isn’t a native CE.SDK feature**. The following sections explain how to leverage the CE.SDK to do it in your app using JavaScript. ## How Collages Work When you choose a collage layout, the app needs to: 1. Load a new layout file. 2. Extract content from your current design. 3. Map content to new layout positions. 4. Preserve images and text in visual order. You trigger this workflow when a user selects a layout from the **Layouts** panel in the CE.SDK UI. ## Add a Layouts Panel to the CE.SDK UI The CE.SDK allows you to add [custom panels to the UI](https://img.ly/docs/cesdk/angular/user-interface/customization/panel-7ce1ee/). To add a **Layouts** panel for collage selection, you need to create it and load custom assets to configure its appearance and behavior. For this action, you need: 1. A layout file defining the collage structure (use [this one](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-layouts/src/components/case/CustomLayouts.json) to get started). 2. Thumbnail images for preview (find a collection [here](https://github.com/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/showcase-layouts/public/cases/layouts)). ### 1. Add a Layouts Option to the CE.SDK Menu To **customize the CE.SDK UI** and create a **Layouts** panel, use the CE.SDK UserInterfaceAPI. Add a Layout button with `ui.setComponentOrder({ in: 'ly.img.dock' }, order)`, using the following properties: - `id` - `key` - `label` - `icon` - `entries` For example: ```ts cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'layouts-dock-entry', label: 'Layouts', icon: '@imgly/Layout', entries: ['layouts'], }, ]); ``` ### 2. Customize the Layouts Panel Appearance To configure how the **Layouts** panel looks and behaves, use the `ui.addAssetLibraryEntry()` helper with the following options: - `id`: Unique identifier for the panel. - `sourceIds`: Which assets to display. - `previewLength`: How many preview items to display in the panel. - `gridColumns`: How many columns to contain the previews in the panel. - `gridItemHeight`: The shape of each tile in the panel grid. - `previewBackgroundType`: How to fit the previews inside their tiles (cover/contain). - `gridBackgroundType`: How to display the panel background (cover/contain). For example, the demo uses this configuration: ```jsx title="CustomCase.jsx" instance.ui.addAssetLibraryEntry({ id: 'ly.img.layouts', // Referenced in the dock entry in Step 1 sourceIds: ['ly.img.layouts'], // Points to our custom layout asset source previewLength: 2, // Number of preview items int the compact panel gridColumns: 2, // Organize tiles in 2 columns gridItemHeight: 'square', // Square tiles previewBackgroundType: 'contain', // Fit compact panel background gridBackgroundType: 'contain' // Fit panel background }); ``` To learn more about panel customization, check the [Panel Customization guide](https://img.ly/docs/cesdk/angular/user-interface/customization/panel-7ce1ee/). ### 3. Load Custom Assets The demo uses a [helper function](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-layouts/src/components/case/lib/loadAssetSourceFromContentJSON.ts) to load a custom layout asset source from a JSON file. This file defines the available layouts and their metadata. You can reuse this logic by defining both: - A `ContentJSON` object (like `CustomLayouts.json`) - A `baseURL` for your custom assets that replaces the `{{base_url}}`. ```jsx title="CustomCase.jsx" import { createApplyLayoutAsset } from './lib/createApplyLayoutAsset'; import loadAssetSourceFromContentJSON from './lib/loadAssetSourceFromContentJSON'; // ... const caseAssetPath = (path, caseId = 'layouts') => `${process.env.NEXT_PUBLIC_URL_HOSTNAME}${process.env.NEXT_PUBLIC_URL}/cases/${caseId}${path}`; // Call the helper to load the layout assets loadAssetSourceFromContentJSON( instance.engine, // Pss the CE.SDK engine to load assets into LAYOUT_ASSETS, // Pass the JSON bundle caseAssetPath(''), // Base URL for assets createApplyLayoutAsset(instance.engine) // Callback to createApplyLayoutAsset.js helper ); await instance.loadFromURL(caseAssetPath('/custom-layouts.scene')); // Load the scene // ... ``` In the previous example, the helper accepts an optional **applyAsset callback**, so: 1. A user picks a layout from the library. 2. The engine invokes the callback to apply it. 3. The engine replaces the current page’s structure with the layout while keeping the user’s images/text. Asset preservation isn't a CE.SDK native feature. It’s handled in the `createApplyLayoutAsset.js` helper, which you can find in [the repository](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-layouts/src/components/case/lib/createApplyLayoutAsset.js). ## Apply the Collage When applying a collage, the following actions need to be implemented: 1. Changing the structure of the design. 2. Transferring the existing content to the new structure. 3. Deleting the previous scene. You can find this workflow in the `createApplyLayoutAsset()` helper from the demo. Follow these steps to replicate it: ### 1. Prepare and Allow changes - Allow block deletion with `editor.setGlobalScope('lifecycle/destroy', 'Allow')`. - Clear the selected blocks with `block.setSelected(block, false)`. ```js title="createApplyLayoutAsset.js" const scopeBefore = engine.editor.getGlobalScope('lifecycle/destroy'); engine.editor.setGlobalScope('lifecycle/destroy', 'Allow'); const page = engine.scene.getCurrentPage(); engine.block.findAllSelected().forEach((block) => engine.block.setSelected(block, false)); ``` ### 2. Load the New Layout - Load the new layout with `block.loadFromString()`. - Return the first page from the loaded blocks as the layout page. ```js title="createApplyLayoutAsset.js" const sceneString = await fetch(asset.meta.uri).then((response) => response.text()); const blocks = await engine.block.loadFromString(sceneString); const layoutPage = blocks[0]; ``` ### 3. Backup Current Page - Duplicate the current page with `block.duplicate()` to keep a backup of the existing content. - The CE.SDK uses this backup to transfer images and text to the new layout. - Clear the current page structure by destroying all its children. ```js title="createApplyLayoutAsset.js" const oldPage = engine.block.duplicate(page); engine.block.getChildren(page).forEach((child) => { engine.block.destroy(child); }); engine.block.getChildren(layoutPage).forEach((child) => { engine.block.insertChild(page, child, engine.block.getChildren(page).length); }); ``` ### 4. Transfer Content Copy user text and images onto the new layout: ```js title="createApplyLayoutAsset.js" copyAssets(engine, oldPage, page); ``` ### 5. Sort Blocks Visually and Pair Content Grab text and image blocks from both pages in visual order (top to bottom, left to right): ```js title="createApplyLayoutAsset.js" const fromChildren = visuallySortBlocks(engine, getChildrenTree(engine, fromPageId).flat()); const textsOnFromPage = fromChildren.filter((childId) => engine.block.getType(childId).includes('text')); const imagesOnFromPage = fromChildren.filter((childId) => engine.block.getKind(childId) === 'image'); // same for toPageId -> textsOnToPage, imagesOnToPage ``` Then apply the content from the old page to the new layout by looping through the blocks: ```js title="createApplyLayoutAsset.js" const fromText = engine.block.getString(fromBlock, 'text/text'); const fromFontFileUri = engine.block.getString(fromBlock, 'text/fontFileUri'); const fromTypeface = engine.block.getTypeface(fromBlock); engine.block.setFont(toBlock, fromFontFileUri, fromTypeface); const fromTextFillColor = engine.block.getColor(fromBlock, 'fill/solid/color'); engine.block.setString(toBlock, 'text/text', fromText); engine.block.setColor(toBlock, 'fill/solid/color', fromTextFillColor); ``` ```js title="createApplyLayoutAsset.js" const fromImageFill = engine.block.getFill(fromBlock); const toImageFill = engine.block.getFill(toBlock); const fromImageFileUri = engine.block.getString(fromImageFill, 'fill/image/imageFileURI'); engine.block.setString(toImageFill, 'fill/image/imageFileURI', fromImageFileUri); const fromImageSourceSets = engine.block.getSourceSet(fromImageFill, 'fill/image/sourceSet'); engine.block.setSourceSet(toImageFill, 'fill/image/sourceSet', fromImageSourceSets); if (engine.block.supportsPlaceholderBehavior(fromBlock)) { engine.block.setPlaceholderBehaviorEnabled( toBlock, engine.block.isPlaceholderBehaviorEnabled(fromBlock) ); } engine.block.resetCrop(toBlock); ``` ### 6. Cleanup and Restore State Cleanup temporary blocks with `block.destroy()` and restore global scope: ```js title="createApplyLayoutAsset.js" engine.block.destroy(oldPage); engine.block.destroy(layoutPage); engine.editor.setGlobalScope('lifecycle/destroy', scopeBefore); if (config.addUndoStep) { engine.editor.addUndoStep(); } return page; ``` This keeps the editor stable and predictable after the layout changes and prevents: - Stray selections. - Ghost placeholders. - Unused assets left at the scene. ## Advanced Collage Techniques The CE.SDK BlockAPI eases the transfer of [placeholder behavior](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/placeholders-d9ba8a/) when moving images between blocks. You can use it to: 1. Checks if the block supports placeholder behavior with `supportsPlaceholderBehavior`. 2. Apply the same setting to the target image block with: - `isPlaceholderBehaviorEnabled()` - `setPlaceholderBehaviorEnabled()` ```js title="createApplyLayoutAsset.js" if (engine.block.supportsPlaceholderBehavior(fromBlock)) { engine.block.setPlaceholderBehaviorEnabled( toBlock, engine.block.isPlaceholderBehaviorEnabled(fromBlock), ); } ``` This maintains the behavior of current placeholders after the layout swap. To ensure the CE.SDK uses all the existing images when applying a layout, you can: 1. Handle overflow when more images than slots: ```js title="createApplyLayoutAsset.js" for ( let index = 0; index < imagesOnToPage.length && index < imagesOnFromPage.length; index++ ) { ... } ``` 2. Fill empty slots with defaults or placeholders: ```js title="createApplyLayoutAsset.js" // loop condition ends when sources run out, leaving remaining target slots unchanged index < imagesOnToPage.length && index < imagesOnFromPage.length; ``` 3. List content by importance or metadata: ```js title="createApplyLayoutAsset.js" const visuallySortBlocks = (engine, blocks) => { const blocksWithCoordinates = blocks .map((block) => ({ block, coordinates: [ Math.round(engine.block.getPositionX(block)), Math.round(engine.block.getPositionY(block)) ] })) .sort(({ coordinates: [X1, Y1] }, { coordinates: [X2, Y2] }) => { if (Y1 === Y2) return X1 - X2; return Y1 - Y2; }); return blocksWithCoordinates.map(({ block }) => block); }; ``` For a better user experience, consider adding animations when applying layouts: ```tsx title="LoadingSpinner.tsx" const LoadingSpinner = () => { return
; }; ``` You can code more customizations to incorporate these effects into collage transitions: - Fading - Sliding - Morphing
## Optimize the Layout Workflow For a better user experience when creating collages, consider these optimizations: | Topic | Strategies | | --- | --- | | **Asset Loading** | ・ Lazy load thumbnails and cache scene files
・ Preload common layouts and minimize file sizes
・ Use CDN for efficient asset delivery | | **Content Transfer** | ・ Batch block operations to reduce engine calls
・ Optimize sorting algorithms and memory usage
・ Handle large page structures efficiently | | **Visual Cues** | ・ Show loading states and support undo/redo
・ Add error recovery and prevent accidental changes | ## Troubleshooting | ❌ Issue | ✅ Solutions | | --- | --- | | Layout not applying | ・ Verify asset source registration and callback connection
・ Check browser console for scene files or CORS errors
・ Check the validity of scene file URLs | | Content lost during layout change | ・ Debug visual sorting with console logs
・ Verify block type filtering is correct
・ Test with different content settings| | Incorrect visual order | ・ Adjust coordinate rounding tolerance in sorting
・ Flatten complex hierarchies before sorting
・ Test with well-defined layout structures | | Performance degradation | ・ Optimize scene file sizes
・ Batch engine operations
・ Profile and optimize content transfer | | Undo not working | ・ Ensure `addUndoStep()` called after all changes complete
・ Verify undo configuration in engine setup | ## Next Steps Now that know how to create collages with layouts, explore these related guides to expand your CE.SDK knowledge: - [Apply Templates](https://img.ly/docs/cesdk/angular/create-templates/overview-4ebe30/) - Work with templates instead of layouts - [Create Custom Asset Sources](https://img.ly/docs/cesdk/angular/import-media/asset-panel/basics-f29078/) - Import custom assets - [Customize UI Panels](https://img.ly/docs/cesdk/angular/user-interface/customization/panel-7ce1ee/) - Advanced UI customization - [Work with Images](https://img.ly/docs/cesdk/angular/insert-media/images-63848a/) - Manage image blocks and fills - [Scene Management](https://img.ly/docs/cesdk/angular/open-the-editor/load-scene-478833/) - Load and save scenes --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Group and Ungroup Objects" description: "Group multiple design elements together so they move, scale, and transform as a single unit; ungroup to edit them individually." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/group-and-ungroup-62565a/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Group and Ungroup Objects](https://img.ly/docs/cesdk/angular/create-composition/group-and-ungroup-62565a/) --- Group multiple blocks to move, scale, and transform them as a single unit; ungroup to edit them individually. ![Group and Ungroup Objects example showing grouped rectangles in CE.SDK](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-grouping-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-grouping-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-grouping-browser/) Groups let you treat multiple blocks as a cohesive unit. Grouped blocks move, scale, and rotate together while maintaining their relative positions. Groups can contain other groups, enabling hierarchical compositions. > **Note:** Groups are not currently available when editing videos. ```typescript file=@cesdk_web_examples/guides-create-composition-grouping-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Group and Ungroup Objects Guide * * This example demonstrates: * - Creating multiple graphic blocks * - Checking if blocks can be grouped * - Grouping blocks together * - Navigating into and out of groups * - Ungrouping blocks * - Finding and inspecting groups */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Create a design scene and get the page await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Create a graphic block with a colored rectangle shape const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, 120); engine.block.setHeight(block1, 120); engine.block.setPositionX(block1, 200); engine.block.setPositionY(block1, 240); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 0.4, g: 0.6, b: 0.9, a: 1.0 }); engine.block.setFill(block1, fill1); engine.block.appendChild(page, block1); // Create two more blocks for grouping const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, 120); engine.block.setHeight(block2, 120); engine.block.setPositionX(block2, 340); engine.block.setPositionY(block2, 240); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.9, g: 0.5, b: 0.4, a: 1.0 }); engine.block.setFill(block2, fill2); engine.block.appendChild(page, block2); const block3 = engine.block.create('graphic'); const shape3 = engine.block.createShape('rect'); engine.block.setShape(block3, shape3); engine.block.setWidth(block3, 120); engine.block.setHeight(block3, 120); engine.block.setPositionX(block3, 480); engine.block.setPositionY(block3, 240); const fill3 = engine.block.createFill('color'); engine.block.setColor(fill3, 'fill/color/value', { r: 0.5, g: 0.8, b: 0.5, a: 1.0 }); engine.block.setFill(block3, fill3); engine.block.appendChild(page, block3); // Check if the blocks can be grouped together const canGroup = engine.block.isGroupable([block1, block2, block3]); console.log('Blocks can be grouped:', canGroup); // Group the blocks together if (canGroup) { const groupId = engine.block.group([block1, block2, block3]); console.log('Created group with ID:', groupId); // Select the group to show it in the UI engine.block.setSelected(groupId, true); // Enter the group to select individual members engine.block.enterGroup(groupId); // Select a specific member within the group engine.block.setSelected(block2, true); console.log('Selected member inside group'); // Exit the group to return selection to the parent group engine.block.exitGroup(block2); console.log('Exited group, group is now selected'); // Find all groups in the scene const allGroups = engine.block.findByType('group'); console.log('Number of groups in scene:', allGroups.length); // Check the type of the group block const groupType = engine.block.getType(groupId); console.log('Group block type:', groupType); // Get the members of the group const members = engine.block.getChildren(groupId); console.log('Group has', members.length, 'members'); // Ungroup the blocks to make them independent again engine.block.ungroup(groupId); console.log('Ungrouped blocks'); // Verify blocks are no longer in a group const groupsAfterUngroup = engine.block.findByType('group'); console.log('Groups after ungrouping:', groupsAfterUngroup.length); // Re-group for the final display const finalGroup = engine.block.group([block1, block2, block3]); engine.block.setSelected(finalGroup, true); } // Enable auto-fit zoom to keep the page centered engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers how to check if blocks can be grouped, create and dissolve groups, navigate into groups to select individual members, and find existing groups in a scene. ## Understanding Groups Groups are blocks with type `'group'` that contain child blocks as members. Transformations applied to a group affect all members proportionally—position, scale, and rotation cascade to all children. Groups can be nested, meaning a group can contain other groups. This enables complex hierarchical structures where multiple logical units can be combined and manipulated together. > **Note:** **What cannot be grouped*** Scene blocks cannot be grouped > * Blocks already part of a group cannot be grouped again until ungrouped ## Create the Blocks We first create several graphic blocks that we'll group together. Each block has a different color fill to make them visually distinct. ```typescript highlight=highlight-create-blocks // Create a graphic block with a colored rectangle shape const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, 120); engine.block.setHeight(block1, 120); engine.block.setPositionX(block1, 200); engine.block.setPositionY(block1, 240); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 0.4, g: 0.6, b: 0.9, a: 1.0 }); engine.block.setFill(block1, fill1); engine.block.appendChild(page, block1); ``` ## Check If Blocks Can Be Grouped Before grouping, verify that the selected blocks can be grouped using `engine.block.isGroupable()`. This method returns `true` if all blocks can be grouped together, or `false` if any block is a scene or already belongs to a group. ```typescript highlight=highlight-check-groupable // Check if the blocks can be grouped together const canGroup = engine.block.isGroupable([block1, block2, block3]); console.log('Blocks can be grouped:', canGroup); ``` ## Create a Group Use `engine.block.group()` to combine multiple blocks into a new group. The method returns the ID of the newly created group block. The group inherits the combined bounding box of its members. ```typescript highlight=highlight-create-group // Group the blocks together if (canGroup) { const groupId = engine.block.group([block1, block2, block3]); console.log('Created group with ID:', groupId); // Select the group to show it in the UI engine.block.setSelected(groupId, true); ``` ## Navigate Group Selection CE.SDK provides methods to navigate into and out of groups while editing. ### Enter a Group When a group is selected, use `engine.block.enterGroup()` to enter editing mode for that group. This allows you to select and modify individual members within the group. ```typescript highlight=highlight-enter-group // Enter the group to select individual members engine.block.enterGroup(groupId); // Select a specific member within the group engine.block.setSelected(block2, true); console.log('Selected member inside group'); ``` ### Exit a Group When editing a member inside a group, use `engine.block.exitGroup()` to return selection to the parent group. This method takes a member block ID and selects its parent group. ```typescript highlight=highlight-exit-group // Exit the group to return selection to the parent group engine.block.exitGroup(block2); console.log('Exited group, group is now selected'); ``` ## Find and Inspect Groups Discover groups in a scene and inspect their contents using `engine.block.findByType()`, `engine.block.getType()`, and `engine.block.getChildren()`. ```typescript highlight=highlight-find-groups // Find all groups in the scene const allGroups = engine.block.findByType('group'); console.log('Number of groups in scene:', allGroups.length); // Check the type of the group block const groupType = engine.block.getType(groupId); console.log('Group block type:', groupType); // Get the members of the group const members = engine.block.getChildren(groupId); console.log('Group has', members.length, 'members'); ``` Use `engine.block.findByType('group')` to get all group blocks in the current scene. Use `engine.block.getType()` to check if a specific block is a group (returns `'//ly.img.ubq/group'`). Use `engine.block.getChildren()` to get the member blocks of a group. ## Ungroup Blocks Use `engine.block.ungroup()` to dissolve a group and release its children back to the parent container. The children maintain their current positions in the scene. ```typescript highlight=highlight-ungroup // Ungroup the blocks to make them independent again engine.block.ungroup(groupId); console.log('Ungrouped blocks'); // Verify blocks are no longer in a group const groupsAfterUngroup = engine.block.findByType('group'); console.log('Groups after ungrouping:', groupsAfterUngroup.length); ``` ## Troubleshooting ### Blocks Cannot Be Grouped If `engine.block.isGroupable()` returns `false`: - Check if any of the blocks is a scene block (scenes cannot be grouped) - Check if any block is already part of a group (use `engine.block.getParent()` to verify) - Ensure all block IDs are valid ### Enter Group Has No Effect If `engine.block.enterGroup()` doesn't change selection: - Verify the block is a group using `engine.block.getType()` - Ensure the `'editor/select'` scope is enabled ### Group Not Visible After Creation If a newly created group is not visible: - Check that the member blocks were visible before grouping - Verify the group's opacity using `engine.block.getOpacity()` ## API Reference | Method | Description | | --- | --- | | `engine.block.isGroupable(ids)` | Check if blocks can be grouped together | | `engine.block.group(ids)` | Create a group from multiple blocks | | `engine.block.ungroup(id)` | Dissolve a group and release its children | | `engine.block.enterGroup(id)` | Enter group editing mode (select member) | | `engine.block.exitGroup(id)` | Exit group editing mode (select parent group) | | `engine.block.findByType(type)` | Find all blocks of a specific type | | `engine.block.getType(id)` | Get the type string of a block | | `engine.block.getParent(id)` | Get the parent block | | `engine.block.getChildren(id)` | Get child blocks of a container | ## Next Steps Explore related topics: - [Layer Management](https://img.ly/docs/cesdk/angular/create-composition/layer-management-18f07a/) - Control z-order and visibility of blocks - [Position and Align](https://img.ly/docs/cesdk/angular/insert-media/position-and-align-cc6b6a/) - Arrange blocks precisely on the canvas - [Lock Design](https://img.ly/docs/cesdk/angular/create-composition/lock-design-0a81de/) - Prevent modifications to specific elements --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Layer Management" description: "Organize design elements using a layer stack for precise control over stacking and visibility." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/layer-management-18f07a/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Layers](https://img.ly/docs/cesdk/angular/create-composition/layer-management-18f07a/) --- Organize design elements in CE.SDK using a hierarchical layer stack to control stacking order, visibility, and element relationships. ![Layer Management Hero](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-layer-management-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-layer-management-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-layer-management-browser/) Design elements in CE.SDK are organized in a hierarchical parent-child structure. Children of a block are rendered in order, with the last child appearing on top. This layer stack model gives you precise control over how elements overlap and interact visually. ```typescript file=@cesdk_web_examples/guides-create-composition-layer-management-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Layer Management Guide * * This example demonstrates: * - Navigating parent-child hierarchy * - Adding and positioning blocks in the layer stack * - Changing z-order (bring to front, send to back) * - Controlling visibility * - Duplicating and removing 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; // Create a colored rectangle const redRect = engine.block.create('graphic'); engine.block.setShape(redRect, engine.block.createShape('rect')); const redFill = engine.block.createFill('color'); engine.block.setFill(redRect, redFill); engine.block.setColor(redFill, 'fill/color/value', { r: 0.9, g: 0.2, b: 0.2, a: 1 }); engine.block.setWidth(redRect, 180); engine.block.setHeight(redRect, 180); engine.block.setPositionX(redRect, 220); engine.block.setPositionY(redRect, 120); // Create additional rectangles to demonstrate layer ordering const greenRect = engine.block.create('graphic'); engine.block.setShape(greenRect, engine.block.createShape('rect')); const greenFill = engine.block.createFill('color'); engine.block.setFill(greenRect, greenFill); engine.block.setColor(greenFill, 'fill/color/value', { r: 0.2, g: 0.8, b: 0.2, a: 1 }); engine.block.setWidth(greenRect, 180); engine.block.setHeight(greenRect, 180); engine.block.setPositionX(greenRect, 280); engine.block.setPositionY(greenRect, 180); const blueRect = engine.block.create('graphic'); engine.block.setShape(blueRect, engine.block.createShape('rect')); const blueFill = engine.block.createFill('color'); engine.block.setFill(blueRect, blueFill); engine.block.setColor(blueFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1 }); engine.block.setWidth(blueRect, 180); engine.block.setHeight(blueRect, 180); engine.block.setPositionX(blueRect, 340); engine.block.setPositionY(blueRect, 240); // Add blocks to the page - last appended is on top engine.block.appendChild(page, redRect); engine.block.appendChild(page, greenRect); engine.block.appendChild(page, blueRect); // Get the parent of a block const parent = engine.block.getParent(redRect); console.log('Parent of red rectangle:', parent); // Get all children of the page const children = engine.block.getChildren(page); console.log('Page children (in render order):', children); // Insert a new block at a specific position (index 0 = back) const yellowRect = engine.block.create('graphic'); engine.block.setShape(yellowRect, engine.block.createShape('rect')); const yellowFill = engine.block.createFill('color'); engine.block.setFill(yellowRect, yellowFill); engine.block.setColor(yellowFill, 'fill/color/value', { r: 0.95, g: 0.85, b: 0.2, a: 1 }); engine.block.setWidth(yellowRect, 180); engine.block.setHeight(yellowRect, 180); engine.block.setPositionX(yellowRect, 160); engine.block.setPositionY(yellowRect, 60); engine.block.insertChild(page, yellowRect, 0); // Bring the red rectangle to the front engine.block.bringToFront(redRect); console.log('Red rectangle brought to front'); // Send the blue rectangle to the back engine.block.sendToBack(blueRect); console.log('Blue rectangle sent to back'); // Move the green rectangle forward one layer engine.block.bringForward(greenRect); console.log('Green rectangle moved forward'); // Move the yellow rectangle backward one layer engine.block.sendBackward(yellowRect); console.log('Yellow rectangle moved backward'); // Check and toggle visibility const isVisible = engine.block.isVisible(blueRect); console.log('Blue rectangle visible:', isVisible); // Hide the blue rectangle temporarily engine.block.setVisible(blueRect, false); console.log('Blue rectangle hidden'); // Show it again for the final composition engine.block.setVisible(blueRect, true); console.log('Blue rectangle shown again'); // Duplicate a block const duplicateGreen = engine.block.duplicate(greenRect); engine.block.setPositionX(duplicateGreen, 400); engine.block.setPositionY(duplicateGreen, 300); // Change the duplicate's color to purple const purpleFill = engine.block.createFill('color'); engine.block.setFill(duplicateGreen, purpleFill); engine.block.setColor(purpleFill, 'fill/color/value', { r: 0.6, g: 0.2, b: 0.8, a: 1 }); console.log('Green rectangle duplicated'); // Check if a block is valid before operations const isValidBefore = engine.block.isValid(yellowRect); console.log('Yellow rectangle valid before destroy:', isValidBefore); // Remove a block from the scene engine.block.destroy(yellowRect); console.log('Yellow rectangle destroyed'); // Check validity after destruction const isValidAfter = engine.block.isValid(yellowRect); console.log('Yellow rectangle valid after destroy:', isValidAfter); await engine.scene.zoomToBlock(page, { padding: 40 }); } } export default Example; ``` This guide covers how to navigate the block hierarchy, reorder elements in the layer stack, toggle visibility, and manage block lifecycles through duplication and deletion. ## Creating Visual Blocks To demonstrate layer ordering, we create colored rectangles that overlap on the canvas. Each block is created using `engine.block.create()` and configured with a shape, fill color, dimensions, and position. ```typescript highlight=highlight-create-block // Create a colored rectangle const redRect = engine.block.create('graphic'); engine.block.setShape(redRect, engine.block.createShape('rect')); const redFill = engine.block.createFill('color'); engine.block.setFill(redRect, redFill); engine.block.setColor(redFill, 'fill/color/value', { r: 0.9, g: 0.2, b: 0.2, a: 1 }); engine.block.setWidth(redRect, 180); engine.block.setHeight(redRect, 180); engine.block.setPositionX(redRect, 220); engine.block.setPositionY(redRect, 120); ``` ## Navigating the Block Hierarchy CE.SDK organizes blocks in a parent-child tree structure. Every block can have one parent and multiple children. Understanding this hierarchy is essential for programmatic layer management. ### Getting a Block's Parent We retrieve the parent of any block using `engine.block.getParent()`. This returns the parent's block ID, or null if the block has no parent (such as the scene root). ```typescript highlight=highlight-get-parent // Get the parent of a block const parent = engine.block.getParent(redRect); console.log('Parent of red rectangle:', parent); ``` Knowing a block's parent helps you understand where it sits in the hierarchy and enables operations like reparenting or finding sibling blocks. ### Listing Child Blocks We get all direct children of a block using `engine.block.getChildren()`. Children are returned sorted in their rendering order, where the last child renders in front of other children. ```typescript highlight=highlight-get-children // Get all children of the page const children = engine.block.getChildren(page); console.log('Page children (in render order):', children); ``` This method is useful for iterating through all elements on a page or within a group. ## Adding and Positioning Blocks When you create a new block, it exists independently until you add it to the hierarchy. There are two ways to attach blocks to a parent: appending to the end or inserting at a specific position. ### Appending Blocks We add a block as the last child of a parent using `engine.block.appendChild()`. Since the last child renders on top, the appended block becomes the topmost element. ```typescript highlight=highlight-append-child // Add blocks to the page - last appended is on top engine.block.appendChild(page, redRect); engine.block.appendChild(page, greenRect); engine.block.appendChild(page, blueRect); ``` When you append multiple blocks in sequence, each new block appears in front of the previous ones. ### Inserting at a Specific Position We insert a block at a specific index in the layer stack using `engine.block.insertChild()`. Index 0 places the block at the back, behind all other children. ```typescript highlight=highlight-insert-child // Insert a new block at a specific position (index 0 = back) const yellowRect = engine.block.create('graphic'); engine.block.setShape(yellowRect, engine.block.createShape('rect')); const yellowFill = engine.block.createFill('color'); engine.block.setFill(yellowRect, yellowFill); engine.block.setColor(yellowFill, 'fill/color/value', { r: 0.95, g: 0.85, b: 0.2, a: 1 }); engine.block.setWidth(yellowRect, 180); engine.block.setHeight(yellowRect, 180); engine.block.setPositionX(yellowRect, 160); engine.block.setPositionY(yellowRect, 60); engine.block.insertChild(page, yellowRect, 0); ``` This gives you precise control over where new elements appear in the stacking order. ### Reparenting Blocks When you add a block to a new parent using `appendChild()` or `insertChild()`, it is automatically removed from its previous parent. This makes reparenting operations straightforward without needing to manually detach blocks first. ## Changing Z-Order Once blocks are in the hierarchy, you can change their stacking order without removing and re-adding them. CE.SDK provides four methods for z-order manipulation. ### Bring to Front We move an element to the top of its siblings using `engine.block.bringToFront()`. This gives the block the highest stacking order among its siblings. ```typescript highlight=highlight-bring-to-front // Bring the red rectangle to the front engine.block.bringToFront(redRect); console.log('Red rectangle brought to front'); ``` ### Send to Back We move an element behind all its siblings using `engine.block.sendToBack()`. This gives the block the lowest stacking order among its siblings. ```typescript highlight=highlight-send-to-back // Send the blue rectangle to the back engine.block.sendToBack(blueRect); console.log('Blue rectangle sent to back'); ``` ### Move Forward One Layer We move an element one position forward using `engine.block.bringForward()`. This swaps the block with its immediate sibling in front. ```typescript highlight=highlight-bring-forward // Move the green rectangle forward one layer engine.block.bringForward(greenRect); console.log('Green rectangle moved forward'); ``` ### Move Backward One Layer We move an element one position backward using `engine.block.sendBackward()`. This swaps the block with its immediate sibling behind. ```typescript highlight=highlight-send-backward // Move the yellow rectangle backward one layer engine.block.sendBackward(yellowRect); console.log('Yellow rectangle moved backward'); ``` These incremental operations are useful for fine-tuning the layer order without jumping to extremes. ## Controlling Visibility Visibility allows you to temporarily hide elements without removing them from the scene. Hidden elements remain in the hierarchy and preserve their properties, but are not rendered. ### Checking and Toggling Visibility We query the current visibility state using `engine.block.isVisible()` and change it using `engine.block.setVisible()`. ```typescript highlight=highlight-visibility // Check and toggle visibility const isVisible = engine.block.isVisible(blueRect); console.log('Blue rectangle visible:', isVisible); // Hide the blue rectangle temporarily engine.block.setVisible(blueRect, false); console.log('Blue rectangle hidden'); // Show it again for the final composition engine.block.setVisible(blueRect, true); console.log('Blue rectangle shown again'); ``` Visibility is useful for creating before/after comparisons, hiding elements during editing, or implementing show/hide functionality in your application. ## Managing Block Lifecycle CE.SDK provides methods for duplicating blocks to create copies and destroying blocks to remove them permanently. ### Duplicating Blocks We create a copy of a block and all its children using `engine.block.duplicate()`. By default, the duplicate is attached to the same parent as the original. ```typescript highlight=highlight-duplicate // Duplicate a block const duplicateGreen = engine.block.duplicate(greenRect); engine.block.setPositionX(duplicateGreen, 400); engine.block.setPositionY(duplicateGreen, 300); // Change the duplicate's color to purple const purpleFill = engine.block.createFill('color'); engine.block.setFill(duplicateGreen, purpleFill); engine.block.setColor(purpleFill, 'fill/color/value', { r: 0.6, g: 0.2, b: 0.8, a: 1 }); console.log('Green rectangle duplicated'); ``` The duplicated block is positioned at the same location as the original. You typically want to reposition it to make it visible as a separate element. ### Checking Block Validity Before performing operations on a block, we can verify it still exists using `engine.block.isValid()`. A block becomes invalid after it has been destroyed. ```typescript highlight=highlight-is-valid // Check if a block is valid before operations const isValidBefore = engine.block.isValid(yellowRect); console.log('Yellow rectangle valid before destroy:', isValidBefore); ``` ### Removing Blocks We permanently remove a block and all its children from the scene using `engine.block.destroy()`. This operation cannot be undone programmatically. ```typescript highlight=highlight-destroy // Remove a block from the scene engine.block.destroy(yellowRect); console.log('Yellow rectangle destroyed'); // Check validity after destruction const isValidAfter = engine.block.isValid(yellowRect); console.log('Yellow rectangle valid after destroy:', isValidAfter); ``` After destruction, any references to the block become invalid. Attempting to use an invalid block ID will result in errors. ## Framing the Result After making layer changes, we zoom to fit the page in the viewport so the composition is clearly visible. ```typescript highlight=highlight-zoom await engine.scene.zoomToBlock(page, { padding: 40 }); ``` ## Troubleshooting **Block not visible after appendChild**: The block may be behind other elements. Use `engine.block.bringToFront()` or adjust the insert index to control stacking order. **getParent returns null**: The block is not attached to any parent. Use `engine.block.appendChild()` or `engine.block.insertChild()` to attach it to a page or container. **Changes not reflected**: The block handle may be invalid. Check with `engine.block.isValid()` before performing operations. **Z-order not updating**: Verify you're operating on the correct block ID and that the block is in the expected parent context. **Duplicate not appearing**: If `attachToParent` is set to false, the duplicate won't be attached automatically. Set it to true or manually attach the duplicate to a parent. ## API Reference | Method | Description | | --- | --- | | `engine.block.getParent(id)` | Get the parent block of a given block | | `engine.block.getChildren(id)` | Get all child blocks in rendering order | | `engine.block.appendChild(parent, child)` | Append a block as the last child | | `engine.block.insertChild(parent, child, index)` | Insert a block at a specific position | | `engine.block.bringToFront(id)` | Bring a block to the front of its siblings | | `engine.block.sendToBack(id)` | Send a block to the back of its siblings | | `engine.block.bringForward(id)` | Move a block one position forward | | `engine.block.sendBackward(id)` | Move a block one position backward | | `engine.block.isVisible(id)` | Check if a block is visible | | `engine.block.setVisible(id, visible)` | Set the visibility of a block | | `engine.block.duplicate(id, attachToParent?)` | Duplicate a block and its children | | `engine.block.destroy(id)` | Remove a block and its children | | `engine.block.isValid(id)` | Check if a block handle is valid | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Design a Layout" description: "Create structured compositions using scene layouts, positioning systems, and hierarchical block organization for collages, magazines, and multi-page documents." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/layout-b66311/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Design a Layout](https://img.ly/docs/cesdk/angular/create-composition/layout-b66311/) --- Create structured compositions using stack layouts that automatically arrange pages vertically or horizontally with consistent spacing. ![Design a Layout](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-layout-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-layout-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-layout-browser/) Stack layouts arrange pages automatically with consistent spacing. Vertical stacks arrange pages top-to-bottom, while horizontal stacks arrange them left-to-right. This eliminates manual positioning for compositions like photo collages, product catalogs, or social media carousels. ```typescript file=@cesdk_web_examples/guides-create-composition-layout-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Create a scene with vertical stack layout // Pages arrange top-to-bottom automatically engine.scene.create('VerticalStack'); // Get the stack container created with the scene const [stack] = engine.block.findByType('stack'); // Create two pages that will stack vertically const page1 = engine.block.create('page'); engine.block.setWidth(page1, 400); engine.block.setHeight(page1, 300); engine.block.appendChild(stack, page1); const page2 = engine.block.create('page'); engine.block.setWidth(page2, 400); engine.block.setHeight(page2, 300); engine.block.appendChild(stack, page2); // Configure spacing between stacked pages engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Add image content to page 1 const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const block1 = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.setPositionX(block1, 25); engine.block.setPositionY(block1, 25); engine.block.appendChild(page1, block1); // Add a colored rectangle to page 2 const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, 350); engine.block.setHeight(block2, 250); engine.block.setPositionX(block2, 25); engine.block.setPositionY(block2, 25); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.3, g: 0.6, b: 0.9, a: 1.0 }); engine.block.setFill(block2, fill2); engine.block.appendChild(page2, block2); // Switch to horizontal stack layout // Pages now arrange left-to-right engine.scene.setLayout('HorizontalStack'); // Verify the layout type const currentLayout = engine.scene.getLayout(); console.log('Current layout:', currentLayout); // Add a new page to the existing stack // The page automatically appears at the end const page3 = engine.block.create('page'); engine.block.setWidth(page3, 400); engine.block.setHeight(page3, 300); engine.block.appendChild(stack, page3); // Add content to the new page const block3 = engine.block.create('graphic'); const shape3 = engine.block.createShape('rect'); engine.block.setShape(block3, shape3); engine.block.setWidth(block3, 350); engine.block.setHeight(block3, 250); engine.block.setPositionX(block3, 25); engine.block.setPositionY(block3, 25); const fill3 = engine.block.createFill('color'); engine.block.setColor(fill3, 'fill/color/value', { r: 0.9, g: 0.5, b: 0.3, a: 1.0 }); engine.block.setFill(block3, fill3); engine.block.appendChild(page3, block3); // Reorder pages using insertChild // Move page3 to the first position engine.block.insertChild(stack, page3, 0); // Verify the new order const pageOrder = engine.block.getChildren(stack); console.log('Page order after reordering:', pageOrder); // Update spacing between stacked pages engine.block.setFloat(stack, 'stack/spacing', 40); // Verify the spacing value const updatedSpacing = engine.block.getFloat(stack, 'stack/spacing'); console.log('Updated spacing:', updatedSpacing); // Zoom to show all pages in the stack await engine.scene.zoomToBlock(stack, { padding: 50 }); } } export default Example; ``` This guide covers how to: - Create vertical and horizontal stack layouts - Add pages and blocks to stacks - Configure spacing between stacked pages - Reorder pages within a stack - Switch between stack and free layouts ## Create a Vertical Stack Layout Vertical stacks arrange pages from top to bottom. Create a scene with `VerticalStack` layout, then add pages to the stack container. ```typescript highlight=highlight-vertical-stack // Create a scene with vertical stack layout // Pages arrange top-to-bottom automatically engine.scene.create('VerticalStack'); // Get the stack container created with the scene const [stack] = engine.block.findByType('stack'); // Create two pages that will stack vertically const page1 = engine.block.create('page'); engine.block.setWidth(page1, 400); engine.block.setHeight(page1, 300); engine.block.appendChild(stack, page1); const page2 = engine.block.create('page'); engine.block.setWidth(page2, 400); engine.block.setHeight(page2, 300); engine.block.appendChild(stack, page2); // Configure spacing between stacked pages engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); ``` When you create a scene with `VerticalStack` layout, CE.SDK automatically creates a stack container. Pages added to this container are positioned vertically with the configured spacing. The `spacingInScreenspace` property ensures spacing remains consistent regardless of zoom level. ## Add Blocks to Pages Each page can contain multiple blocks. Create blocks with shapes and fills, position them within the page, then append them to the page. ```typescript highlight=highlight-add-blocks // Add image content to page 1 const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const block1 = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.setPositionX(block1, 25); engine.block.setPositionY(block1, 25); engine.block.appendChild(page1, block1); // Add a colored rectangle to page 2 const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, 350); engine.block.setHeight(block2, 250); engine.block.setPositionX(block2, 25); engine.block.setPositionY(block2, 25); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.3, g: 0.6, b: 0.9, a: 1.0 }); engine.block.setFill(block2, fill2); engine.block.appendChild(page2, block2); ``` Blocks require a shape and fill to be visible. Use `addImage()` for image content, or create graphic blocks with custom shapes and color fills. Position blocks within their parent page using `setPositionX()` and `setPositionY()`. ## Switch to Horizontal Layout Change the layout direction at any time using `setLayout()`. Horizontal stacks arrange pages left-to-right instead of top-to-bottom. ```typescript highlight=highlight-horizontal-stack // Switch to horizontal stack layout // Pages now arrange left-to-right engine.scene.setLayout('HorizontalStack'); // Verify the layout type const currentLayout = engine.scene.getLayout(); console.log('Current layout:', currentLayout); ``` Horizontal layouts work well for carousels, timelines, and horizontal galleries. Existing pages automatically reposition when you change the layout type. ## Add Pages to Existing Stacks Add new pages to an existing stack at any time. Pages automatically appear at the end of the stack with proper spacing. ```typescript highlight=highlight-add-page // Add a new page to the existing stack // The page automatically appears at the end const page3 = engine.block.create('page'); engine.block.setWidth(page3, 400); engine.block.setHeight(page3, 300); engine.block.appendChild(stack, page3); // Add content to the new page const block3 = engine.block.create('graphic'); const shape3 = engine.block.createShape('rect'); engine.block.setShape(block3, shape3); engine.block.setWidth(block3, 350); engine.block.setHeight(block3, 250); engine.block.setPositionX(block3, 25); engine.block.setPositionY(block3, 25); const fill3 = engine.block.createFill('color'); engine.block.setColor(fill3, 'fill/color/value', { r: 0.9, g: 0.5, b: 0.3, a: 1.0 }); engine.block.setFill(block3, fill3); engine.block.appendChild(page3, block3); ``` The stack container manages positioning automatically. You can add content to the new page before or after appending it to the stack. ## Reorder Pages Change page order using `insertChild()` to place a page at a specific index within the stack. ```typescript highlight=highlight-reorder // Reorder pages using insertChild // Move page3 to the first position engine.block.insertChild(stack, page3, 0); // Verify the new order const pageOrder = engine.block.getChildren(stack); console.log('Page order after reordering:', pageOrder); ``` Removing a page from its current position and reinserting it at index 0 moves it to the first position. All other pages shift to accommodate the change. ## Change Stack Spacing Adjust spacing between pages using the `stack/spacing` property on the stack block. ```typescript highlight=highlight-spacing // Update spacing between stacked pages engine.block.setFloat(stack, 'stack/spacing', 40); // Verify the spacing value const updatedSpacing = engine.block.getFloat(stack, 'stack/spacing'); console.log('Updated spacing:', updatedSpacing); ``` Spacing updates immediately and pages reposition automatically. Use `getFloat()` to verify the current spacing value. ## Switch to Free Layout For manual positioning, switch to `Free` layout. Pages keep their positions but stop auto-arranging. ```typescript // Check current layout type const layout = engine.scene.getLayout(); // Convert to free layout for manual positioning engine.scene.setLayout('Free'); // Now position pages manually const [page] = engine.block.findByType('page'); engine.block.setPositionX(page, 100); engine.block.setPositionY(page, 200); ``` Free layout gives full control over page positions. Use this when you need precise positioning that stack layouts cannot provide. ## Troubleshooting **Pages not arranging automatically** — Verify the scene layout type is `VerticalStack` or `HorizontalStack` using `getLayout()`. **Spacing not applying** — Check that you're setting spacing on the stack block, not the scene. Use `findByType('stack')` to get the stack container. **Pages overlapping** — Ensure pages are direct children of the stack container. Nested pages won't auto-arrange properly. **Can't position manually** — Stack layouts override manual positions. Switch to `Free` layout for manual control. **Wrong stacking order** — Child order determines position. Use `insertChild()` to move pages to specific positions. ## API Reference | Method | Description | |--------|-------------| | `engine.scene.create(layout)` | Create a scene with specified layout (`'Free'`, `'VerticalStack'`, `'HorizontalStack'`) | | `engine.scene.setLayout(layout)` | Change the layout type of the current scene | | `engine.scene.getLayout()` | Get the current layout type | | `engine.block.findByType('stack')` | Find the stack container block | | `engine.block.setFloat(id, 'stack/spacing', value)` | Set spacing between stacked pages | | `engine.block.getFloat(id, 'stack/spacing')` | Get current spacing value | | `engine.block.appendChild(parent, child)` | Add a page to the stack | | `engine.block.insertChild(parent, child, index)` | Insert a page at a specific position | | `engine.block.getChildren(id)` | Get child blocks in order | ## Next Steps - [Auto-resize](https://img.ly/docs/cesdk/angular/automation/auto-resize-4c2d58/) — Make blocks fit parent containers - [Manual Positioning](https://img.ly/docs/cesdk/angular/edit-image/transform/move-818dd9/) — Position blocks in free layouts - [Layer Hierarchies](https://img.ly/docs/cesdk/angular/create-composition/layer-management-18f07a/) — Organize blocks in hierarchical structures - [Create a Collage](https://img.ly/docs/cesdk/angular/create-composition/collage-f7d28d/) — Build photo collages with templates --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Lock Design" description: "Protect design elements from unwanted modifications using CE.SDK's scope-based permission system. Control which properties users can edit at both global and block levels." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/lock-design-0a81de/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Lock Design](https://img.ly/docs/cesdk/angular/create-composition/lock-design-0a81de/) --- Protect design elements from unwanted modifications using CE.SDK's scope-based permission system. ![Lock Design Hero](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-lock-design-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-lock-design-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-lock-design-browser/) CE.SDK uses a two-layer scope system to control editing permissions. Global scopes set defaults for the entire scene, while block-level scopes override when the global setting is `Defer`. This enables flexible permission models from fully locked to selectively editable designs. ```typescript file=@cesdk_web_examples/guides-create-composition-lock-design-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext, Scope } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; class LockDesign 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; // Create sample content to demonstrate different locking techniques const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Column 1: Fully Locked const caption1 = engine.block.create('text'); engine.block.setString(caption1, 'text/text', 'Fully Locked'); engine.block.setFloat(caption1, 'text/fontSize', 32); engine.block.setWidth(caption1, 220); engine.block.setHeight(caption1, 50); engine.block.setPositionX(caption1, 30); engine.block.setPositionY(caption1, 30); engine.block.appendChild(page, caption1); const imageBlock = await engine.block.addImage(imageUri, { x: 30, y: 100, size: { width: 220, height: 165 } }); engine.block.appendChild(page, imageBlock); // Column 2: Text Editing Only const caption2 = engine.block.create('text'); engine.block.setString(caption2, 'text/text', 'Text Editing'); engine.block.setFloat(caption2, 'text/fontSize', 32); engine.block.setWidth(caption2, 220); engine.block.setHeight(caption2, 50); engine.block.setPositionX(caption2, 290); engine.block.setPositionY(caption2, 30); engine.block.appendChild(page, caption2); const textBlock = engine.block.create('text'); engine.block.setString(textBlock, 'text/text', 'Edit Me'); engine.block.setFloat(textBlock, 'text/fontSize', 72); engine.block.setWidth(textBlock, 220); engine.block.setHeight(textBlock, 165); engine.block.setPositionX(textBlock, 290); engine.block.setPositionY(textBlock, 100); engine.block.appendChild(page, textBlock); // Column 3: Image Replace Only const caption3 = engine.block.create('text'); engine.block.setString(caption3, 'text/text', 'Image Replace'); engine.block.setFloat(caption3, 'text/fontSize', 32); engine.block.setWidth(caption3, 220); engine.block.setHeight(caption3, 50); engine.block.setPositionX(caption3, 550); engine.block.setPositionY(caption3, 30); engine.block.appendChild(page, caption3); const placeholderBlock = await engine.block.addImage(imageUri, { x: 550, y: 100, size: { width: 220, height: 165 } }); engine.block.appendChild(page, placeholderBlock); // Lock the entire design by setting all scopes to Deny const scopes = engine.editor.findAllScopes(); for (const scope of scopes) { engine.editor.setGlobalScope(scope, 'Deny'); } // Enable selection for specific blocks engine.editor.setGlobalScope('editor/select', 'Defer'); engine.block.setScopeEnabled(textBlock, 'editor/select', true); engine.block.setScopeEnabled(placeholderBlock, 'editor/select', true); // Enable text editing on the text block engine.editor.setGlobalScope('text/edit', 'Defer'); engine.editor.setGlobalScope('text/character', 'Defer'); engine.block.setScopeEnabled(textBlock, 'text/edit', true); engine.block.setScopeEnabled(textBlock, 'text/character', true); // Enable image replacement on the placeholder block engine.editor.setGlobalScope('fill/change', 'Defer'); engine.block.setScopeEnabled(placeholderBlock, 'fill/change', true); // Check if operations are permitted on blocks const canEditText = engine.block.isAllowedByScope(textBlock, 'text/edit'); const canMoveImage = engine.block.isAllowedByScope( imageBlock, 'layer/move' ); const canReplacePlaceholder = engine.block.isAllowedByScope( placeholderBlock, 'fill/change' ); console.log('Permission status:'); console.log('- Can edit text:', canEditText); // true console.log('- Can move locked image:', canMoveImage); // false console.log('- Can replace placeholder:', canReplacePlaceholder); // true // Discover all available scopes const allScopes: Scope[] = engine.editor.findAllScopes(); console.log('Available scopes:', allScopes); // Check global scope settings const textEditGlobal = engine.editor.getGlobalScope('text/edit'); const layerMoveGlobal = engine.editor.getGlobalScope('layer/move'); console.log('Global text/edit:', textEditGlobal); // 'Defer' console.log('Global layer/move:', layerMoveGlobal); // 'Deny' // Check block-level scope settings const textEditEnabled = engine.block.isScopeEnabled(textBlock, 'text/edit'); console.log('Text block text/edit enabled:', textEditEnabled); // true // Select the text block to demonstrate editability engine.block.select(textBlock); } } export default LockDesign; ``` This guide covers how to lock entire designs, selectively enable specific editing capabilities, and check permissions programmatically. ## Understanding the Scope Permission Model Scopes control what operations users can perform on design elements. CE.SDK combines global scope settings with block-level settings to determine the final permission. | Global Scope | Block Scope | Result | | ------------ | ----------- | --------- | | `Allow` | any | Permitted | | `Deny` | any | Blocked | | `Defer` | enabled | Permitted | | `Defer` | disabled | Blocked | Global scopes have three possible values: - **`Allow`**: The operation is always permitted, regardless of block-level settings - **`Deny`**: The operation is always blocked, regardless of block-level settings - **`Defer`**: The permission depends on the block-level scope setting Block-level scopes are binary: enabled or disabled. They only take effect when the global scope is set to `Defer`. ## Locking an Entire Design To lock all editing operations, iterate through all available scopes and set each to `Deny`. We use `engine.editor.findAllScopes()` to discover all scope names dynamically. ```typescript highlight=highlight-lock-entire-design // Lock the entire design by setting all scopes to Deny const scopes = engine.editor.findAllScopes(); for (const scope of scopes) { engine.editor.setGlobalScope(scope, 'Deny'); } ``` When all scopes are set to `Deny`, users cannot modify any aspect of the design. This includes selecting, moving, editing text, or changing any visual properties. ## Enabling Selection for Interactive Blocks Before users can interact with any block, you must enable the `editor/select` scope. Without selection, users cannot click on or access any blocks, even if other editing capabilities are enabled. ```typescript highlight=highlight-enable-selection // Enable selection for specific blocks engine.editor.setGlobalScope('editor/select', 'Defer'); engine.block.setScopeEnabled(textBlock, 'editor/select', true); engine.block.setScopeEnabled(placeholderBlock, 'editor/select', true); ``` Setting the global `editor/select` scope to `Defer` delegates the decision to each block. We then enable selection only on the specific blocks users should be able to interact with. ## Selective Locking Patterns Lock everything first, then selectively enable specific capabilities on chosen blocks. This pattern provides fine-grained control over what users can modify. ### Text-Only Editing To allow users to edit text content while protecting everything else, enable the `text/edit` scope. For text styling changes like font, size, and color, also enable `text/character`. ```typescript highlight=highlight-text-editing // Enable text editing on the text block engine.editor.setGlobalScope('text/edit', 'Defer'); engine.editor.setGlobalScope('text/character', 'Defer'); engine.block.setScopeEnabled(textBlock, 'text/edit', true); engine.block.setScopeEnabled(textBlock, 'text/character', true); ``` Users can now type new text content in the designated text block but cannot move, resize, or delete it. ### Image Replacement To allow users to swap images while protecting layout and position, enable the `fill/change` scope on placeholder blocks. ```typescript highlight=highlight-image-replacement // Enable image replacement on the placeholder block engine.editor.setGlobalScope('fill/change', 'Defer'); engine.block.setScopeEnabled(placeholderBlock, 'fill/change', true); ``` Users can replace the image content but the block's position, dimensions, and other properties remain locked. ## Checking Permissions Verify whether operations are permitted using `engine.block.isAllowedByScope()`. This method evaluates both global and block-level settings to return the effective permission state. ```typescript highlight=highlight-check-permissions // Check if operations are permitted on blocks const canEditText = engine.block.isAllowedByScope(textBlock, 'text/edit'); const canMoveImage = engine.block.isAllowedByScope( imageBlock, 'layer/move' ); const canReplacePlaceholder = engine.block.isAllowedByScope( placeholderBlock, 'fill/change' ); console.log('Permission status:'); console.log('- Can edit text:', canEditText); // true console.log('- Can move locked image:', canMoveImage); // false console.log('- Can replace placeholder:', canReplacePlaceholder); // true ``` The distinction between checking methods is: - `isAllowedByScope()` returns the **effective permission** after evaluating all scope levels - `isScopeEnabled()` returns only the **block-level setting** - `getGlobalScope()` returns only the **global setting** ## Discovering Available Scopes To work with scopes programmatically, you can discover all available scope names and check their current settings. ```typescript highlight=highlight-get-scopes // Discover all available scopes const allScopes: Scope[] = engine.editor.findAllScopes(); console.log('Available scopes:', allScopes); // Check global scope settings const textEditGlobal = engine.editor.getGlobalScope('text/edit'); const layerMoveGlobal = engine.editor.getGlobalScope('layer/move'); console.log('Global text/edit:', textEditGlobal); // 'Defer' console.log('Global layer/move:', layerMoveGlobal); // 'Deny' // Check block-level scope settings const textEditEnabled = engine.block.isScopeEnabled(textBlock, 'text/edit'); console.log('Text block text/edit enabled:', textEditEnabled); // true ``` ## Available Scopes Reference | Scope | Description | | ------------------------ | --------------------------------------- | | `layer/move` | Move block position | | `layer/resize` | Resize block dimensions | | `layer/rotate` | Rotate block | | `layer/flip` | Flip block horizontally or vertically | | `layer/crop` | Crop block content | | `layer/opacity` | Change block opacity | | `layer/blendMode` | Change blend mode | | `layer/visibility` | Toggle block visibility | | `layer/clipping` | Change clipping behavior | | `fill/change` | Change fill content | | `fill/changeType` | Change fill type | | `stroke/change` | Change stroke properties | | `shape/change` | Change shape type | | `text/edit` | Edit text content | | `text/character` | Change text styling (font, size, color) | | `appearance/adjustments` | Change color adjustments | | `appearance/filter` | Apply or change filters | | `appearance/effect` | Apply or change effects | | `appearance/blur` | Apply or change blur | | `appearance/shadow` | Apply or change shadows | | `appearance/animation` | Apply or change animations | | `lifecycle/destroy` | Delete the block | | `lifecycle/duplicate` | Duplicate the block | | `editor/add` | Add new blocks | | `editor/select` | Select blocks | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Multi-Page Layouts" description: "Create and manage multi-page designs in CE.SDK for documents like brochures, presentations, and catalogs with multiple pages in a single scene." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/multi-page-4d2b50/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Multi-Page Layouts](https://img.ly/docs/cesdk/angular/create-composition/multi-page-4d2b50/) --- Create multi-page designs in CE.SDK for brochures, presentations, catalogs, and other documents requiring multiple pages within a single scene. ![Multi-Page Layouts](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-multi-page-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-multi-page-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-multi-page-browser/) Multi-page layouts allow you to create documents with multiple artboards within a single scene. Each page operates as an independent canvas that can contain different content while sharing the same scene context. CE.SDK provides scene layout modes that automatically arrange pages vertically, horizontally, or in a free-form canvas. ```typescript file=@cesdk_web_examples/guides-create-composition-multi-page-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Multi-Page Layouts Guide * * This example demonstrates: * - Creating scenes with multiple pages * - Adding and configuring pages * - Scene layout types (HorizontalStack) * - Stack spacing between pages */ 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.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Create a scene with HorizontalStack layout engine.scene.create('HorizontalStack'); // Get the stack container const [stack] = engine.block.findByType('stack'); // Add spacing between pages (20 pixels in screen space) engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Create the first page const firstPage = engine.block.create('page'); engine.block.setWidth(firstPage, 800); engine.block.setHeight(firstPage, 600); engine.block.appendChild(stack, firstPage); // Add content to the first page const imageBlock1 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 300, height: 200 } } ); engine.block.setPositionX(imageBlock1, 250); engine.block.setPositionY(imageBlock1, 200); engine.block.appendChild(firstPage, imageBlock1); // Create a second page with different content const secondPage = engine.block.create('page'); engine.block.setWidth(secondPage, 800); engine.block.setHeight(secondPage, 600); engine.block.appendChild(stack, secondPage); // Add a different image to the second page const imageBlock2 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_2.jpg', { size: { width: 300, height: 200 } } ); engine.block.setPositionX(imageBlock2, 250); engine.block.setPositionY(imageBlock2, 200); engine.block.appendChild(secondPage, imageBlock2); engine.block.select(firstPage); engine.scene.enableZoomAutoFit(firstPage, 'Both'); } } export default Example; ``` This guide covers how to create multi-page scenes, add pages, and configure spacing between pages. ## Using the Built-in Page Management UI The CE.SDK editor provides built-in UI controls for managing pages. Users can interact with the page panel to add new pages, duplicate existing ones, reorder them with drag-and-drop, delete pages, and navigate between pages by clicking. The page panel displays thumbnails of all pages in the scene, making it easy to understand the document structure at a glance. When you click a page thumbnail, the viewport automatically zooms to that page. ## Creating Multi-Page Scenes Programmatically We can create scenes with multiple pages using the engine API. The scene acts as a container for pages, and each page can hold any number of content blocks. ### Creating a Scene with Pages We create a new scene using `engine.scene.create()` and specify the layout type. The layout type determines how pages are arranged in the viewport. After creating the scene, we get the stack container and create pages within it. ```typescript highlight=highlight-create-scene // Create a scene with HorizontalStack layout engine.scene.create('HorizontalStack'); // Get the stack container const [stack] = engine.block.findByType('stack'); // Add spacing between pages (20 pixels in screen space) engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Create the first page const firstPage = engine.block.create('page'); engine.block.setWidth(firstPage, 800); engine.block.setHeight(firstPage, 600); engine.block.appendChild(stack, firstPage); ``` The scene is created with a `HorizontalStack` layout, meaning pages are arranged side by side from left to right. We then create a page, set its dimensions, and append it to the stack container. ### Configuring Page Spacing We can add spacing between pages in a stack layout using the `stack/spacing` property. This creates visual separation between pages. ```typescript highlight=highlight-stack-spacing // Add spacing between pages (20 pixels in screen space) engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); ``` Setting `stack/spacingInScreenspace` to `true` means the spacing value is interpreted as screen pixels, maintaining consistent visual spacing regardless of zoom level. ### Adding More Pages To add additional pages, we create new page blocks, set their dimensions, and append them to the stack container. ```typescript highlight=highlight-add-page // Create a second page with different content const secondPage = engine.block.create('page'); engine.block.setWidth(secondPage, 800); engine.block.setHeight(secondPage, 600); engine.block.appendChild(stack, secondPage); // Add a different image to the second page const imageBlock2 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_2.jpg', { size: { width: 300, height: 200 } } ); engine.block.setPositionX(imageBlock2, 250); engine.block.setPositionY(imageBlock2, 200); engine.block.appendChild(secondPage, imageBlock2); ``` Each page can contain different content. Here we add different images to each page to demonstrate independent page content. ## Scene Layout Types CE.SDK supports different layout modes that control how pages are arranged on the canvas. You specify the layout type when creating the scene with `engine.scene.create()`. **Free Layout** is the default where pages can be positioned anywhere on the canvas. This provides complete control over page placement. **VerticalStack Layout** arranges pages automatically in a vertical stack from top to bottom. This is useful for scroll-based document previews. **HorizontalStack Layout** arranges pages side by side from left to right. This is useful for carousel-style presentations or side-by-side comparisons. ## Setting the Zoom Level We can control the viewport zoom level using `engine.scene.setZoomLevel()`. A value of 1.0 represents 100% zoom. ```typescript highlight=highlight-zoom engine.block.select(firstPage); engine.scene.enableZoomAutoFit(firstPage, 'Both'); ``` ## Troubleshooting **Page not visible after creation**: Ensure the page is attached to the stack with `appendChild()` and has valid dimensions set with `setWidth()` and `setHeight()`. **Cannot add content to page**: Verify you're appending blocks to the page block, not the scene directly. Content blocks should be children of pages. **Pages overlapping**: When using stack layouts, make sure pages are appended to the stack container (found via `findByType('stack')`), not directly to the scene. **Spacing not visible**: Check that `stack/spacing` is set to a positive value and that you're using a stack layout (HorizontalStack or VerticalStack). --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Combine and arrange multiple elements to create complex, multi-page, or layered design compositions." platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/overview-5b19c5/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Overview](https://img.ly/docs/cesdk/angular/create-composition/overview-5b19c5/) --- ## Exporting Compositions CE.SDK compositions can be exported in several formats: --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Programmatic Creation" description: "Documentation for Programmatic Creation" platform: angular url: "https://img.ly/docs/cesdk/angular/create-composition/programmatic-a688bf/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) > [Programmatic Creation](https://img.ly/docs/cesdk/angular/create-composition/programmatic-a688bf/) --- Build compositions entirely through code using CE.SDK's APIs for automation, batch processing, and custom interfaces. ![Programmatic Creation](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-programmatic-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-programmatic-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-programmatic-browser/) CE.SDK provides a complete API for building designs through code. Instead of relying on user interactions through the built-in UI, you can create scenes, add blocks like text, images, and shapes, and position them programmatically. This approach enables automation workflows, batch processing, server-side rendering, and integration with custom interfaces. ```typescript file=@cesdk_web_examples/guides-create-composition-programmatic-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Programmatic Creation Guide * * Demonstrates building compositions entirely through code: * - Creating scenes and pages with social media dimensions * - Setting page background colors * - Adding text blocks with mixed styling (bold, italic, colors) * - Adding line shapes as dividers * - Adding images * - Positioning and sizing blocks */ // Roboto typeface with all variants for mixed styling const ROBOTO_TYPEFACE = { name: 'Roboto', fonts: [ { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf', subFamily: 'Regular' }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf', subFamily: 'Bold', weight: 'bold' as const }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Italic.ttf', subFamily: 'Italic', style: 'italic' as const }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-BoldItalic.ttf', subFamily: 'Bold Italic', weight: 'bold' as const, style: 'italic' as const } ] }; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get()!; engine.block.setFloat(scene, 'scene/dpi', 300); const page = engine.block.findByType('page')[0]; // Set page background to light lavender color const backgroundFill = engine.block.createFill('color'); engine.block.setColor(backgroundFill, 'fill/color/value', { r: 0.94, g: 0.93, b: 0.98, a: 1.0 }); engine.block.setFill(page, backgroundFill); // Add main headline text with bold Roboto font const headline = engine.block.create('text'); engine.block.replaceText( headline, 'Integrate\nCreative Editing\ninto your App' ); engine.block.setFont( headline, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(headline, 'text/lineHeight', 0.78); // Make headline bold if (engine.block.canToggleBoldFont(headline)) { engine.block.toggleBoldFont(headline); } engine.block.setTextColor(headline, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); // Set fixed container size and enable automatic font sizing engine.block.setWidthMode(headline, 'Absolute'); engine.block.setHeightMode(headline, 'Absolute'); engine.block.setWidth(headline, 960); engine.block.setHeight(headline, 300); engine.block.setBool(headline, 'text/automaticFontSizeEnabled', true); engine.block.setPositionX(headline, 60); engine.block.setPositionY(headline, 80); engine.block.appendChild(page, headline); // Add tagline with mixed styling using range-based APIs // "in hours," (purple italic) + "not months." (black bold) const tagline = engine.block.create('text'); const taglineText = 'in hours,\nnot months.'; engine.block.replaceText(tagline, taglineText); // Set up Roboto typeface with all variants for mixed styling engine.block.setFont( tagline, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(tagline, 'text/lineHeight', 0.78); // Style "in hours," - purple and italic (characters 0-9) engine.block.setTextColor( tagline, { r: 0.2, g: 0.2, b: 0.8, a: 1.0 }, 0, 9 ); if (engine.block.canToggleItalicFont(tagline, 0, 9)) { engine.block.toggleItalicFont(tagline, 0, 9); } // Style "not months." - black and bold (characters 10-21) engine.block.setTextColor( tagline, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 10, 21 ); if (engine.block.canToggleBoldFont(tagline, 10, 21)) { engine.block.toggleBoldFont(tagline, 10, 21); } // Set fixed container size and enable automatic font sizing engine.block.setWidthMode(tagline, 'Absolute'); engine.block.setHeightMode(tagline, 'Absolute'); engine.block.setWidth(tagline, 960); engine.block.setHeight(tagline, 220); engine.block.setBool(tagline, 'text/automaticFontSizeEnabled', true); engine.block.setPositionX(tagline, 60); engine.block.setPositionY(tagline, 551); engine.block.appendChild(page, tagline); // Add CTA text "Start a Free Trial" with bold font const ctaTitle = engine.block.create('text'); engine.block.replaceText(ctaTitle, 'Start a Free Trial'); engine.block.setFont( ctaTitle, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(ctaTitle, 'text/fontSize', 80); engine.block.setFloat(ctaTitle, 'text/lineHeight', 1.0); if (engine.block.canToggleBoldFont(ctaTitle)) { engine.block.toggleBoldFont(ctaTitle); } engine.block.setTextColor(ctaTitle, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setWidthMode(ctaTitle, 'Absolute'); engine.block.setHeightMode(ctaTitle, 'Auto'); engine.block.setWidth(ctaTitle, 664.6); engine.block.setPositionX(ctaTitle, 64); engine.block.setPositionY(ctaTitle, 952); engine.block.appendChild(page, ctaTitle); // Add website URL with regular font const ctaUrl = engine.block.create('text'); engine.block.replaceText(ctaUrl, 'www.img.ly'); engine.block.setFont(ctaUrl, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE); engine.block.setFloat(ctaUrl, 'text/fontSize', 80); engine.block.setFloat(ctaUrl, 'text/lineHeight', 1.0); engine.block.setTextColor(ctaUrl, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setWidthMode(ctaUrl, 'Absolute'); engine.block.setHeightMode(ctaUrl, 'Auto'); engine.block.setWidth(ctaUrl, 664.6); engine.block.setPositionX(ctaUrl, 64); engine.block.setPositionY(ctaUrl, 1006); engine.block.appendChild(page, ctaUrl); // Add horizontal divider line const dividerLine = engine.block.create('graphic'); const lineShape = engine.block.createShape('line'); engine.block.setShape(dividerLine, lineShape); const lineFill = engine.block.createFill('color'); engine.block.setColor(lineFill, 'fill/color/value', { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setFill(dividerLine, lineFill); engine.block.setWidth(dividerLine, 418); engine.block.setHeight(dividerLine, 11.3); engine.block.setPositionX(dividerLine, 64); engine.block.setPositionY(dividerLine, 460); engine.block.appendChild(page, dividerLine); // Add IMG.LY logo image const logo = engine.block.create('graphic'); const logoShape = engine.block.createShape('rect'); engine.block.setShape(logo, logoShape); const logoFill = engine.block.createFill('image'); engine.block.setString( logoFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logo, logoFill); engine.block.setContentFillMode(logo, 'Contain'); engine.block.setWidth(logo, 200); engine.block.setHeight(logo, 65); engine.block.setPositionX(logo, 820); engine.block.setPositionY(logo, 960); engine.block.appendChild(page, logo); // Export the composition to PNG const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1080, targetHeight: 1080 }); // In browser, create a download link const url = URL.createObjectURL(blob); console.log('Export complete. Download URL:', url); // Zoom to show the page await cesdk.actions.run('zoom.toPage', { autoFit: true }); } } export default Example; ``` This guide covers how to create a scene structure with social media dimensions, set background colors, add text with mixed styling, line shapes, images, and export the finished composition. ## Initialize CE.SDK We start by initializing CE.SDK and loading the asset sources. The asset source plugins (imported from `@cesdk/cesdk-js/plugins`) provide access to fonts, images, and other assets. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); ``` ## Create Scene Structure We create the foundation of our composition with social media dimensions (1080x1080 pixels for Instagram). A scene contains one or more pages, and pages contain the design blocks. ```typescript highlight=highlight-create-scene await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get()!; ``` The `cesdk.actions.run('scene.create')` method creates a new design scene with a page. We set the page dimensions using `setWidth()` and `setHeight()`. ## Set Page Background We set the page background using a color fill. This demonstrates how to create and assign fills to blocks. ```typescript highlight=highlight-add-background // Set page background to light lavender color const backgroundFill = engine.block.createFill('color'); engine.block.setColor(backgroundFill, 'fill/color/value', { r: 0.94, g: 0.93, b: 0.98, a: 1.0 }); engine.block.setFill(page, backgroundFill); ``` We create a color fill using `createFill('color')`, set the color via `setColor()` with the `fill/color/value` property, then assign the fill to the page. ## Add Text Blocks Text blocks allow you to add and style text content. We demonstrate three different approaches to text sizing and styling. ### Create Text and Set Content Create a text block and set its content with `replaceText()`: ```typescript highlight=highlight-text-create // Add main headline text with bold Roboto font const headline = engine.block.create('text'); engine.block.replaceText( headline, 'Integrate\nCreative Editing\ninto your App' ); engine.block.setFont( headline, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(headline, 'text/lineHeight', 0.78); ``` ### Style Entire Text Block Apply styling to the entire text block using `toggleBoldFont()` and `setTextColor()`: ```typescript highlight=highlight-text-style-block // Make headline bold if (engine.block.canToggleBoldFont(headline)) { engine.block.toggleBoldFont(headline); } engine.block.setTextColor(headline, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); ``` ### Enable Automatic Font Sizing Configure the text block to automatically scale its font size to fit within fixed dimensions: ```typescript highlight=highlight-text-auto-size // Set fixed container size and enable automatic font sizing engine.block.setWidthMode(headline, 'Absolute'); engine.block.setHeightMode(headline, 'Absolute'); engine.block.setWidth(headline, 960); engine.block.setHeight(headline, 300); engine.block.setBool(headline, 'text/automaticFontSizeEnabled', true); ``` ### Range-based Text Styling Apply different styles to specific character ranges within a single text block: ```typescript highlight=highlight-text-range-style // Style "in hours," - purple and italic (characters 0-9) engine.block.setTextColor( tagline, { r: 0.2, g: 0.2, b: 0.8, a: 1.0 }, 0, 9 ); if (engine.block.canToggleItalicFont(tagline, 0, 9)) { engine.block.toggleItalicFont(tagline, 0, 9); } // Style "not months." - black and bold (characters 10-21) engine.block.setTextColor( tagline, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 10, 21 ); if (engine.block.canToggleBoldFont(tagline, 10, 21)) { engine.block.toggleBoldFont(tagline, 10, 21); } ``` The range-based APIs accept start and end character indices: - `setTextColor(id, color, from, to)` - Apply color to a specific character range - `toggleBoldFont(id, from, to)` - Toggle bold styling for a range - `toggleItalicFont(id, from, to)` - Toggle italic styling for a range ### Fixed Font Size Set an explicit font size instead of using auto-sizing: ```typescript highlight=highlight-text-fixed-size // Add CTA text "Start a Free Trial" with bold font const ctaTitle = engine.block.create('text'); engine.block.replaceText(ctaTitle, 'Start a Free Trial'); engine.block.setFont( ctaTitle, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(ctaTitle, 'text/fontSize', 80); engine.block.setFloat(ctaTitle, 'text/lineHeight', 1.0); ``` ## Add Shapes We create shapes using graphic blocks. CE.SDK supports `rect`, `line`, `ellipse`, `polygon`, `star`, and `vector_path` shapes. ### Create a Shape Block Create a graphic block and assign a shape to it: ```typescript highlight=highlight-shape-create // Add horizontal divider line const dividerLine = engine.block.create('graphic'); const lineShape = engine.block.createShape('line'); engine.block.setShape(dividerLine, lineShape); ``` ### Apply Fill to Shape Create a color fill and apply it to the shape: ```typescript highlight=highlight-shape-fill const lineFill = engine.block.createFill('color'); engine.block.setColor(lineFill, 'fill/color/value', { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setFill(dividerLine, lineFill); ``` ## Add Images We add images using graphic blocks with image fills. ### Create an Image Block Create a graphic block with a rect shape and an image fill: ```typescript highlight=highlight-image-create // Add IMG.LY logo image const logo = engine.block.create('graphic'); const logoShape = engine.block.createShape('rect'); engine.block.setShape(logo, logoShape); const logoFill = engine.block.createFill('image'); engine.block.setString( logoFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logo, logoFill); ``` We set the image URL via `setString()` with the `fill/image/imageFileURI` property. ## Position and Size Blocks All blocks use the same positioning and sizing APIs: ```typescript highlight=highlight-block-position engine.block.setContentFillMode(logo, 'Contain'); engine.block.setWidth(logo, 200); engine.block.setHeight(logo, 65); engine.block.setPositionX(logo, 820); engine.block.setPositionY(logo, 960); engine.block.appendChild(page, logo); ``` - `setWidth()` / `setHeight()` - Set block dimensions - `setPositionX()` / `setPositionY()` - Set block position - `setContentFillMode()` - Control how content fills the block (`Contain`, `Cover`, `Crop`) - `appendChild()` - Add the block to the page hierarchy ## Export the Composition CE.SDK provides two approaches for exporting compositions in browser environments. ### Export Using the Engine API The `engine.block.export()` method exports a block as a blob that you can use programmatically: ```typescript highlight=highlight-export-api // Export the composition to PNG const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1080, targetHeight: 1080 }); // In browser, create a download link const url = URL.createObjectURL(blob); console.log('Export complete. Download URL:', url); ``` In browser environments, you can create a download URL from the blob using `URL.createObjectURL()`. ### Export Using Built-in Actions Alternatively, use the built-in export panel or actions for a complete export dialog: ```typescript await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); ``` The export panel lets users choose format and settings interactively, while `cesdk.actions.run('export.page', options)` triggers export directly with specified options. ## Troubleshooting - **Blocks not appearing**: Verify that `appendChild()` attaches blocks to the page. Blocks must be part of the scene hierarchy to render. - **Text styling not applied**: Verify character indices are correct for range-based APIs. The indices are UTF-16 based. - **Image stretched**: Use `setContentFillMode(block, 'Contain')` to maintain the image's aspect ratio. - **Export fails**: Verify that page dimensions are set before export. The export requires valid dimensions. ## Next Steps - [Layer Management](https://img.ly/docs/cesdk/angular/create-composition/layer-management-18f07a/) - Control block stacking and organization - [Positioning and Alignment](https://img.ly/docs/cesdk/angular/insert-media/position-and-align-cc6b6a/) - Precise block placement - [Group and Ungroup](https://img.ly/docs/cesdk/angular/create-composition/group-and-ungroup-62565a/) - Group blocks for unified transforms - [Blend Modes](https://img.ly/docs/cesdk/angular/create-composition/blend-modes-ad3519/) - Control how blocks interact visually - [Export](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) - Export options and formats --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Templates" description: "Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates-3aef79/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/angular/create-templates/overview-4ebe30/) - Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK. - [Create From Scratch](https://img.ly/docs/cesdk/angular/create-templates/from-scratch-663cda/) - Build reusable design templates programmatically using CE.SDK's APIs. Create scenes, add text and graphic blocks, configure placeholders and variables, apply editing constraints, and save templates for reuse. - [Import Templates](https://img.ly/docs/cesdk/angular/create-templates/import-e50084/) - Load and import design templates into CE.SDK from URLs, archives, and serialized strings. - [Dynamic Content](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content-53fad7/) - Use variables and placeholders to inject dynamic data into templates at design or runtime. - [Lock the Template](https://img.ly/docs/cesdk/angular/create-templates/lock-131489/) - Restrict editing access to specific elements or properties in a template to enforce design rules. - [Edit or Remove Templates](https://img.ly/docs/cesdk/angular/create-templates/edit-or-remove-38a8be/) - Modify existing templates and manage template lifecycle by loading, editing, saving, and removing templates from asset sources. - [Add to Template Library](https://img.ly/docs/cesdk/angular/create-templates/add-to-template-library-8bfbc7/) - Save and organize templates in an asset source for users to browse and apply from the template library. - [Overview](https://img.ly/docs/cesdk/angular/use-templates/overview-ae74e1/) - Learn how to browse, apply, and dynamically populate templates in CE.SDK to streamline design workflows. - [Template Library](https://img.ly/docs/cesdk/angular/use-templates/library-b3c704/) - Learn how to provide a set of predefined templates in the CreativeEditor SDK. - [Apply a Template](https://img.ly/docs/cesdk/angular/use-templates/apply-template-35c73e/) - Learn how to apply template scenes via API in the CreativeEditor SDK. - [Generate From Template](https://img.ly/docs/cesdk/angular/use-templates/generate-334e15/) - Learn how to generate finished designs from templates by loading, populating variables, and exporting to images, PDFs, or videos. - [Replace Content](https://img.ly/docs/cesdk/angular/use-templates/replace-content-4c482b/) - Learn how to dynamically replace content within templates using CE.SDK's placeholder and variable systems. - [Use Templates Programmatically](https://img.ly/docs/cesdk/angular/use-templates/programmatic-9349f3/) - Work with templates programmatically through CE.SDK's engine APIs to load existing templates, build new templates from scratch, modify template structures, and populate templates with dynamic data for batch processing and automation. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Dynamic Content" description: "Use variables and placeholders to inject dynamic data into templates at design or runtime." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content-53fad7/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Insert Dynamic Content](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content-53fad7/) --- Dynamic content transforms static designs into flexible, data-driven templates. CE.SDK provides three complementary capabilities—text variables, placeholders, and editing constraints—that work together to enable personalization while maintaining design integrity. ![Dynamic Content example showing variables and placeholders](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-add-dynamic-content-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-add-dynamic-content-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-add-dynamic-content-browser/) ```typescript file=@cesdk_web_examples/guides-create-templates-add-dynamic-content-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Dynamic Content Overview * * Demonstrates the dynamic content capabilities in CE.SDK templates: * - Text Variables: Insert {{tokens}} that resolve to dynamic values * - Placeholders: Create drop zones for swappable images/videos * - Editing Constraints: Lock properties while allowing controlled changes */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Set editor role to Adopter for template usage engine.editor.setRole('Adopter'); const page = engine.block.findByType('page')[0]; // Content area: 480px wide, centered (left margin = 160px) const contentX = 160; const contentWidth = 480; // TEXT VARIABLES: Define variables for personalization engine.variable.setString('firstName', 'Jane'); engine.variable.setString('lastName', 'Doe'); engine.variable.setString('companyName', 'IMG.LY'); // Create heading with company variable const headingText = engine.block.create('text'); engine.block.replaceText( headingText, 'Welcome to {{companyName}}, {{firstName}} {{lastName}}.' ); engine.block.setWidth(headingText, contentWidth); engine.block.setHeightMode(headingText, 'Auto'); engine.block.setFloat(headingText, 'text/fontSize', 64); engine.block.setEnum(headingText, 'text/horizontalAlignment', 'Left'); engine.block.appendChild(page, headingText); engine.block.setPositionX(headingText, contentX); engine.block.setPositionY(headingText, 200); // Create description with bullet points const descriptionText = engine.block.create('text'); engine.block.replaceText( descriptionText, 'This example demonstrates dynamic templates.\n\n' + '• Text Variables — Personalize content with {{tokens}}\n' + '• Placeholders — Swappable images and media\n' + '• Editing Constraints — Protected brand elements' ); engine.block.setWidth(descriptionText, contentWidth); engine.block.setHeightMode(descriptionText, 'Auto'); engine.block.setFloat(descriptionText, 'text/fontSize', 44); engine.block.setEnum(descriptionText, 'text/horizontalAlignment', 'Left'); engine.block.appendChild(page, descriptionText); engine.block.setPositionX(descriptionText, contentX); engine.block.setPositionY(descriptionText, 300); // Discover all variables in the scene const allVariables = engine.variable.findAll(); console.log('Variables in scene:', allVariables); // PLACEHOLDERS: Create hero image as a swappable drop zone const heroImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: contentWidth, height: 140 } } ); engine.block.appendChild(page, heroImage); engine.block.setPositionX(heroImage, contentX); engine.block.setPositionY(heroImage, 40); // Enable placeholder behavior for the hero image if (engine.block.supportsPlaceholderBehavior(heroImage)) { engine.block.setPlaceholderBehaviorEnabled(heroImage, true); engine.block.setPlaceholderEnabled(heroImage, true); if (engine.block.supportsPlaceholderControls(heroImage)) { engine.block.setPlaceholderControlsOverlayEnabled(heroImage, true); engine.block.setPlaceholderControlsButtonEnabled(heroImage, true); } } // Find all placeholders in the scene const placeholders = engine.block.findAllPlaceholders(); console.log('Placeholders in scene:', placeholders.length); // EDITING CONSTRAINTS: Add logo that cannot be moved or selected const logo = await engine.block.addImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', { size: { width: 100, height: 25 } } ); engine.block.appendChild(page, logo); engine.block.setPositionX(logo, 350); engine.block.setPositionY(logo, 540); // Lock the logo: prevent moving, resizing, and selection engine.block.setScopeEnabled(logo, 'layer/move', false); engine.block.setScopeEnabled(logo, 'layer/resize', false); engine.block.setScopeEnabled(logo, 'editor/select', false); // Verify constraints are applied const canSelect = engine.block.isScopeEnabled(logo, 'editor/select'); const canMove = engine.block.isScopeEnabled(logo, 'layer/move'); console.log('Logo - canSelect:', canSelect, 'canMove:', canMove); // Zoom to fit the page with autoFit enabled await cesdk.actions.run('zoom.toBlock', page, { padding: 40, animate: false, autoFit: true }); console.log('Dynamic Content demo initialized.'); cesdk.engine.block.setSelected(page, false); } } export default Example; ``` This guide covers how to use dynamic content capabilities in CE.SDK templates. The example creates a social media card with personalized name and company variables, a replaceable hero image, and a protected logo. ## Dynamic Content Capabilities CE.SDK offers three ways to make templates dynamic: - **Text Variables** — Insert `{{tokens}}` in text that resolve to dynamic values at runtime - **Placeholders** — Mark blocks as drop zones where users can swap images or videos - **Editing Constraints** — Lock specific properties to protect brand elements while allowing controlled changes ## Text Variables Text variables enable data-driven text personalization. Define variables using `engine.variable.setString()`, then reference them in text blocks with `{{variableName}}` tokens. ```typescript highlight-text-variables engine.variable.setString('firstName', 'Jane'); engine.variable.setString('lastName', 'Doe'); engine.variable.setString('companyName', 'IMG.LY'); // Create heading with company variable const headingText = engine.block.create('text'); engine.block.replaceText( headingText, 'Welcome to {{companyName}}, {{firstName}} {{lastName}}.' ); ``` Variables are defined globally and can be referenced in any text block. The `findAll()` method returns all variable keys in the scene, useful for building dynamic editing interfaces. > **Note:** Variable keys are case-sensitive. `{{Name}}` and `{{name}}` are different variables. ## Placeholders Placeholders turn design blocks into drop zones for swappable media. Mark an image block as a placeholder, and users can replace its content while the surrounding design remains fixed. ```typescript highlight-placeholders // Enable placeholder behavior for the hero image if (engine.block.supportsPlaceholderBehavior(heroImage)) { engine.block.setPlaceholderBehaviorEnabled(heroImage, true); engine.block.setPlaceholderEnabled(heroImage, true); if (engine.block.supportsPlaceholderControls(heroImage)) { engine.block.setPlaceholderControlsOverlayEnabled(heroImage, true); engine.block.setPlaceholderControlsButtonEnabled(heroImage, true); } } ``` Enable placeholder behavior with `setPlaceholderBehaviorEnabled()`, then enable user interaction with `setPlaceholderEnabled()`. The visual overlay and replace button are controlled separately via `setPlaceholderControlsOverlayEnabled()` and `setPlaceholderControlsButtonEnabled()`. ## Editing Constraints Editing constraints protect design integrity by limiting what users can modify. Use scope-based APIs to lock specific properties while keeping others editable. ```typescript highlight-editing-constraints // Lock the logo: prevent moving, resizing, and selection engine.block.setScopeEnabled(logo, 'layer/move', false); engine.block.setScopeEnabled(logo, 'layer/resize', false); engine.block.setScopeEnabled(logo, 'editor/select', false); // Verify constraints are applied const canSelect = engine.block.isScopeEnabled(logo, 'editor/select'); const canMove = engine.block.isScopeEnabled(logo, 'layer/move'); console.log('Logo - canSelect:', canSelect, 'canMove:', canMove); ``` The `setScopeEnabled()` method controls individual properties. Setting `'editor/select'` to `false` prevents users from selecting the block entirely, making it completely non-interactive. Combined with `'layer/move'` and `'layer/resize'`, this creates a fully protected element. ## Choosing the Right Capability | Need | Capability | | --- | --- | | Dynamic text content | Text Variables | | Swappable images/videos | Placeholders | | Lock specific properties | Editing Constraints | ## API Reference | Method | Description | | --- | --- | | `engine.editor.setRole()` | Set user role (Creator, Adopter, Viewer) | | `engine.variable.findAll()` | Get all variable keys in the scene | | `engine.variable.setString()` | Create or update a text variable | | `engine.variable.getString()` | Read a variable's current value | | `engine.block.supportsPlaceholderBehavior()` | Check placeholder support | | `engine.block.setPlaceholderBehaviorEnabled()` | Enable placeholder behavior | | `engine.block.setPlaceholderEnabled()` | Enable user interaction | | `engine.block.findAllPlaceholders()` | Find all placeholder blocks | | `engine.block.setScopeEnabled()` | Enable or disable editing scope | | `engine.block.isScopeEnabled()` | Query scope state | --- ## Related Pages - [Text Variables](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/) - Define dynamic text elements that can be populated with custom values during design generation. - [Placeholders](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/placeholders-d9ba8a/) - Use placeholders to mark editable image, video, or text areas within a locked template layout. - [Set Editing Constraints](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/set-editing-constraints-c892c0/) - Learn how to control editing capabilities in CE.SDK templates using the Scope system to lock positions, prevent transformations, and create guided editing experiences --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Placeholders" description: "Use placeholders to mark editable image, video, or text areas within a locked template layout." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/placeholders-d9ba8a/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Insert Dynamic Content](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content-53fad7/) > [Placeholders](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/placeholders-d9ba8a/) --- 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](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-placeholders-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-dynamic-content-placeholders-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-dynamic-content-placeholders-browser/) ```typescript file=@cesdk_web_examples/guides-create-templates-dynamic-content-placeholders-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 1200, height: 800, unit: 'Pixel' } }); 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 = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // 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 = { baseURL: import.meta.env.VITE_IMGLY_LOCAL_ASSETS_URL, 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 Placeholders convert design blocks into interactive drop-zones where users can swap content while maintaining layout and styling control. ### 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 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 Before enabling placeholder features, check if a block supports them: ```typescript highlight-check-support // 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); ``` 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 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, placeholder behavior must be enabled on the **fill**, not the block itself: ```typescript highlight-enable-behavior // 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, 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 Placeholder behavior alone isn't enough - blocks must also be enabled for interaction in Adopter mode: ```typescript highlight-enable-adopter-mode // Step 3: Enable placeholder behavior ("Act as a placeholder") // This makes the block interactive in Adopter mode engine.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 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 Placeholders can display visual indicators to guide users through the replacement workflow. ### 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: ```typescript highlight-full-configuration // 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); } ``` 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 Visual controls can also be managed independently if needed: **Overlay Pattern** - The overlay shows a dotted surface indicating a drop-zone: ```typescript highlight-enable-overlay // Enable placeholder overlay pattern if (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true); } ``` **Replace Button** - The button provides a single-tap entry point for touch devices: ```typescript highlight-enable-button // Enable placeholder button if (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 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 When creating templates with multiple placeholders, apply settings systematically: ```typescript highlight-batch-operation // 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); } }); ``` This pattern works well for collage templates, product showcases, or any layout requiring multiple content slots. ## 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 - [Lock the Template](https://img.ly/docs/cesdk/angular/create-templates/lock-131489/) - Restrict editing access to specific elements or properties to enforce design rules - [Text Variables](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/) - Define dynamic text elements that can be populated with custom values --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Set Editing Constraints" description: "Learn how to control editing capabilities in CE.SDK templates using the Scope system to lock positions, prevent transformations, and create guided editing experiences" platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/set-editing-constraints-c892c0/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Insert Dynamic Content](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content-53fad7/) > [Set Editing Constraints](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/set-editing-constraints-c892c0/) --- 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](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-set-editing-constraints-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-dynamic-content-set-editing-constraints-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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. ```typescript file=@cesdk_web_examples/guides-create-templates-dynamic-content-set-editing-constraints-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene await cesdk.actions.run('scene.create', { page: { width: 1200, height: 600, unit: 'Pixel' } }); 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 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 freedom 2. "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/edit 4. "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 ### 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 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 ### 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': ```typescript highlight=highlight-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) ``` 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 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 ### Locking Position Prevent users from moving or repositioning a block while allowing other edits: ```typescript highlight=highlight-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 ``` 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 Protect blocks from being deleted or duplicated: ```typescript highlight=highlight-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 ``` 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 Query the current state of any scope for a block: ```typescript highlight=highlight-block-level-scope-check // 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 ``` 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 Check the effective permission considering both block and global settings: ```typescript // 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 | 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Variables" description: "Define dynamic text elements that can be populated with custom values during design generation." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Insert Dynamic Content](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content-53fad7/) > [Text Variables](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/) --- 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](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-text-variables-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-dynamic-content-text-variables-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-dynamic-content-text-variables-browser/) ```typescript file=@cesdk_web_examples/guides-create-templates-dynamic-content-text-variables-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; 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'] // Build a custom Variables Manager panel // CE.SDK doesn't include a built-in UI for creating/managing variables, // so you can build one using the Panel Builder API cesdk.ui.registerPanel( 'ly.img.variablesManager', ({ builder, engine: panelEngine, state }) => { const { Section, TextInput, Button } = builder; // State for creating new variables const newVariableName = state('newVariableName', ''); const newVariableValue = state('newVariableValue', ''); // Section: Create New Variable Section('create-variable', { title: 'Create New Variable', children: () => { TextInput('new-name', { inputLabel: 'Variable Name', ...newVariableName }); TextInput('new-value', { inputLabel: 'Default Value', ...newVariableValue }); Button('create-btn', { label: 'Create Variable', color: 'accent', isDisabled: !newVariableName.value.trim(), onClick: () => { const name = newVariableName.value.trim(); if (name) { panelEngine.variable.setString(name, newVariableValue.value); newVariableName.setValue(''); newVariableValue.setValue(''); } } }); } }); // Section: Existing Variables const variables = panelEngine.variable.findAll(); Section('existing-variables', { title: `Manage Variables (${variables.length})`, children: () => { if (variables.length === 0) { builder.Text('no-vars', { content: 'No variables defined yet.' }); return; } variables.forEach(varName => { TextInput(`var-${varName}`, { inputLabel: varName, value: panelEngine.variable.getString(varName), setValue: value => { panelEngine.variable.setString(varName, value); }, suffix: { icon: '@imgly/TrashBin', tooltip: 'Delete variable', onClick: () => { panelEngine.variable.remove(varName); } } }); }); } }); } ); // Set the panel title cesdk.i18n.setTranslations({ en: { 'panel.ly.img.variablesManager': 'Custom Variables Panel' } }); // Add a dock button to open the panel cesdk.ui.registerComponent('variablesManager.dock', ({ builder: b }) => { const isPanelOpen = cesdk.ui.isPanelOpen('ly.img.variablesManager'); b.Button('variables-dock-btn', { label: 'Variables', icon: '@imgly/Text', onClick: () => { if (isPanelOpen) { cesdk.ui.closePanel('ly.img.variablesManager'); } else { cesdk.ui.openPanel('ly.img.variablesManager'); } }, isActive: isPanelOpen }); }); // Add button to dock cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', 'variablesManager.dock' ]); } } 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 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 Insert Variable UI CE.SDK includes an *Insert Variable* dropdown in the text editing canvas menu that allows template authors to insert variable tokens into text blocks. > **Caution:** The Insert Variable dropdown **only appears when at least one variable is > already defined** in the scene. If no variables exist, the dropdown will not > be visible. You must first create variables programmatically using > `engine.variable.setString()` before the UI becomes available. To use the Insert Variable UI: 1. **Define variables** using `engine.variable.setString()` — the dropdown won't appear without this step 2. **Enter text edit mode** by double-clicking a text block 3. **Click the Insert Variable dropdown** in the canvas menu (or press `Ctrl+Shift+L` / `Cmd+Shift+L`) The dropdown allows you to: - **Insert tokens** into text blocks using `{{variableName}}` syntax - **Select from all defined variables** in the current scene Variables appear with localized labels when you configure translations through the i18n API. > **Note:** CE.SDK does not include a built-in UI for end users to *create* or *manage* > variables — the Insert Variable dropdown only lets users insert existing > variables into text. If you need a UI for creating and editing variables, see > [Building a Variables Manager Panel](#building-a-variables-manager-panel) > below. ## Discovering Variables When working with templates that already contain variables, discover what variables exist before populating them with values. ```typescript highlight-discover-variables // 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); // [] ``` 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 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. ```typescript highlight-create-update-variables // 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'); ``` > **Note:** Variable keys are case-sensitive. `{{ Name }}` and `{{ name }}` are different > variables. ## 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. ```typescript highlight-read-variable-value // 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' ``` ## 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 ```typescript highlight-single-variable-binding // 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 Combine multiple variables in a single text block: ```typescript highlight-multiple-variable-binding // 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 Check if a block contains variable references using `referencesAnyVariables()`. This returns `true` if the block's text contains any `{{variable}}` tokens. ```typescript highlight-detect-variable-references // 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 ``` This is useful for identifying which blocks need variable values before export or for implementing validation logic. ## Removing Variables Remove unused variables from the scene with `remove()`. This cleans up the variable store when certain variables are no longer needed. ```typescript highlight-remove-variable // 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()); ``` 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 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. ```typescript highlight-localize-variables // 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' } }); ``` Without localization, the Insert Variable dropdown shows the technical variable key (e.g., `firstName`). With localization, it shows the friendly label (e.g., "First Name"). ## Combining with Other Features Text variables work seamlessly with other CE.SDK template features: ### 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 Lock layout elements while allowing only variable token editing. This ensures brand consistency while enabling content personalization. ### With Role-Based Editing Show the Insert Variable dropdown only to template authors (Creator role) and hide it from end users (Adopter role). This guides the editing experience based on user permissions. ## Building a Variables Manager Panel CE.SDK's built-in Insert Variable dropdown only allows users to insert existing variables — it doesn't provide a UI for creating or managing variables. If you want end users to create, edit, and delete variables through the editor interface, you can build a custom panel using the Panel Builder API. The following example creates a Variables Manager panel with: - A form to create new variables with a name and default value - A list of existing variables with editable values and delete buttons - A dock button to toggle the panel ```typescript highlight-variables-manager-panel // Build a custom Variables Manager panel // CE.SDK doesn't include a built-in UI for creating/managing variables, // so you can build one using the Panel Builder API cesdk.ui.registerPanel( 'ly.img.variablesManager', ({ builder, engine: panelEngine, state }) => { const { Section, TextInput, Button } = builder; // State for creating new variables const newVariableName = state('newVariableName', ''); const newVariableValue = state('newVariableValue', ''); // Section: Create New Variable Section('create-variable', { title: 'Create New Variable', children: () => { TextInput('new-name', { inputLabel: 'Variable Name', ...newVariableName }); TextInput('new-value', { inputLabel: 'Default Value', ...newVariableValue }); Button('create-btn', { label: 'Create Variable', color: 'accent', isDisabled: !newVariableName.value.trim(), onClick: () => { const name = newVariableName.value.trim(); if (name) { panelEngine.variable.setString(name, newVariableValue.value); newVariableName.setValue(''); newVariableValue.setValue(''); } } }); } }); // Section: Existing Variables const variables = panelEngine.variable.findAll(); Section('existing-variables', { title: `Manage Variables (${variables.length})`, children: () => { if (variables.length === 0) { builder.Text('no-vars', { content: 'No variables defined yet.' }); return; } variables.forEach(varName => { TextInput(`var-${varName}`, { inputLabel: varName, value: panelEngine.variable.getString(varName), setValue: value => { panelEngine.variable.setString(varName, value); }, suffix: { icon: '@imgly/TrashBin', tooltip: 'Delete variable', onClick: () => { panelEngine.variable.remove(varName); } } }); }); } }); } ); // Set the panel title cesdk.i18n.setTranslations({ en: { 'panel.ly.img.variablesManager': 'Custom Variables Panel' } }); // Add a dock button to open the panel cesdk.ui.registerComponent('variablesManager.dock', ({ builder: b }) => { const isPanelOpen = cesdk.ui.isPanelOpen('ly.img.variablesManager'); b.Button('variables-dock-btn', { label: 'Variables', icon: '@imgly/Text', onClick: () => { if (isPanelOpen) { cesdk.ui.closePanel('ly.img.variablesManager'); } else { cesdk.ui.openPanel('ly.img.variablesManager'); } }, isActive: isPanelOpen }); }); // Add button to dock cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', 'variablesManager.dock' ]); ``` This panel integrates with the dock and provides a complete variable management experience. Users can create new variables, edit existing values, and remove variables they no longer need. > **Note:** For more information on building custom panels, see the > [Create a Custom Panel](https://img.ly/docs/cesdk/angular/user-interface/ui-extensions/create-custom-panel-d87b83/) guide. ## 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 | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add to Template Library" description: "Save and organize templates in an asset source for users to browse and apply from the template library." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/add-to-template-library-8bfbc7/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Add to Template Library](https://img.ly/docs/cesdk/angular/create-templates/add-to-template-library-8bfbc7/) --- Create a template library where users can browse, preview, and apply templates from a custom asset source. ![Add to Template Library](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-add-to-template-library-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-add-to-template-library-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-add-to-template-library-browser/) Templates in CE.SDK are stored and accessed through the asset system. A template library is a local asset source configured to hold and serve template assets, allowing users to browse thumbnails and apply templates to their designs. ```typescript file=@cesdk_web_examples/guides-create-templates-add-to-template-library-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add to Template Library * * This example demonstrates how to create a template library by: * 1. Creating a local asset source for templates * 2. Adding templates with metadata (label, thumbnail, URI) * 3. Configuring the UI to display the template library * 4. Saving scenes as 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'); } await cesdk.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Create a local asset source for templates engine.asset.addLocalSource('my-templates', undefined, async (asset) => { // Apply the selected template to the current scene await engine.scene.applyTemplateFromURL(asset.meta!.uri as string); // Set zoom to auto-fit after applying template await cesdk.actions.run('zoom.toPage', { autoFit: true }); return undefined; }); // Add a template to the source with metadata engine.asset.addAssetToSource('my-templates', { id: 'template-postcard', label: { en: 'Postcard' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg' } }); // Add more templates engine.asset.addAssetToSource('my-templates', { id: 'template-business-card', label: { en: 'Business Card' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_business_card_1.scene', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_business_card_1.jpg' } }); engine.asset.addAssetToSource('my-templates', { id: 'template-social-media', label: { en: 'Social Media Post' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_post_1.scene', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_instagram_post_1.jpg' } }); // Add translation for the library entry cesdk.i18n.setTranslations({ en: { 'libraries.my-templates-entry.label': 'My Templates' } }); // Add the template source to the asset library cesdk.ui.addAssetLibraryEntry({ id: 'my-templates-entry', sourceIds: ['my-templates'], previewLength: 3, previewBackgroundType: 'cover', gridBackgroundType: 'cover', gridColumns: 2, cardLabelPosition: () => 'below' }); // Add template library to the dock cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', { id: 'ly.img.assetLibrary.dock', key: 'my-templates-dock', label: 'My Templates', icon: '@imgly/Template', entries: ['my-templates-entry'] } ]); // Load the first template await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); // Set zoom to auto-fit await cesdk.actions.run('zoom.toPage', { autoFit: true }); // Open the template library panel by default cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['my-templates-entry'] } }); // Save as string format (lightweight, references remote assets) const templateString = await engine.scene.saveToString(); console.log('Template saved as string. Length:', templateString.length); // Save as archive format (self-contained with bundled assets) const templateBlob = await engine.scene.saveToArchive(); console.log('Template saved as archive. Size:', templateBlob.size, 'bytes'); // List all registered asset sources const sources = engine.asset.findAllSources(); console.log('Registered sources:', sources); // Notify UI when source contents change engine.asset.assetSourceContentsChanged('my-templates'); // Query templates from the source const queryResult = await engine.asset.findAssets('my-templates', { page: 0, perPage: 10 }); console.log('Templates in library:', queryResult.total); // Remove a template from the source engine.asset.removeAssetFromSource('my-templates', 'template-social-media'); console.log('Removed template-social-media from library'); cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.exportArchive.navigationBar' ] } ); } } export default Example; ``` This guide covers how to save scenes as templates, create a template asset source, and add templates with metadata. ## Saving Templates Scenes can be exported in two formats for use as templates. ### String Format Use `engine.scene.saveToString()` to serialize the scene to a base64 string. This lightweight format references remote assets by URL and is ideal for templates where assets are hosted on a CDN. ```typescript highlight=highlight-save-string // Save as string format (lightweight, references remote assets) const templateString = await engine.scene.saveToString(); console.log('Template saved as string. Length:', templateString.length); ``` ### Archive Format For self-contained templates that bundle all assets, use `engine.scene.saveToArchive()`. This returns a Blob containing all assets bundled together, making templates portable without external dependencies. ```typescript highlight=highlight-save-archive // Save as archive format (self-contained with bundled assets) const templateBlob = await engine.scene.saveToArchive(); console.log('Template saved as archive. Size:', templateBlob.size, 'bytes'); ``` ## Creating a Template Asset Source Register a local asset source using `engine.asset.addLocalSource()` with an ID and `applyAsset` callback. ```typescript highlight=highlight-create-source // Create a local asset source for templates engine.asset.addLocalSource('my-templates', undefined, async (asset) => { // Apply the selected template to the current scene await engine.scene.applyTemplateFromURL(asset.meta!.uri as string); // Set zoom to auto-fit after applying template await cesdk.actions.run('zoom.toPage', { autoFit: true }); return undefined; }); ``` The `applyAsset` callback receives the selected asset and determines how to apply it. We use `engine.scene.applyTemplateFromURL()` to load the template from the asset's `meta.uri` property. The template is applied to the current scene, adjusting content to fit the existing page dimensions. ## Adding Templates to the Source Register templates using `engine.asset.addAssetToSource()` with an asset definition that includes metadata for display and loading. ```typescript highlight=highlight-add-templates // Add a template to the source with metadata engine.asset.addAssetToSource('my-templates', { id: 'template-postcard', label: { en: 'Postcard' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg' } }); ``` Each template asset requires: - `id` - Unique identifier for the template - `label` - Localized display name shown in the template library - `meta.uri` - URL to the `.scene` file that will be loaded when the template is selected - `meta.thumbUri` - URL to a preview image displayed in the template library grid ## Managing Templates After the initial setup, you can manage templates programmatically. ```typescript highlight=highlight-manage-templates // List all registered asset sources const sources = engine.asset.findAllSources(); console.log('Registered sources:', sources); // Notify UI when source contents change engine.asset.assetSourceContentsChanged('my-templates'); // Query templates from the source const queryResult = await engine.asset.findAssets('my-templates', { page: 0, perPage: 10 }); console.log('Templates in library:', queryResult.total); // Remove a template from the source engine.asset.removeAssetFromSource('my-templates', 'template-social-media'); console.log('Removed template-social-media from library'); ``` Use `engine.asset.findAllSources()` to list registered sources. When you add or remove templates from a source, call `engine.asset.assetSourceContentsChanged()` to refresh the UI. To remove a template, use `engine.asset.removeAssetFromSource()`. ## Troubleshooting | Issue | Cause | Solution | |-------|-------|----------| | Templates not appearing in UI | Asset source not added to library entry | Ensure `sourceIds` includes the template source ID | | Template fails to load | Incorrect URI in asset meta | Verify the `uri` points to a valid `.scene` file | | Thumbnails not displaying | Missing or incorrect `thumbUri` | Check the thumbnail URL is accessible | | Apply callback not triggered | `applyAsset` not defined in `addLocalSource` | Provide the callback when creating the source | ## API Reference | Method | Description | | --- | --- | | `engine.asset.addLocalSource()` | Register a local asset source with an apply callback | | `engine.asset.addAssetToSource()` | Add an asset to a registered source | | `engine.asset.removeAssetFromSource()` | Remove an asset from a source by ID | | `engine.asset.assetSourceContentsChanged()` | Notify UI that source contents changed | | `engine.scene.saveToString()` | Serialize scene to base64 string format | | `engine.scene.saveToArchive()` | Save scene as self-contained archive blob | | `engine.scene.applyTemplateFromURL()` | Apply a template to the current scene | | `cesdk.ui.addAssetLibraryEntry()` | Add a library entry to the asset library | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit or Remove Templates" description: "Modify existing templates and manage template lifecycle by loading, editing, saving, and removing templates from asset sources." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/edit-or-remove-38a8be/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Edit or Remove Templates](https://img.ly/docs/cesdk/angular/create-templates/edit-or-remove-38a8be/) --- Modify existing templates and manage template lifecycle in your asset library using CE.SDK. ![Edit or Remove Templates example showing template management](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-edit-or-remove-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-edit-or-remove-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-edit-or-remove-browser/) Templates evolve as designs change. You might need to update branding, fix content errors, or remove outdated templates from your library. CE.SDK provides APIs for adding, editing, and removing templates from asset sources. ```typescript file=@cesdk_web_examples/guides-create-templates-edit-or-remove-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Edit or Remove Templates Guide * * Demonstrates template management workflows: * - Adding templates to local asset sources with thumbnails * - Editing template content and updating in asset sources * - Removing templates from asset sources * - Saving updated templates with new content */ // Helper function to generate SVG thumbnail with text label function generateThumbnail(label: string): string { const svg = ` ${label} `; return `data:image/svg+xml,${encodeURIComponent(svg)}`; } 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a local asset source for managing templates engine.asset.addLocalSource('my-templates', undefined, async (asset) => { const uri = asset.meta?.uri; if (!uri) return undefined; const base64Content = uri.split(',')[1]; if (!base64Content) return undefined; await engine.scene.loadFromString(base64Content); return engine.scene.get() ?? undefined; }); // Add the template source to the dock as an asset library entry cesdk.ui.addAssetLibraryEntry({ id: 'my-templates-entry', sourceIds: ['my-templates'], title: 'My Templates', icon: '@imgly/Template', gridColumns: 2, gridItemHeight: 'square' }); // Add a spacer to push "My Templates" to the bottom of the dock cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', { id: 'ly.img.assetLibrary.dock', key: 'my-templates', icon: '@imgly/Template', label: 'My Templates', entries: ['my-templates-entry'] } ]); // Create the template with text blocks const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Original Template'); engine.block.setFloat(titleBlock, 'text/fontSize', 64); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); const subtitleBlock = engine.block.create('text'); engine.block.replaceText( subtitleBlock, 'Browse "My Templates" at the bottom of the dock' ); engine.block.setFloat(subtitleBlock, 'text/fontSize', 42); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); // Position text blocks centered on the page const titleWidth = engine.block.getFrameWidth(titleBlock); const titleHeight = engine.block.getFrameHeight(titleBlock); engine.block.setPositionX(titleBlock, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleBlock, pageHeight / 2 - titleHeight - 20); const subtitleWidth = engine.block.getFrameWidth(subtitleBlock); engine.block.setPositionX(subtitleBlock, (pageWidth - subtitleWidth) / 2); engine.block.setPositionY(subtitleBlock, pageHeight / 2 + 20); // Save template content and add to asset source const originalContent = await engine.scene.saveToString(); engine.asset.addAssetToSource('my-templates', { id: 'template-original', label: { en: 'Original Template' }, meta: { uri: `data:application/octet-stream;base64,${originalContent}`, thumbUri: generateThumbnail('Original Template') } }); // eslint-disable-next-line no-console console.log('Original template added to asset source'); // Edit the template content and save as a new version engine.block.replaceText(titleBlock, 'Updated Template'); engine.block.replaceText( subtitleBlock, 'This template was edited and saved' ); const updatedContent = await engine.scene.saveToString(); engine.asset.addAssetToSource('my-templates', { id: 'template-updated', label: { en: 'Updated Template' }, meta: { uri: `data:application/octet-stream;base64,${updatedContent}`, thumbUri: generateThumbnail('Updated Template') } }); // Re-center after modification const newTitleWidth = engine.block.getFrameWidth(titleBlock); const newTitleHeight = engine.block.getFrameHeight(titleBlock); engine.block.setPositionX(titleBlock, (pageWidth - newTitleWidth) / 2); engine.block.setPositionY(titleBlock, pageHeight / 2 - newTitleHeight - 20); const newSubtitleWidth = engine.block.getFrameWidth(subtitleBlock); engine.block.setPositionX( subtitleBlock, (pageWidth - newSubtitleWidth) / 2 ); // eslint-disable-next-line no-console console.log('Updated template added to asset source'); // Add a temporary template to demonstrate removal engine.asset.addAssetToSource('my-templates', { id: 'template-temporary', label: { en: 'Temporary Template' }, meta: { uri: `data:application/octet-stream;base64,${originalContent}`, thumbUri: generateThumbnail('Temporary Template') } }); // Remove the temporary template from the asset source engine.asset.removeAssetFromSource('my-templates', 'template-temporary'); // eslint-disable-next-line no-console console.log('Temporary template removed from asset source'); // Update an existing template by removing and re-adding with same ID engine.block.replaceText(subtitleBlock, 'Updated again with new content'); const reUpdatedContent = await engine.scene.saveToString(); engine.asset.removeAssetFromSource('my-templates', 'template-updated'); engine.asset.addAssetToSource('my-templates', { id: 'template-updated', label: { en: 'Updated Template' }, meta: { uri: `data:application/octet-stream;base64,${reUpdatedContent}`, thumbUri: generateThumbnail('Updated Template') } }); // Notify that the asset source contents have changed engine.asset.assetSourceContentsChanged('my-templates'); // Re-center subtitle after final update const reUpdatedSubtitleWidth = engine.block.getFrameWidth(subtitleBlock); engine.block.setPositionX( subtitleBlock, (pageWidth - reUpdatedSubtitleWidth) / 2 ); // eslint-disable-next-line no-console console.log('Template updated in asset source'); // Apply the original template to show the starting point await engine.scene.loadFromString(originalContent); // eslint-disable-next-line no-console console.log( 'Original template applied - browse "My Templates" in the dock' ); } } export default Example; ``` This guide covers how to add templates to asset sources, edit template content, remove templates, and save updated versions. ## Adding Templates First, create a local asset source to store your templates: ```typescript highlight-create-source // Create a local asset source for managing templates engine.asset.addLocalSource('my-templates', undefined, async (asset) => { const uri = asset.meta?.uri; if (!uri) return undefined; const base64Content = uri.split(',')[1]; if (!base64Content) return undefined; await engine.scene.loadFromString(base64Content); return engine.scene.get() ?? undefined; }); ``` Next, create your template content using block APIs: ```typescript highlight-create-template // Create the template with text blocks const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Original Template'); engine.block.setFloat(titleBlock, 'text/fontSize', 64); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); const subtitleBlock = engine.block.create('text'); engine.block.replaceText( subtitleBlock, 'Browse "My Templates" at the bottom of the dock' ); engine.block.setFloat(subtitleBlock, 'text/fontSize', 42); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); ``` Then save the template and add it to the asset source using `addAssetToSource()`. Each template needs a unique ID, a label, and metadata containing the template URI and thumbnail: ```typescript highlight-add-to-source // Save template content and add to asset source const originalContent = await engine.scene.saveToString(); engine.asset.addAssetToSource('my-templates', { id: 'template-original', label: { en: 'Original Template' }, meta: { uri: `data:application/octet-stream;base64,${originalContent}`, thumbUri: generateThumbnail('Original Template') } }); ``` The `meta.uri` field contains the template content as a data URI. The `meta.thumbUri` provides a thumbnail image for display in the asset library. ## Editing Templates Modify template content using block APIs. You can update text, change images, adjust positions, and reconfigure any block properties. ```typescript highlight-modify-template // Edit the template content and save as a new version engine.block.replaceText(titleBlock, 'Updated Template'); engine.block.replaceText( subtitleBlock, 'This template was edited and saved' ); const updatedContent = await engine.scene.saveToString(); engine.asset.addAssetToSource('my-templates', { id: 'template-updated', label: { en: 'Updated Template' }, meta: { uri: `data:application/octet-stream;base64,${updatedContent}`, thumbUri: generateThumbnail('Updated Template') } }); ``` After editing, save the modified template as a new asset or update an existing one. ## Removing Templates Remove templates from asset sources using `removeAssetFromSource()`. This permanently deletes the template entry from the source. ```typescript highlight-remove-template // Add a temporary template to demonstrate removal engine.asset.addAssetToSource('my-templates', { id: 'template-temporary', label: { en: 'Temporary Template' }, meta: { uri: `data:application/octet-stream;base64,${originalContent}`, thumbUri: generateThumbnail('Temporary Template') } }); // Remove the temporary template from the asset source engine.asset.removeAssetFromSource('my-templates', 'template-temporary'); ``` > **Warning:** Removal is permanent. The template is no longer accessible from the asset source after removal. If you need to restore templates, maintain backups or implement a soft-delete mechanism. ## Saving Updated Templates To update an existing template, first remove it using `removeAssetFromSource()`, then add the updated version with `addAssetToSource()` using the same asset ID. ```typescript highlight-update-in-source // Update an existing template by removing and re-adding with same ID engine.block.replaceText(subtitleBlock, 'Updated again with new content'); const reUpdatedContent = await engine.scene.saveToString(); engine.asset.removeAssetFromSource('my-templates', 'template-updated'); engine.asset.addAssetToSource('my-templates', { id: 'template-updated', label: { en: 'Updated Template' }, meta: { uri: `data:application/octet-stream;base64,${reUpdatedContent}`, thumbUri: generateThumbnail('Updated Template') } }); // Notify that the asset source contents have changed engine.asset.assetSourceContentsChanged('my-templates'); ``` After updating templates, call `assetSourceContentsChanged()` to notify the UI that the asset source contents have changed. ## Best Practices ### Versioning Strategies When managing template updates, consider these approaches: - **Replace in place**: Use the same asset ID to update templates without changing references. Existing designs using the template won't break. - **Version suffixes**: Create new entries with version identifiers (e.g., `template-v2`). This preserves old versions while introducing new ones. - **Archive old versions**: Move deprecated templates to a separate source before removal. This maintains a history without cluttering the main library. ### Batch Operations When adding, updating, or removing multiple templates, call `assetSourceContentsChanged()` once after all operations complete rather than after each individual change. This reduces UI refreshes and improves performance. ### Template IDs Use descriptive, unique IDs that reflect the template's purpose (e.g., `marketing-banner-2024`, `social-post-square`). Consistent naming conventions make templates easier to find and manage programmatically. ### Thumbnails Generate meaningful thumbnails that accurately represent template content. Good thumbnails improve discoverability in the asset library and help users quickly identify the right template. ### Memory Considerations Templates stored as base64 data URIs remain in memory. For production applications with many templates, consider storing template content externally and using URLs in the `meta.uri` field instead of inline data URIs. ## API Reference | Method | Description | | --- | --- | | `engine.asset.addLocalSource()` | Create a local asset source | | `engine.asset.addAssetToSource()` | Add template to asset source | | `engine.asset.removeAssetFromSource()` | Remove template from asset source | | `engine.asset.assetSourceContentsChanged()` | Notify UI of asset source changes | | `engine.scene.saveToString()` | Save scene as base64 string | | `engine.scene.loadFromString()` | Load scene from base64 string | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create From Scratch" description: "Build reusable design templates programmatically using CE.SDK's APIs. Create scenes, add text and graphic blocks, configure placeholders and variables, apply editing constraints, and save templates for reuse." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/from-scratch-663cda/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Create From Scratch](https://img.ly/docs/cesdk/angular/create-templates/from-scratch-663cda/) --- Build reusable design templates entirely through code using CE.SDK's programmatic APIs for automation, batch generation, and custom template creation tools. ![Create Templates From Scratch](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-from-scratch-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-from-scratch-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-from-scratch-browser/) CE.SDK provides a complete API for building design templates through code. Instead of starting from an existing template, you can create a blank scene, define page dimensions, add text and graphic blocks, configure placeholders for swappable media, add text variables for dynamic content, apply editing constraints to protect layout integrity, and save the template for reuse. This approach enables automation workflows, batch template generation, and integration with custom template creation tools. ```typescript file=@cesdk_web_examples/guides-create-templates-from-scratch-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Create Templates From Scratch Guide * * Demonstrates building a reusable promotional card template entirely in code: * - Creating a blank scene with print-ready dimensions (1200x1600) * - Adding text blocks with variable tokens and proper font styling * - Adding graphic blocks as image placeholders using addImage() * - Configuring placeholder behavior for swappable media * - Applying editing constraints (scopes) to protect layout integrity * - Saving the template in multiple formats */ 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.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Template layout constants for a promotional card const CANVAS_WIDTH = 800; const CANVAS_HEIGHT = 1000; const PADDING = 40; const CONTENT_WIDTH = CANVAS_WIDTH - PADDING * 2; // Create a blank scene with custom dimensions engine.scene.create('Free', { page: { size: { width: CANVAS_WIDTH, height: CANVAS_HEIGHT } } }); // Set design unit to Pixel for precise coordinate mapping engine.scene.setDesignUnit('Pixel'); // Get the page that was automatically created const page = engine.block.findByType('page')[0]; // Set a gradient background for the template const backgroundFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(backgroundFill, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.2, b: 0.6, a: 1.0 }, stop: 0 }, // Purple { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } // Blue ]); engine.block.setFill(page, backgroundFill); // Font URIs for consistent typography const FONT_BOLD = 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Bold.ttf'; const FONT_REGULAR = 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Regular.ttf'; // Create headline text block with {{title}} variable const headline = engine.block.create('text'); engine.block.replaceText(headline, '{{title}}'); // Set font with proper typeface for consistent rendering engine.block.setFont(headline, FONT_BOLD, { name: 'Roboto', fonts: [{ uri: FONT_BOLD, subFamily: 'Bold', weight: 'bold' }] }); engine.block.setFloat(headline, 'text/fontSize', 28); engine.block.setTextColor(headline, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Position and size the headline engine.block.setWidthMode(headline, 'Absolute'); engine.block.setHeightMode(headline, 'Auto'); engine.block.setWidth(headline, CONTENT_WIDTH); engine.block.setPositionX(headline, PADDING); engine.block.setPositionY(headline, 50); engine.block.setEnum(headline, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, headline); // Set default value for the title variable engine.variable.setString('title', 'Summer Sale'); // Create subheadline text block with {{subtitle}} variable const subheadline = engine.block.create('text'); engine.block.replaceText(subheadline, '{{subtitle}}'); engine.block.setFont(subheadline, FONT_REGULAR, { name: 'Roboto', fonts: [{ uri: FONT_REGULAR, subFamily: 'Regular', weight: 'normal' }] }); engine.block.setFloat(subheadline, 'text/fontSize', 14); engine.block.setTextColor(subheadline, { r: 0.9, g: 0.9, b: 0.95, a: 1.0 }); engine.block.setWidthMode(subheadline, 'Absolute'); engine.block.setHeightMode(subheadline, 'Auto'); engine.block.setWidth(subheadline, CONTENT_WIDTH); engine.block.setPositionX(subheadline, PADDING); engine.block.setPositionY(subheadline, 175); engine.block.setEnum(subheadline, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, subheadline); engine.variable.setString('subtitle', 'Up to 50% off all items'); // Create image placeholder in the center of the card const imageBlock = engine.block.create('graphic'); const imageShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, imageShape); 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, CONTENT_WIDTH); engine.block.setHeight(imageBlock, 420); engine.block.setPositionX(imageBlock, PADDING); engine.block.setPositionY(imageBlock, 295); engine.block.appendChild(page, imageBlock); // Enable placeholder behavior on the image fill const fill = engine.block.getFill(imageBlock); if (fill !== null && engine.block.supportsPlaceholderBehavior(fill)) { engine.block.setPlaceholderBehaviorEnabled(fill, true); } engine.block.setPlaceholderEnabled(imageBlock, true); // Enable visual controls for the placeholder engine.block.setPlaceholderControlsOverlayEnabled(imageBlock, true); engine.block.setPlaceholderControlsButtonEnabled(imageBlock, true); // Create CTA (call-to-action) text block with {{cta}} variable const cta = engine.block.create('text'); engine.block.replaceText(cta, '{{cta}}'); engine.block.setFont(cta, FONT_BOLD, { name: 'Roboto', fonts: [{ uri: FONT_BOLD, subFamily: 'Bold', weight: 'bold' }] }); engine.block.setFloat(cta, 'text/fontSize', 8.4); engine.block.setTextColor(cta, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setWidthMode(cta, 'Absolute'); engine.block.setHeightMode(cta, 'Auto'); engine.block.setWidth(cta, CONTENT_WIDTH); engine.block.setPositionX(cta, PADDING); engine.block.setPositionY(cta, 765); engine.block.setEnum(cta, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, cta); engine.variable.setString('cta', 'Learn More'); // Set global scope to 'Defer' for per-block control engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('layer/resize', 'Defer'); // Lock all text block positions but allow text editing const textBlocks = [headline, subheadline, cta]; textBlocks.forEach((block) => { engine.block.setScopeEnabled(block, 'layer/move', false); engine.block.setScopeEnabled(block, 'layer/resize', false); }); // Lock image position but allow fill replacement engine.block.setScopeEnabled(imageBlock, 'layer/move', false); engine.block.setScopeEnabled(imageBlock, 'layer/resize', false); engine.block.setScopeEnabled(imageBlock, 'fill/change', true); // Register role toggle component for switching between Creator and Adopter cesdk.ui.registerComponent('role.toggle', ({ builder }) => { const role = engine.editor.getRole(); builder.ButtonGroup('role-toggle', { children: () => { builder.Button('creator-btn', { label: 'Creator', isActive: role === 'Creator', onClick: () => engine.editor.setRole('Creator') }); builder.Button('adopter-btn', { label: 'Adopter', isActive: role === 'Adopter', onClick: () => engine.editor.setRole('Adopter') }); } }); }); // Register button component for saving template as string cesdk.ui.registerComponent('save.string', ({ builder }) => { builder.Button('save-string-btn', { label: 'Save String', icon: '@imgly/Download', variant: 'regular', onClick: async () => { const templateString = await engine.scene.saveToString(); console.log( 'Template saved as string:', templateString.substring(0, 100) + '...' ); // Download the string as a file const blob = new Blob([templateString], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'template.scene'; link.click(); URL.revokeObjectURL(url); } }); }); // Register button component for saving template as archive cesdk.ui.registerComponent('save.archive', ({ builder }) => { builder.Button('save-archive-btn', { label: 'Save Archive', icon: '@imgly/Download', variant: 'regular', onClick: async () => { const templateArchive = await engine.scene.saveToArchive(); console.log( 'Template saved as archive:', templateArchive.size, 'bytes' ); // Download the archive as a file const url = URL.createObjectURL(templateArchive); const link = document.createElement('a'); link.href = url; link.download = 'template.zip'; link.click(); URL.revokeObjectURL(url); } }); }); // Add role toggle and save buttons to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'role.toggle' ); cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'save.string' ); cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'save.archive' ); // Enable auto-fit zoom to continuously fit the page with padding engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers how to create a blank scene, add text blocks with variables, add image placeholders, apply editing constraints, and save the template. ## Initialize CE.SDK We start by initializing CE.SDK and loading the asset sources. The asset source plugins (imported from `@cesdk/cesdk-js/plugins`) provide access to fonts, images, and other assets. ```typescript highlight=highlight-setup const engine = cesdk.engine; ``` ## Create a Blank Scene We create the foundation of our template with custom page dimensions. The `engine.scene.create()` method accepts page options to set width, height, and background color. ```typescript highlight=highlight-create-scene // Template layout constants for a promotional card const CANVAS_WIDTH = 800; const CANVAS_HEIGHT = 1000; const PADDING = 40; const CONTENT_WIDTH = CANVAS_WIDTH - PADDING * 2; // Create a blank scene with custom dimensions engine.scene.create('Free', { page: { size: { width: CANVAS_WIDTH, height: CANVAS_HEIGHT } } }); // Set design unit to Pixel for precise coordinate mapping engine.scene.setDesignUnit('Pixel'); ``` The scene creation method accepts a layout mode and optional page configuration. When options are provided, the scene automatically includes a page with the specified dimensions. ## Set Page Background We set a light background color to give the template a consistent base appearance. ```typescript highlight=highlight-add-background // Set a gradient background for the template const backgroundFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(backgroundFill, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.2, b: 0.6, a: 1.0 }, stop: 0 }, // Purple { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } // Blue ]); engine.block.setFill(page, backgroundFill); ``` We create a color fill using `engine.block.createFill('color')`, set the color via `engine.block.setColor()` with the `fill/color/value` property, then assign the fill to the page using `engine.block.setFill()`. ## Add Text Blocks Text blocks allow you to add styled text content. We create a headline that includes a variable token for dynamic content. ```typescript highlight=highlight-add-text // Create headline text block with {{title}} variable const headline = engine.block.create('text'); engine.block.replaceText(headline, '{{title}}'); // Set font with proper typeface for consistent rendering engine.block.setFont(headline, FONT_BOLD, { name: 'Roboto', fonts: [{ uri: FONT_BOLD, subFamily: 'Bold', weight: 'bold' }] }); engine.block.setFloat(headline, 'text/fontSize', 28); engine.block.setTextColor(headline, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Position and size the headline engine.block.setWidthMode(headline, 'Absolute'); engine.block.setHeightMode(headline, 'Auto'); engine.block.setWidth(headline, CONTENT_WIDTH); engine.block.setPositionX(headline, PADDING); engine.block.setPositionY(headline, 50); engine.block.setEnum(headline, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, headline); ``` We create a text block using `engine.block.create('text')`, set its content with `engine.block.replaceText()`, configure dimensions and position, and append it to the page using `engine.block.appendChild()`. ## Add Text Variables Text variables enable data-driven personalization. By using `{{variableName}}` tokens in text blocks, you can populate content programmatically. ```typescript highlight=highlight-add-variable // Set default value for the title variable engine.variable.setString('title', 'Summer Sale'); ``` The `engine.variable.setString()` method sets the default value for the variable. When the template is used, this value can be changed to personalize the content. ## Add Graphic Blocks Graphic blocks serve as containers for images. We create an image block that will become a placeholder for swappable media. ```typescript highlight=highlight-add-graphic // Create image placeholder in the center of the card const imageBlock = engine.block.create('graphic'); const imageShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, imageShape); 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, CONTENT_WIDTH); engine.block.setHeight(imageBlock, 420); engine.block.setPositionX(imageBlock, PADDING); engine.block.setPositionY(imageBlock, 295); engine.block.appendChild(page, imageBlock); ``` We create a graphic block with `engine.block.create('graphic')`, assign a rectangle shape using `engine.block.createShape('rect')` and `engine.block.setShape()`, create an image fill with `engine.block.createFill('image')`, set the image URI via `engine.block.setString()`, and position it on the page. ## Configure Placeholders Placeholders turn design blocks into drop-zones where users can swap content while maintaining layout integrity. We enable placeholder behavior on the image fill and configure visual controls. ```typescript highlight=highlight-configure-placeholder // Enable placeholder behavior on the image fill const fill = engine.block.getFill(imageBlock); if (fill !== null && engine.block.supportsPlaceholderBehavior(fill)) { engine.block.setPlaceholderBehaviorEnabled(fill, true); } engine.block.setPlaceholderEnabled(imageBlock, true); // Enable visual controls for the placeholder engine.block.setPlaceholderControlsOverlayEnabled(imageBlock, true); engine.block.setPlaceholderControlsButtonEnabled(imageBlock, true); ``` Placeholder behavior is enabled on the fill (not the block) for graphic blocks. We also enable the overlay pattern and replace button for visual guidance. ## Apply Editing Constraints Editing constraints protect template elements by restricting what users can modify. We use scopes to lock position and size while allowing content changes. ```typescript highlight=highlight-apply-constraints // Set global scope to 'Defer' for per-block control engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('layer/resize', 'Defer'); // Lock all text block positions but allow text editing const textBlocks = [headline, subheadline, cta]; textBlocks.forEach((block) => { engine.block.setScopeEnabled(block, 'layer/move', false); engine.block.setScopeEnabled(block, 'layer/resize', false); }); // Lock image position but allow fill replacement engine.block.setScopeEnabled(imageBlock, 'layer/move', false); engine.block.setScopeEnabled(imageBlock, 'layer/resize', false); engine.block.setScopeEnabled(imageBlock, 'fill/change', true); ``` Setting global scope to `'Defer'` enables per-block control. We then disable movement and resizing for both blocks while enabling fill changes for the image placeholder. ## Save the Template We persist the template in two formats: a lightweight string for CDN-hosted assets and a self-contained archive with embedded assets. ```typescript highlight=highlight-save-template // Register button component for saving template as string cesdk.ui.registerComponent('save.string', ({ builder }) => { builder.Button('save-string-btn', { label: 'Save String', icon: '@imgly/Download', variant: 'regular', onClick: async () => { const templateString = await engine.scene.saveToString(); console.log( 'Template saved as string:', templateString.substring(0, 100) + '...' ); // Download the string as a file const blob = new Blob([templateString], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'template.scene'; link.click(); URL.revokeObjectURL(url); } }); }); // Register button component for saving template as archive cesdk.ui.registerComponent('save.archive', ({ builder }) => { builder.Button('save-archive-btn', { label: 'Save Archive', icon: '@imgly/Download', variant: 'regular', onClick: async () => { const templateArchive = await engine.scene.saveToArchive(); console.log( 'Template saved as archive:', templateArchive.size, 'bytes' ); // Download the archive as a file const url = URL.createObjectURL(templateArchive); const link = document.createElement('a'); link.href = url; link.download = 'template.zip'; link.click(); URL.revokeObjectURL(url); } }); }); // Add role toggle and save buttons to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'role.toggle' ); cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'save.string' ); cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'save.archive' ); ``` The `engine.scene.saveToString()` method creates a compact string format suitable for storage when assets are hosted externally. The `engine.scene.saveToArchive()` method creates a ZIP bundle containing all assets, ideal for offline use or distribution. ## Troubleshooting - **Blocks not appearing**: Verify that `engine.block.appendChild()` attaches blocks to the page. Blocks must be part of the scene hierarchy to render. - **Variables not resolving**: Verify the variable name in the text matches exactly, including curly braces syntax `{{variableName}}`. - **Placeholder not interactive**: Ensure `engine.block.setPlaceholderEnabled()` is called on the block and the appropriate scope (`fill/change`) is enabled. - **Constraints not enforced**: Verify `engine.editor.setGlobalScope()` is set to `'Defer'` before setting per-block scopes. ## API Reference | Method | Description | | --- | --- | | `engine.scene.create()` | Create a new design scene with optional page size | | `engine.scene.setDesignUnit()` | Set the design unit (Pixel, Millimeter, Inch) | | `engine.scene.saveToString()` | Save scene to string format | | `engine.scene.saveToArchive()` | Save scene to ZIP archive | | `engine.block.create()` | Create a design block (page, text, graphic) | | `engine.block.appendChild()` | Append a child block to a parent | | `engine.block.findByType()` | Find blocks by their type | | `engine.block.createFill()` | Create a fill (color, image, etc.) | | `engine.block.setFill()` | Assign a fill to a block | | `engine.block.getFill()` | Get the fill of a block | | `engine.block.createShape()` | Create a shape (rect, ellipse, etc.) | | `engine.block.setShape()` | Assign a shape to a graphic block | | `engine.block.setString()` | Set a string property on a block | | `engine.block.setColor()` | Set a color property | | `engine.block.replaceText()` | Set text content | | `engine.block.setFont()` | Set font with typeface | | `engine.block.setPlaceholderBehaviorEnabled()` | Enable placeholder behavior on fill | | `engine.block.setPlaceholderEnabled()` | Enable placeholder interaction on block | | `engine.block.setPlaceholderControlsOverlayEnabled()` | Enable overlay visual control | | `engine.block.setPlaceholderControlsButtonEnabled()` | Enable button visual control | | `engine.variable.setString()` | Set a text variable value | | `engine.editor.setGlobalScope()` | Set global scope permission | | `engine.block.setScopeEnabled()` | Enable/disable scope on a block | ## Next Steps - [Placeholders](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/placeholders-d9ba8a/) - Configure placeholder behavior and visual controls in depth - [Text Variables](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/text-variables-7ecb50/) - Implement dynamic text personalization with variables - [Set Editing Constraints](https://img.ly/docs/cesdk/angular/create-templates/add-dynamic-content/set-editing-constraints-c892c0/) - Lock layout properties to protect design integrity - [Add to Template Library](https://img.ly/docs/cesdk/angular/create-templates/add-to-template-library-8bfbc7/) - Register templates in the asset library for users to discover --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Import Templates" description: "Load and import design templates into CE.SDK from URLs, archives, and serialized strings." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/import-e50084/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Import Templates](https://img.ly/docs/cesdk/angular/create-templates/import-e50084/) --- Load design templates into CE.SDK from archive URLs, scene URLs, and serialized strings. ![Import Templates](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-import-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-import-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-import-browser/) Templates are pre-designed scenes that provide starting points for user projects. CE.SDK supports loading templates from archive URLs with bundled assets, remote scene URLs, or serialized strings stored in databases. ```typescript file=@cesdk_web_examples/guides-create-templates-import-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; // Import scene file as string for loadFromString demonstration import businessCardSceneString from './assets/business-card.scene?raw'; // Template sources const fashionAdArchiveUrl = 'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip'; const postcardSceneUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'; /** * CE.SDK Plugin: Import Templates * * Demonstrates loading templates from different sources: * - Archive URLs (.zip files with bundled assets) * - Scene URLs (.scene files) * - Serialized strings (imported scene content) */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (cesdk == null) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load template from a scene file URL await engine.scene.loadFromURL(postcardSceneUrl); // Zoom viewport to fit the loaded scene const scene = engine.scene.get(); if (scene != null) { await engine.scene.zoomToBlock(scene, { padding: 40 }); } // Verify the loaded scene const loadedScene = engine.scene.get(); if (loadedScene != null) { const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log(`Template loaded with ${pages.length} page(s)`); } // Configure navigation bar with template loading buttons cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', key: 'load-archive', label: 'Import Archive', icon: '@imgly/Download', variant: 'regular', onClick: async () => { // Load template from archive URL (bundled assets) await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl); const s = engine.scene.get(); if (s != null) { await engine.scene.zoomToBlock(s, { padding: 40 }); } } }, { id: 'ly.img.action.navigationBar', key: 'load-url', label: 'Import URL', icon: '@imgly/Download', variant: 'regular', onClick: async () => { // Load template from scene URL await engine.scene.loadFromURL(postcardSceneUrl); const s = engine.scene.get(); if (s != null) { await engine.scene.zoomToBlock(s, { padding: 40 }); } } }, { id: 'ly.img.action.navigationBar', key: 'load-string', label: 'Import String', icon: '@imgly/Download', variant: 'regular', onClick: async () => { // Load template from serialized string await engine.scene.loadFromString(businessCardSceneString); const s = engine.scene.get(); if (s != null) { await engine.scene.zoomToBlock(s, { padding: 40 }); } } } ]); } } export default Example; ``` This guide covers how to load templates from archives, URLs, and strings, and work with the loaded content. ## Load from Archive Load a template from an archive URL using `loadFromArchiveURL()`. Archives are `.zip` files that bundle the scene with all its assets, making them portable and self-contained. ```typescript highlight=highlight-load-from-archive // Load template from archive URL (bundled assets) await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl); ``` ## Load from URL Load a template from a remote `.scene` file URL using `loadFromURL()`. The scene file is a JSON-based format that references assets via URLs. ```typescript highlight=highlight-load-from-url // Load template from a scene file URL await engine.scene.loadFromURL(postcardSceneUrl); ``` ## Load from String For templates stored in databases or received from APIs, load from a serialized string using `loadFromString()`. This method works with content previously saved using `engine.scene.saveToString()`. ```typescript highlight=highlight-load-from-string // Load template from serialized string await engine.scene.loadFromString(businessCardSceneString); ``` ## Working with the Loaded Scene After loading a template, you can verify its contents and adjust the viewport. ### Verify the Scene Use `engine.scene.get()` to retrieve the scene block and `engine.scene.getPages()` to inspect its pages. ```typescript highlight=highlight-get-scene // Verify the loaded scene const loadedScene = engine.scene.get(); if (loadedScene != null) { const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log(`Template loaded with ${pages.length} page(s)`); } ``` ### Zoom to Content Fit the loaded template in the viewport using `zoomToBlock()` with optional padding. ```typescript highlight=highlight-zoom-to-scene // Zoom viewport to fit the loaded scene const scene = engine.scene.get(); if (scene != null) { await engine.scene.zoomToBlock(scene, { padding: 40 }); } ``` --- ## Related Pages - [Import Templates from Scene Files](https://img.ly/docs/cesdk/angular/create-templates/import/from-scene-file-52a01e/) - Load and import templates from scene files in CE.SDK for web applications --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Import Templates from Scene Files" description: "Load and import templates from scene files in CE.SDK for web applications" platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/import/from-scene-file-52a01e/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Import Templates](https://img.ly/docs/cesdk/angular/create-templates/import-e50084/) > [From Scene File](https://img.ly/docs/cesdk/angular/create-templates/import/from-scene-file-52a01e/) --- 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](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-import-from-scene-file-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-import-from-scene-file-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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. ```typescript file=@cesdk_web_examples/guides-create-templates-import-from-scene-file-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); 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/v3/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.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } }); // const page = engine.block.findByType('page')[0]; // // // Now apply template - content will be adjusted to fit // await engine.scene.applyTemplateFromURL( // 'https://cdn.img.ly/assets/demo/v3/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 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 CE.SDK supports two scene file formats for importing templates: ### 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 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 The most common way to load templates is from archive URLs. This method loads both the scene structure and all embedded assets: ```typescript file=@cesdk_web_examples/guides-create-templates-import-from-scene-file-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); 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/v3/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.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } }); // const page = engine.block.findByType('page')[0]; // // // Now apply template - content will be adjusted to fit // await engine.scene.applyTemplateFromURL( // 'https://cdn.img.ly/assets/demo/v3/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 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; ``` ```typescript highlight-load-from-archive // 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' ); ``` 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 You can also load scenes directly from .scene file URLs. This approach requires that all referenced assets remain accessible at their original URLs: ```typescript highlight-load-from-url // await engine.scene.loadFromURL( // 'https://cdn.img.ly/assets/demo/v3/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 CE.SDK provides two approaches for working with templates, each serving different purposes: ### 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 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: ```typescript highlight-apply-template // // First create a scene with specific dimensions // await cesdk.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } }); // const page = engine.block.findByType('page')[0]; // // // Now apply template - content will be adjusted to fit // await engine.scene.applyTemplateFromURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene' // ); ``` ## Error Handling When loading templates, several issues can occur: ### Network Errors Template URLs might be unreachable: ```typescript 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 The file might not be a valid scene: ```typescript try { await engine.scene.loadFromURL(sceneUrl); } catch (error) { if (error.message.includes('parse')) { console.error('Invalid scene file format'); } } ``` ### 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 ### 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 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 | Method | Description | | ---------------------------------------- | --------------------------------------------------------- | | `engine.scene.loadFromArchiveURL()` | Loads a complete scene from an archive (ZIP) file | | `engine.scene.loadFromURL()` | Loads a scene from a .scene file URL | | `engine.scene.applyTemplateFromURL()` | Applies a template while preserving page dimensions | | `engine.scene.get()` | Returns the current scene block ID | | `engine.scene.getPages()` | Returns all page IDs in the scene | | `engine.scene.getDesignUnit()` | Returns the measurement unit | | `engine.scene.zoomToBlock()` | Zooms the viewport to fit a specific block | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Lock the Template" description: "Restrict editing access to specific elements or properties in a template to enforce design rules." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/lock-131489/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Lock the Template](https://img.ly/docs/cesdk/angular/create-templates/lock-131489/) --- Set up a two-surface integration where template creators have full editing access while template adopters can only modify designated areas. ![Lock the Template](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-lock-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-lock-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-lock-browser/) Many integrations need two different editing experiences: one for designers who build templates, and one for end users who customize them. The Creator and Adopter roles make this possible—same CE.SDK, different permissions based on who's using it. For detailed scope configuration patterns, see [Lock Content](https://img.ly/docs/cesdk/angular/rules/lock-content-9fa727/). In the live example, the headline text is pre-selected and the Placeholder panel is open, showing the scope settings that control what Adopters can edit. Toggle the role to Adopter and try selecting the logo to see the restrictions in action. ```typescript file=@cesdk_web_examples/guides-create-templates-lock-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Lock the Template * * This example demonstrates the two-surface pattern for template workflows: * - Creator role: Full editing access for designers building templates * - Adopter role: Restricted access for users customizing 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page and set dimensions const page = engine.block.findByType('page')[0]; // Create a brand template with a logo and headline const logoBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', { size: { width: 120, height: 30 } } ); engine.block.appendChild(page, logoBlock); engine.block.setPositionX(logoBlock, 40); engine.block.setPositionY(logoBlock, 40); engine.block.setName(logoBlock, 'Logo'); const headlineBlock = engine.block.create('text'); engine.block.replaceText(headlineBlock, 'Edit this headline'); engine.block.setWidth(headlineBlock, 720); engine.block.setHeightMode(headlineBlock, 'Auto'); engine.block.setFloat(headlineBlock, 'text/fontSize', 48); engine.block.setEnum(headlineBlock, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, headlineBlock); engine.block.setPositionX(headlineBlock, 40); engine.block.setPositionY(headlineBlock, 200); engine.block.setName(headlineBlock, 'Headline'); // Configure which elements Adopters can edit // Enable selection and text editing on the headline engine.block.setScopeEnabled(headlineBlock, 'editor/select', true); engine.block.setScopeEnabled(headlineBlock, 'text/edit', true); // Leave all scopes disabled on the logo (default state) // This prevents Adopters from selecting or modifying the logo // The Creator role ignores all scope restrictions engine.editor.setRole('Creator'); // Add a role toggle to the navigation bar (engine calls are reactive) cesdk.ui.registerComponent( 'ly.img.roleToggle.navigationBar', ({ builder }) => { const role = engine.editor.getRole(); builder.ButtonGroup('role-toggle', { children: () => { builder.Button('creator', { label: 'Creator', isActive: role === 'Creator', onClick: () => engine.editor.setRole('Creator') }); builder.Button('adopter', { label: 'Adopter', isActive: role === 'Adopter', onClick: () => { // Close the placeholder panel since Adopters can't configure scopes cesdk.ui.closePanel( '//ly.img.panel/inspector/placeholderSettings' ); engine.editor.setRole('Adopter'); } }); } }); } ); cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.roleToggle.navigationBar', 'ly.img.spacer' ]); await engine.scene.zoomToBlock(page, { padding: 40 }); // Select the headline and open the placeholder panel so users see the scope settings engine.block.select(headlineBlock); setTimeout(() => { cesdk.ui.openPanel('//ly.img.panel/inspector/placeholderSettings'); }, 300); } } export default Example; ``` This guide covers how to understand the two-surface pattern, configure roles for different user groups, and set up scope restrictions that control what Adopters can edit. ## Understanding the Two-Surface Pattern Template-based workflows typically involve two distinct user groups with different needs: | Surface | Users | Role | What they can do | |---------|-------|------|------------------| | Creator Surface | Designers, admins | `Creator` | Full editing—build templates, set locks | | Adopter Surface | End users, marketers | `Adopter` | Restricted editing—only modify unlocked areas | This separation protects design intent while enabling customization. The Creator role ignores all locks, giving full access. The Adopter role respects locks, restricting users to what's explicitly allowed. ## Setting Up the Creator Surface The Creator surface is where templates are built. We use `engine.editor.setRole('Creator')` to give designers unrestricted access. ```typescript highlight=highlight-creator-surface // The Creator role ignores all scope restrictions engine.editor.setRole('Creator'); ``` In Creator mode, all operations are permitted regardless of scope settings. This is where designers build the template layout, configure which elements should be editable, set scope restrictions using `engine.block.setScopeEnabled()`, and save the template for distribution. ## Setting Up the Adopter Surface The Adopter surface is where templates are used. Call `engine.editor.setRole('Adopter')` to enforce the restrictions configured by creators. In Adopter mode, users can only interact with blocks that have the appropriate scopes enabled. The Adopter role respects all lock configurations, ensuring brand consistency and design intent are maintained. ## When to Use This Pattern This two-surface approach works well for: - **Brand template systems**: Marketing teams customize approved templates - **Design approval workflows**: Creators build, reviewers can't accidentally modify - **Self-service customization**: End users personalize within guardrails - **White-label products**: Customers can only edit designated areas For simpler use cases where all users have the same permissions, you may not need separate surfaces. ## Configuring What Users Can Edit The scope system controls what Adopters can modify. In Creator mode, we enable specific scopes on blocks that should be editable. ```typescript highlight=highlight-configure-scopes // Configure which elements Adopters can edit // Enable selection and text editing on the headline engine.block.setScopeEnabled(headlineBlock, 'editor/select', true); engine.block.setScopeEnabled(headlineBlock, 'text/edit', true); // Leave all scopes disabled on the logo (default state) // This prevents Adopters from selecting or modifying the logo ``` When Adopters load this template, they can edit the headline text but nothing else. The `editor/select` scope must be enabled for users to interact with a block at all. For comprehensive scope configuration patterns, see [Lock Content](https://img.ly/docs/cesdk/angular/rules/lock-content-9fa727/). ## Configuring Scopes in the Editor UI Designers can also configure scopes visually without writing code. In Creator mode, select any block and open the Placeholder panel in the inspector. This panel provides toggles for each scope: - **Allow selecting** (`editor/select`): Users can click to select the block - **Allow editing text** (`text/edit`): Users can modify text content - **Allow changing fill** (`fill/change`): Users can swap images or change colors - **Allow moving** (`layer/move`): Users can reposition the block - **Allow deleting** (`lifecycle/destroy`): Users can remove the block Changes made in the Placeholder panel are equivalent to calling `engine.block.setScopeEnabled()` programmatically. When the template is saved, these settings persist and apply when Adopters load the template. ## Adding a Role Toggle Add a segmented control to the navigation bar that switches between Creator and Adopter modes. Engine calls inside the builder are automatically reactive—the component re-renders when the role changes. ```typescript highlight=highlight-toggle-role // Add a role toggle to the navigation bar (engine calls are reactive) cesdk.ui.registerComponent( 'ly.img.roleToggle.navigationBar', ({ builder }) => { const role = engine.editor.getRole(); builder.ButtonGroup('role-toggle', { children: () => { builder.Button('creator', { label: 'Creator', isActive: role === 'Creator', onClick: () => engine.editor.setRole('Creator') }); builder.Button('adopter', { label: 'Adopter', isActive: role === 'Adopter', onClick: () => { // Close the placeholder panel since Adopters can't configure scopes cesdk.ui.closePanel( '//ly.img.panel/inspector/placeholderSettings' ); engine.editor.setRole('Adopter'); } }); } }); } ); cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.roleToggle.navigationBar', 'ly.img.spacer' ]); ``` ## Troubleshooting | Issue | Cause | Solution | |-------|-------|----------| | Adopter can edit everything | Wrong role or scopes not configured | Verify role is `Adopter` and scopes are set in Creator mode | | Adopter can't edit anything | `editor/select` scope not enabled | Enable `editor/select` on blocks users should interact with | | Creator can't set locks | Wrong role | Switch to Creator role before configuring scopes | | Changes not persisting | Template not saved after scope changes | Save template after configuring scopes in Creator mode | ## API Reference | Method | Description | |--------|-------------| | `engine.editor.setRole(role)` | Set the editing role (`'Creator'`, `'Adopter'`, or `'Viewer'`) | | `engine.editor.getRole()` | Get the current editing role | | `engine.block.setScopeEnabled(block, scope, enabled)` | Enable or disable a scope on a block | | `engine.block.isScopeEnabled(block, scope)` | Check if a scope is enabled on a block | | `cesdk.ui.registerComponent(id, renderFn)` | Register a custom UI component | | `builder.ButtonGroup(id, { children })` | Create a segmented control | | `builder.Button(id, { label, isActive, onClick })` | Create a button | ### Common Scopes | Scope | Description | |-------|-------------| | `'editor/select'` | Allow selecting the block (required for any interaction) | | `'fill/change'` | Allow changing the block's fill (images, colors) | | `'text/edit'` | Allow editing text content | | `'text/character'` | Allow changing text formatting (font, size, color) | | `'layer/move'` | Allow moving the block | | `'layer/resize'` | Allow resizing the block | | `'layer/rotate'` | Allow rotating the block | | `'layer/crop'` | Allow cropping the block | | `'lifecycle/destroy'` | Allow deleting the block | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/create-templates/overview-4ebe30/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) > [Overview](https://img.ly/docs/cesdk/angular/create-templates/overview-4ebe30/) --- These imported designs can then be adapted into editable, structured templates inside CE.SDK. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Videos" description: "Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing." platform: angular url: "https://img.ly/docs/cesdk/angular/create-video-c41a08/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) --- --- ## Related Pages - [Create Videos Overview](https://img.ly/docs/cesdk/angular/create-video/overview-b06512/) - Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing. - [Video and Audio Timeline Web Editor](https://img.ly/docs/cesdk/angular/create-video/timeline-editor-912252/) - Use the timeline editor to arrange and edit video clips, audio, and animations frame by frame. - [Control Audio and Video](https://img.ly/docs/cesdk/angular/create-video/control-daba54/) - Learn to play, pause, seek, and preview audio and video content in CE.SDK using playback controls and solo mode. - [Trim Video Clips](https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/) - Learn how to trim video clips in CE.SDK to control which portion of media plays back. - [Split Video and Audio](https://img.ly/docs/cesdk/angular/edit-video/split-464167/) - Learn how to split video and audio clips at specific time points in CE.SDK, creating two independent segments from a single clip. - [Join and Arrange Video Clips](https://img.ly/docs/cesdk/angular/edit-video/join-and-arrange-3bbc30/) - Combine multiple video clips into sequences and organize them on the timeline using tracks and time offsets in CE.SDK. - [Transform](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) - Documentation for Transform - [Add Captions](https://img.ly/docs/cesdk/angular/edit-video/add-captions-f67565/) - Documentation for adding captions to videos - [Update Caption Presets](https://img.ly/docs/cesdk/angular/create-video/update-caption-presets-e9c385/) - Extend video captions with custom caption styles using simple content.json updates - [Add Watermark](https://img.ly/docs/cesdk/angular/edit-video/add-watermark-762ce6/) - Add text and image watermarks to videos using CE.SDK for copyright protection, branding, and content attribution with timeline management and visibility controls. - [Redact Sensitive Content in Videos](https://img.ly/docs/cesdk/angular/edit-video/redaction-cf6d03/) - Redact sensitive video content using blur, pixelization, or solid overlays. Essential for privacy protection when obscuring faces, license plates, or personal information. - [Video Editor SDK](https://img.ly/docs/cesdk/angular/overview-7d12d5/) - Explore video editing features in CE.SDK including trimming, splitting, captions, and programmatic editing. - [Video Limitations](https://img.ly/docs/cesdk/angular/create-video/limitations-6a740d/) - Understand resolution limits, duration constraints, codec support, and browser-specific restrictions when working with video in CE.SDK. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Adjust Audio Playback Speed" description: "Learn how to adjust audio playback speed in CE.SDK to create slow-motion, time-stretched, and fast-forward audio effects." platform: angular url: "https://img.ly/docs/cesdk/angular/create-video/audio/adjust-speed-908d57/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/angular/create-audio/audio-2f700b/) > [Adjust Speed](https://img.ly/docs/cesdk/angular/create-video/audio/adjust-speed-908d57/) --- Control audio playback speed by adjusting the speed multiplier using CE.SDK's timeline UI and programmatic speed adjustment API. ![Audio Speed Adjustment example showing timeline with audio blocks at different speeds](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-adjust-speed-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-audio-audio-adjust-speed-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-audio-adjust-speed-browser/) Playback speed adjustment changes how fast or slow audio plays without changing its pitch (though pitch shifting may occur depending on the audio processing implementation). A speed multiplier of 1.0 represents normal speed, values below 1.0 slow down playback, and values above 1.0 speed it up. This technique is commonly used for podcast speed controls, time-compressed narration, slow-motion audio effects, and accessibility features. ```typescript file=@cesdk_web_examples/guides-create-audio-audio-adjust-speed-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Adjust Audio Speed Guide * * Demonstrates audio playback speed adjustment in CE.SDK: * - Loading audio files * - Adjusting playback speed with setPlaybackSpeed * - Three speed presets: slow-motion (0.5x), normal (1.0x), and maximum (3.0x) */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Use a sample audio file const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a'; // Create an audio block and load the audio file const audioBlock = engine.block.create('audio'); engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Wait for audio resource to load await engine.block.forceLoadAVResource(audioBlock); // Slow Motion Audio (0.5x - half speed) const slowAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, slowAudioBlock); engine.block.setPositionX(slowAudioBlock, 100); engine.block.setPositionY(slowAudioBlock, 200); engine.block.setPlaybackSpeed(slowAudioBlock, 0.5); // Normal Speed Audio (1.0x) const normalAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, normalAudioBlock); engine.block.setPositionX(normalAudioBlock, 100); engine.block.setPositionY(normalAudioBlock, 400); engine.block.setPlaybackSpeed(normalAudioBlock, 1.0); // Maximum Speed Audio (3.0x - triple speed) const maxSpeedAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, maxSpeedAudioBlock); engine.block.setPositionX(maxSpeedAudioBlock, 100); engine.block.setPositionY(maxSpeedAudioBlock, 600); engine.block.setPlaybackSpeed(maxSpeedAudioBlock, 3.0); // Log duration changes for demonstration const slowDuration = engine.block.getDuration(slowAudioBlock); const normalDuration = engine.block.getDuration(normalAudioBlock); const maxDuration = engine.block.getDuration(maxSpeedAudioBlock); // eslint-disable-next-line no-console console.log(`Slow motion (0.5x) duration: ${slowDuration.toFixed(2)}s`); // eslint-disable-next-line no-console console.log(`Normal speed (1.0x) duration: ${normalDuration.toFixed(2)}s`); // eslint-disable-next-line no-console console.log(`Maximum speed (3.0x) duration: ${maxDuration.toFixed(2)}s`); // Remove the original audio block (we only need the duplicates) engine.block.destroy(audioBlock); // Zoom to fit all audio blocks and labels engine.scene.zoomToBlock(page, 40, 40, 40, 40); } } export default Example; ``` This guide covers how to adjust audio playback speed programmatically using the Engine API, understand speed constraints, and manage how speed changes affect block duration. ## Understanding Speed Concepts CE.SDK supports playback speeds from **0.25x** (quarter speed) to **3.0x** (triple speed), with **1.0x** as the default normal speed. Values below 1.0 slow down playback, values above 1.0 speed it up. **Speed and Duration**: Adjusting speed automatically changes the block's duration following an inverse relationship: `perceived_duration = original_duration / speed_multiplier`. A 10-second clip at 2.0x speed plays in 5 seconds; at 0.5x speed it takes 20 seconds. This automatic adjustment maintains synchronization when coordinating audio with other elements. **Common use cases**: Podcast playback controls (1.5x-2.0x), accessibility features (0.75x for easier comprehension), time-compressed narration, dramatic slow-motion effects (0.25x-0.5x), transcription work, and music tempo adjustments. ## Setting Up Audio for Speed Adjustment ### Loading Audio Files We create an audio block and load an audio file by setting its `fileURI` property. ```typescript highlight-create-audio // Create an audio block and load the audio file const audioBlock = engine.block.create('audio'); engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Wait for audio resource to load await engine.block.forceLoadAVResource(audioBlock); ``` Unlike video or image blocks which use fills, audio blocks store the file URI directly on the block itself using the `audio/fileURI` property. The `forceLoadAVResource` call ensures CE.SDK has downloaded the audio file and loaded its metadata, which is essential for accurate duration information and playback speed control. ## Adjusting Playback Speed ### Setting Normal Speed By default, audio plays at normal speed (1.0x). We can explicitly set this to ensure consistent baseline behavior. ```typescript highlight-set-normal-speed // Normal Speed Audio (1.0x) const normalAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, normalAudioBlock); engine.block.setPositionX(normalAudioBlock, 100); engine.block.setPositionY(normalAudioBlock, 400); engine.block.setPlaybackSpeed(normalAudioBlock, 1.0); ``` Setting speed to 1.0 ensures the audio plays at its original recorded rate. This is useful after experimenting with different speeds and wanting to return to normal, or when initializing audio blocks programmatically to ensure consistent starting states. ### Querying Current Speed We can check the current playback speed at any time using `getPlaybackSpeed`. ```typescript highlight-set-normal-speed // Normal Speed Audio (1.0x) const normalAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, normalAudioBlock); engine.block.setPositionX(normalAudioBlock, 100); engine.block.setPositionY(normalAudioBlock, 400); engine.block.setPlaybackSpeed(normalAudioBlock, 1.0); ``` This returns the current speed multiplier as a number. Use this to populate UI controls, validate that speed changes were applied, or make relative adjustments based on existing speeds. ## Common Speed Presets ### Slow Motion Audio (0.5x) Slowing audio to half speed creates a slow-motion effect that's useful for careful listening or transcription. ```typescript highlight-set-slow-motion // Slow Motion Audio (0.5x - half speed) const slowAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, slowAudioBlock); engine.block.setPositionX(slowAudioBlock, 100); engine.block.setPositionY(slowAudioBlock, 200); engine.block.setPlaybackSpeed(slowAudioBlock, 0.5); ``` At 0.5x speed, a 10-second audio clip will take 20 seconds to play. This slower pace makes it easier to catch details, transcribe speech accurately, or create dramatic slow-motion audio effects in creative projects. ### Maximum Speed (3.0x) The maximum supported speed is 3.0x, three times normal playback rate. ```typescript highlight-set-maximum-speed // Maximum Speed Audio (3.0x - triple speed) const maxSpeedAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, maxSpeedAudioBlock); engine.block.setPositionX(maxSpeedAudioBlock, 100); engine.block.setPositionY(maxSpeedAudioBlock, 600); engine.block.setPlaybackSpeed(maxSpeedAudioBlock, 3.0); ``` At maximum speed, audio plays very quickly—a 10-second clip finishes in just 3.33 seconds. This extreme speed is useful for rapidly skimming through content to find specific moments, though comprehension becomes challenging at this rate. ## Speed and Block Duration ### Understanding Duration Changes When we change playback speed, CE.SDK automatically adjusts the block's duration to reflect the new playback time. ```typescript highlight-speed-and-duration // Log duration changes for demonstration const slowDuration = engine.block.getDuration(slowAudioBlock); const normalDuration = engine.block.getDuration(normalAudioBlock); const maxDuration = engine.block.getDuration(maxSpeedAudioBlock); // eslint-disable-next-line no-console console.log(`Slow motion (0.5x) duration: ${slowDuration.toFixed(2)}s`); // eslint-disable-next-line no-console console.log(`Normal speed (1.0x) duration: ${normalDuration.toFixed(2)}s`); // eslint-disable-next-line no-console console.log(`Maximum speed (3.0x) duration: ${maxDuration.toFixed(2)}s`); ``` The original duration represents how long the audio takes to play at normal speed. When we double the speed to 2.0x, the duration is automatically halved. The audio content is the same, but it plays through in half the time, so the block duration shrinks accordingly. This automatic adjustment keeps your composition synchronized. If you have multiple audio tracks or need to coordinate audio with video, the block durations will accurately reflect the new playback duration after speed changes. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Adjust Audio Volume" description: "Learn how to adjust audio volume in CE.SDK to control playback levels, mute audio, and balance multiple audio sources in video projects." platform: angular url: "https://img.ly/docs/cesdk/angular/create-video/audio/adjust-volume-7ecc4a/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/angular/create-audio/audio-2f700b/) > [Adjust Volume](https://img.ly/docs/cesdk/angular/create-video/audio/adjust-volume-7ecc4a/) --- Control audio playback volume using CE.SDK's timeline UI and the programmatic volume control API, from silent (0.0) to full volume (1.0). ![Audio Volume Adjustment example showing timeline with audio blocks at different volume levels](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-adjust-volume-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-audio-audio-adjust-volume-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-audio-adjust-volume-browser/) Volume control adjusts how loud or quiet audio plays during playback. CE.SDK uses a normalized 0.0-1.0 range where 0.0 is completely silent and 1.0 is full volume. This applies to both audio blocks and video fills with embedded audio. Volume settings are commonly used for balancing multiple audio sources, creating fade effects, and allowing users to adjust playback levels. ```typescript file=@cesdk_web_examples/guides-create-audio-audio-adjust-volume-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Adjust Audio Volume Guide * * Demonstrates audio volume control in CE.SDK: * - Setting volume levels with setVolume * - Muting and unmuting with setMuted * - Querying volume and mute states * - Volume levels for multiple audio sources */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Use a sample audio file const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a'; // Create an audio block and load the audio file const audioBlock = engine.block.create('audio'); engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Wait for audio resource to load await engine.block.forceLoadAVResource(audioBlock); // Set volume to 80% (0.8 on a 0.0-1.0 scale) const fullVolumeAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, fullVolumeAudio); engine.block.setTimeOffset(fullVolumeAudio, 0); engine.block.setVolume(fullVolumeAudio, 0.8); // Set volume to 30% for background music const lowVolumeAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, lowVolumeAudio); engine.block.setTimeOffset(lowVolumeAudio, 5); engine.block.setVolume(lowVolumeAudio, 0.3); // Mute an audio block (preserves volume setting) const mutedAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, mutedAudio); engine.block.setTimeOffset(mutedAudio, 10); engine.block.setVolume(mutedAudio, 1.0); engine.block.setMuted(mutedAudio, true); // Query current volume and mute states const currentVolume = engine.block.getVolume(fullVolumeAudio); const isMuted = engine.block.isMuted(mutedAudio); const isForceMuted = engine.block.isForceMuted(mutedAudio); // eslint-disable-next-line no-console console.log(`Full volume audio: ${(currentVolume * 100).toFixed(0)}%`); // eslint-disable-next-line no-console console.log( `Low volume audio: ${( engine.block.getVolume(lowVolumeAudio) * 100 ).toFixed(0)}%` ); // eslint-disable-next-line no-console console.log( `Muted audio - isMuted: ${isMuted}, isForceMuted: ${isForceMuted}` ); // Remove the original audio block (we only need the duplicates) engine.block.destroy(audioBlock); // Zoom to fit all audio blocks engine.scene.zoomToBlock(page, 40, 40, 40, 40); } } export default Example; ``` This guide covers how to adjust audio volume programmatically using the Engine API, mute and unmute audio, and query volume and mute states. ## Understanding Volume Concepts CE.SDK supports volume levels from **0.0** (silent) to **1.0** (full volume), with **1.0** as the default for new audio blocks. Values in between represent proportional volume levels—0.5 is half volume, 0.25 is quarter volume. **Volume vs Muting**: Setting volume to 0.0 makes audio silent, but muting with `setMuted()` is preferred when you want to temporarily silence audio without losing the volume setting. Unmuting restores the previous volume level. **Common use cases**: Background music mixing (0.3-0.5 under voiceover), user volume controls, audio balancing for multi-track projects, fade effects (gradually adjusting volume over time), and accessibility features. ## Setting Up Audio for Volume Control ### Loading Audio Files We create an audio block and load an audio file by setting its `fileURI` property. ```typescript highlight-create-audio // Create an audio block and load the audio file const audioBlock = engine.block.create('audio'); engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Wait for audio resource to load await engine.block.forceLoadAVResource(audioBlock); ``` Unlike video or image blocks which use fills, audio blocks store the file URI directly on the block itself using the `audio/fileURI` property. The `forceLoadAVResource` call ensures CE.SDK has downloaded the audio file and loaded its metadata before we manipulate it. ## Adjusting Volume ### Setting Volume We can set volume using `setVolume()` with a value between 0.0 and 1.0. ```typescript highlight-set-volume // Set volume to 80% (0.8 on a 0.0-1.0 scale) const fullVolumeAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, fullVolumeAudio); engine.block.setTimeOffset(fullVolumeAudio, 0); engine.block.setVolume(fullVolumeAudio, 0.8); ``` Setting volume to 0.8 (80%) is useful when you want prominent audio that isn't at maximum level, leaving headroom for other audio sources or preventing distortion. ### Setting Low Volume for Background Audio For background music that should be audible but not prominent, use lower volume levels. ```typescript highlight-set-low-volume // Set volume to 30% for background music const lowVolumeAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, lowVolumeAudio); engine.block.setTimeOffset(lowVolumeAudio, 5); engine.block.setVolume(lowVolumeAudio, 0.3); ``` At 0.3 (30%) volume, the audio is clearly audible but stays in the background. This is a common level for background music under voiceover or dialogue. ## Muting Audio ### Mute and Unmute Use `setMuted()` to mute audio without changing its volume setting. This is useful for toggle controls. ```typescript highlight-mute-audio // Mute an audio block (preserves volume setting) const mutedAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, mutedAudio); engine.block.setTimeOffset(mutedAudio, 10); engine.block.setVolume(mutedAudio, 1.0); engine.block.setMuted(mutedAudio, true); ``` When you mute an audio block, the volume setting (1.0 in this case) is preserved. Unmuting later with `setMuted(block, false)` restores playback at the same volume level. ### Querying Volume and Mute States You can query the current volume and mute states at any time. ```typescript highlight-query-volume // Query current volume and mute states const currentVolume = engine.block.getVolume(fullVolumeAudio); const isMuted = engine.block.isMuted(mutedAudio); const isForceMuted = engine.block.isForceMuted(mutedAudio); // eslint-disable-next-line no-console console.log(`Full volume audio: ${(currentVolume * 100).toFixed(0)}%`); // eslint-disable-next-line no-console console.log( `Low volume audio: ${( engine.block.getVolume(lowVolumeAudio) * 100 ).toFixed(0)}%` ); // eslint-disable-next-line no-console console.log( `Muted audio - isMuted: ${isMuted}, isForceMuted: ${isForceMuted}` ); ``` Use `getVolume()` to read the current volume level, `isMuted()` to check if the block is muted by the user, and `isForceMuted()` to check if the engine has automatically muted the block due to playback rules. ## Mixing Multiple Audio Sources ### Balancing Tracks When working with multiple audio sources, use different volume levels to create a balanced mix. A common approach is to keep voiceover or dialogue at higher levels (0.8-1.0) and background music at lower levels (0.3-0.5). ### Common Mixing Patterns **Voiceover prominent**: Set background music to 0.3 and voiceover to 1.0 for clear narration with musical accompaniment. **Balanced dialogue and music**: Set both to 0.6-0.7 when both elements are equally important. **Sound effects as accents**: Set sound effects to 0.5-0.8 depending on how prominent they should be in the mix. ## Building Volume Controls ### Volume Slider When building a volume slider UI, map the slider value directly to the 0.0-1.0 range. Display percentages (0-100%) for user-friendly labels. ```typescript // Example: Update volume from slider (0-100) const sliderValue = 75; // User drags slider to 75% const volume = sliderValue / 100; // Convert to 0.0-1.0 engine.block.setVolume(audioBlock, volume); ``` ### Mute Toggle Implement mute buttons using `setMuted()` and indicate the current state using `isMuted()`. Show a different icon when `isForceMuted()` returns true to indicate the engine has automatically muted the audio. ```typescript // Example: Toggle mute state const currentlyMuted = engine.block.isMuted(audioBlock); engine.block.setMuted(audioBlock, !currentlyMuted); // Check if engine force-muted (e.g., high playback speed) if (engine.block.isForceMuted(audioBlock)) { // Show "force muted" indicator } ``` ## Troubleshooting ### Volume Changes Not Audible Check if the block is muted with `isMuted()` or force muted with `isForceMuted()`. Also verify the audio resource has loaded successfully. ### Force Muted State Video fills at playback speeds above 3.0x are automatically force muted by the engine. Reduce the playback speed to restore audio output. ### Volume Not Persisting Ensure you're setting volume on the correct block ID. Volume settings are block-specific and don't propagate to duplicates or other instances. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Control Audio and Video" description: "Learn to play, pause, seek, and preview audio and video content in CE.SDK using playback controls and solo mode." platform: angular url: "https://img.ly/docs/cesdk/angular/create-video/control-daba54/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Control Audio and Video](https://img.ly/docs/cesdk/angular/create-video/control-daba54/) --- Play, pause, seek, and preview audio and video content programmatically using CE.SDK's playback control APIs. ![Control Audio and Video example showing video playback controls](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-control-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-control-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-control-browser/) CE.SDK provides playback control for audio and video through the Block API. Playback state, seeking, and solo preview are controlled programmatically. Resources must be loaded before accessing metadata like duration and dimensions. ```typescript file=@cesdk_web_examples/guides-create-video-control-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page and set to 16:9 landscape for video const page = engine.block.findByType('page')[0]!; // Create a track for video blocks const track = engine.block.create('track'); engine.block.appendChild(page, track); // Create a video block and add it to the track const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; const videoBlock = engine.block.create('graphic'); engine.block.setShape(videoBlock, engine.block.createShape('rect')); engine.block.setWidth(videoBlock, 1920); engine.block.setHeight(videoBlock, 1080); // Create and configure video fill const videoFill = engine.block.createFill('video'); engine.block.setString(videoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(videoBlock, videoFill); // Add to track and set duration engine.block.appendChild(track, videoBlock); engine.block.setDuration(videoBlock, 10); await engine.block.forceLoadAVResource(videoFill); const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); const totalDuration = engine.block.getAVResourceTotalDuration(videoFill); console.log(`Video dimensions: ${videoWidth}x${videoHeight}`); console.log(`Total duration: ${totalDuration}s`); if (engine.block.supportsPlaybackControl(page)) { console.log(`Is playing: ${engine.block.isPlaying(page)}`); engine.block.setPlaying(page, true); } if (engine.block.supportsPlaybackTime(page)) { engine.block.setPlaybackTime(page, 1.0); console.log(`Playback time: ${engine.block.getPlaybackTime(page)}s`); } console.log( `Visible at current time: ${engine.block.isVisibleAtCurrentPlaybackTime( videoBlock )}` ); engine.block.setSoloPlaybackEnabled(videoFill, true); console.log( `Solo enabled: ${engine.block.isSoloPlaybackEnabled(videoFill)}` ); engine.block.setSoloPlaybackEnabled(videoFill, false); // Select the video block for inspection engine.block.select(videoBlock); } } export default Example; ``` This guide covers how to play and pause media, seek to specific positions, preview individual blocks with solo mode, check visibility at playback time, and access video resource metadata. ## Force Loading Resources Media resource metadata is unavailable until the resource is loaded. Call `forceLoadAVResource` on the video fill to ensure dimensions and duration are accessible. ```typescript highlight=highlight-force-load await engine.block.forceLoadAVResource(videoFill); ``` Without loading the resource first, accessing properties like duration or dimensions throws an error. ## Getting Video Metadata Once the resource is loaded, query the video dimensions and total duration. ```typescript highlight=highlight-get-metadata const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); const totalDuration = engine.block.getAVResourceTotalDuration(videoFill); ``` The `getVideoWidth` and `getVideoHeight` methods return the original video dimensions in pixels. The `getAVResourceTotalDuration` method returns the full duration of the source media in seconds. ## Playing and Pausing Check if the block supports playback control using `supportsPlaybackControl`, then start or stop playback with `setPlaying`. ```typescript highlight=highlight-playback-control if (engine.block.supportsPlaybackControl(page)) { console.log(`Is playing: ${engine.block.isPlaying(page)}`); engine.block.setPlaying(page, true); } ``` The `isPlaying` method returns the current playback state. ## Seeking To jump to a specific playback position, use `setPlaybackTime`. First, check if the block supports playback time with `supportsPlaybackTime`. ```typescript highlight=highlight-seeking if (engine.block.supportsPlaybackTime(page)) { engine.block.setPlaybackTime(page, 1.0); console.log(`Playback time: ${engine.block.getPlaybackTime(page)}s`); } ``` Playback time is specified in seconds. The `getPlaybackTime` method returns the current position. ## Visibility at Current Time Check if a block is visible at the current playback position using `isVisibleAtCurrentPlaybackTime`. This is useful when blocks have different time offsets or durations. ```typescript highlight=highlight-visibility console.log( `Visible at current time: ${engine.block.isVisibleAtCurrentPlaybackTime( videoBlock )}` ); ``` ## Solo Playback Solo playback allows you to preview an individual block while the rest of the scene stays frozen. Enable it on a video fill or audio block with `setSoloPlaybackEnabled`. ```typescript highlight=highlight-solo-playback engine.block.setSoloPlaybackEnabled(videoFill, true); console.log( `Solo enabled: ${engine.block.isSoloPlaybackEnabled(videoFill)}` ); engine.block.setSoloPlaybackEnabled(videoFill, false); ``` Enabling solo on one block automatically disables it on all others. This is useful for previewing a specific clip without affecting the overall scene playback. ## Troubleshooting ### Properties Unavailable Before Resource Load **Symptom**: Accessing duration, dimensions, or trim values throws an error. **Cause**: Media resource not yet loaded. **Solution**: Always `await engine.block.forceLoadAVResource()` before accessing these properties. ### Block Not Playing **Symptom**: Calling `setPlaying(true)` has no effect. **Cause**: Block doesn't support playback control or scene not in playback mode. **Solution**: Check `supportsPlaybackControl()` returns true; ensure scene playback is active. ### Solo Playback Not Working **Symptom**: Enabling solo doesn't isolate the block. **Cause**: Solo applied to wrong block type or block not visible. **Solution**: Apply solo to video fills or audio blocks, ensure block is at current playback time. ## Next Steps
  • [Trim Video and Audio](https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/) - Control which portion of source media plays
  • [Loop Audio](https://img.ly/docs/cesdk/angular/create-audio/audio/loop-937be7/) - Enable repeating playback for audio blocks
  • [Adjust Volume](https://img.ly/docs/cesdk/angular/create-video/audio/adjust-volume-7ecc4a/) - Control audio volume and muting
  • [Adjust Speed](https://img.ly/docs/cesdk/angular/create-video/audio/adjust-speed-908d57/) - Change playback speed for audio
  • [Video Timeline Overview](https://img.ly/docs/cesdk/angular/create-video/timeline-editor-912252/) - Timeline editing system
--- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video Limitations" description: "Understand resolution limits, duration constraints, codec support, and browser-specific restrictions when working with video in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/create-video/limitations-6a740d/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Limitations](https://img.ly/docs/cesdk/angular/create-video/limitations-6a740d/) --- CE.SDK performs video processing client-side, providing privacy and responsiveness while introducing hardware-dependent constraints. This reference covers resolution limits, codec support, and platform-specific restrictions to help you plan video workflows within platform capabilities. ![Video Limitations example showing the CE.SDK video editor](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-limitations-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-limitations-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-limitations-browser/) Client-side video processing provides significant advantages for privacy and user experience, but it operates within the constraints of the user's device. Understanding these limitations helps you build applications that work reliably across different hardware configurations and browsers. ```typescript file=@cesdk_web_examples/guides-create-video-limitations-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Video Limitations Guide * * Demonstrates how to query video processing limitations in CE.SDK: * - Querying maximum export size * - Monitoring memory usage and availability * - Understanding resolution and duration constraints */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); const engine = cesdk.engine; // Query the maximum export dimensions supported by this device const maxExportSize = engine.editor.getMaxExportSize(); console.log('Maximum export size:', maxExportSize, 'pixels'); // The maximum export size depends on the GPU texture size limit // Typical values: 4096, 8192, or 16384 pixels // Query current memory consumption const usedMemory = engine.editor.getUsedMemory(); const usedMemoryMB = (usedMemory / (1024 * 1024)).toFixed(2); console.log('Memory used:', usedMemoryMB, 'MB'); // Query available memory for video processing const availableMemory = engine.editor.getAvailableMemory(); const availableMemoryMB = (availableMemory / (1024 * 1024)).toFixed(2); console.log('Memory available:', availableMemoryMB, 'MB'); // Browser tabs typically cap around 2GB due to WebAssembly's 32-bit address space // Calculate memory utilization percentage const totalMemory = usedMemory + availableMemory; const memoryUtilization = ((usedMemory / totalMemory) * 100).toFixed(1); console.log('Memory utilization:', memoryUtilization, '%'); // Check if a specific export size is feasible const desiredWidth = 3840; // 4K UHD const desiredHeight = 2160; const canExport4K = desiredWidth <= maxExportSize && desiredHeight <= maxExportSize; console.log( 'Can export at 4K UHD (3840x2160):', canExport4K ? 'Yes' : 'No' ); // Add a sample video to demonstrate the editor with video content const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a video block that fills the page const videoBlock = await engine.block.addVideo( videoUri, pageWidth, pageHeight ); // Position the video at the center of the page engine.block.setPositionX(videoBlock, 0); engine.block.setPositionY(videoBlock, 0); // Select the video block engine.block.setSelected(videoBlock, true); // Re-check memory after loading video content const usedAfterLoad = engine.editor.getUsedMemory(); const availableAfterLoad = engine.editor.getAvailableMemory(); const usedAfterLoadMB = (usedAfterLoad / (1024 * 1024)).toFixed(2); const availableAfterLoadMB = (availableAfterLoad / (1024 * 1024)).toFixed( 2 ); console.log('After loading video:'); console.log(' Memory used:', usedAfterLoadMB, 'MB'); console.log(' Memory available:', availableAfterLoadMB, 'MB'); // Log summary of device capabilities console.log('--- Device Capabilities Summary ---'); console.log('Max export dimension:', maxExportSize, 'px'); console.log('4K UHD support:', canExport4K ? 'Supported' : 'Not supported'); console.log( 'Initial memory:', usedMemoryMB, 'MB used /', availableMemoryMB, 'MB available' ); console.log( 'Open the browser console to view detailed limitation information.' ); } } export default Example; ``` ## Resolution Limits Video resolution capabilities depend on hardware resources and WebAssembly memory constraints. CE.SDK supports up to 4K UHD for playback and export on capable hardware. Import resolution is bounded by WebAssembly's 32-bit address space and browser tab memory limits, which typically cap around 2GB. This means very high resolution video files may exceed available memory during processing. Playback and export at 4K depends on available GPU resources, and higher resolutions require proportionally more memory and processing power. Query the maximum export size before initiating exports to avoid failures: ```typescript highlight-query-max-export-size // Query the maximum export dimensions supported by this device const maxExportSize = engine.editor.getMaxExportSize(); console.log('Maximum export size:', maxExportSize, 'pixels'); // The maximum export size depends on the GPU texture size limit // Typical values: 4096, 8192, or 16384 pixels ``` The maximum export size varies by device GPU capabilities. Typical values range from 4096 to 16384 pixels depending on the graphics hardware. Before exporting at high resolutions, verify the target dimensions don't exceed this limit: ```typescript highlight-check-export-feasibility // Check if a specific export size is feasible const desiredWidth = 3840; // 4K UHD const desiredHeight = 2160; const canExport4K = desiredWidth <= maxExportSize && desiredHeight <= maxExportSize; console.log( 'Can export at 4K UHD (3840x2160):', canExport4K ? 'Yes' : 'No' ); ``` ## Duration Limits Video duration affects editing responsiveness and export time. CE.SDK optimizes for short-form content while supporting longer videos with performance trade-offs. Stories and reels up to 2 minutes are fully supported with smooth editing performance. Videos up to 10 minutes work well on modern hardware, with export times typically around 1 minute for this length. Longer videos are technically possible but may impact editing responsiveness on less capable devices. For long-form content, consider these approaches: - Split longer videos into shorter segments for editing - Use lower resolution previews during editing, then export at full quality - Test on target devices to establish acceptable duration limits for your use case ## Frame Rate Support Frame rate affects both playback smoothness and export performance. Hardware acceleration significantly impacts high frame rate capabilities. 30 FPS at 1080p is broadly supported across devices and provides smooth playback on most hardware. 60 FPS and high-resolution combinations benefit from hardware acceleration. When hardware acceleration is unavailable, high frame rate video may drop frames during preview playback, though exports will maintain the correct timing. Variable frame rate sources may have timing precision limitations. For best results with variable frame rate content, consider transcoding to constant frame rate before importing into CE.SDK. ## Supported Codecs CE.SDK supports widely-adopted video and audio codecs, with some platform-specific variations in availability. ### Video Codecs H.264/AVC in `.mp4` containers has universal support across all browsers and platforms. This is the most reliable codec choice for broad compatibility. H.265/HEVC in `.mp4` containers has platform-dependent support. Safari on macOS and iOS supports HEVC natively, while Chrome and Firefox support varies by operating system and codec availability. ### Audio Codecs MP3 works in `.mp3` files or within `.mp4` containers, with universal browser support. AAC in `.m4a`, `.mp4`, or `.mov` containers is widely supported, though some browsers may require system codecs for encoding during export. ## Browser and Platform Restrictions Browser capabilities depend on the host operating system, introducing platform-specific limitations that affect video processing. ### Windows Limitations H.265 transparency is not supported on Windows hosts. If your workflow requires alpha channel video with HEVC, consider processing on macOS or using H.264 which supports alpha on all platforms. ### Linux Limitations Chrome on Linux typically lacks encoder support for H.264 and AAC due to licensing restrictions in the Chrome Linux build. This means video imports and playback may work correctly, but exports may fail. If you're targeting Linux users, consider: - Recommending Firefox, which may have different codec support - Providing fallback export options - Using server-side export processing for Linux users Use the `video.decode.checkSupport` and `video.encode.checkSupport` actions to detect video capabilities programmatically and display appropriate user feedback. Alternatively, use `cesdk.utils.supportsVideoDecode()` and `cesdk.utils.supportsVideoEncode()` to check support silently without showing dialogs. See the [Actions API](https://img.ly/docs/cesdk/angular/actions-6ch24x/) for implementation details. ### Chromium Limitations Chromium-based browsers (without proprietary codecs) don't include video codecs due to licensing. They may fall back to system libraries on some platforms, such as macOS, but support is not guaranteed. Video editing functionality may not work reliably in pure Chromium builds. ### Mobile Browser Limitations Video editing is not supported on mobile browsers on any platform due to technical limitations causing performance issues. For mobile video editing capabilities, use the native mobile SDKs for iOS and Android, which provide full video support. ## Hardware Requirements Device capabilities directly affect video processing performance. CE.SDK scales with available hardware resources. ### Recommended Hardware | Platform | Minimum Hardware | | ---------------- | --------------------------------------------------------------- | | Desktop | Notebook or desktop released in the last 7 years with at least 4GB memory | | Mobile (Apple) | iPhone 8, iPad (6th gen) or newer | | Mobile (Android) | Phones and tablets released in the last 4 years | ### GPU Considerations Hardware acceleration improves encoding and decoding performance significantly. High-resolution and high-frame-rate exports benefit most from GPU support. The maximum export size depends on the maximum texture size the device's GPU can allocate. Integrated graphics can handle most common video editing tasks. Discrete GPUs provide better performance for 4K content and complex compositions with multiple video layers. ## Memory Constraints Client-side video processing operates within browser memory limits. Use the memory APIs to monitor consumption and make informed decisions about resource loading. Query current memory usage to understand how much has been consumed: ```typescript highlight-query-memory-usage // Query current memory consumption const usedMemory = engine.editor.getUsedMemory(); const usedMemoryMB = (usedMemory / (1024 * 1024)).toFixed(2); console.log('Memory used:', usedMemoryMB, 'MB'); ``` Check how much memory remains available for additional resources: ```typescript highlight-query-available-memory // Query available memory for video processing const availableMemory = engine.editor.getAvailableMemory(); const availableMemoryMB = (availableMemory / (1024 * 1024)).toFixed(2); console.log('Memory available:', availableMemoryMB, 'MB'); // Browser tabs typically cap around 2GB due to WebAssembly's 32-bit address space ``` WebAssembly uses a 32-bit address space, limiting the maximum addressable memory. Browser tabs typically cap around 2GB of memory, though this varies by browser and system configuration. Multiple video tracks and effects increase memory usage proportionally. Query memory APIs before loading additional video files to avoid out-of-memory conditions: ```typescript highlight-monitor-memory-after-load // Re-check memory after loading video content const usedAfterLoad = engine.editor.getUsedMemory(); const availableAfterLoad = engine.editor.getAvailableMemory(); const usedAfterLoadMB = (usedAfterLoad / (1024 * 1024)).toFixed(2); const availableAfterLoadMB = (availableAfterLoad / (1024 * 1024)).toFixed( 2 ); console.log('After loading video:'); console.log(' Memory used:', usedAfterLoadMB, 'MB'); console.log(' Memory available:', availableAfterLoadMB, 'MB'); ``` ## Export Size Limitations Export dimensions are bounded by GPU texture size limits. Always query `getMaxExportSize()` before initiating exports to ensure the requested dimensions are supported. The maximum export size varies by device GPU capabilities. Common limits include: - **4096 pixels**: Older integrated graphics - **8192 pixels**: Most modern integrated and discrete GPUs - **16384 pixels**: High-end discrete GPUs Consider target platform requirements when planning export dimensions. Mobile devices and web playback rarely benefit from resolutions above 1080p or 4K, so exporting at extreme resolutions may not provide practical value. ## Troubleshooting Common issues developers encounter related to video limitations: | Issue | Cause | Solution | | ---------------------------------- | --------------------------------------- | --------------------------------------------------- | | Video export fails on Linux | Chrome lacks H.264/AAC encoder support | Use Firefox or implement server-side export | | Slow playback at high resolution | Hardware cannot keep up with decoding | Reduce preview resolution or use proxy editing | | Export fails with large video | Memory limits exceeded | Reduce resolution or split into shorter segments | | H.265 transparency not working | Windows platform limitation | Use H.264 or process on macOS | | Mobile browser video not working | Mobile browsers don't support video editing | Use native mobile SDK instead | | Export size rejected | Exceeds device GPU texture limits | Query `getMaxExportSize()` and reduce dimensions | ## API Reference | Method | Description | | ---------------------------------- | -------------------------------------------------------- | | `engine.editor.getMaxExportSize()` | Query the maximum export dimensions supported by the device | | `engine.editor.getAvailableMemory()` | Get available memory in bytes for video processing | | `engine.editor.getUsedMemory()` | Get current memory usage in bytes | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Videos Overview" description: "Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing." platform: angular url: "https://img.ly/docs/cesdk/angular/create-video/overview-b06512/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Overview](https://img.ly/docs/cesdk/angular/create-video/overview-b06512/) --- 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. Each page in the scene has its own time axis 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 Video editing heavily relies on modern features like web codecs. A detailed list of supported browser versions can be found in our [Supported Browsers](https://img.ly/docs/cesdk/angular/browser-support-28c1b0/). Please also take note of [possible restrictions based on the host platform](https://img.ly/docs/cesdk/angular/file-format-support-3c4b2a/) browsers are running on. ## Creating the Scene First, we create a scene by calling the `scene.create()` API. Then we create a page, add it to the scene and define its dimensions. This page will hold our composition. ```javascript const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); engine.block.setWidth(page, 1280); engine.block.setHeight(page, 720); ``` ## 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. ```javascript engine.block.setDuration(page, 20); ``` ## 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. ```javascript 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/v4/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/v4/ly.img.video/videos/pexels-kampus-production-8154913.mp4' ); engine.block.setFill(video2, videoFill2); ``` ## 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. ```javascript 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. ```javascript 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. ```javascript /* 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. ```javascript engine.block.setLooping(videoFill, true); ``` ## 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`. ```javascript 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. ```javascript const audio = engine.block.create('audio'); engine.block.appendChild(page, audio); engine.block.setString( audio, 'audio/fileURI', 'https://cdn.img.ly/assets/demo/v3/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. ```javascript /* 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. ```javascript /* 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. ```javascript /* Give the Audio block a duration of 7 seconds. */ engine.block.setDuration(audio, 7); ``` ## 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. ```javascript /* 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 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. ```javascript /* 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(); ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video and Audio Timeline Web Editor" description: "Use the timeline editor to arrange and edit video clips, audio, and animations frame by frame." platform: angular url: "https://img.ly/docs/cesdk/angular/create-video/timeline-editor-912252/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Timeline Editor](https://img.ly/docs/cesdk/angular/create-video/timeline-editor-912252/) --- The CreativeEditor SDK (CE.SDK) offers features for editing the video timeline, the horizontal layout where you arrange video, audio, and effects in the sequence they play. This tutorial will help you create advanced video editing tools for high-quality video exports. This tutorial focuses on the user interface components. For programmatic timeline manipulation, refer to the [Video Overview](https://img.ly/docs/cesdk/angular/create-video/overview-b06512/) guide. ## When to Use Use the CE.SDK timeline features in web applications that incorporate the following tools: - Video montages - Marketing video editing - Social media content creation ## What You’ll Learn This tutorial will show you how to: - The video timeline works. - To create scenes for video editing. - To manage video layers (tracks). - To edit a clip’s duration and offset. - To manage video playback. - To generate and display video thumbnails. ## How the Timeline Works This tutorial refers to the timeline, which is the horizontal area below the video editing canvas. The video timeline displays: - All clips on parallel tracks - A playhead for navigation - Controls for playback and editing Use the visual timeline for editing actions like: - Arranging clips along a time axis to control when each element **appears**. - Trimming clips to change their duration. - Layer content visually. ### Activate CE.SDK Video Editing To work with the CE.SDK Editor for video editing, set up the scene as follows: ```ts import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource, } from '@cesdk/cesdk-js/plugins'; // Add default asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Add demo and upload sources await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.audio.*', 'ly.img.image.*', 'ly.img.templates.video.*', 'ly.img.video.*' ] }) ); await cesdk.actions.run('scene.create'); ``` This tells the CreativeEditor: - To load demo video assets to test the editor. - To create a scene, ready for editing. ### Open/Close the Timeline Editing area The default CreativeEditor settings display the timeline when launching the UI. Close it to increase canvas space when the scene doesn’t need timeline editing. To close it, click the **Timeline** toggle: To open it and access the visual timeline editing tools, click the same toggle: ### Timeline Structure The timeline’s structure in the CE.SDK is the following: 1. Scene (root block) 2. Pages (as video segments) 3. Tracks (as parallel layers) 4. Clips (as graphic blocks) ### Track Structure The track is a container that handles the content layer. The timeline organizes content into three track types: - Clip tracks (for video content) - Overlay track (for text and graphics over the video) - Audio tracks The order in which track appears determines its position in the scene: - Moving a track to the top brings it to the front of the scene. - Moving a track to the bottom of the timeline sends the content the back of the scene. ### Control the Content Position You can adjust the position of the content using the vertical playhead line, which indicates the current playhead time. The playhead moves along the timeline, displaying the time code. Change the playhead position (when the clip starts playing) by either: - Clicking on any area in the time ruler. - Dragging the playhead with your cursor. ### Scroll and Zoom on the Timeline Adjust the time scale to increase the level of details per frame: 1. Click anywhere in the timeline area. 2. Zoom into the timeline using: - Keyboard shortcuts - A mouse - A trackpad When zoomed in, the clip stretches visually—each pixel now represents fewer milliseconds—so you can fine-tune edits frame by frame. ## Control How the Clips Play ### Play/Pause the Scene The playback bar contains: - The **play/pause button** that plays the clip from the current playhead position. - A **loop toggle** that repeats the video when activated. - The **current timestamp** The scene plays while synchronizing: - All videos - Overlays - Audio ### Preview Frames Drag and drop (scrub) the playhead back and forth to preview frames without playing the clip in real time. This allows you to quickly find the exact moment you want to edit. The timestamp is the current playhead time in HH:MM:SS:FF format. ## Edit Video Clips The CreativeEditor’s timeline allows users to visually edit clips and scenes in the browser. This section lists all timeline editing features. ### Select Clips Before editing any clip, you need to select it to apply modifications to it. To **select a clip**, click it either: - From the page - From the timeline Selecting multiple clips at once is available either: - With cursor clicks on each clip while holding modifier keys. - By drawing a frame in the scene with the cursor. Selecting a clip reveals editing handles to: - Crop the clip. - Flip the clip. - Trim the clip. ### Edit Clip’s Duration In the timeline, selected clips show drag handles at their beginning and end. Use these handles based on your goals: - Trim the clip from the beginning: use the left handle (at the start of the clip). - Trim the clip from the end: use the right handle (at the end of the clip). This operation is called **“trimming” a clip**. As you move the clip, its position on the timeline automatically updates. Trimming shortens the clip, and the cut portions: - Don’t play anymore. - Disappear from the timeline. ### Split Clips The Split Control splits the selected clip into two separate clips at the playhead. Each resulting clip is then independently editable. **Splitting doesn’t remove any part of the original content.** ## Add Content to the Scene Once you’ve edited the clips, you can add more elements to the scene to customize it further, such as: - Additional clips - Audio tracks - Graphics and text ### Add Another Clip The web version of the CreativeEditor allows you to add more clips to the scene in two ways: - By clicking the "Add Clip" button: 1. Opens the video assets gallery. 2. Automatically adds any selected clips from the gallery to the timeline. - By dragging and dropping from your computer to either: 1. The page 2. The timeline Dragging the clip highlights the zone before dropping it. The choice of the zone makes no difference: the clip’s position is automatically set at the beginning of the timeline. You can then reposition and edit it as needed. ### Add Audio and Overlays Furthermore, there are two types of content that you can incorporate into the setting: - Overlays (text, images, stickers) - Audio **Add the new content** to the scene by either: - Clicking the kind of content to add from the **lateral menu**. - Using the **drag and drop** feature from your computer or another source. Each type of content appears automatically on its own track, at the start of the timeline. ## Arrange Clips Use the CreativeEditor UI’s timeline to edit: - The order in which clips appear. - Each clip starting point. - Using advanced settings. ### Reorder Clips Drag clips along the horizontal axis to move them earlier or later in the timeline. This makes a clip’s order relative to the other clip change. The CreativeEditor enhances visual clip arrangement in the timeline by: - Auto-adjusting positions to prevent overlapping clips on the same track. - Showing the clip’s predicted position using drop indicators. ### Edit the Clip’s Starting Point Each clip’s position along the horizontal axis indicates its start time in the composition. To change the start time of a clip, drag it either: - Left to make it start **earlier**. - Right to make it start **later**. Gaps between clips display as empty frames showing the background color when the scene plays. ### Change the Background color To change the background color, click the **Background** button on the left side of the play bar. This action opens a full color editing menu to customize: - Color settings (RGB, CMYK, Hex, Hue) - Transparency - Solid or gradients - Color picking from the scene This menu provides an option to **deactivate the background** as well. Deactivating the background makes the scene play on a transparent background. ## Configure the Timeline ### Activate/Deactivate the Timeline The CreativeEditor SDK ships a UI with the timeline editor activated. To change the settings and deactivate the timeline , use the `ly.img.video.timeline` feature flag: ```ts // Enable the timeline (default for video scenes) cesdk.feature.enable('ly.img.video.timeline'); ``` ```ts // Disable the timeline for a simplified interface cesdk.feature.disable('ly.img.video.timeline'); ``` Pass the option to selectively show or hide the timeline based on a condition: ```ts // Show timeline and conditionally enable split controls cesdk.feature.set('ly.img.video.timeline', true); cesdk.feature.set('ly.img.video.timeline.controls.split', ({ engine }) => { const selected = engine.block.findAllSelected(); return selected.length === 1; }); ``` ### Hide or Show Tracks Simplify the CreativeEditor interface by leveraging the track visibility settings. Hide or display tracks based on specific use cases. **Enable** video features with: ```ts cesdk.feature.enable('ly.img.video.timeline.clips'); ``` **Hide** video feature with: ```ts cesdk.feature.disable('ly.img.video.timeline.clips'); ``` This will hide **Display** overlays tracks with: ```ts cesdk.feature.enable('ly.img.video.timeline.overlays'); ``` **Hide** overlay tracks with: ```ts cesdk.feature.disable('ly.img.video.timeline.overlays'); ``` **Display** audio tracks with: ```ts cesdk.feature.enable('ly.img.video.timeline.audio'); ``` **Hide** audio tracks with: ```ts cesdk.feature.disable('ly.img.video.timeline.audio'); ``` **Display** all tracks with: ```ts cesdk.feature.enable([ 'ly.img.video.timeline.clips', 'ly.img.video.timeline.overlays', 'ly.img.video.timeline.audio' ]); ``` **Hide** all tracks with: ```ts cesdk.feature.disable([ 'ly.img.video.timeline.clips', 'ly.img.video.timeline.overlays', 'ly.img.video.timeline.audio' ]); ``` ### Configure the Play Bar Simplify the play bar by hiding or displaying controls in the UI: **Display** the play bar with: ```ts cesdk.feature.enable('ly.img.video.timeline.controls.playback'); ``` **Hide** the play bar with: ```ts cesdk.feature.disable('ly.img.video.timeline.controls.playback'); ``` **Display** the loop control with: ```ts cesdk.feature.enable('ly.img.video.timeline.controls.loop'); ``` **Hide** the loop control with: ```ts cesdk.feature.disable('ly.img.video.timeline.controls.loop'); ``` **Display** the zoom on the timeline with: ```ts cesdk.feature.enable('ly.img.video.timeline.controls.timelineZoom'); ``` **Hide** the zoom into the timeline with: ```ts cesdk.feature.disable('ly.img.video.timeline.controls.timelineZoom'); ``` ### Fine-tune Editing Actions Restrict or allow editing actions by hiding or displaying the editing controls: **Hide** the split button with: ```ts cesdk.feature.disable('ly.img.video.timeline.controls.split'); ``` **Hide** the **Add Clip** button with: ```ts cesdk.feature.disable('ly.img.video.timeline.addClip'); ``` **Hide** the background button with: ```ts cesdk.feature.disable('ly.img.video.timeline.controls.background'); ``` **Activate** all video features at once using global patterns with `/*`: ```ts // Enable all video features cesdk.feature.enable('ly.img.video.*'); ``` Or **deactivate** video features at once: ```ts // Disable all video control features cesdk.feature.disable('ly.img.video.*'); ``` ### Activate Features Dynamically You can activate or deactivate timeline features dynamically, instead of hard-coding their **on/off** state. The following example detects the scene state: - When a clip is selected, it activates the Split button. - When nothing is selected, it hides the Split button. ```ts // Disable split control when nothing is selected cesdk.feature.set('ly.img.video.timeline.controls.split', ({ engine }) => { const selected = engine.block.findAllSelected(); return selected.length === 1; }); ``` ### Feature Reference | Feature ID | Description | |------------|-------------| | `ly.img.video.timeline` | Show or hide the entire timeline panel | | `ly.img.video.timeline.clips` | Show or hide the video clips track | | `ly.img.video.timeline.overlays` | Show or hide the overlay track | | `ly.img.video.timeline.audio` | Show or hide the audio track | | `ly.img.video.timeline.addClip` | Enable or disable adding new clips | | `ly.img.video.timeline.controls` | Base feature for all video controls | | `ly.img.video.timeline.controls.toggle` | Show or hide timeline collapse/expand button | | `ly.img.video.timeline.controls.playback` | Show or hide play/pause and timestamp | | `ly.img.video.timeline.controls.loop` | Show or hide loop toggle | | `ly.img.video.timeline.controls.split` | Show or hide split clip control | | `ly.img.video.timeline.controls.background` | Show or hide background color controls | | `ly.img.video.timeline.controls.timelineZoom` | Show or hide zoom controls | ## Troubleshooting | Issue | Solution| | ----- | ------- | | Timeline not displaying | ・ Check that `ly.img.video.timeline` feature is enabled. | | Trim handles not displaying | ・ Click the clip first to reveal handles.
・ Check if the clip contains video/audio content. | | Play not starting | ・ Ensure the video has loaded.
・ Check the browser console for codec errors.
・ Check that the playhead falls within the page duration. | | Split not working | ・ Check that you’ve selected the clip to split.
・ Check that the playhead is within the selected clip’s duration
. Make sure you’ve enabled `ly.img.video.timeline.controls.split`. | ## Next Steps - [Trim Video Clips](https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/) — Detailed trimming techniques, including frame-accurate editing. - [Control Audio and Video](https://img.ly/docs/cesdk/angular/create-video/control-daba54/) — Master volume, playback speed, and timing. - [Activate or Deactivate Features](https://img.ly/docs/cesdk/angular/user-interface/customization/disable-or-enable-f058e2/) - Full feature flag reference. - [Compress and Export the Video](https://img.ly/docs/cesdk/angular/export-save-publish/export/compress-29105e/). --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Update Caption Presets" description: "Extend video captions with custom caption styles using simple content.json updates" platform: angular url: "https://img.ly/docs/cesdk/angular/create-video/update-caption-presets-e9c385/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Update Caption Presets](https://img.ly/docs/cesdk/angular/create-video/update-caption-presets-e9c385/) --- Extend CE.SDK's video caption feature with custom caption presets by updating the content.json file. Caption presets let your users apply predefined styles to video captions with a single click. ![Update Caption Presets example showing a styled neon glow caption preset](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-update-caption-presets-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-update-caption-presets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-update-caption-presets-browser/) 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 shows you how to create styled text blocks, serialize them as preset files, and structure the content.json to make them available in the caption presets panel. ```typescript file=@cesdk_web_examples/guides-create-video-update-caption-presets-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Update Caption Presets Guide * * Demonstrates creating custom caption presets in CE.SDK: * - Creating a styled text block as a preset base * - Applying neon glow styling with colors and drop shadow * - Serializing the block for use as a preset file * - Understanding the content.json structure for caption presets */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); const engine = cesdk.engine; // Create a text block to use as the preset base // Text blocks support all the styling properties needed for captions const textBlock = engine.block.create('text'); // Set sample caption text engine.block.setString(textBlock, 'text/text', 'NEON GLOW'); // Position and size the text block engine.block.setPositionX(textBlock, 50); engine.block.setPositionY(textBlock, 200); engine.block.setWidth(textBlock, 600); engine.block.setHeightMode(textBlock, 'Auto'); // Style the text with a bright neon cyan color // This will be the fill/solid/color property in the preset engine.block.setColor(textBlock, 'fill/solid/color', { r: 0.0, g: 1.0, b: 1.0, a: 1.0 }); // Set font properties for the caption style engine.block.setFloat(textBlock, 'text/fontSize', 48); // Use a bold font for better visibility // Load and set a typeface const typefaceResult = await engine.asset.findAssets('ly.img.typeface', { query: 'Roboto', page: 0, perPage: 10 }); if (typefaceResult.assets.length > 0) { const typefaceAsset = typefaceResult.assets[0]; const typeface = typefaceAsset.payload?.typeface; if (typeface && typeface.fonts?.[0]?.uri) { engine.block.setFont(textBlock, typeface.fonts[0].uri, typeface); } } // Add a glowing drop shadow effect for the neon look // This creates the characteristic neon glow effect engine.block.setDropShadowEnabled(textBlock, true); // Set glow color (bright cyan to match text) engine.block.setColor(textBlock, 'dropShadow/color', { r: 0.0, g: 1.0, b: 1.0, a: 0.8 }); // Configure shadow properties for a soft glow engine.block.setFloat(textBlock, 'dropShadow/blurRadius/x', 20); engine.block.setFloat(textBlock, 'dropShadow/blurRadius/y', 20); engine.block.setFloat(textBlock, 'dropShadow/offset/x', 0); engine.block.setFloat(textBlock, 'dropShadow/offset/y', 0); // Optionally add a semi-transparent dark background // This helps the caption stand out against video content engine.block.setBackgroundColorEnabled(textBlock, true); engine.block.setColor(textBlock, 'backgroundColor/color', { r: 0.0, g: 0.0, b: 0.1, a: 0.7 }); // Add the styled text block to the page const pages = engine.block.findByType('page'); if (pages.length > 0) { engine.block.appendChild(pages[0], textBlock); } // Select the block and zoom to it so it's visible in the editor engine.block.select(textBlock); await engine.scene.zoomToBlock(textBlock, { padding: 40 }); // Serialize the styled text block to create a preset file // This serialized string can be saved as a .blocks or .preset file // Include 'bundle' scheme to allow serialization of blocks with bundled fonts const serializedPreset = await engine.block.saveToString( [textBlock], ['buffer', 'http', 'https', 'bundle'] ); // eslint-disable-next-line no-console console.log('=== Serialized Preset ==='); // eslint-disable-next-line no-console console.log('Save this as a .preset file (e.g., neon-glow.preset):'); // eslint-disable-next-line no-console console.log(serializedPreset); // Example content.json entry for the custom preset // This shows the structure needed to add the preset to content.json const contentJsonEntry = { id: '//ly.img.caption.presets/neon-glow', label: { en: 'Neon Glow' }, meta: { uri: '{{base_url}}/ly.img.caption.presets/presets/neon-glow.preset', thumbUri: '{{base_url}}/ly.img.caption.presets/thumbnails/neon-glow.png', mimeType: 'application/ubq-blocks-string' }, payload: { properties: [ { type: 'Color', property: 'fill/solid/color', value: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 }, defaultValue: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 } }, { type: 'Color', property: 'dropShadow/color', value: { r: 0.0, g: 1.0, b: 1.0, a: 0.8 }, defaultValue: { r: 0.0, g: 1.0, b: 1.0, a: 0.8 } }, { type: 'Color', property: 'backgroundColor/color', value: { r: 0.0, g: 0.0, b: 0.1, a: 0.7 }, defaultValue: { r: 0.0, g: 0.0, b: 0.1, a: 0.7 } } ] } }; // eslint-disable-next-line no-console console.log('\n=== content.json Entry ==='); // eslint-disable-next-line no-console console.log('Add this entry to your content.json assets array:'); // eslint-disable-next-line no-console console.log(JSON.stringify(contentJsonEntry, null, 2)); // Example of a complete content.json file structure const completeContentJson = { version: '3.0.0', id: 'ly.img.caption.presets', assets: [contentJsonEntry] }; // eslint-disable-next-line no-console console.log('\n=== Complete content.json Example ==='); // eslint-disable-next-line no-console console.log(JSON.stringify(completeContentJson, null, 2)); // eslint-disable-next-line no-console console.log('\n=== Caption Preset Guide ==='); // eslint-disable-next-line no-console console.log( 'The styled text block above demonstrates a "Neon Glow" caption preset.' ); // eslint-disable-next-line no-console console.log('To use this preset:'); // eslint-disable-next-line no-console console.log('1. Save the serialized preset string as a .preset file'); // eslint-disable-next-line no-console console.log('2. Create a thumbnail image showing the preset appearance'); // eslint-disable-next-line no-console console.log('3. Add the content.json entry to your assets folder'); // eslint-disable-next-line no-console console.log('4. Configure CE.SDK baseURL to point to your assets location'); } } export default Example; ``` This guide covers how to understand the caption presets folder structure, create custom caption styles from text blocks, serialize presets for hosting, define customizable properties, and configure CE.SDK to load your custom presets. ## Understanding the Caption Presets Structure ### Folder Organization CE.SDK's caption presets use a specific directory structure that the engine expects when loading presets. The base path is `assets/v5/ly.img.caption.presets/` and contains: ``` assets/v5/ly.img.caption.presets/ ├── content.json # Master index of all presets ├── presets/ # Folder containing preset files │ ├── my-custom-preset.preset # 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. When CE.SDK loads caption presets, it reads this file to discover available presets and their locations. ### content.json Format The content.json file follows a specific format with version, asset source ID, and an assets array: ```json { "version": "3.0.0", "id": "ly.img.caption.presets", "assets": [ { "id": "ly.img.caption.presets.my-preset", "label": { "en": "My Preset" }, "meta": { "uri": "{{base_url}}/ly.img.caption.presets/presets/my-preset.preset", "thumbUri": "{{base_url}}/ly.img.caption.presets/thumbnails/my-preset.png", "mimeType": "application/ubq-blocks-string" }, "payload": { "properties": [] } } ] } ``` Each asset entry requires a unique ID with namespace, localized label, meta with URIs and mime type, and optional payload properties for customization. ## Creating Custom Caption Presets ### Designing a Caption Style We create a styled text block as the basis for our preset. Text blocks support all the styling properties needed for captions including colors, fonts, backgrounds, shadows, and effects. ```typescript highlight-create-text-block // Create a text block to use as the preset base // Text blocks support all the styling properties needed for captions const textBlock = engine.block.create('text'); // Set sample caption text engine.block.setString(textBlock, 'text/text', 'NEON GLOW'); // Position and size the text block engine.block.setPositionX(textBlock, 50); engine.block.setPositionY(textBlock, 200); engine.block.setWidth(textBlock, 600); engine.block.setHeightMode(textBlock, 'Auto'); ``` We position and size the text block, then set sample caption text. The text block serves as our canvas for applying the styling that will define the preset's appearance. ### Styling with Colors and Fonts We style the text with colors and configure font properties. The fill color becomes the `fill/solid/color` property in the preset: ```typescript highlight-style-text-color // Style the text with a bright neon cyan color // This will be the fill/solid/color property in the preset engine.block.setColor(textBlock, 'fill/solid/color', { r: 0.0, g: 1.0, b: 1.0, a: 1.0 }); ``` We also configure font size and load a typeface. When users apply this preset, their captions will inherit these font settings: ```typescript highlight-style-font // Set font properties for the caption style engine.block.setFloat(textBlock, 'text/fontSize', 48); // Use a bold font for better visibility // Load and set a typeface const typefaceResult = await engine.asset.findAssets('ly.img.typeface', { query: 'Roboto', page: 0, perPage: 10 }); if (typefaceResult.assets.length > 0) { const typefaceAsset = typefaceResult.assets[0]; const typeface = typefaceAsset.payload?.typeface; if (typeface && typeface.fonts?.[0]?.uri) { engine.block.setFont(textBlock, typeface.fonts[0].uri, typeface); } } ``` ### Adding Visual Effects We add a glowing drop shadow effect for the neon look. Drop shadow creates the characteristic glow effect that makes caption presets visually distinctive: ```typescript highlight-style-drop-shadow // Add a glowing drop shadow effect for the neon look // This creates the characteristic neon glow effect engine.block.setDropShadowEnabled(textBlock, true); // Set glow color (bright cyan to match text) engine.block.setColor(textBlock, 'dropShadow/color', { r: 0.0, g: 1.0, b: 1.0, a: 0.8 }); // Configure shadow properties for a soft glow engine.block.setFloat(textBlock, 'dropShadow/blurRadius/x', 20); engine.block.setFloat(textBlock, 'dropShadow/blurRadius/y', 20); engine.block.setFloat(textBlock, 'dropShadow/offset/x', 0); engine.block.setFloat(textBlock, 'dropShadow/offset/y', 0); ``` Optionally, we add a semi-transparent background to help the caption stand out against video content: ```typescript highlight-style-background // Optionally add a semi-transparent dark background // This helps the caption stand out against video content engine.block.setBackgroundColorEnabled(textBlock, true); engine.block.setColor(textBlock, 'backgroundColor/color', { r: 0.0, g: 0.0, b: 0.1, a: 0.7 }); ``` ### Serializing the Preset We serialize the styled text block using `block.saveToString()`. This creates a serialized string that can be saved as a `.preset` or `.blocks` file: ```typescript highlight-serialize-preset // Serialize the styled text block to create a preset file // This serialized string can be saved as a .blocks or .preset file // Include 'bundle' scheme to allow serialization of blocks with bundled fonts const serializedPreset = await engine.block.saveToString( [textBlock], ['buffer', 'http', 'https', 'bundle'] ); // eslint-disable-next-line no-console console.log('=== Serialized Preset ==='); // eslint-disable-next-line no-console console.log('Save this as a .preset file (e.g., neon-glow.preset):'); // eslint-disable-next-line no-console console.log(serializedPreset); ``` The serialized string contains all block properties and styling. Save this output as a file (e.g., `neon-glow.preset`) and create a thumbnail image showing the preset appearance. ## Defining Customizable Properties ### Color Properties We define which properties users can customize without changing the entire preset. Color properties allow users to modify specific color aspects of a preset: ```typescript highlight-content-json-structure // Example content.json entry for the custom preset // This shows the structure needed to add the preset to content.json const contentJsonEntry = { id: '//ly.img.caption.presets/neon-glow', label: { en: 'Neon Glow' }, meta: { uri: '{{base_url}}/ly.img.caption.presets/presets/neon-glow.preset', thumbUri: '{{base_url}}/ly.img.caption.presets/thumbnails/neon-glow.png', mimeType: 'application/ubq-blocks-string' }, payload: { properties: [ { type: 'Color', property: 'fill/solid/color', value: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 }, defaultValue: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 } }, { type: 'Color', property: 'dropShadow/color', value: { r: 0.0, g: 1.0, b: 1.0, a: 0.8 }, defaultValue: { r: 0.0, g: 1.0, b: 1.0, a: 0.8 } }, { type: 'Color', property: 'backgroundColor/color', value: { r: 0.0, g: 0.0, b: 0.1, a: 0.7 }, defaultValue: { r: 0.0, g: 0.0, b: 0.1, a: 0.7 } } ] } }; // eslint-disable-next-line no-console console.log('\n=== content.json Entry ==='); // eslint-disable-next-line no-console console.log('Add this entry to your content.json assets array:'); // eslint-disable-next-line no-console console.log(JSON.stringify(contentJsonEntry, null, 2)); ``` Each property in the `payload.properties` array needs: - `type`: Must be `"Color"` for color properties - `property`: Property path (e.g., `"fill/solid/color"`, `"backgroundColor/color"`, `"dropShadow/color"`) - `value`: Current RGBA color object with `r`, `g`, `b`, `a` values (0-1 range) - `defaultValue`: Initial RGBA color object ### Supported Property Paths Available property paths for caption customization: - `fill/solid/color`: Text fill color - `backgroundColor/color`: Background color behind text - `dropShadow/color`: Drop shadow color - `stroke/color`: Stroke/outline color ## Updating the content.json File ### Adding a New Preset Entry Add a new object to the `assets` array with all required fields. The complete structure for a preset entry: ```json { "id": "ly.img.caption.presets.neon-glow", "label": { "en": "Neon Glow" }, "meta": { "uri": "{{base_url}}/ly.img.caption.presets/presets/neon-glow.preset", "thumbUri": "{{base_url}}/ly.img.caption.presets/thumbnails/neon-glow.png", "mimeType": "application/ubq-blocks-string" }, "payload": { "properties": [ { "type": "Color", "property": "fill/solid/color", "value": { "r": 0.0, "g": 1.0, "b": 1.0, "a": 1.0 }, "defaultValue": { "r": 0.0, "g": 1.0, "b": 1.0, "a": 1.0 } }, { "type": "Color", "property": "dropShadow/color", "value": { "r": 0.0, "g": 1.0, "b": 1.0, "a": 0.8 }, "defaultValue": { "r": 0.0, "g": 1.0, "b": 1.0, "a": 0.8 } } ] } } ``` Ensure the `mimeType` is set to `"application/ubq-blocks-string"` and use the `{{base_url}}` placeholder for dynamic path resolution. ### Complete content.json Example The complete content.json file structure wraps preset entries in the assets array: ```typescript highlight-complete-content-json // Example of a complete content.json file structure const completeContentJson = { version: '3.0.0', id: 'ly.img.caption.presets', assets: [contentJsonEntry] }; // eslint-disable-next-line no-console console.log('\n=== Complete content.json Example ==='); // eslint-disable-next-line no-console console.log(JSON.stringify(completeContentJson, null, 2)); ``` ## Hosting and Serving Custom Presets ### Server Setup Prepare the folder structure and upload files to your server: 1. Create folder structure matching `assets/v5/ly.img.caption.presets/` 2. Upload `content.json` to the root folder 3. Upload `.preset` files to `presets/` subfolder 4. Upload thumbnail images to `thumbnails/` subfolder 5. Ensure files are accessible via HTTP/HTTPS 6. Configure CORS headers if serving cross-origin ### Verifying File Access Test that all files are accessible before configuring CE.SDK: - Access `content.json` directly in browser - Access preset files and thumbnails via their URLs - Check browser console for CORS errors ## Loading Custom Presets into CE.SDK ### Base URL Configuration 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.caption.presets", we'll update this existing source rather than creating a new one. Set the base URL to point to your asset hosting location. CE.SDK automatically looks for `ly.img.caption.presets/content.json` relative to the base URL: ```typescript const config = { baseURL: 'https://your-server.com/assets/' }; CreativeEditorSDK.create('#cesdk_container', config).then(async (cesdk) => { // Caption presets load automatically from baseURL + 'ly.img.caption.presets/content.json' }); ``` Your custom presets will seamlessly integrate with any built-in presets and automatically appear in the caption presets panel in the UI. No additional source registration is needed when replacing the default presets. ## Troubleshooting ### Preset Not Loading - Verify `content.json` is accessible at expected URL - Check browser console for 404 errors on preset files - Ensure `mimeType` is set to `"application/ubq-blocks-string"` - Verify `{{base_url}}` placeholder is used correctly ### Preset Styles Not Applying - Ensure preset was serialized from a text block (not other block types) - Verify the serialized block contains styling properties - Check that property paths in `payload.properties` are correct ### Thumbnail Not Displaying - Verify thumbnail file exists at the `thumbUri` path - Check image format is PNG - Ensure CORS headers allow image loading ### Custom Colors Not Working - Verify `properties` array structure in content.json - Check property `type` is `"Color"` - Ensure `value` and `defaultValue` have correct RGBA format (0-1 range) ## API Reference | Method | Category | Purpose | | -------------------------------------------- | -------- | ------------------------------------------- | | `engine.block.create('text')` | Block | Create text block for preset styling | | `engine.block.saveToString(blocks)` | Block | Serialize styled block to preset format | | `engine.block.setColor(id, property, color)` | Block | Set color property (fill, background, etc.) | | `engine.block.setBackgroundColorEnabled()` | Block | Enable background color | | `engine.block.setDropShadowEnabled()` | Block | Enable drop shadow | | `engine.block.setFloat(id, property, value)` | Block | Set numeric properties (font size, etc.) | | `engine.block.setString(id, property, val)` | Block | Set string properties (text, font URI) | | `engine.asset.findAssets(sourceId, query)` | Asset | Find assets like typefaces | | `CreativeEngine.init(config)` | Engine | Initialize engine with base URL config | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit Image" description: "Use CE.SDK to crop, transform, annotate, or enhance images with editing tools and programmatic APIs." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image-c64912/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) --- --- ## Related Pages - [Image Editor SDK](https://img.ly/docs/cesdk/angular/edit-image/overview-5249ea/) - The CreativeEditor SDK provides a robust and user-friendly solution for photo and image editing. - [Replace Colors](https://img.ly/docs/cesdk/angular/edit-image/replace-colors-6ede17/) - Replace specific colors in images using CE.SDK's Recolor and Green Screen effects with programmatic control. - [Remove Background](https://img.ly/docs/cesdk/angular/edit-image/remove-bg-9dfcf7/) - Remove image backgrounds to isolate subjects or prepare assets for compositing and reuse. - [Vectorize](https://img.ly/docs/cesdk/angular/edit-image/vectorize-2b4c7f/) - Convert raster images into scalable vector graphics for flexible resizing and editing. - [Transform](https://img.ly/docs/cesdk/angular/edit-image/transform-9d189b/) - Crop, resize, rotate, scale, or flip images using CE.SDK's built-in transformation tools. - [Add Watermark](https://img.ly/docs/cesdk/angular/edit-image/add-watermark-679de0/) - Add text and image watermarks to protect images, indicate ownership, or add branding using CE.SDK. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Watermark" description: "Add text and image watermarks to protect images, indicate ownership, or add branding using CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/add-watermark-679de0/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Add Watermark](https://img.ly/docs/cesdk/angular/edit-image/add-watermark-679de0/) --- Add text and image watermarks to designs programmatically using CE.SDK's block API. ![Add Watermark example showing a design with text and logo watermarks](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-add-watermark-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-add-watermark-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-add-watermark-browser/) Watermarks protect intellectual property, indicate ownership, add branding, or mark content as drafts. CE.SDK supports two types of watermarks: **text watermarks** created from text blocks for copyright notices and brand names, and **image watermarks** created from graphic blocks with image fills for logos and symbols. ```typescript file=@cesdk_web_examples/guides-edit-image-add-watermark-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add Watermark Guide * * Demonstrates adding text and image watermarks to designs: * - Creating text watermarks with custom styling * - Creating logo watermarks using graphic blocks * - Positioning watermarks side by side at the bottom * - Applying drop shadows for visibility * - Exporting watermarked designs */ 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.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Create a scene with custom page dimensions 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 pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a gradient background for the page const gradientFill = engine.block.createFill('gradient/linear'); // Set a modern purple-to-cyan gradient engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.39, g: 0.4, b: 0.95, a: 1 }, stop: 0 }, // Indigo { color: { r: 0.02, g: 0.71, b: 0.83, a: 1 }, stop: 1 } // Cyan ]); // Set diagonal gradient direction (top-left to bottom-right) engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); // Apply gradient to page engine.block.setFill(page, gradientFill); // Create a centered title text const titleText = engine.block.create('text'); engine.block.setString(titleText, 'text/text', 'Add Watermark'); engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, titleText); // Style the title engine.block.setTextFontSize(titleText, 14); engine.block.setTextColor(titleText, { r: 1, g: 1, b: 1, a: 1 }); engine.block.setWidthMode(titleText, 'Auto'); engine.block.setHeightMode(titleText, 'Auto'); // Center the title on the page const titleWidth = engine.block.getFrameWidth(titleText); const titleHeight = engine.block.getFrameHeight(titleText); engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleText, (pageHeight - titleHeight) / 2); // Create a text block for the watermark const textWatermark = engine.block.create('text'); // Set the watermark text content engine.block.setString(textWatermark, 'text/text', '© 2024 img.ly'); // Left-align the text for the watermark engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left'); // Add the text block to the page engine.block.appendChild(page, textWatermark); // Set font size for the watermark engine.block.setTextFontSize(textWatermark, 4); // Set text color to white for contrast engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 }); // Set opacity to make it semi-transparent engine.block.setOpacity(textWatermark, 0.8); // Set width mode to auto so text fits its content engine.block.setWidthMode(textWatermark, 'Auto'); engine.block.setHeightMode(textWatermark, 'Auto'); // Create a graphic block for the logo watermark const logoWatermark = engine.block.create('graphic'); // Create a rect shape for the logo const rectShape = engine.block.createShape('rect'); engine.block.setShape(logoWatermark, rectShape); // Create an image fill with a logo const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); // Apply the fill to the graphic block engine.block.setFill(logoWatermark, imageFill); // Set content fill mode to contain the image within bounds engine.block.setContentFillMode(logoWatermark, 'Contain'); // Add to page engine.block.appendChild(page, logoWatermark); // Size the logo watermark const logoWidth = 80; const logoHeight = 50; engine.block.setWidth(logoWatermark, logoWidth); engine.block.setHeight(logoWatermark, logoHeight); // Set opacity for the logo watermark engine.block.setOpacity(logoWatermark, 0.8); // Position padding from edges const padding = 15; // Position text watermark at bottom-left engine.block.setPositionX(textWatermark, padding); engine.block.setPositionY(textWatermark, pageHeight - padding - 20); // Position logo watermark at top-right engine.block.setPositionX(logoWatermark, pageWidth - padding - logoWidth); engine.block.setPositionY(logoWatermark, padding); // Add drop shadow to text watermark for better visibility engine.block.setDropShadowEnabled(textWatermark, true); engine.block.setDropShadowOffsetX(textWatermark, 1); engine.block.setDropShadowOffsetY(textWatermark, 1); engine.block.setDropShadowBlurRadiusX(textWatermark, 2); engine.block.setDropShadowBlurRadiusY(textWatermark, 2); engine.block.setDropShadowColor(textWatermark, { r: 0, g: 0, b: 0, a: 0.5 }); // Add drop shadow to logo watermark engine.block.setDropShadowEnabled(logoWatermark, true); engine.block.setDropShadowOffsetX(logoWatermark, 1); engine.block.setDropShadowOffsetY(logoWatermark, 1); engine.block.setDropShadowBlurRadiusX(logoWatermark, 2); engine.block.setDropShadowBlurRadiusY(logoWatermark, 2); engine.block.setDropShadowColor(logoWatermark, { r: 0, g: 0, b: 0, a: 0.5 }); // Add export button to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-watermarked', label: 'Export', icon: '@imgly/Download', onClick: async () => { // Export the watermarked design const blob = await engine.block.export(page, { mimeType: 'image/png' }); // Download the watermarked image await cesdk.utils.downloadFile(blob, 'image/png'); } } ] } ); // Zoom to fit the page in view with padding and enable auto-fit await engine.scene.zoomToBlock(page, { padding: 40 }); engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers how to create text and logo watermarks, position them on a design, style them for visibility, and export the watermarked result. ## Setup and Prerequisites We start by initializing CE.SDK, loading asset sources, and creating a scene with a custom page size. The page provides the canvas where we'll add our watermarks. ```typescript highlight=highlight-setup const engine = cesdk.engine; // Create a scene with custom page dimensions 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 pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); ``` We use `engine.scene.create('VerticalStack', {...})` to create a scene with custom page dimensions. The page dimensions are retrieved for positioning calculations later. ## Creating Text Watermarks Text watermarks display copyright notices, URLs, or brand names. We create a text block, set its content, and add it to the page. ```typescript highlight=highlight-create-text-watermark // Create a text block for the watermark const textWatermark = engine.block.create('text'); // Set the watermark text content engine.block.setString(textWatermark, 'text/text', '© 2024 img.ly'); // Left-align the text for the watermark engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left'); // Add the text block to the page engine.block.appendChild(page, textWatermark); ``` The `engine.block.create('text')` method creates a new text block. We set the text content using `engine.block.setString()` with the `'text/text'` property. ### Styling the Text We configure the font size, color, and opacity to make the watermark visible but unobtrusive. ```typescript highlight=highlight-style-text-watermark // Set font size for the watermark engine.block.setTextFontSize(textWatermark, 4); // Set text color to white for contrast engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 }); // Set opacity to make it semi-transparent engine.block.setOpacity(textWatermark, 0.8); // Set width mode to auto so text fits its content engine.block.setWidthMode(textWatermark, 'Auto'); engine.block.setHeightMode(textWatermark, 'Auto'); ``` Key styling options: - **Font size** - Use sizes between 14-18px for subtle watermarks - **Text color** - White or black depending on the image background - **Opacity** - Values between 0.5-0.7 provide a balanced, semi-transparent appearance - **Size mode** - Set to `'Auto'` so the block automatically fits its text content ### Positioning the Watermarks We calculate the watermark positions based on the page dimensions and place the logo and text side-by-side at the bottom center of the page. ```typescript highlight=highlight-position-text-watermark // Position padding from edges const padding = 15; // Position text watermark at bottom-left engine.block.setPositionX(textWatermark, padding); engine.block.setPositionY(textWatermark, pageHeight - padding - 20); // Position logo watermark at top-right engine.block.setPositionX(logoWatermark, pageWidth - padding - logoWidth); engine.block.setPositionY(logoWatermark, padding); ``` We retrieve the rendered frame dimensions using `engine.block.getFrameWidth()` and `engine.block.getFrameHeight()`, calculate the total width of both watermarks with spacing, then center them horizontally. The vertical position places them near the bottom with padding from the edge. ## Creating Logo Watermarks Logo watermarks use graphic blocks with image fills to display brand symbols or company logos. ```typescript highlight=highlight-create-logo-watermark // Create a graphic block for the logo watermark const logoWatermark = engine.block.create('graphic'); // Create a rect shape for the logo const rectShape = engine.block.createShape('rect'); engine.block.setShape(logoWatermark, rectShape); // Create an image fill with a logo const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); // Apply the fill to the graphic block engine.block.setFill(logoWatermark, imageFill); // Set content fill mode to contain the image within bounds engine.block.setContentFillMode(logoWatermark, 'Contain'); // Add to page engine.block.appendChild(page, logoWatermark); ``` We create a graphic block, assign a rect shape, then create an image fill with the logo URI. The fill is applied to the graphic block before adding it to the page. ### Sizing the Logo We set fixed dimensions for the logo and apply opacity to match the text watermark. ```typescript highlight=highlight-size-logo-watermark // Size the logo watermark const logoWidth = 80; const logoHeight = 50; engine.block.setWidth(logoWatermark, logoWidth); engine.block.setHeight(logoWatermark, logoHeight); // Set opacity for the logo watermark engine.block.setOpacity(logoWatermark, 0.8); ``` A good rule is to size logos to 10-20% of the page width. This keeps them visible without dominating the design. ## Enhancing Visibility with Drop Shadows Drop shadows improve watermark readability against varied backgrounds by adding contrast. ```typescript highlight=highlight-add-drop-shadow // Add drop shadow to text watermark for better visibility engine.block.setDropShadowEnabled(textWatermark, true); engine.block.setDropShadowOffsetX(textWatermark, 1); engine.block.setDropShadowOffsetY(textWatermark, 1); engine.block.setDropShadowBlurRadiusX(textWatermark, 2); engine.block.setDropShadowBlurRadiusY(textWatermark, 2); engine.block.setDropShadowColor(textWatermark, { r: 0, g: 0, b: 0, a: 0.5 }); // Add drop shadow to logo watermark engine.block.setDropShadowEnabled(logoWatermark, true); engine.block.setDropShadowOffsetX(logoWatermark, 1); engine.block.setDropShadowOffsetY(logoWatermark, 1); engine.block.setDropShadowBlurRadiusX(logoWatermark, 2); engine.block.setDropShadowBlurRadiusY(logoWatermark, 2); engine.block.setDropShadowColor(logoWatermark, { r: 0, g: 0, b: 0, a: 0.5 }); ``` Drop shadow parameters: - **Offset X/Y** - Distance from the block (2-4 pixels works well) - **Blur Radius X/Y** - Softness of the shadow (4-8 pixels for subtle effect) - **Color** - Black with 0.5 alpha provides soft contrast without being harsh ## Exporting Watermarked Images After adding watermarks, we add an export button to the navigation bar that downloads the watermarked image when clicked. ```typescript highlight=highlight-export-watermarked // Add export button to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-watermarked', label: 'Export', icon: '@imgly/Download', onClick: async () => { // Export the watermarked design const blob = await engine.block.export(page, { mimeType: 'image/png' }); // Download the watermarked image await cesdk.utils.downloadFile(blob, 'image/png'); } } ] } ); ``` We use `cesdk.ui.insertOrderComponent()` to add a custom button to the editor's navigation bar. When clicked, `engine.block.export()` renders the page with all watermarks and returns a blob that `cesdk.utils.downloadFile()` downloads to the user's device. Supported formats include PNG, JPEG, and WebP. ## Troubleshooting **Watermark not visible** - Verify the block is within page bounds using position values - Check opacity is between 0.3-1.0 - Ensure `engine.block.appendChild()` was called to add the block to the page **Position appears incorrect** - Recalculate positions using current `pageWidth` and `pageHeight` - Account for watermark dimensions when calculating corner positions - Remember that coordinates start from the top-left corner **Text not legible** - Increase font size to at least 36px - Add a drop shadow for contrast against complex backgrounds - Increase opacity if the watermark is too faint **Logo quality issues** - Use a higher resolution source image for the logo - Avoid scaling the logo beyond its original dimensions ## API Reference | Method | Purpose | |--------|---------| | `engine.block.create(type)` | Create text or graphic blocks | | `engine.block.createShape(type)` | Create shapes for graphic blocks | | `engine.block.createFill(type)` | Create image fills for logos | | `engine.block.setString(id, property, value)` | Set text content or image URI | | `engine.block.setTextFontSize(id, size)` | Set text font size | | `engine.block.setTextColor(id, color)` | Set text color | | `engine.block.setOpacity(id, opacity)` | Set block transparency | | `engine.block.setPositionX(id, value)` | Set horizontal position | | `engine.block.setPositionY(id, value)` | Set vertical position | | `engine.block.setWidth(id, value)` | Set block width | | `engine.block.setHeight(id, value)` | Set block height | | `engine.block.getFrameWidth(id)` | Get rendered frame width | | `engine.block.getFrameHeight(id)` | Get rendered frame height | | `engine.block.setDropShadowEnabled(id, enabled)` | Enable drop shadow | | `engine.block.setDropShadowOffsetX(id, offset)` | Set shadow X offset | | `engine.block.setDropShadowOffsetY(id, offset)` | Set shadow Y offset | | `engine.block.setDropShadowBlurRadiusX(id, radius)` | Set shadow blur | | `engine.block.setDropShadowColor(id, color)` | Set shadow color | | `engine.block.export(id, options)` | Export block to blob | | `cesdk.ui.insertOrderComponent(options, component)` | Add custom button to navigation bar | | `cesdk.utils.downloadFile(blob, mimeType)` | Download blob as file | ## Next Steps - [Text Styling](https://img.ly/docs/cesdk/angular/text/styling-269c48/) — Style text blocks with fonts, colors, and effects - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) — Export options and formats for watermarked images - [Crop Images](https://img.ly/docs/cesdk/angular/edit-image/transform/crop-f67a47/) — Transform images before watermarking --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Image Editor SDK" description: "The CreativeEditor SDK provides a robust and user-friendly solution for photo and image editing." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/overview-5249ea/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Overview](https://img.ly/docs/cesdk/angular/edit-image/overview-5249ea/) --- 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](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Remove Background" description: "Remove image backgrounds to isolate subjects or prepare assets for compositing and reuse." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/remove-bg-9dfcf7/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Remove Background](https://img.ly/docs/cesdk/angular/edit-image/remove-bg-9dfcf7/) > [Plugins](https://img.ly/docs/cesdk/angular/plugins-693c48/) > [Background Removal](https://img.ly/docs/cesdk/angular/edit-image/remove-bg-9dfcf7/) --- Remove image backgrounds to isolate subjects for compositing, product photography, or creating transparent overlays. ![Remove Background example showing an image with its background removed](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-remove-bg-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-remove-bg-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-remove-bg-browser/) The `@imgly/plugin-background-removal-web` plugin adds AI-powered background removal directly to the CE.SDK editor. Processing runs locally in the browser using WebAssembly and WebGPU, ensuring privacy since images never leave the client. ```typescript file=@cesdk_web_examples/guides-edit-image-remove-bg-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web'; import packageJson from './package.json'; /** * CE.SDK Browser Guide: Remove Background with Plugin * * Demonstrates adding and configuring the background removal plugin * for the CE.SDK editor with various UI placement options. */ 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; await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); // Get page and set dimensions const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Add the background removal plugin with canvas menu button await cesdk.addPlugin( BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu'] } }) ); // Create a gradient background (deep teal to soft purple) const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { stop: 0, color: { r: 0.08, g: 0.22, b: 0.35, a: 1 } }, // Deep teal { stop: 1, color: { r: 0.35, g: 0.2, b: 0.45, a: 1 } } // Soft purple ]); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); engine.block.setFill(page, gradientFill); // Create centered title text const titleBlock = engine.block.create('text'); engine.block.setString(titleBlock, 'text/text', 'Remove Background'); engine.block.setFloat(titleBlock, 'text/fontSize', 140); engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(titleBlock, pageWidth); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); engine.block.setTextColor(titleBlock, { r: 1, g: 1, b: 1, a: 1 }); // Create image block with a portrait photo const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setContentFillMode(imageBlock, 'Cover'); const imageWidth = 202; const imageHeight = 230; engine.block.setWidth(imageBlock, imageWidth); engine.block.setHeight(imageBlock, imageHeight); engine.block.appendChild(page, imageBlock); // Create img.ly logo at bottom center const logoBlock = engine.block.create('graphic'); const logoShape = engine.block.createShape('rect'); engine.block.setShape(logoBlock, logoShape); const logoFill = engine.block.createFill('image'); engine.block.setString( logoFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logoBlock, logoFill); engine.block.setContentFillMode(logoBlock, 'Contain'); const logoWidth = 72; const logoHeight = 45; engine.block.setWidth(logoBlock, logoWidth); engine.block.setHeight(logoBlock, logoHeight); engine.block.setOpacity(logoBlock, 0.9); engine.block.appendChild(page, logoBlock); // Position elements const titleHeight = engine.block.getFrameHeight(titleBlock); const imageGap = 30; const padding = 20; // Calculate vertical layout - title and image centered const totalContentHeight = titleHeight + imageGap + imageHeight; const startY = (pageHeight - totalContentHeight) / 2; // Position title at top of content area engine.block.setPositionX(titleBlock, 0); engine.block.setPositionY(titleBlock, startY); // Position image centered below title engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2); engine.block.setPositionY(imageBlock, startY + titleHeight + imageGap); // Position logo at bottom center engine.block.setPositionX(logoBlock, (pageWidth - logoWidth) / 2); engine.block.setPositionY(logoBlock, pageHeight - logoHeight - padding); // Select the image to show the canvas menu with BG Removal button engine.block.select(imageBlock); // Zoom to fit await engine.scene.zoomToBlock(page, { padding: 40 }); engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers installing the plugin, configuring UI placement, and customizing the background removal process. ## Installing the Plugin Install the background removal plugin and its ONNX runtime peer dependency: ```bash npm install @imgly/plugin-background-removal-web@$UBQ_VERSION$ onnxruntime-web@1.21.0 ``` Import the plugin in your application: ```typescript highlight-import import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web'; ``` ## Initializing the Editor Set up the CE.SDK editor with asset sources before adding the plugin: ```typescript highlight-setup const engine = cesdk.engine; await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); ``` ## Adding the Plugin Add the plugin to the editor using `cesdk.addPlugin()`. The `ui.locations` option controls where the background removal button appears: ```typescript highlight-add-plugin // Add the background removal plugin with canvas menu button await cesdk.addPlugin( BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu'] } }) ); ``` When a user selects an image and clicks the button, the plugin handles the entire workflow: exporting the image, processing it through the AI model, and applying the result back to the scene. ![A BG Removal button added to the Canvas Menu](./screenshot-bg-removal-button-v1.43.0.gif) > **Note:** The plugin requires a correctly configured upload setting. 'local' works for testing but production requires stable storage. See the [Upload Images](https://img.ly/docs/cesdk/angular/import-media/from-local-source/user-upload-c6c7d9/) guide for details. ## UI Placement Options The plugin supports multiple UI locations: | Location | Description | | --- | --- | | `'canvasMenu'` | Context menu when selecting an image on canvas | | `'dock'` | Panel in the left dock sidebar | | `'inspectorBar'` | Top bar of the inspector panel | | `'navigationBar'` | Main navigation bar | | `'canvasBarTop'` | Top bar above the canvas | | `'canvasBarBottom'` | Bottom bar below the canvas | You can specify a single location or an array: ```typescript BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu', 'dock'] } }) ``` ## Provider Configuration Configure the underlying background removal library through the `provider` option: ```typescript BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu'] }, provider: { type: '@imgly/background-removal', configuration: { model: 'medium', // 'small' | 'medium' | 'large' output: { format: 'image/png', quality: 0.9 } } } }) ``` | Option | Type | Description | | --- | --- | --- | | `model` | `'small'` | `'medium'` | `'large'` | Model size for quality/speed trade-off | | `output.format` | string | Output format: `'image/png'`, `'image/webp'` | | `output.quality` | number | Quality for lossy formats (0-1) | The `'medium'` model provides the best balance of quality and speed. Use `'small'` for faster processing or `'large'` for maximum edge quality. ## Custom Provider For advanced use cases, implement a custom background removal provider: ```typescript BackgroundRemovalPlugin({ provider: { type: 'custom', processImageFileURI: async (imageFileURI: string) => { // Call your own background removal service const response = await fetch('/api/remove-background', { method: 'POST', body: JSON.stringify({ imageUrl: imageFileURI }) }); const { processedUrl } = await response.json(); return processedUrl; }, processSourceSet: async (sourceSet) => { // Handle multi-resolution source sets // Process the highest resolution and resize for others return sourceSet; } } }) ``` ## Creating an Image Block Add an image to the scene for background removal: ```typescript highlight-create-image // Create image block with a portrait photo const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setContentFillMode(imageBlock, 'Cover'); const imageWidth = 202; const imageHeight = 230; engine.block.setWidth(imageBlock, imageWidth); engine.block.setHeight(imageBlock, imageHeight); engine.block.appendChild(page, imageBlock); ``` Select the image block to display the canvas menu with the background removal button. ## Performance Considerations The first background removal operation downloads AI models (~40MB) which are then cached: - **Model caching**: First run fetches models; subsequent runs use the cache - **GPU acceleration**: WebGPU provides faster processing than WebGL fallback - **CORS headers**: For optimal performance, configure these headers on your server: ``` Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp ``` ## Troubleshooting | Issue | Solution | | --- | --- | | Model download slow | First run fetches models; subsequent runs use cache | | Poor edge quality | Use higher resolution input or 'medium'/'large' model | | Out of memory | Reduce image size before processing | | WebGL errors | Check browser WebGL support; try different device setting | | Plugin not showing | Verify plugin added and UI location configured | | Result not transparent | Ensure export uses PNG format (JPEG doesn't support transparency) | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Export options for images with transparency - [Vectorize Images](https://img.ly/docs/cesdk/angular/edit-image/vectorize-2b4c7f/) - Convert images to vector graphics - [Replace Colors](https://img.ly/docs/cesdk/angular/edit-image/replace-colors-6ede17/) - Replace specific colors in images --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Replace Colors" description: "Replace specific colors in images using CE.SDK's Recolor and Green Screen effects with programmatic control." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/replace-colors-6ede17/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Replace Colors](https://img.ly/docs/cesdk/angular/edit-image/replace-colors-6ede17/) --- 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](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-replace-colors-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-replace-colors-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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. ```typescript file=@cesdk_web_examples/guides-edit-image-replace-colors-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; 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 ### 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. ```typescript highlight-enable-effects-panel // Enable effects in the inspector panel using the Feature API cesdk.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 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 ### Initialize CE.SDK To apply color replacement programmatically, we set up CE.SDK with the proper configuration. ```typescript highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; 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 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. ```typescript highlight-create-recolor-effect // 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); ``` 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. > **Tip:** 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 We adjust the matching tolerance and smoothness parameters to control how precisely colors must match before replacement. ```typescript highlight-configure-recolor-matching // 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); ``` 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 The Green Screen effect removes backgrounds by making specific colors transparent. ```typescript highlight-create-green-screen-effect // 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); ``` 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 We adjust the color matching tolerance, edge smoothness, and spill suppression parameters. ```typescript highlight-configure-green-screen // 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); ``` 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 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. ```typescript highlight-manage-effects // 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 ``` 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 We can loop through all image blocks in a scene and apply the same effect configuration to each. ```typescript highlight-batch-processing // 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); }); ``` 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 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 | 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 - [Apply Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) — Explore other visual effects available in CE.SDK - [Export Designs](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) — Save your color-replaced images in various formats --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Transform" description: "Crop, resize, rotate, scale, or flip images using CE.SDK's built-in transformation tools." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/transform-9d189b/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/angular/edit-image/transform-9d189b/) --- --- ## Related Pages - [Move Images](https://img.ly/docs/cesdk/angular/edit-image/transform/move-818dd9/) - Position images precisely on the canvas using absolute or percentage-based coordinates. - [Crop](https://img.ly/docs/cesdk/angular/edit-image/transform/crop-f67a47/) - Cut out specific areas of an image to focus on key content or change aspect ratio. - [Rotate Images](https://img.ly/docs/cesdk/angular/edit-image/transform/rotate-5f39c9/) - Rotate images to adjust orientation, correct crooked photos, or create creative effects using CE.SDK. - [Resize](https://img.ly/docs/cesdk/angular/edit-image/transform/resize-407242/) - Change image dimensions by setting explicit width and height values using absolute units, percentage-based sizing, or auto-sizing modes. - [Scale Images](https://img.ly/docs/cesdk/angular/edit-image/transform/scale-ebe367/) - Scale image blocks uniformly to preserve aspect ratio or non-uniformly to stretch along a single axis. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Crop" description: "Cut out specific areas of an image to focus on key content or change aspect ratio." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/transform/crop-f67a47/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/angular/edit-image/transform-9d189b/) > [Crop](https://img.ly/docs/cesdk/angular/edit-image/transform/crop-f67a47/) --- Crop images to focus on key subjects, remove unwanted elements, or prepare visuals for specific formats like social media or print using CE.SDK's crop system. ![Crop images example showing CE.SDK editor with cropped image content](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-crop-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-crop-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-crop-browser/) Image cropping in CreativeEditor SDK (CE.SDK) lets you select a region inside an image and discard everything outside that frame. Unlike resizing which changes overall dimensions uniformly, cropping removes unwanted areas while preserving original pixel quality in the selected region. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-crop-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page from the scene const pages = engine.block.findByType('page'); const page = pages[0]; // Add an image using the convenience API const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { size: { width: 300, height: 200 } }); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 50); engine.block.setPositionY(imageBlock, 50); // Verify the block supports cropping before applying crop operations const supportsCrop = engine.block.supportsCrop(imageBlock); console.log('Block supports crop:', supportsCrop); // Check if the block supports content fill modes const supportsFillMode = engine.block.supportsContentFillMode(imageBlock); console.log('Supports content fill mode:', supportsFillMode); // Get the current content fill mode const currentMode = engine.block.getContentFillMode(imageBlock); console.log('Current fill mode:', currentMode); // Set content fill mode - options are 'Crop', 'Cover', 'Contain' // 'Cover' automatically scales and positions to fill the entire frame engine.block.setContentFillMode(imageBlock, 'Cover'); // Alignment only applies in 'Cover' and 'Contain' fill modes — it controls // which part of the content stays visible (Cover) or where the letterboxed // content sits (Contain). It is ignored in 'Crop' mode. // Pin the content to the top-left corner instead of the default center engine.block.setContentFillHorizontalAlignment(imageBlock, 'Left'); engine.block.setContentFillVerticalAlignment(imageBlock, 'Top'); // Read the current alignment values const horizontalAlignment = engine.block.getContentFillHorizontalAlignment(imageBlock); const verticalAlignment = engine.block.getContentFillVerticalAlignment(imageBlock); console.log('Content fill alignment:', { horizontalAlignment, verticalAlignment }); // Create another image block to demonstrate crop scaling const scaleBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, scaleBlock); engine.block.setPositionX(scaleBlock, 400); engine.block.setPositionY(scaleBlock, 50); // Set content fill mode to 'Crop' for manual control engine.block.setContentFillMode(scaleBlock, 'Crop'); // Scale the content within the crop frame // Values > 1 zoom in, values < 1 zoom out engine.block.setCropScaleX(scaleBlock, 1.5); engine.block.setCropScaleY(scaleBlock, 1.5); // Or use uniform scaling from center engine.block.setCropScaleRatio(scaleBlock, 1.2); // Get the current scale values const scaleX = engine.block.getCropScaleX(scaleBlock); const scaleY = engine.block.getCropScaleY(scaleBlock); const scaleRatio = engine.block.getCropScaleRatio(scaleBlock); console.log('Crop scale:', { scaleX, scaleY, scaleRatio }); // Pan the content within the crop frame using translation // Values are in percentage of the crop frame dimensions engine.block.setCropTranslationX(scaleBlock, 0.1); // Move 10% right engine.block.setCropTranslationY(scaleBlock, -0.1); // Move 10% up // Get the current translation values const translationX = engine.block.getCropTranslationX(scaleBlock); const translationY = engine.block.getCropTranslationY(scaleBlock); console.log('Crop translation:', { translationX, translationY }); // Ensure content covers the entire frame without gaps // The minScaleRatio parameter sets the minimum scale allowed const adjustedRatio = engine.block.adjustCropToFillFrame(scaleBlock, 1.0); console.log('Adjusted scale ratio:', adjustedRatio); // Create an image block to demonstrate crop rotation const rotateBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, rotateBlock); engine.block.setPositionX(rotateBlock, 50); engine.block.setPositionY(rotateBlock, 300); engine.block.setContentFillMode(rotateBlock, 'Crop'); // Rotate the content within the crop frame (in radians) // Math.PI / 4 = 45 degrees engine.block.setCropRotation(rotateBlock, Math.PI / 12); // Get the current rotation const rotation = engine.block.getCropRotation(rotateBlock); console.log('Crop rotation (radians):', rotation); // Ensure content still fills the frame after rotation engine.block.adjustCropToFillFrame(rotateBlock, 1.0); // Create an image block to demonstrate flipping const flipBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, flipBlock); engine.block.setPositionX(flipBlock, 300); engine.block.setPositionY(flipBlock, 300); engine.block.setContentFillMode(flipBlock, 'Crop'); // Flip the content horizontally engine.block.flipCropHorizontal(flipBlock); // Create an image block to demonstrate aspect ratio locking const lockBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, lockBlock); engine.block.setPositionX(lockBlock, 550); engine.block.setPositionY(lockBlock, 300); engine.block.setContentFillMode(lockBlock, 'Crop'); // Lock the crop aspect ratio - when locked, crop handles maintain // the current aspect ratio during resize operations engine.block.setCropAspectRatioLocked(lockBlock, true); // Check if aspect ratio is locked const isLocked = engine.block.isCropAspectRatioLocked(lockBlock); console.log('Aspect ratio locked:', isLocked); // Reset crop to default state (sets content fill mode to 'Cover') engine.block.resetCrop(lockBlock); // Select the first image block to show it in the UI engine.block.select(imageBlock); // Zoom to page for better visibility cesdk.engine.scene.zoomToBlock(page, { padding: { left: 0.5, top: 0.5, right: 0.5, bottom: 0.9 } }); } } export default Example; ``` This guide covers both interactive cropping using the built-in UI and programmatic cropping using the engine API for automation workflows. ## Using the Built-in Crop UI The CE.SDK default UI provides an interactive crop tool that allows users to visually adjust crop areas with real-time feedback. ### User Workflow With the default UI configuration, users can crop images through a visual workflow: 1. **Select an image** - Click on any image block in the canvas 2. **Enter crop mode** - Double-click the image or click the crop icon in the toolbar 3. **Adjust the crop area** - Drag corners or edges to resize the visible region 4. **Choose aspect ratio** - Select a preset ratio if available (e.g., 1:1, 4:3, 16:9) 5. **Apply the crop** - Click "Done" or press Enter to apply changes The cropped image appears in your project, but the underlying original image preserves its values, even when you rotate or resize the cropped image. ### Enable Crop Features in Custom UI For developers building custom UIs, you can enable crop functionality using editor settings: ```typescript // Enable double-click to enter crop mode cesdk.editor.setSettingBool('doubleClickToCropEnabled', true); // Show crop handles on the control gizmo cesdk.editor.setSettingBool('controlGizmo/showCropHandles', true); // Show crop scale handles cesdk.editor.setSettingBool('controlGizmo/showCropScaleHandles', true); ``` ### Define Preset Aspect Ratios You can define available aspect ratios to guide user choices: ```typescript const aspectRatios = [ 'Free', // Unconstrained '1:1', // Square '4:5', // Instagram Portrait '16:9', // Widescreen 'Custom:3:2' // Custom ratios ]; cesdk.editor.setSettingString('ui/crop/aspectRatios', aspectRatios.join(',')); ``` > **Tip:** You can hide the aspect ratio selector entirely by setting `ui/crop/allowAspectRatioSelection` to `false`. ## Programmatic Cropping For automation, batch processing, or dynamic applications, you can control cropping entirely through the engine API. ### Check Crop Support Before applying crop operations, verify the block supports cropping using `engine.block.supportsCrop()`. Graphic blocks with image fills support cropping: ```typescript highlight-check-crop-support // Verify the block supports cropping before applying crop operations const supportsCrop = engine.block.supportsCrop(imageBlock); console.log('Block supports crop:', supportsCrop); ``` ### Content Fill Modes CE.SDK provides three content fill modes that control how images fit within their frame. Set the mode using `engine.block.setContentFillMode()`: ```typescript highlight-content-fill-mode // Check if the block supports content fill modes const supportsFillMode = engine.block.supportsContentFillMode(imageBlock); console.log('Supports content fill mode:', supportsFillMode); // Get the current content fill mode const currentMode = engine.block.getContentFillMode(imageBlock); console.log('Current fill mode:', currentMode); // Set content fill mode - options are 'Crop', 'Cover', 'Contain' // 'Cover' automatically scales and positions to fill the entire frame engine.block.setContentFillMode(imageBlock, 'Cover'); ``` The available modes are: - **Crop** - Manual control over the exact crop region using scale, translation, and rotation - **Cover** - Automatically scale and position content to fill the entire frame (no empty areas) - **Contain** - Automatically scale and position content to fit entirely within the frame (may show background) ### Align Content Fill In `Cover` and `Contain` modes, the image is centered inside the block by default. Use the alignment APIs to pin the content to a specific edge instead — for example, to keep the top-left of an image visible regardless of the image's aspect ratio: ```typescript highlight-content-fill-alignment // Alignment only applies in 'Cover' and 'Contain' fill modes — it controls // which part of the content stays visible (Cover) or where the letterboxed // content sits (Contain). It is ignored in 'Crop' mode. // Pin the content to the top-left corner instead of the default center engine.block.setContentFillHorizontalAlignment(imageBlock, 'Left'); engine.block.setContentFillVerticalAlignment(imageBlock, 'Top'); // Read the current alignment values const horizontalAlignment = engine.block.getContentFillHorizontalAlignment(imageBlock); const verticalAlignment = engine.block.getContentFillVerticalAlignment(imageBlock); console.log('Content fill alignment:', { horizontalAlignment, verticalAlignment }); ``` The horizontal options are `'Left'`, `'Center'` (default), and `'Right'`. The vertical options are `'Top'`, `'Center'` (default), and `'Bottom'`. This is especially useful for templates where the dropped-in image's aspect ratio is unknown — in `Contain` mode it controls where the letterboxed content sits, and in `Cover` mode it controls which part of the oversized content stays visible. The alignment is ignored in `Crop` mode, where the user positions the content explicitly. ### Scale Crop Scale the image content within its frame using crop scale APIs. Values greater than 1.0 zoom in, values less than 1.0 zoom out: ```typescript highlight-scale-crop // Create another image block to demonstrate crop scaling const scaleBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, scaleBlock); engine.block.setPositionX(scaleBlock, 400); engine.block.setPositionY(scaleBlock, 50); // Set content fill mode to 'Crop' for manual control engine.block.setContentFillMode(scaleBlock, 'Crop'); // Scale the content within the crop frame // Values > 1 zoom in, values < 1 zoom out engine.block.setCropScaleX(scaleBlock, 1.5); engine.block.setCropScaleY(scaleBlock, 1.5); // Or use uniform scaling from center engine.block.setCropScaleRatio(scaleBlock, 1.2); // Get the current scale values const scaleX = engine.block.getCropScaleX(scaleBlock); const scaleY = engine.block.getCropScaleY(scaleBlock); const scaleRatio = engine.block.getCropScaleRatio(scaleBlock); console.log('Crop scale:', { scaleX, scaleY, scaleRatio }); ``` Use `setCropScaleRatio()` for uniform scaling from the center, or `setCropScaleX()` and `setCropScaleY()` for non-uniform scaling. ### Translate Crop Pan the image content within the crop frame using translation. Values are percentages of the crop frame dimensions: ```typescript highlight-translate-crop // Pan the content within the crop frame using translation // Values are in percentage of the crop frame dimensions engine.block.setCropTranslationX(scaleBlock, 0.1); // Move 10% right engine.block.setCropTranslationY(scaleBlock, -0.1); // Move 10% up // Get the current translation values const translationX = engine.block.getCropTranslationX(scaleBlock); const translationY = engine.block.getCropTranslationY(scaleBlock); console.log('Crop translation:', { translationX, translationY }); ``` Positive X moves content right, positive Y moves content down. ### Fill Frame Adjust the crop to ensure content fills the frame without empty areas using `engine.block.adjustCropToFillFrame()`. The `minScaleRatio` parameter sets the minimum allowed scale: ```typescript highlight-fill-frame // Ensure content covers the entire frame without gaps // The minScaleRatio parameter sets the minimum scale allowed const adjustedRatio = engine.block.adjustCropToFillFrame(scaleBlock, 1.0); console.log('Adjusted scale ratio:', adjustedRatio); ``` This is useful after applying translations or rotations that might reveal empty areas. ### Rotate Crop Rotate the image content within its frame using `engine.block.setCropRotation()`. Rotation is specified in radians: ```typescript highlight-rotate-crop // Create an image block to demonstrate crop rotation const rotateBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, rotateBlock); engine.block.setPositionX(rotateBlock, 50); engine.block.setPositionY(rotateBlock, 300); engine.block.setContentFillMode(rotateBlock, 'Crop'); // Rotate the content within the crop frame (in radians) // Math.PI / 4 = 45 degrees engine.block.setCropRotation(rotateBlock, Math.PI / 12); // Get the current rotation const rotation = engine.block.getCropRotation(rotateBlock); console.log('Crop rotation (radians):', rotation); // Ensure content still fills the frame after rotation engine.block.adjustCropToFillFrame(rotateBlock, 1.0); ``` After rotation, call `adjustCropToFillFrame()` to ensure content still covers the frame. ### Flip Crop Flip the image content horizontally or vertically within its crop frame. This flips the content itself, not the block: ```typescript highlight-flip-crop // Create an image block to demonstrate flipping const flipBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, flipBlock); engine.block.setPositionX(flipBlock, 300); engine.block.setPositionY(flipBlock, 300); engine.block.setContentFillMode(flipBlock, 'Crop'); // Flip the content horizontally engine.block.flipCropHorizontal(flipBlock); ``` ### Lock Aspect Ratio Lock the crop aspect ratio during interactive editing using `engine.block.setCropAspectRatioLocked()`. When locked, crop handles maintain the current aspect ratio: ```typescript highlight-lock-aspect-ratio // Create an image block to demonstrate aspect ratio locking const lockBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, lockBlock); engine.block.setPositionX(lockBlock, 550); engine.block.setPositionY(lockBlock, 300); engine.block.setContentFillMode(lockBlock, 'Crop'); // Lock the crop aspect ratio - when locked, crop handles maintain // the current aspect ratio during resize operations engine.block.setCropAspectRatioLocked(lockBlock, true); // Check if aspect ratio is locked const isLocked = engine.block.isCropAspectRatioLocked(lockBlock); console.log('Aspect ratio locked:', isLocked); ``` ### Reset Crop Reset all crop transformations to their default state using `engine.block.resetCrop()`: ```typescript highlight-reset-crop // Reset crop to default state (sets content fill mode to 'Cover') engine.block.resetCrop(lockBlock); ``` ## Coordinate System Crop transforms use normalized values: | Property | Value Type | Description | | --- | --- | --- | | Scale | Float (0.0+) | 1.0 is original size, 2.0 is double, 0.5 is half | | Translation | Float (-1.0 to 1.0) | Percentage of frame dimensions | | Rotation | Float (radians) | Math.PI = 180°, Math.PI/2 = 90° | All crop values are independent of canvas zoom level. ## Combining Crop with Other Transforms You can combine crop operations with other block transforms like position, rotation, and scale. Crop transforms affect the content within the block, while block transforms affect the block itself on the canvas: ```typescript // Crop the content (scales/pans the image within its frame) engine.block.setCropScaleRatio(imageBlock, 1.5); engine.block.setCropRotation(imageBlock, Math.PI / 12); // Transform the block itself (moves/rotates the entire block on canvas) engine.block.setRotation(imageBlock, Math.PI / 6); engine.block.setWidth(imageBlock, 400); ``` ## Troubleshooting | Issue | Cause / Fix | |-------|-------------| | Crop functions throw error | Verify block supports crop with `supportsCrop()` | | Black bars after scaling | Call `adjustCropToFillFrame()` or increase scale ratio | | Content not filling frame | Check content fill mode - use 'Cover' for automatic fill | | Unexpected crop behavior | Ensure content fill mode is set to 'Crop' for manual control | | Crop handles not visible in UI | Enable with `cesdk.editor.setSettingBool('controlGizmo/showCropHandles', true)` | ## API Reference | Method | Description | |--------|-------------| | `block.supportsCrop(id)` | Check if a block supports cropping | | `block.supportsContentFillMode(id)` | Check if block supports fill modes | | `block.setContentFillMode(id, mode)` | Set content fill mode (Crop, Cover, Contain) | | `block.getContentFillMode(id)` | Get current content fill mode | | `block.setContentFillHorizontalAlignment(id, alignment)` | Align fill horizontally (Left, Center, Right) in Cover/Contain modes | | `block.getContentFillHorizontalAlignment(id)` | Get horizontal fill alignment | | `block.setContentFillVerticalAlignment(id, alignment)` | Align fill vertically (Top, Center, Bottom) in Cover/Contain modes | | `block.getContentFillVerticalAlignment(id)` | Get vertical fill alignment | | `block.setCropScaleRatio(id, ratio)` | Set uniform crop scale from center | | `block.setCropScaleX(id, scaleX)` | Set horizontal crop scale | | `block.setCropScaleY(id, scaleY)` | Set vertical crop scale | | `block.setCropTranslationX(id, x)` | Set horizontal crop translation | | `block.setCropTranslationY(id, y)` | Set vertical crop translation | | `block.setCropRotation(id, rotation)` | Set crop rotation in radians | | `block.getCropScaleRatio(id)` | Get uniform crop scale ratio | | `block.getCropScaleX(id)` | Get horizontal crop scale | | `block.getCropScaleY(id)` | Get vertical crop scale | | `block.getCropTranslationX(id)` | Get horizontal crop translation | | `block.getCropTranslationY(id)` | Get vertical crop translation | | `block.getCropRotation(id)` | Get crop rotation in radians | | `block.adjustCropToFillFrame(id, minRatio)` | Adjust crop to fill frame | | `block.flipCropHorizontal(id)` | Flip content horizontally | | `block.flipCropVertical(id)` | Flip content vertically | | `block.setCropAspectRatioLocked(id, locked)` | Lock/unlock aspect ratio | | `block.isCropAspectRatioLocked(id)` | Check if aspect ratio is locked | | `block.resetCrop(id)` | Reset crop to default state | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Move Images" description: "Position images precisely on the canvas using absolute or percentage-based coordinates." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/transform/move-818dd9/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/angular/edit-image/transform-9d189b/) > [Move](https://img.ly/docs/cesdk/angular/edit-image/transform/move-818dd9/) --- Position images on the canvas using absolute pixel coordinates or percentage-based positioning for responsive layouts. ![Move images example showing positioned images with labels](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-move-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-move-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-move-browser/) Position images on the canvas using coordinates that start at the top-left corner (0, 0). X increases right, Y increases down. Values are relative to the parent block, simplifying nested layouts. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-move-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; class Example implements EditorPlugin { name = 'guides-edit-image-transform-move-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Demo 1: Movable Image - Can be freely repositioned by user const movableImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, movableImage); engine.block.setPositionX(movableImage, 0); engine.block.setPositionY(movableImage, 100); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Movable'); engine.block.setFloat(text1, 'text/fontSize', 32); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 200); engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 360); engine.block.appendChild(page, text1); // Demo 2: Percentage Positioning - Responsive layout const percentImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_5.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, percentImage); // Set position mode to percentage (0.0 to 1.0) engine.block.setPositionXMode(percentImage, 'Percent'); engine.block.setPositionYMode(percentImage, 'Percent'); // Position at 37.5% from left (300px), 30% from top (150px) engine.block.setPositionX(percentImage, 0.375); engine.block.setPositionY(percentImage, 0.3); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Percentage'); engine.block.setFloat(text2, 'text/fontSize', 32); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 200); engine.block.setPositionX(text2, 300); engine.block.setPositionY(text2, 360); engine.block.appendChild(page, text2); // Demo 3: Locked Image - Cannot be moved, rotated, or scaled const lockedImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, lockedImage); engine.block.setPositionX(lockedImage, 550); engine.block.setPositionY(lockedImage, 150); // Lock the transform to prevent user interaction engine.block.setBool(lockedImage, 'transformLocked', true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Locked'); engine.block.setFloat(text3, 'text/fontSize', 32); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 200); engine.block.setPositionX(text3, 550); engine.block.setPositionY(text3, 360); engine.block.appendChild(page, text3); // Get current position values const currentX = engine.block.getPositionX(movableImage); const currentY = engine.block.getPositionY(movableImage); console.log('Current position:', currentX, currentY); // Move relative to current position const offsetX = engine.block.getPositionX(movableImage); const offsetY = engine.block.getPositionY(movableImage); engine.block.setPositionX(movableImage, offsetX + 50); engine.block.setPositionY(movableImage, offsetY + 50); } } export default Example; ``` This guide covers positioning images with absolute or percentage coordinates, configuring position modes, and locking transforms to prevent repositioning. ## Position Coordinates Coordinates originate at the top-left (0, 0) of the parent container. Use **absolute** mode for fixed pixel values or **percentage** mode (0.0 to 1.0) for responsive layouts that adapt to parent size changes. ## Positioning Images Position images using `engine.block.setPositionX()` and `engine.block.setPositionY()` with absolute pixel coordinates: ```typescript highlight-movable-image engine.block.appendChild(page, movableImage); engine.block.setPositionX(movableImage, 0); engine.block.setPositionY(movableImage, 100); ``` ## Getting Current Position Read current position values using `engine.block.getPositionX()` and `engine.block.getPositionY()`. Values are returned in the current position mode (absolute pixels or percentage 0.0-1.0): ```typescript highlight-get-position // Get current position values const currentX = engine.block.getPositionX(movableImage); const currentY = engine.block.getPositionY(movableImage); ``` ## Configuring Position Modes Control how position values are interpreted using `engine.block.setPositionXMode()` and `engine.block.setPositionYMode()`. Set to `'Absolute'` for pixels or `'Percent'` for percentage values (0.0 to 1.0). Check the current mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. The Percentage Positioning section below demonstrates setting these modes. ## Percentage Positioning Position images using percentage values (0.0 to 1.0) for responsive layouts. Set the position mode to `'Percent'`, then use values between 0.0 and 1.0: ```typescript highlight-percentage-positioning // Set position mode to percentage (0.0 to 1.0) engine.block.setPositionXMode(percentImage, 'Percent'); engine.block.setPositionYMode(percentImage, 'Percent'); ``` Percentage positioning adapts automatically when the parent block dimensions change, maintaining relative positions in responsive designs. ## Relative Positioning Move images relative to their current position by getting the current coordinates and adding offset values: ```typescript highlight-relative-positioning // Move relative to current position const offsetX = engine.block.getPositionX(movableImage); const offsetY = engine.block.getPositionY(movableImage); engine.block.setPositionX(movableImage, offsetX + 50); engine.block.setPositionY(movableImage, offsetY + 50); ``` ## Locking Transforms Lock transforms to prevent repositioning, rotation, and scaling by setting `transformLocked` to true: ```typescript highlight-locked-image // Lock the transform to prevent user interaction engine.block.setBool(lockedImage, 'transformLocked', true); ``` ## Troubleshooting ### Image Not Moving Check if transforms are locked using `engine.block.getBool(block, 'transformLocked')`. Ensure the image block exists and values are within parent bounds. ### Unexpected Position Values Check position mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. Verify if using absolute (pixels) vs percentage (0.0-1.0) values. Review parent block dimensions if using percentage positioning. ### Positioned Outside Visible Area Verify parent block dimensions and boundaries. Check coordinate system: origin is top-left, not center. Review X/Y values for calculation errors. ### Percentage Positioning Not Responsive Ensure position mode is set to `'Percent'` using `engine.block.setPositionXMode(block, 'Percent')`. Verify percentage values are between 0.0 and 1.0. Check that parent block dimensions can change. ## API Reference | Method | Description | | ------------------------------------- | ------------------------------------------ | | `engine.block.addImage()` | Create and position image in one operation | | `engine.block.setPositionX()` | Set X coordinate value | | `engine.block.setPositionY()` | Set Y coordinate value | | `engine.block.getPositionX()` | Get current X coordinate value | | `engine.block.getPositionY()` | Get current Y coordinate value | | `engine.block.setPositionXMode()` | Set position mode for X coordinate | | `engine.block.setPositionYMode()` | Set position mode for Y coordinate | | `engine.block.getPositionXMode()` | Get position mode for X coordinate | | `engine.block.getPositionYMode()` | Get position mode for Y coordinate | | `engine.block.setBool()` | Set transform lock state | | `engine.block.getBool()` | Get transform lock state | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Resize" description: "Change image dimensions by setting explicit width and height values using absolute units, percentage-based sizing, or auto-sizing modes." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/transform/resize-407242/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/angular/edit-image/transform-9d189b/) > [Resize](https://img.ly/docs/cesdk/angular/edit-image/transform/resize-407242/) --- Change image dimensions using absolute pixel values, percentage-based sizing for responsive layouts, or auto-sizing based on content. ![Resize images example showing different sizing modes](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-resize-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-resize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-resize-browser/) Image resizing changes actual dimensions rather than applying scale multipliers. Use `engine.block.setWidth()` and `engine.block.setHeight()` for individual dimensions, or `engine.block.setSize()` for both at once. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-resize-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; class Example implements EditorPlugin { name = 'guides-edit-image-transform-resize-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Demo 1: Absolute Sizing - Fixed dimensions const absoluteImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 180, height: 180 } } ); engine.block.appendChild(page, absoluteImage); engine.block.setPositionX(absoluteImage, 20); engine.block.setPositionY(absoluteImage, 80); // Set explicit dimensions using setSize engine.block.setSize(absoluteImage, 180, 180, { sizeMode: 'Absolute' }); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Absolute'); engine.block.setFloat(text1, 'text/fontSize', 28); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 180); engine.block.setPositionX(text1, 20); engine.block.setPositionY(text1, 280); engine.block.appendChild(page, text1); // Demo 2: Percentage Sizing - Responsive layout const percentImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_5.jpg', { size: { width: 180, height: 180 } } ); engine.block.appendChild(page, percentImage); engine.block.setPositionX(percentImage, 220); engine.block.setPositionY(percentImage, 80); // Set size mode to percentage for responsive sizing engine.block.setWidthMode(percentImage, 'Percent'); engine.block.setHeightMode(percentImage, 'Percent'); // Values 0.0 to 1.0 represent percentage of parent engine.block.setWidth(percentImage, 0.225); engine.block.setHeight(percentImage, 0.36); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Percentage'); engine.block.setFloat(text2, 'text/fontSize', 28); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 180); engine.block.setPositionX(text2, 220); engine.block.setPositionY(text2, 280); engine.block.appendChild(page, text2); // Demo 3: Resized with maintainCrop const cropImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: { width: 180, height: 180 } } ); engine.block.appendChild(page, cropImage); engine.block.setPositionX(cropImage, 420); engine.block.setPositionY(cropImage, 80); // Resize while preserving crop settings engine.block.setWidth(cropImage, 180, true); engine.block.setHeight(cropImage, 180, true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Maintain Crop'); engine.block.setFloat(text3, 'text/fontSize', 28); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 180); engine.block.setPositionX(text3, 420); engine.block.setPositionY(text3, 280); engine.block.appendChild(page, text3); // Get current dimensions const currentWidth = engine.block.getWidth(absoluteImage); const currentHeight = engine.block.getHeight(absoluteImage); const widthMode = engine.block.getWidthMode(absoluteImage); const heightMode = engine.block.getHeightMode(absoluteImage); console.log('Current dimensions:', currentWidth, 'x', currentHeight); console.log('Size modes:', widthMode, heightMode); // Get calculated frame dimensions after layout const frameWidth = engine.block.getFrameWidth(absoluteImage); const frameHeight = engine.block.getFrameHeight(absoluteImage); console.log('Frame dimensions:', frameWidth, 'x', frameHeight); // Title text at top const titleText = engine.block.create('text'); engine.block.setString(titleText, 'text/text', 'Image Resize Examples'); engine.block.setFloat(titleText, 'text/fontSize', 36); engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(titleText, 800); engine.block.setPositionX(titleText, 0); engine.block.setPositionY(titleText, 20); engine.block.appendChild(page, titleText); } } export default Example; ``` This guide covers resizing images with absolute or percentage sizing, configuring size modes, and maintaining crop settings during resize. ## Understanding Size Modes Size values are interpreted in three modes. 'Absolute' uses fixed design units, 'Percent' uses parent-relative values (0.0-1.0), and 'Auto' sizes based on content. Use `engine.block.getWidth()` for the configured value and `engine.block.getFrameWidth()` for actual rendered size after layout. ## Setting Absolute Dimensions Set explicit dimensions using `engine.block.setSize()` with absolute pixel values: ```typescript highlight-set-size // Set explicit dimensions using setSize engine.block.setSize(absoluteImage, 180, 180, { sizeMode: 'Absolute' }); ``` ## Percentage Sizing Use percentage mode for responsive sizing. Values range from 0.0 to 1.0 representing percentage of parent container: ```typescript highlight-percentage-mode // Set size mode to percentage for responsive sizing engine.block.setWidthMode(percentImage, 'Percent'); engine.block.setHeightMode(percentImage, 'Percent'); // Values 0.0 to 1.0 represent percentage of parent engine.block.setWidth(percentImage, 0.225); engine.block.setHeight(percentImage, 0.36); ``` Percentage sizing adapts automatically when the parent block dimensions change, maintaining relative sizes in responsive designs. ## Maintaining Crop During Resize Use the `maintainCrop` parameter to preserve existing crop settings when resizing: ```typescript highlight-maintain-crop // Resize while preserving crop settings engine.block.setWidth(cropImage, 180, true); engine.block.setHeight(cropImage, 180, true); ``` Setting `maintainCrop` to `true` automatically adjusts crop values to preserve the visible area. ## Getting Current Dimensions Read current configured dimensions and size modes: ```typescript highlight-get-dimensions // Get current dimensions const currentWidth = engine.block.getWidth(absoluteImage); const currentHeight = engine.block.getHeight(absoluteImage); const widthMode = engine.block.getWidthMode(absoluteImage); const heightMode = engine.block.getHeightMode(absoluteImage); ``` ## Getting Frame Dimensions Get calculated frame dimensions after layout: ```typescript highlight-frame-dimensions // Get calculated frame dimensions after layout const frameWidth = engine.block.getFrameWidth(absoluteImage); const frameHeight = engine.block.getFrameHeight(absoluteImage); ``` The difference between configured values and frame dimensions matters when using percentage or auto sizing modes. ## Troubleshooting ### Image Not Resizing Check if locked using `engine.block.getBool(block, 'constraints/size/locked')`. Verify size constraints aren't limiting changes. Ensure the block exists and confirm correct units for the size mode. ### Unexpected Size Values Check mode using `engine.block.getWidthMode()` and `engine.block.getHeightMode()`. Verify absolute (design units) vs percentage (0.0-1.0) values. For percentage mode, review parent block dimensions. ### Image Appears Stretched Calculate and set both dimensions proportionally. Use `maintainCrop: true` when resizing cropped images. Check `scene/aspectRatioLock` for scenes. ## API Reference | Method | Description | | ----------------------------------- | ---------------------------------------- | | `engine.block.addImage()` | Create and size image in one operation | | `engine.block.setSize()` | Set width and height with optional mode | | `engine.block.setWidth()` | Set width value | | `engine.block.setHeight()` | Set height value | | `engine.block.getWidth()` | Get current width value | | `engine.block.getHeight()` | Get current height value | | `engine.block.setWidthMode()` | Set width interpretation mode | | `engine.block.setHeightMode()` | Set height interpretation mode | | `engine.block.getWidthMode()` | Get width interpretation mode | | `engine.block.getHeightMode()` | Get height interpretation mode | | `engine.block.getFrameWidth()` | Get calculated frame width | | `engine.block.getFrameHeight()` | Get calculated frame height | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Rotate Images" description: "Rotate images to adjust orientation, correct crooked photos, or create creative effects using CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/transform/rotate-5f39c9/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/angular/edit-image/transform-9d189b/) > [Rotate](https://img.ly/docs/cesdk/angular/edit-image/transform/rotate-5f39c9/) --- Rotate images to adjust orientation, correct crooked photos, or create creative effects using CE.SDK's rotation APIs. ![Rotate images example showing images at different rotation angles](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-rotate-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-rotate-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-rotate-browser/) Rotation uses radians where `Math.PI / 2` equals 90°, `Math.PI` equals 180°, and negative values rotate clockwise. Values are relative to the block's center point. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-rotate-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; class Example implements EditorPlugin { name = 'guides-edit-image-transform-rotate-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Demo 1: Original image (no rotation) const originalImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, originalImage); engine.block.setPositionX(originalImage, 50); engine.block.setPositionY(originalImage, 50); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Original'); engine.block.setFloat(text1, 'text/fontSize', 24); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 150); engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 210); engine.block.appendChild(page, text1); // Demo 2: Rotate 45 degrees const rotated45Image = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, rotated45Image); engine.block.setPositionX(rotated45Image, 225); engine.block.setPositionY(rotated45Image, 50); // Rotate the block by 45 degrees (π/4 radians) engine.block.setRotation(rotated45Image, Math.PI / 4); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', '45°'); engine.block.setFloat(text2, 'text/fontSize', 24); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 150); engine.block.setPositionX(text2, 225); engine.block.setPositionY(text2, 210); engine.block.appendChild(page, text2); // Demo 3: Rotate 90 degrees const rotated90Image = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, rotated90Image); engine.block.setPositionX(rotated90Image, 400); engine.block.setPositionY(rotated90Image, 50); // Rotate the block by 90 degrees (π/2 radians) engine.block.setRotation(rotated90Image, Math.PI / 2); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', '90°'); engine.block.setFloat(text3, 'text/fontSize', 24); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 150); engine.block.setPositionX(text3, 400); engine.block.setPositionY(text3, 210); engine.block.appendChild(page, text3); // Demo 4: Rotate 180 degrees const rotated180Image = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, rotated180Image); engine.block.setPositionX(rotated180Image, 575); engine.block.setPositionY(rotated180Image, 50); // Rotate the block by 180 degrees (π radians) engine.block.setRotation(rotated180Image, Math.PI); const text4 = engine.block.create('text'); engine.block.setString(text4, 'text/text', '180°'); engine.block.setFloat(text4, 'text/fontSize', 24); engine.block.setEnum(text4, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text4, 150); engine.block.setPositionX(text4, 575); engine.block.setPositionY(text4, 210); engine.block.appendChild(page, text4); // Demo 5: Grouped rotation const groupedImage1 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_5.jpg', { size: { width: 100, height: 100 } } ); engine.block.appendChild(page, groupedImage1); engine.block.setPositionX(groupedImage1, 150); engine.block.setPositionY(groupedImage1, 300); const groupedImage2 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: { width: 100, height: 100 } } ); engine.block.appendChild(page, groupedImage2); engine.block.setPositionX(groupedImage2, 260); engine.block.setPositionY(groupedImage2, 300); // Group blocks and rotate them together const groupId = engine.block.group([groupedImage1, groupedImage2]); engine.block.setRotation(groupId, Math.PI / 8); const text5 = engine.block.create('text'); engine.block.setString(text5, 'text/text', 'Grouped'); engine.block.setFloat(text5, 'text/fontSize', 24); engine.block.setEnum(text5, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text5, 200); engine.block.setPositionX(text5, 150); engine.block.setPositionY(text5, 440); engine.block.appendChild(page, text5); // Demo 6: Locked rotation const lockedImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, lockedImage); engine.block.setPositionX(lockedImage, 500); engine.block.setPositionY(lockedImage, 300); engine.block.setRotation(lockedImage, Math.PI / 6); // Lock rotation for a single block engine.block.setScopeEnabled(lockedImage, 'layer/rotate', false); const text6 = engine.block.create('text'); engine.block.setString(text6, 'text/text', 'Locked'); engine.block.setFloat(text6, 'text/fontSize', 24); engine.block.setEnum(text6, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text6, 150); engine.block.setPositionX(text6, 500); engine.block.setPositionY(text6, 460); engine.block.appendChild(page, text6); // Get current rotation value const currentRotation = engine.block.getRotation(rotated45Image); console.log('Current rotation (radians):', currentRotation); console.log( 'Current rotation (degrees):', (currentRotation * 180) / Math.PI ); // Helpers for degree/radian conversion const toRadians = (degrees: number) => (degrees * Math.PI) / 180; const toDegrees = (radians: number) => (radians * 180) / Math.PI; // Example: rotate by 30 degrees using helper const targetRadians = toRadians(30); console.log('30 degrees in radians:', targetRadians); console.log('Converted back to degrees:', toDegrees(targetRadians)); } } export default Example; ``` This guide covers rotating images by specific angles, reading rotation values, converting between degrees and radians, rotating grouped elements together, and locking rotation on blocks. ## Initialize the Editor Set up the editor with default assets and create a design scene: ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); ``` ## Rotate an Image Rotate blocks using `engine.block.setRotation()` with angle values in radians. Use `Math.PI` for 180° or divide for smaller increments: ```typescript highlight=highlight-rotate-45 // Rotate the block by 45 degrees (π/4 radians) engine.block.setRotation(rotated45Image, Math.PI / 4); ``` ## Rotate by 90 Degrees Rotate a block by 90 degrees using `Math.PI / 2`: ```typescript highlight=highlight-rotate-90 // Rotate the block by 90 degrees (π/2 radians) engine.block.setRotation(rotated90Image, Math.PI / 2); ``` ## Rotate by 180 Degrees Flip a block upside down by rotating 180 degrees using `Math.PI`: ```typescript highlight=highlight-rotate-180 // Rotate the block by 180 degrees (π radians) engine.block.setRotation(rotated180Image, Math.PI); ``` ## Get Current Rotation Read the current rotation value using `engine.block.getRotation()`. The returned value is in radians: ```typescript highlight=highlight-get-rotation // Get current rotation value const currentRotation = engine.block.getRotation(rotated45Image); console.log('Current rotation (radians):', currentRotation); console.log( 'Current rotation (degrees):', (currentRotation * 180) / Math.PI ); ``` ## Convert Between Degrees and Radians Create helper functions to convert between degrees and radians for more intuitive angle values: ```typescript highlight=highlight-convert-radians // Helpers for degree/radian conversion const toRadians = (degrees: number) => (degrees * Math.PI) / 180; const toDegrees = (radians: number) => (radians * 180) / Math.PI; // Example: rotate by 30 degrees using helper const targetRadians = toRadians(30); console.log('30 degrees in radians:', targetRadians); console.log('Converted back to degrees:', toDegrees(targetRadians)); ``` ## Rotate Groups Together Group multiple blocks and rotate them as a unit to maintain their relative positions: ```typescript highlight=highlight-rotate-group // Group blocks and rotate them together const groupId = engine.block.group([groupedImage1, groupedImage2]); engine.block.setRotation(groupId, Math.PI / 8); ``` ## Lock Rotation Disable rotation for a specific block using `engine.block.setScopeEnabled()` with the `layer/rotate` scope: ```typescript highlight=highlight-lock-rotation // Lock rotation for a single block engine.block.setScopeEnabled(lockedImage, 'layer/rotate', false); ``` ## Troubleshooting ### Rotation Has No Effect Ensure the block exists and is appended to a page before calling `setRotation()`. Verify the block ID is valid using `engine.block.isValid()`. ### Unexpected Rotation Direction Positive values rotate counterclockwise, negative values rotate clockwise. Double-check your angle calculation if the rotation appears inverted. ### Block Appears Skewed After Rotation Rotation uses the block's center as the pivot point. If the block appears off-center, check that no unexpected scaling or positioning was applied. ### Locked Block Won't Rotate Check if the block's `layer/rotate` scope is disabled using `engine.block.isScopeEnabled()`. Re-enable with `engine.block.setScopeEnabled(block, 'layer/rotate', true)`. ## API Reference | Method | Description | | ---------------------------------- | ------------------------------------------ | | `engine.block.setRotation()` | Set rotation angle in radians | | `engine.block.getRotation()` | Get current rotation angle in radians | | `engine.block.group()` | Group blocks for collective transforms | | `engine.block.setScopeEnabled()` | Enable or disable specific block scopes | | `engine.block.isScopeEnabled()` | Check if a scope is enabled for a block | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Scale Images" description: "Scale image blocks uniformly to preserve aspect ratio or non-uniformly to stretch along a single axis." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/transform/scale-ebe367/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/angular/edit-image/transform-9d189b/) > [Scale](https://img.ly/docs/cesdk/angular/edit-image/transform/scale-ebe367/) --- Scale images proportionally with `engine.block.scale()` using configurable anchor points, or stretch individual axes with direct width/height manipulation. ![Scale images example showing uniform and non-uniform scaling](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-scale-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-scale-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-scale-browser/) Scaling transforms a block proportionally using a factor, while resizing changes dimensions directly. Use scaling to maintain aspect ratio or apply consistent size changes across multiple elements. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-scale-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; class Example implements EditorPlugin { name = 'guides-edit-image-transform-scale-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Demo 1: Uniform Scaling - Scale from center anchor const scaledImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, scaledImage); engine.block.setPositionX(scaledImage, 50); engine.block.setPositionY(scaledImage, 100); // Scale uniformly to 150% from center anchor engine.block.scale(scaledImage, 1.5, 0.5, 0.5); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Uniform Scale'); engine.block.setFloat(text1, 'text/fontSize', 28); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 225); engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 360); engine.block.appendChild(page, text1); // Demo 2: Non-Uniform Scaling - Stretch width only const stretchedImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, stretchedImage); engine.block.setPositionX(stretchedImage, 300); engine.block.setPositionY(stretchedImage, 150); // Stretch width by 50% while keeping height engine.block.setWidthMode(stretchedImage, 'Absolute'); const currentWidth = engine.block.getWidth(stretchedImage); engine.block.setWidth(stretchedImage, currentWidth * 1.5, true); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Non-Uniform'); engine.block.setFloat(text2, 'text/fontSize', 28); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 225); engine.block.setPositionX(text2, 300); engine.block.setPositionY(text2, 360); engine.block.appendChild(page, text2); // Demo 3: Locked Image - Cannot be scaled const lockedImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_5.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, lockedImage); engine.block.setPositionX(lockedImage, 575); engine.block.setPositionY(lockedImage, 150); // Lock transforms to prevent scaling engine.block.setTransformLocked(lockedImage, true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Locked'); engine.block.setFloat(text3, 'text/fontSize', 28); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 150); engine.block.setPositionX(text3, 575); engine.block.setPositionY(text3, 360); engine.block.appendChild(page, text3); // Scale with different anchor points // Top-left anchor (0, 0) - default // Center anchor (0.5, 0.5) - scales from center // Bottom-right anchor (1, 1) - scales from bottom-right corner const anchorX = 0.5; const anchorY = 0.5; const scaleFactor = 1.2; engine.block.scale(scaledImage, scaleFactor, anchorX, anchorY); // Restrict scaling through scopes engine.block.setScopeEnabled(lockedImage, 'layer/resize', false); // Select the scaled image to show the result engine.block.select(scaledImage); } } export default Example; ``` This guide covers uniform scaling with anchor points, non-uniform axis stretching, and locking transforms to prevent scaling in templates. ## Uniform Scaling Apply a scale factor with `engine.block.scale()` where 1.0 keeps the original size, values greater than 1 enlarge, and values less than 1 shrink. The third and fourth parameters control the anchor point (0 to 1 range): ```typescript highlight-uniform-scale // Scale uniformly to 150% from center anchor engine.block.scale(scaledImage, 1.5, 0.5, 0.5); ``` ## Anchor Point Control Control the scaling origin with `anchorX` and `anchorY` parameters. Use (0, 0) for top-left, (0.5, 0.5) for center, or (1, 1) for bottom-right. Center anchor expands equally in all directions: ```typescript highlight-anchor-points // Scale with different anchor points // Top-left anchor (0, 0) - default // Center anchor (0.5, 0.5) - scales from center // Bottom-right anchor (1, 1) - scales from bottom-right corner const anchorX = 0.5; const anchorY = 0.5; const scaleFactor = 1.2; engine.block.scale(scaledImage, scaleFactor, anchorX, anchorY); ``` ## Non-Uniform Scaling Stretch a single axis by setting absolute mode and modifying width or height independently. This changes the aspect ratio: ```typescript highlight-non-uniform-scale // Stretch width by 50% while keeping height engine.block.setWidthMode(stretchedImage, 'Absolute'); const currentWidth = engine.block.getWidth(stretchedImage); engine.block.setWidth(stretchedImage, currentWidth * 1.5, true); ``` ## Locking Transforms Lock transforms to prevent scaling, rotation, and repositioning using `setTransformLocked`: ```typescript highlight-lock-scaling // Lock transforms to prevent scaling engine.block.setTransformLocked(lockedImage, true); ``` ## Scope Restrictions Disable specific capabilities using scopes. Use `'layer/resize'` to prevent resizing while allowing other operations: ```typescript highlight-scope-restriction // Restrict scaling through scopes engine.block.setScopeEnabled(lockedImage, 'layer/resize', false); ``` ## Troubleshooting ### Image Scales Unevenly Use the same anchor values for both X and Y (e.g., 0.5, 0.5 for center). Use `scale()` instead of separate width/height changes to maintain proportions. ### Scaling Doesn't Apply Verify the block is valid using `engine.block.isValid(blockId)`. Ensure the block is appended to the scene hierarchy with `engine.block.appendChild()`. ### Users Can Still Scale Locked Blocks Check that the `'layer/resize'` scope is disabled using `engine.block.isScopeEnabled()`. Transform locks prevent UI manipulation but not API calls. ### Export Shows Original Size Confirm scaling was applied before export. Use `engine.block.getWidth()` and `engine.block.getHeight()` to verify dimensions after scaling. ## API Reference | Method | Description | | ----------------------------------- | --------------------------------------------- | | `engine.block.scale()` | Scale block and children proportionally | | `engine.block.getWidth()` | Get current width | | `engine.block.setWidth()` | Set width with optional crop maintenance | | `engine.block.getHeight()` | Get current height | | `engine.block.setHeight()` | Set height with optional crop maintenance | | `engine.block.setWidthMode()` | Set width mode (Absolute, Percent, Auto) | | `engine.block.setHeightMode()` | Set height mode (Absolute, Percent, Auto) | | `engine.block.setTransformLocked()` | Lock all transformations | | `engine.block.isTransformLocked()` | Check if transforms are locked | | `engine.block.setScopeEnabled()` | Enable or disable a scope | | `engine.block.isScopeEnabled()` | Check if scope is enabled | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Vectorize" description: "Convert raster images into scalable vector graphics for flexible resizing and editing." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-image/vectorize-2b4c7f/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/angular/edit-image-c64912/) > [Vectorize](https://img.ly/docs/cesdk/angular/edit-image/vectorize-2b4c7f/) > [Plugins](https://img.ly/docs/cesdk/angular/plugins-693c48/) > [Vectorizer](https://img.ly/docs/cesdk/angular/edit-image/vectorize-2b4c7f/) --- Convert raster images into scalable vector graphics that resize without quality loss using CE.SDK's vectorizer plugin. ![Vectorize Images example showing an image ready for vectorization](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-vectorize-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-vectorize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-vectorize-browser/) Vectorization transforms pixel-based images into vector paths that can be scaled to any size without losing quality. The `@imgly/plugin-vectorizer-web` plugin provides one-click UI conversion directly in the canvas menu. Common use cases include converting logos for scalable branding, creating cutout outlines from photographs, and extracting editable paths from illustrations. ```typescript file=@cesdk_web_examples/guides-edit-image-vectorize-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import VectorizerPlugin from '@imgly/plugin-vectorizer-web'; import packageJson from './package.json'; /** * CE.SDK Plugin: Vectorize Images Guide * * Demonstrates converting raster images to vector graphics: * - Using the vectorizer plugin for UI-based conversion * - Programmatically vectorizing with createCutoutFromBlocks() * - Configuring threshold parameters for quality control */ 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.addPlugin(new DesignEditorConfig()); const engine = cesdk.engine; // Add the vectorizer plugin with configuration options await cesdk.addPlugin( VectorizerPlugin({ // Display the vectorize button in the canvas menu ui: { locations: 'canvasMenu' }, // Set processing timeout to 30 seconds timeout: 30000, // Combine paths into a single shape when exceeding 500 paths groupingThreshold: 500 }) ); // Show only the vectorizer button in the canvas menu cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, [ '@imgly/plugin-vectorizer-web.canvasMenu' ]); // Create a design scene with a page 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); // Create an image block to vectorize const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); // Load a sample image with clear contours for vectorization const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setContentFillMode(imageBlock, 'Contain'); // Center the image on the page const imageWidth = 400; const imageHeight = 300; engine.block.setWidth(imageBlock, imageWidth); engine.block.setHeight(imageBlock, imageHeight); engine.block.setPositionX(imageBlock, (800 - imageWidth) / 2); engine.block.setPositionY(imageBlock, (600 - imageHeight) / 2); engine.block.appendChild(page, imageBlock); // Select the image to reveal the vectorize button in the canvas menu engine.block.select(imageBlock); // Zoom to fit the page in view await engine.scene.zoomToBlock(page, { padding: 40 }); engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers how to install and configure the vectorizer plugin, customize the canvas menu, and troubleshoot common vectorization issues. ## Using the Vectorizer Plugin The `@imgly/plugin-vectorizer-web` plugin adds a vectorize button to the canvas menu when you select an image block. Processing runs entirely in the browser using the [@imgly/vectorizer](https://www.npmjs.com/package/@imgly/vectorizer) library. ### Installation Install the plugin via npm or yarn: ```sh yarn add @imgly/plugin-vectorizer-web@$UBQ_VERSION$ npm install @imgly/plugin-vectorizer-web@$UBQ_VERSION$ ``` ### Adding the Plugin We register the plugin using `cesdk.addPlugin()` with the `ui.locations` option to display the vectorize button in the canvas menu. To show only the vectorizer button, we use `setComponentOrder({ in: 'ly.img.canvas.menu' }, order)` to filter out other menu items. ```typescript highlight-add-plugin // Add the vectorizer plugin with configuration options await cesdk.addPlugin( VectorizerPlugin({ // Display the vectorize button in the canvas menu ui: { locations: 'canvasMenu' }, // Set processing timeout to 30 seconds timeout: 30000, // Combine paths into a single shape when exceeding 500 paths groupingThreshold: 500 }) ); // Show only the vectorizer button in the canvas menu cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, [ '@imgly/plugin-vectorizer-web.canvasMenu' ]); ``` ### Configuration Options You can customize the plugin behavior with two configuration options: - **timeout**: Processing time limit in milliseconds (default: 30000). Increase this for complex images that take longer to process. - **groupingThreshold**: Maximum path count before combining into a single shape (default: 500). Lower values combine paths earlier, reducing selectable elements. ## Programmatic Vectorization For automation workflows, you can create cutout blocks from source blocks using `engine.block.createCutoutFromBlocks()`. This method traces rasterized content or extracts existing vector paths. ### Threshold Parameters The `createCutoutFromBlocks()` method accepts three parameters that control vectorization quality: - **vectorizeDistanceThreshold** (default: 2): Maximum contour deviation during tracing. Lower values increase accuracy but produce more complex paths. - **simplifyDistanceThreshold** (default: 4): Maximum deviation for path smoothing. Set to 0 to disable smoothing entirely. - **useExistingShapeInformation** (default: true): When true, extracts existing vector paths from shapes and SVGs without re-tracing. ### Threshold Recommendations Start with the default values (2, 4) and adjust based on your source content: | Content Type | vectorizeDistanceThreshold | simplifyDistanceThreshold | |--------------|----------------------------|---------------------------| | Photographs | 4-8 | 6-10 | | Logos and icons | 1-2 | 2-4 | | Illustrations | 2-4 | 4-6 | Lower thresholds increase path complexity and processing time. For photographs with many details, higher thresholds reduce the number of paths while maintaining overall shape recognition. ## Troubleshooting Common issues and solutions: - **Processing timeout**: Increase the `timeout` option or use higher threshold values to reduce complexity. - **Jagged edges**: Increase `simplifyDistanceThreshold` to smooth the paths. - **Lost details**: Decrease both threshold values to capture finer contours. - **Vectorize button not appearing**: Verify `ui: { locations: 'canvasMenu' }` is set and that you've selected an image block. - **Memory issues with complex images**: Increase `groupingThreshold` to combine more paths into single shapes. ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `cesdk.addPlugin(VectorizerPlugin(options))` | Plugin | Register the vectorizer plugin | | `cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, ids)` | UI | Control which items appear in the canvas menu | | `engine.block.createCutoutFromBlocks(ids, vectorizeDistanceThreshold?, simplifyDistanceThreshold?, useExistingShapeInformation?)` | Block | Create a cutout from block contours | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Captions" description: "Documentation for adding captions to videos" platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/add-captions-f67565/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Add Captions](https://img.ly/docs/cesdk/angular/edit-video/add-captions-f67565/) --- Add synchronized captions to video projects using CE.SDK's caption system, with support for importing subtitle files, styling with presets, and burning captions into video exports. ![Video captions example showing timeline with caption track and styled captions](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-add-captions-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-add-captions-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-add-captions-browser/) Captions in CE.SDK follow a hierarchy: **Page → CaptionTrack → Caption blocks**. Each caption has text, timing (time offset and duration), and styling properties. Captions appear and disappear based on their timing, synchronized with video playback. ```typescript file=@cesdk_web_examples/guides-create-video-add-captions-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add Captions Guide * * Demonstrates adding synchronized captions to video projects: * - Importing captions from SRT/VTT files * - Creating and styling captions programmatically * - Applying caption presets * - Controlling caption timing and positioning * - Adding animations to captions */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; engine.block.setDuration(page, 40); // Add a video clip as the base content const videoUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'; const track = engine.block.create('track'); engine.block.appendChild(page, track); const videoClip = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 40, timeOffset: 0 } }); engine.block.appendChild(track, videoClip); engine.block.fillParent(track); // Import captions from SRT file // createCaptionsFromURI parses SRT/VTT and creates caption blocks with timing const captionSrtUrl = 'https://img.ly/static/examples/captions.srt'; const captionBlocks = await engine.block.createCaptionsFromURI( captionSrtUrl ); // eslint-disable-next-line no-console console.log(`Imported ${captionBlocks.length} captions from SRT file`); // Adjust caption timing to start at the beginning of the video // The SRT file may have different timing, so we reset to start at 0 let currentOffset = 0; for (const captionId of captionBlocks) { const duration = engine.block.getDuration(captionId); engine.block.setTimeOffset(captionId, currentOffset); currentOffset += duration; } // Create a caption track and add captions to it // Caption tracks organize captions in the timeline const captionTrack = engine.block.create('//ly.img.ubq/captionTrack'); engine.block.appendChild(page, captionTrack); // Add each caption block to the track for (const captionId of captionBlocks) { engine.block.appendChild(captionTrack, captionId); } // eslint-disable-next-line no-console console.log(`Caption track created with ${captionBlocks.length} captions`); // Apply a caption preset for consistent styling // Caption presets provide pre-configured styles (fonts, colors, backgrounds) const captionPresetsSourceId = 'ly.img.caption.presets'; const comicPresetId = '//ly.img.caption.presets/comic'; // Fetch the preset asset const comicPreset = await engine.asset.fetchAsset( captionPresetsSourceId, comicPresetId ); // Apply preset to the first caption (styling syncs across all captions) if (comicPreset && captionBlocks.length > 0) { await engine.asset.applyToBlock( captionPresetsSourceId, comicPreset, captionBlocks[0] ); // eslint-disable-next-line no-console console.log('Applied comic preset to captions'); } // Position captions at the bottom of the video frame // Caption position and size sync across all captions, so we only set it once if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Use percentage-based positioning for responsive layout engine.block.setPositionXMode(firstCaption, 'Percent'); engine.block.setPositionYMode(firstCaption, 'Percent'); engine.block.setWidthMode(firstCaption, 'Percent'); engine.block.setHeightMode(firstCaption, 'Percent'); // Position at bottom center with padding engine.block.setPositionX(firstCaption, 0.05); // 5% from left engine.block.setPositionY(firstCaption, 0.8); // 80% from top (near bottom) engine.block.setWidth(firstCaption, 0.9); // 90% width engine.block.setHeight(firstCaption, 0.15); // 15% height } // Modify a specific caption's text and timing if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Get current text const currentText = engine.block.getString(firstCaption, 'caption/text'); // eslint-disable-next-line no-console console.log('First caption text:', currentText); // Get timing info const offset = engine.block.getTimeOffset(firstCaption); const duration = engine.block.getDuration(firstCaption); // eslint-disable-next-line no-console console.log(`First caption: offset=${offset}s, duration=${duration}s`); } // Add fade-in animation to the first caption if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Create and apply entry animation const fadeIn = engine.block.createAnimation('fade'); engine.block.setDuration(fadeIn, 0.3); engine.block.setInAnimation(firstCaption, fadeIn); // eslint-disable-next-line no-console console.log('Added fade-in animation to first caption'); } // Select the first caption to show it in the inspector if (captionBlocks.length > 0) { engine.block.select(captionBlocks[0]); } // Seek to show the first caption at 1 second engine.block.setPlaybackTime(page, 1); // Open the caption inspector panel cesdk.ui.openPanel('//ly.img.panel/inspector/caption'); // eslint-disable-next-line no-console console.log( 'Add Captions guide initialized. Captions imported and styled.' ); } } export default Example; ``` This guide covers how to import captions from SRT/VTT files, style them using presets and custom properties, create captions programmatically, and export videos with burned-in captions. ## Understanding Caption Structure ### Caption Hierarchy CE.SDK organizes captions in a parent-child hierarchy. The page contains one or more caption tracks, and each caption track contains individual caption blocks. This structure allows for multiple caption tracks (for different languages or purposes) while keeping captions organized. When you import captions from a subtitle file, CE.SDK automatically creates the caption track and populates it with caption blocks. Each caption block stores its text content, start time, duration, and styling properties. ### Caption Timing Each caption has two timing properties: **time offset** (when the caption appears) and **duration** (how long it stays visible). These values are in seconds and synchronize with the video playback. A caption with a time offset of 2.0 and duration of 3.0 appears at the 2-second mark and disappears at the 5-second mark. ## Importing Captions from Subtitle Files ### Using createCaptionsFromURI The fastest way to add captions is importing from an SRT or VTT subtitle file. CE.SDK parses the file and creates caption blocks with timing already configured. ```typescript highlight-import-captions // Import captions from SRT file // createCaptionsFromURI parses SRT/VTT and creates caption blocks with timing const captionSrtUrl = 'https://img.ly/static/examples/captions.srt'; const captionBlocks = await engine.block.createCaptionsFromURI( captionSrtUrl ); // eslint-disable-next-line no-console console.log(`Imported ${captionBlocks.length} captions from SRT file`); // Adjust caption timing to start at the beginning of the video // The SRT file may have different timing, so we reset to start at 0 let currentOffset = 0; for (const captionId of captionBlocks) { const duration = engine.block.getDuration(captionId); engine.block.setTimeOffset(captionId, currentOffset); currentOffset += duration; } ``` The `createCaptionsFromURI` method downloads the subtitle file, parses the timing and text, and creates a caption track with all captions positioned correctly. It returns an array of caption block IDs for the imported captions. ### Creating the Caption Track After importing captions, create a caption track to organize them in the composition. The caption track manages caption positioning and display. ```typescript highlight-create-caption-track // Create a caption track and add captions to it // Caption tracks organize captions in the timeline const captionTrack = engine.block.create('//ly.img.ubq/captionTrack'); engine.block.appendChild(page, captionTrack); // Add each caption block to the track for (const captionId of captionBlocks) { engine.block.appendChild(captionTrack, captionId); } // eslint-disable-next-line no-console console.log(`Caption track created with ${captionBlocks.length} captions`); ``` Create a caption track with `engine.block.create('//ly.img.ubq/captionTrack')` and append it to the page. Then add each caption block to the track using `appendChild`. ## Using the Built-in Caption UI ### Caption Panel CE.SDK provides a caption panel in the inspector for visual caption management. When you select a caption, the panel shows timing controls, text editing, and styling options. Users can drag caption edges in the timeline to adjust timing or double-click to edit text. ### Importing via UI The caption panel includes an import button for uploading SRT or VTT files. The interface guides users through file selection and automatically extracts timing information. ### Styling with Presets Caption presets provide pre-configured styling combinations including font, color, background, and animations. Select a caption and choose from available presets to apply consistent styling. Presets are especially useful for maintaining brand consistency across videos. ### Editing Text and Timing Double-click a caption in the timeline or panel to edit its text. Drag the edges of caption blocks in the timeline to adjust start time and duration. The timeline provides visual feedback showing caption positions relative to video content. ## Creating Captions Programmatically ### Caption Track Setup For full control over captions, create them programmatically. First, create a caption track and append it to the page. ```typescript const captionTrack = engine.block.create('//ly.img.ubq/captionTrack'); engine.block.appendChild(page, captionTrack); ``` ### Creating Caption Blocks Create individual captions with text and timing. ```typescript const caption = engine.block.create('//ly.img.ubq/caption'); engine.block.appendChild(captionTrack, caption); // Set caption text engine.block.setString(caption, 'caption/text', 'Hello, world!'); // Set timing - appears at 2 seconds for 3 seconds engine.block.setTimeOffset(caption, 2); engine.block.setDuration(caption, 3); ``` Set the caption text using `setString` with the `caption/text` property. Position the caption in time using `setTimeOffset` (when it appears) and `setDuration` (how long it shows). ## Styling Captions ### Applying Presets The fastest way to style captions is using presets. Presets provide pre-configured styling including fonts, colors, backgrounds, and effects. ```typescript highlight-apply-preset // Apply a caption preset for consistent styling // Caption presets provide pre-configured styles (fonts, colors, backgrounds) const captionPresetsSourceId = 'ly.img.caption.presets'; const comicPresetId = '//ly.img.caption.presets/comic'; // Fetch the preset asset const comicPreset = await engine.asset.fetchAsset( captionPresetsSourceId, comicPresetId ); // Apply preset to the first caption (styling syncs across all captions) if (comicPreset && captionBlocks.length > 0) { await engine.asset.applyToBlock( captionPresetsSourceId, comicPreset, captionBlocks[0] ); // eslint-disable-next-line no-console console.log('Applied comic preset to captions'); } ``` Fetch a preset using `engine.asset.fetchAsset` and apply it with `engine.asset.applyToBlock`. Caption styling automatically syncs across all captions, so applying a preset to one caption styles them all. ### Positioning Captions Position captions at the bottom of the video frame using percentage-based positioning for responsive layout. ```typescript highlight-position-captions // Position captions at the bottom of the video frame // Caption position and size sync across all captions, so we only set it once if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Use percentage-based positioning for responsive layout engine.block.setPositionXMode(firstCaption, 'Percent'); engine.block.setPositionYMode(firstCaption, 'Percent'); engine.block.setWidthMode(firstCaption, 'Percent'); engine.block.setHeightMode(firstCaption, 'Percent'); // Position at bottom center with padding engine.block.setPositionX(firstCaption, 0.05); // 5% from left engine.block.setPositionY(firstCaption, 0.8); // 80% from top (near bottom) engine.block.setWidth(firstCaption, 0.9); // 90% width engine.block.setHeight(firstCaption, 0.15); // 15% height } ``` Use percentage mode (`setPositionXMode`, `setPositionYMode`) for positions that adapt to different video resolutions. Caption position and size sync across all captions automatically. ### Background Enable a background behind caption text for better readability over video content. Use `setBool` to enable `backgroundColor/enabled` and `setColor` to set `backgroundColor/color` with RGBA values. A semi-transparent black background (alpha 0.7) is common for video captions. ### Automatic Font Sizing CE.SDK can automatically adjust font size to fit caption text within bounds. Enable automatic sizing and set minimum and maximum size limits. ```typescript engine.block.setBool(captionId, 'caption/automaticFontSizeEnabled', true); engine.block.setFloat(captionId, 'caption/minAutomaticFontSize', 24); engine.block.setFloat(captionId, 'caption/maxAutomaticFontSize', 72); ``` This prevents text from overflowing while maintaining readability. ## Applying Presets Programmatically ### Finding Available Presets Query available caption presets from the asset library. ```typescript const presetsResult = await engine.asset.findAssets('ly.img.caption.presets', { page: 0, perPage: 100 }); const presets = presetsResult.assets; ``` The `findAssets` method returns preset metadata including IDs and preview thumbnails. ### Applying a Preset Apply a preset to a caption using `applyToBlock`. ```typescript const preset = presets[0]; await engine.asset.applyToBlock('ly.img.caption.presets', preset, captionId); ``` The preset applies all styling properties at once—font, colors, background, and any animations defined in the preset. ## Caption Animations ### Adding Entry Animations Make captions more engaging by adding entry animations. ```typescript highlight-add-animation // Add fade-in animation to the first caption if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Create and apply entry animation const fadeIn = engine.block.createAnimation('fade'); engine.block.setDuration(fadeIn, 0.3); engine.block.setInAnimation(firstCaption, fadeIn); // eslint-disable-next-line no-console console.log('Added fade-in animation to first caption'); } ``` Create an animation using `createAnimation` with types like 'fade', 'slide', or 'scale'. Set the animation duration and apply it with `setInAnimation`. ### Animation Types CE.SDK supports several animation types for captions: - **fade** - Opacity transition - **slide** - Position movement - **scale** - Size change - **blur** - Focus effect Set loop animations with `setLoopAnimation` for continuous effects, or exit animations with `setOutAnimation` for departure transitions. ## Reading Caption Properties ### Getting Text and Timing Retrieve caption properties to display in custom UI or for processing. ```typescript highlight-modify-caption // Modify a specific caption's text and timing if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Get current text const currentText = engine.block.getString(firstCaption, 'caption/text'); // eslint-disable-next-line no-console console.log('First caption text:', currentText); // Get timing info const offset = engine.block.getTimeOffset(firstCaption); const duration = engine.block.getDuration(firstCaption); // eslint-disable-next-line no-console console.log(`First caption: offset=${offset}s, duration=${duration}s`); } ``` Use `getString` for text, `getTimeOffset` for start time, and `getDuration` for display length. These values are useful for building custom caption editors or synchronization tools. ## Exporting Videos with Captions ### Burned-In Captions When you export a video, captions are burned into the video as pixels. They become part of the video image and cannot be turned off by viewers. This ensures captions display correctly on any platform. ```typescript const videoBlob = await engine.block.exportVideo(page, { mimeType: 'video/mp4' }); ``` The export process renders each frame with captions overlaid at the correct timing. Export time depends on video length and resolution. > **Note:** For accessibility, consider also providing separate subtitle files (SRT/VTT) alongside burned-in captions. This allows viewers to customize caption appearance in their video player. ## Troubleshooting | Issue | Cause | Solution | | --- | --- | --- | | Captions not visible | Not in caption track hierarchy | Check `getParent()`: page → captionTrack → caption | | Wrong timing | Time offset/duration incorrect | Verify `getTimeOffset()` and `getDuration()` | | Import fails | Unsupported format | Use valid SRT or VTT file | | Styling not applying | Property path wrong | Use `caption/` prefix for caption properties | ### Captions Not Appearing If captions don't show in the preview, verify the caption hierarchy. Each caption must be a child of a caption track, which must be a child of the page. Use `getParent()` to trace the hierarchy. Also check that the playhead position matches caption timing. Captions only appear during their time offset and duration window. ### Import Errors If `createCaptionsFromURI` fails, verify the URL is accessible and returns valid SRT or VTT content. Common issues include CORS restrictions and malformed subtitle files. Test the URL in a browser to confirm accessibility. ## API Reference | Method | Purpose | | --- | --- | | `engine.block.createCaptionsFromURI(uri)` | Import captions from SRT/VTT file | | `engine.block.create('//ly.img.ubq/captionTrack')` | Create caption track container | | `engine.block.create('//ly.img.ubq/caption')` | Create caption block | | `engine.block.setString(id, property, value)` | Set caption text | | `engine.block.setTimeOffset(id, offset)` | Set caption start time | | `engine.block.setDuration(id, duration)` | Set caption display duration | | `engine.block.setFloat(id, property, value)` | Set font size, spacing | | `engine.block.setEnum(id, property, value)` | Set alignment | | `engine.block.setBool(id, property, value)` | Enable background | | `engine.block.setColor(id, property, value)` | Set colors | | `engine.block.createAnimation(type)` | Create animation | | `engine.block.setInAnimation(id, animation)` | Set entry animation | | `engine.block.exportVideo(id, options)` | Export video with captions | | `engine.asset.findAssets(sourceId, params)` | Find presets | | `engine.asset.applyToBlock(sourceId, asset, block)` | Apply preset | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Watermark" description: "Add text and image watermarks to videos using CE.SDK for copyright protection, branding, and content attribution with timeline management and visibility controls." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/add-watermark-762ce6/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Add Watermark](https://img.ly/docs/cesdk/angular/edit-video/add-watermark-762ce6/) --- Add text and image watermarks to video content for copyright protection, branding, and content attribution using CE.SDK's time-aware block system. ![Add Watermark example showing video with text and logo watermarks](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-add-watermark-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-add-watermark-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-add-watermark-browser/) Video watermarks in CE.SDK are design blocks positioned over video content. **Text watermarks** display copyright notices, URLs, or branding text, while **image watermarks** show logos or graphics. Both watermark types need their time-based properties configured to remain visible throughout video playback. The key difference from static image watermarking is setting the watermark's `duration` to match the video duration. ```typescript file=@cesdk_web_examples/guides-create-video-add-watermark-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { CaptionPresetsAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add Watermark to Video Guide * * Demonstrates adding text and image watermarks to videos: * - Creating text watermarks with styling * - Creating image watermarks from logos * - Positioning watermarks on the canvas * - Setting watermark duration to match video * - Adding drop shadows for visibility * - Configuring opacity and blend modes */ 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'); // Create a video scene from a sample video const videoUrl = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; await cesdk.engine.scene.createFromVideo(videoUrl); const engine = cesdk.engine; const page = engine.scene.getCurrentPage()!; // Get page dimensions for watermark positioning const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Get the page duration (set automatically from the video) const videoDuration = engine.block.getDuration(page); // eslint-disable-next-line no-console console.log('Video duration from page:', videoDuration); // ===== TEXT WATERMARK ===== // Create a text watermark for copyright notice const textWatermark = engine.block.create('text'); // Use Auto sizing so the text block grows to fit its content engine.block.setWidthMode(textWatermark, 'Auto'); engine.block.setHeightMode(textWatermark, 'Auto'); // Set the watermark text content using replaceText engine.block.replaceText(textWatermark, 'All rights reserved © 2025'); // Position in bottom-left corner with padding const textPadding = 20; engine.block.setPositionX(textWatermark, textPadding); engine.block.setPositionY(textWatermark, pageHeight - textPadding - 20); // Style the text watermark with a subtle font size engine.block.setFloat(textWatermark, 'text/fontSize', 4); engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 }); // White text // Set text alignment to left engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left'); // Set watermark opacity for subtle appearance engine.block.setOpacity(textWatermark, 0.7); // Add drop shadow for visibility across different backgrounds engine.block.setDropShadowEnabled(textWatermark, true); engine.block.setDropShadowColor(textWatermark, { r: 0, g: 0, b: 0, a: 0.8 }); engine.block.setDropShadowOffsetX(textWatermark, 2); engine.block.setDropShadowOffsetY(textWatermark, 2); engine.block.setDropShadowBlurRadiusX(textWatermark, 4); engine.block.setDropShadowBlurRadiusY(textWatermark, 4); // Set the text watermark duration to match the video engine.block.setDuration(textWatermark, videoDuration); engine.block.setTimeOffset(textWatermark, 0); // Add the text watermark to the page engine.block.appendChild(page, textWatermark); // ===== IMAGE WATERMARK (LOGO) ===== // Create a graphic block for the logo watermark const logoWatermark = engine.block.create('graphic'); // Create a rectangular shape for the logo const rectShape = engine.block.createShape('rect'); engine.block.setShape(logoWatermark, rectShape); // Create an image fill with the logo const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logoWatermark, imageFill); // Set content fill mode to contain so the logo fits within bounds engine.block.setContentFillMode(logoWatermark, 'Contain'); // Size and position the logo in the top-right corner const logoSize = 80; const logoPadding = 20; engine.block.setWidth(logoWatermark, logoSize); engine.block.setHeight(logoWatermark, logoSize); engine.block.setPositionX( logoWatermark, pageWidth - logoSize - logoPadding ); engine.block.setPositionY(logoWatermark, logoPadding); // Set opacity for the logo watermark engine.block.setOpacity(logoWatermark, 0.6); // Set blend mode for better integration with video content engine.block.setBlendMode(logoWatermark, 'Normal'); // Set the logo watermark duration to match the video engine.block.setDuration(logoWatermark, videoDuration); engine.block.setTimeOffset(logoWatermark, 0); // Add the logo watermark to the page engine.block.appendChild(page, logoWatermark); // Select the page to show the timeline engine.block.setSelected(page, true); // Zoom to fit the page and enable auto-fit for responsive resizing await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40); // Start playback automatically try { engine.block.setPlaying(page, true); // eslint-disable-next-line no-console console.log( 'Video watermark guide initialized. Playback started with text and logo watermarks visible.' ); } catch (error) { // eslint-disable-next-line no-console console.log( 'Video watermark guide initialized. Click play button to start playback.' ); } } } export default Example; ``` This guide covers how to create text and image watermarks programmatically, position them on the canvas, style them for visibility, and configure their duration to span the entire video. ## Setting Up Video Editing Before adding watermarks, we configure CE.SDK for video editing. Timeline features are required for watermark duration control. ```typescript highlight-setup // 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'); ``` We enable three features: `ly.img.video` for video support, `ly.img.timeline` for the timeline UI panel, and `ly.img.playback` for the playback UI controls. ## Creating the Scene We create a scene from a video URL. This automatically sets up the page dimensions and time-based properties based on the video. ```typescript highlight-create-video-scene // Create a video scene from a sample video const videoUrl = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; await cesdk.engine.scene.createFromVideo(videoUrl); ``` The `createFromVideo` method loads the video, creates a scene, and sets the page dimensions to match the video's aspect ratio. The video becomes a fill block in the composition with its duration already set. ## Creating a Text Watermark Text watermarks display copyright notices, branding text, or URLs. We create a text block and position it on the canvas. ```typescript highlight-create-text-watermark // Create a text watermark for copyright notice const textWatermark = engine.block.create('text'); // Use Auto sizing so the text block grows to fit its content engine.block.setWidthMode(textWatermark, 'Auto'); engine.block.setHeightMode(textWatermark, 'Auto'); // Set the watermark text content using replaceText engine.block.replaceText(textWatermark, 'All rights reserved © 2025'); // Position in bottom-left corner with padding const textPadding = 20; engine.block.setPositionX(textWatermark, textPadding); engine.block.setPositionY(textWatermark, pageHeight - textPadding - 20); ``` We create a text block with `block.create('text')` and configure it with auto-sizing using `setWidthMode('Auto')` and `setHeightMode('Auto')`. This lets the text block grow to fit its content. We set the text content using `replaceText()` and position the watermark in the bottom-left corner with padding from the edges. ## Styling Text Watermarks Style the text for readability across different video backgrounds. ```typescript highlight-style-text-watermark // Style the text watermark with a subtle font size engine.block.setFloat(textWatermark, 'text/fontSize', 4); engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 }); // White text // Set text alignment to left engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left'); // Set watermark opacity for subtle appearance engine.block.setOpacity(textWatermark, 0.7); ``` We set the font size using `setFloat()` with the `'text/fontSize'` property for a subtle watermark appearance. White text color ensures visibility, left alignment positions the text naturally, and 70% opacity creates a semi-transparent appearance that's visible but not distracting. ## Adding Drop Shadow for Visibility Drop shadows ensure text remains readable over both light and dark video backgrounds. ```typescript highlight-text-drop-shadow // Add drop shadow for visibility across different backgrounds engine.block.setDropShadowEnabled(textWatermark, true); engine.block.setDropShadowColor(textWatermark, { r: 0, g: 0, b: 0, a: 0.8 }); engine.block.setDropShadowOffsetX(textWatermark, 2); engine.block.setDropShadowOffsetY(textWatermark, 2); engine.block.setDropShadowBlurRadiusX(textWatermark, 4); engine.block.setDropShadowBlurRadiusY(textWatermark, 4); ``` We enable the drop shadow and configure its appearance. The black shadow color with 80% opacity provides contrast. Offset values (2px in each direction) separate the shadow from the text, while blur radius values (4px) create a soft shadow edge. ## Setting Text Watermark Duration The watermark must persist throughout video playback. We set its duration to match the video duration. ```typescript highlight-text-timeline // Set the text watermark duration to match the video engine.block.setDuration(textWatermark, videoDuration); engine.block.setTimeOffset(textWatermark, 0); // Add the text watermark to the page engine.block.appendChild(page, textWatermark); ``` `setDuration` controls how long the block appears in the composition. `setTimeOffset` of 0 ensures it starts at the beginning. We then append the watermark to the page, placing it above the video content. ## Creating an Image Watermark Image watermarks display logos or graphics. We create a graphic block with an image fill. ```typescript highlight-create-image-watermark // Create a graphic block for the logo watermark const logoWatermark = engine.block.create('graphic'); // Create a rectangular shape for the logo const rectShape = engine.block.createShape('rect'); engine.block.setShape(logoWatermark, rectShape); // Create an image fill with the logo const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logoWatermark, imageFill); // Set content fill mode to contain so the logo fits within bounds engine.block.setContentFillMode(logoWatermark, 'Contain'); ``` We create a graphic block, assign it a rectangular shape, and fill it with an image. The `fill/image/imageFileURI` property specifies the logo URL. We set the content fill mode to 'Contain' so the logo fits within its bounds without cropping. This pattern—graphic block with shape and fill—is standard for displaying images in CE.SDK. ## Positioning Image Watermarks Position the logo in a corner that doesn't obstruct video content. ```typescript highlight-position-image-watermark // Size and position the logo in the top-right corner const logoSize = 80; const logoPadding = 20; engine.block.setWidth(logoWatermark, logoSize); engine.block.setHeight(logoWatermark, logoSize); engine.block.setPositionX( logoWatermark, pageWidth - logoSize - logoPadding ); engine.block.setPositionY(logoWatermark, logoPadding); ``` We size the logo at 80x80 pixels—large enough to be recognizable but not dominating. Position values place it in the top-right corner with 20px padding from the edges. ## Configuring Opacity and Blend Mode Control how the watermark integrates with the video. ```typescript highlight-image-opacity-blend // Set opacity for the logo watermark engine.block.setOpacity(logoWatermark, 0.6); // Set blend mode for better integration with video content engine.block.setBlendMode(logoWatermark, 'Normal'); ``` We set 60% opacity for a subtle but visible watermark. The blend mode 'Normal' displays the logo as-is. Other modes like 'Multiply' or 'Screen' create different visual effects depending on the logo and video content. ## Setting Image Watermark Duration Like text watermarks, image watermarks need duration configuration. ```typescript highlight-image-timeline // Set the logo watermark duration to match the video engine.block.setDuration(logoWatermark, videoDuration); engine.block.setTimeOffset(logoWatermark, 0); // Add the logo watermark to the page engine.block.appendChild(page, logoWatermark); ``` We set the same duration and time offset as the text watermark so both appear throughout the video. The `appendChild` call adds the logo to the page above existing content. ## Watermark Positioning Strategies Choose watermark positions based on your use case: - **Bottom-right corner**: Most common for copyright notices. Less intrusive but clearly visible. - **Top-right corner**: Good for logos. Doesn't interfere with typical video framing. - **Bottom-left corner**: Alternative for text when bottom-right conflicts with video content. - **Center**: Strong protection but obstructs content. Use for draft or preview watermarks. Calculate positions dynamically based on page dimensions to handle different video aspect ratios. ## Best Practices ### Visibility - Use drop shadows on text watermarks for contrast against varying backgrounds - Set opacity between 50-70% for subtle but visible branding - Choose appropriate font sizes based on your use case (smaller for subtle branding, larger for prominent notices) - Test watermarks against different scenes in your video ### Time Management - Always match watermark duration to video duration - Set time offset to 0 for watermarks that should appear from the start - For time-based watermarks, calculate offsets based on video sections ### Performance - Use appropriately sized logo images (avoid oversized source files) - Limit the number of watermark blocks to minimize rendering overhead - Consider combining multiple watermarks into a single image if they're always used together ## API Reference | Method | Description | |--------|-------------| | `block.create('text')` | Create a text block for text watermarks | | `block.create('graphic')` | Create a graphic block for image watermarks | | `block.setWidthMode(id, mode)` | Set width sizing mode ('Auto', 'Absolute', 'Percent') | | `block.setHeightMode(id, mode)` | Set height sizing mode ('Auto', 'Absolute', 'Percent') | | `block.replaceText(id, text)` | Set text content for text blocks | | `block.setFloat(id, property, value)` | Set numeric properties like font size | | `block.createShape('rect')` | Create a rectangular shape for graphics | | `block.createFill('image')` | Create an image fill for logo watermarks | | `block.setString(id, property, value)` | Set string properties like image URI | | `block.setContentFillMode(id, mode)` | Set content fill mode ('Crop', 'Cover', 'Contain') | | `block.setDuration(id, duration)` | Set watermark duration | | `block.setTimeOffset(id, offset)` | Set watermark start time | | `block.setOpacity(id, opacity)` | Set watermark transparency (0.0-1.0) | | `block.setDropShadowEnabled(id, enabled)` | Enable/disable drop shadow | | `block.setDropShadowColor(id, color)` | Set shadow color | | `block.setDropShadowOffsetX/Y(id, offset)` | Set shadow position | | `block.setDropShadowBlurRadiusX/Y(id, radius)` | Set shadow blur | | `block.setBlendMode(id, mode)` | Set blend mode ('Normal', 'Multiply', etc.) | | `block.appendChild(parent, child)` | Add watermark to page | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Join and Arrange Video Clips" description: "Combine multiple video clips into sequences and organize them on the timeline using tracks and time offsets in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/join-and-arrange-3bbc30/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Join and Arrange](https://img.ly/docs/cesdk/angular/edit-video/join-and-arrange-3bbc30/) --- Combine multiple video clips into sequences and organize them in the composition using CE.SDK's track system and programmatic APIs. ![Join and Arrange Video Clips example showing timeline with video clips organized in tracks](./assets/browser.hero.webp) > **Reading time:** 12 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-join-and-arrange-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-join-and-arrange-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-join-and-arrange-browser/) Video compositions in CE.SDK use a hierarchy: **Scene → Page → Track → Clip**. Tracks organize clips for sequential playback—when you add clips to a track, they play one after another. You can control precise timing using time offsets and create layered compositions by adding multiple tracks to a page. In CE.SDK's block-based architecture, a **clip is a graphic block with a video fill**. This means video clips share the same APIs and capabilities as other blocks—you can position, rotate, scale, and apply effects to video just like images or shapes. The `addVideo()` helper creates this structure automatically and loads the video metadata. ```typescript file=@cesdk_web_examples/guides-create-video-join-and-arrange-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Join and Arrange Video Clips Guide * * Demonstrates combining multiple video clips into sequences: * - Creating video scenes and tracks * - Adding clips to tracks for sequential playback * - Reordering clips within a track * - Controlling clip timing with time offsets * - Creating multi-track compositions */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page duration to accommodate all clips (15 seconds total) engine.block.setDuration(page, 15); // Sample video URL for the demonstration const videoUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'; // Create video clips using the addVideo helper method // Each clip is sized to fill the canvas (1920x1080 is standard video resolution) const clipA = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 0 } }); const clipB = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 5 } }); const clipC = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 10 } }); // Create a track and add it to the page // Tracks organize clips for sequential playback on the timeline const track = engine.block.create('track'); engine.block.appendChild(page, track); // Add clips to the track engine.block.appendChild(track, clipA); engine.block.appendChild(track, clipB); engine.block.appendChild(track, clipC); // Resize all track children to fill the page dimensions engine.block.fillParent(track); // Query track children to verify order const trackClips = engine.block.getChildren(track); // eslint-disable-next-line no-console console.log('Track clip count:', trackClips.length, 'clips'); // Set durations for each clip engine.block.setDuration(clipA, 5); engine.block.setDuration(clipB, 5); engine.block.setDuration(clipC, 5); // Set time offsets to position clips sequentially on the timeline engine.block.setTimeOffset(clipA, 0); engine.block.setTimeOffset(clipB, 5); engine.block.setTimeOffset(clipC, 10); // eslint-disable-next-line no-console console.log('Track offsets set: Clip A: 0s, Clip B: 5s, Clip C: 10s'); // Reorder clips: move Clip C to the beginning (index 0) // This demonstrates using insertChild for precise positioning engine.block.insertChild(track, clipC, 0); // After reordering, update time offsets to reflect the new sequence engine.block.setTimeOffset(clipC, 0); engine.block.setTimeOffset(clipA, 5); engine.block.setTimeOffset(clipB, 10); // eslint-disable-next-line no-console console.log('After reorder - updated offsets: C=0s, A=5s, B=10s'); // Get all clips in the track to verify arrangement const finalClips = engine.block.getChildren(track); // eslint-disable-next-line no-console console.log('Final track arrangement:'); finalClips.forEach((clipId, index) => { const offset = engine.block.getTimeOffset(clipId); const duration = engine.block.getDuration(clipId); // eslint-disable-next-line no-console console.log( ` Clip ${index + 1}: offset=${offset}s, duration=${duration}s` ); }); // Create a second track for layered compositions // Track order determines z-index: last track renders on top const overlayTrack = engine.block.create('track'); engine.block.appendChild(page, overlayTrack); // Create an overlay clip for picture-in-picture effect (1/4 size) const overlayClip = await engine.block.addVideo( videoUrl, 1920 / 4, 1080 / 4, { timeline: { duration: 5, timeOffset: 2 } } ); engine.block.appendChild(overlayTrack, overlayClip); // Position overlay in bottom-right corner with padding engine.block.setPositionX(overlayClip, 1920 - 1920 / 4 - 40); engine.block.setPositionY(overlayClip, 1080 - 1080 / 4 - 40); // eslint-disable-next-line no-console console.log('Multi-track composition created with overlay starting at 2s'); // Select the first clip in the main track to show timeline controls engine.block.select(clipC); // Seek to 2.5s to show both main clip and overlay visible // (overlay starts at 2s, so 2.5s shows both elements) engine.block.setPlaybackTime(page, 2.5); // eslint-disable-next-line no-console console.log( 'Join and Arrange guide initialized. Use timeline to view clip arrangement.' ); } } export default Example; ``` This guide covers how to join clips using the built-in timeline UI, how to programmatically add and arrange clips in tracks, and how to create multi-track compositions. ## Joining Clips via UI CE.SDK's timeline UI provides visual tools for arranging video clips. ### Adding Clips to Timeline Drag clips from the asset panel directly onto the timeline. When you drop a clip on an existing track, it joins the sequence. Dropping on an empty area creates a new track for that clip. The timeline displays clip duration visually—longer clips take more horizontal space. You can see at a glance how clips relate to each other in time. ### Reordering Clips Drag clips within a track to reorder them. As you drag, CE.SDK shows where the clip will land. Release to confirm the new position. The timeline UI updates time offsets when you reorder clips via drag-and-drop, positioning clips sequentially without gaps. ### Creating Additional Tracks Add multiple tracks to create layered compositions. Tracks stack vertically in the timeline, and clips on upper tracks render on top of clips below. This enables picture-in-picture effects, overlays, and complex multi-layer edits. ## Programmatic Clip Joining ### Creating the Scene We create a scene and set up a page for the video composition. ```typescript highlight=highlight-create-video-scene await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page duration to accommodate all clips (15 seconds total) engine.block.setDuration(page, 15); ``` The page duration determines how long the composition plays. Set it to accommodate all your clips—in this example, 15 seconds for three 5-second clips. ### Creating Video Clips We create video clips as graphic blocks with video fills. Each clip needs a video fill that references the source media. ```typescript highlight=highlight-create-clips // Create video clips using the addVideo helper method // Each clip is sized to fill the canvas (1920x1080 is standard video resolution) const clipA = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 0 } }); const clipB = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 5 } }); const clipC = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 10 } }); ``` The `addVideo` helper method creates a graphic block with an attached video fill and automatically loads the video resource metadata. We set width and height to control how the clip appears in the composition. The `timeline` options let us set duration and time offset in one call. ### Creating Tracks Tracks organize clips for sequential playback. We create a track and attach it to the page. ```typescript highlight=highlight-create-track // Create a track and add it to the page // Tracks organize clips for sequential playback on the timeline const track = engine.block.create('track'); engine.block.appendChild(page, track); ``` A track acts as a container for clips. When you add clips to a track, they play in the order they were added. ### Adding Clips to Track We add clips to the track using `appendChild`. Clips join the sequence in the order they're added. ```typescript highlight=highlight-add-clips-to-track // Add clips to the track engine.block.appendChild(track, clipA); engine.block.appendChild(track, clipB); engine.block.appendChild(track, clipC); // Resize all track children to fill the page dimensions engine.block.fillParent(track); // Query track children to verify order const trackClips = engine.block.getChildren(track); // eslint-disable-next-line no-console console.log('Track clip count:', trackClips.length, 'clips'); ``` After adding clips, you can query the track's children to verify the order. `getChildren` returns an array of clip IDs in playback order. ### Setting Clip Durations Each clip needs a duration that determines how long it plays. ```typescript highlight=highlight-set-clip-durations // Set durations for each clip engine.block.setDuration(clipA, 5); engine.block.setDuration(clipB, 5); engine.block.setDuration(clipC, 5); ``` Duration is measured in seconds. A 5-second duration means the clip plays for 5 seconds. ## Arranging Clips ### Time Offsets Time offsets control when each clip starts playing. We set offsets to position clips at specific points in the composition. ```typescript highlight=highlight-time-offsets // Set time offsets to position clips sequentially on the timeline engine.block.setTimeOffset(clipA, 0); engine.block.setTimeOffset(clipB, 5); engine.block.setTimeOffset(clipC, 10); // eslint-disable-next-line no-console console.log('Track offsets set: Clip A: 0s, Clip B: 5s, Clip C: 10s'); ``` Clip A starts at 0 seconds, Clip B at 5 seconds, and Clip C at 10 seconds. Combined with 5-second durations, this creates a continuous 15-second sequence with no gaps. ### Reordering Clips Use `insertChild` to move clips to specific positions within a track. This moves an existing child to a new index. ```typescript highlight=highlight-reorder-clips // Reorder clips: move Clip C to the beginning (index 0) // This demonstrates using insertChild for precise positioning engine.block.insertChild(track, clipC, 0); // After reordering, update time offsets to reflect the new sequence engine.block.setTimeOffset(clipC, 0); engine.block.setTimeOffset(clipA, 5); engine.block.setTimeOffset(clipB, 10); // eslint-disable-next-line no-console console.log('After reorder - updated offsets: C=0s, A=5s, B=10s'); ``` When we insert Clip C at index 0, it becomes the first clip. The order changes from A-B-C to C-A-B. We update time offsets to match the new sequence. ### Querying Track Children Use `getChildren` to inspect the current clip order and verify arrangements. ```typescript highlight=highlight-get-track-children // Get all clips in the track to verify arrangement const finalClips = engine.block.getChildren(track); // eslint-disable-next-line no-console console.log('Final track arrangement:'); finalClips.forEach((clipId, index) => { const offset = engine.block.getTimeOffset(clipId); const duration = engine.block.getDuration(clipId); // eslint-disable-next-line no-console console.log( ` Clip ${index + 1}: offset=${offset}s, duration=${duration}s` ); }); ``` This loop outputs each clip's position, time offset, and duration—useful for debugging or building custom timeline UIs. ## Multi-Track Compositions ### Adding Multiple Tracks Create layered compositions by adding multiple tracks to a page. Track order determines rendering order—clips in later tracks appear on top. ```typescript highlight=highlight-multi-track // Create a second track for layered compositions // Track order determines z-index: last track renders on top const overlayTrack = engine.block.create('track'); engine.block.appendChild(page, overlayTrack); // Create an overlay clip for picture-in-picture effect (1/4 size) const overlayClip = await engine.block.addVideo( videoUrl, 1920 / 4, 1080 / 4, { timeline: { duration: 5, timeOffset: 2 } } ); engine.block.appendChild(overlayTrack, overlayClip); // Position overlay in bottom-right corner with padding engine.block.setPositionX(overlayClip, 1920 - 1920 / 4 - 40); engine.block.setPositionY(overlayClip, 1080 - 1080 / 4 - 40); // eslint-disable-next-line no-console console.log('Multi-track composition created with overlay starting at 2s'); ``` The overlay track contains a smaller clip positioned in the corner. It starts at 2 seconds and lasts 5 seconds, creating a picture-in-picture effect during that time range. ### Track Rendering Order CE.SDK renders tracks from first to last. The first track added appears at the bottom, and subsequent tracks layer on top. Use this to create: - **Background layers**: Full-screen videos or images on the first track - **Overlays**: Smaller clips positioned on upper tracks - **Titles**: Text or graphics that appear over video content ## Troubleshooting ### Clips Not Appearing If clips don't appear in the composition, verify they're attached to a track that's attached to the page. Use `getParent` and `getChildren` to inspect the hierarchy: ```typescript const parent = engine.block.getParent(clipId); const children = engine.block.getChildren(trackId); ``` ### Wrong Playback Order If clips play in unexpected order, check time offsets. Clips play based on their time offset values, not their order in the children array. Set explicit offsets when precise timing matters. ### Video Not Loading If video content doesn't appear when using `addVideo`, check that the video URL is accessible and the format is supported. The `addVideo` helper automatically loads video metadata. ## API Reference | Method | Description | Parameters | Returns | | --- | --- | --- | --- | | `block.addVideo(uri, width, height, options)` | Create video clip with automatic resource loading | `uri: string, width: number, height: number, options?: { timeline: { duration, timeOffset } }` | `Promise` | | `block.create('track')` | Create a new track | `type: 'track'` | `DesignBlockId` | | `block.appendChild(parent, child)` | Add child to parent | `parent: DesignBlockId, child: DesignBlockId` | `void` | | `block.insertChild(parent, child, index)` | Insert child at specific position | `parent: DesignBlockId, child: DesignBlockId, index: number` | `void` | | `block.getChildren(id)` | Get all children of a block | `id: DesignBlockId` | `DesignBlockId[]` | | `block.setTimeOffset(id, offset)` | Set when block starts playing | `id: DesignBlockId, offset: number` | `void` | | `block.getTimeOffset(id)` | Get block's time offset | `id: DesignBlockId` | `number` | | `block.setDuration(id, duration)` | Set block's duration | `id: DesignBlockId, duration: number` | `void` | | `block.getDuration(id)` | Get block's duration | `id: DesignBlockId` | `number` | ## Next Steps Now that you understand how to join and arrange clips, explore related video editing features: - [Trim Video Clips](https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/) - Control which portion of media plays back - [Control Audio and Video](https://img.ly/docs/cesdk/angular/create-video/control-daba54/) - Master playback timing and audio mixing - [Video Timeline Overview](https://img.ly/docs/cesdk/angular/create-video/timeline-editor-912252/) - Understand the complete timeline editing system --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Redact Sensitive Content in Videos" description: "Redact sensitive video content using blur, pixelization, or solid overlays. Essential for privacy protection when obscuring faces, license plates, or personal information." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/redaction-cf6d03/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Redaction](https://img.ly/docs/cesdk/angular/edit-video/redaction-cf6d03/) --- Redact sensitive video content using blur, pixelization, or solid overlays for privacy protection. ![Video Redaction example showing video clips with blur, pixelization, and overlay effects](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-redaction-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-redaction-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-redaction-browser/) CE.SDK applies effects to blocks themselves, not as overlays affecting content beneath. This means redaction involves applying effects directly to the block for complete obscuration. Four techniques cover most privacy scenarios: full-block blur, radial blur, pixelization, and solid overlays. ```typescript file=@cesdk_web_examples/guides-create-video-redaction-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; // Video URLs for demonstrating different redaction scenarios const VIDEOS = { surfer: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4', lifestyle1: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-taryn-elliott-7108793.mp4', lifestyle2: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-taryn-elliott-7108801.mp4', nature1: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-taryn-elliott-8713109.mp4', nature2: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-taryn-elliott-8713114.mp4' }; // Labels for each redaction technique const LABELS = [ 'Radial Blur', 'Full-Block Blur', 'Pixelization', 'Solid Overlay', 'Time-Based' ]; // Duration for each video segment (in seconds) const SEGMENT_DURATION = 5.0; /** * CE.SDK Plugin: Video Redaction Guide * * Demonstrates video redaction techniques in CE.SDK: * - Full-block blur for complete video obscuration * - Radial blur for circular redaction patterns * - Pixelization for mosaic-style censoring * - Solid overlays for complete blocking * - Time-based redactions */ 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'); } cesdk.feature.enable('ly.img.blur'); cesdk.feature.enable('ly.img.effect'); await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Set 16:9 page dimensions (1920x1080) const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Load all videos simultaneously const videoUrls = [ VIDEOS.nature2, VIDEOS.surfer, VIDEOS.lifestyle1, VIDEOS.lifestyle2, VIDEOS.nature1 ]; const videos = await Promise.all( videoUrls.map((url) => engine.block.addVideo(url, pageWidth, pageHeight)) ); const [ radialVideo, fullBlurVideo, pixelVideo, // Base video for overlay segment (overlay is created separately) , timedVideo ] = videos; // Position all videos at origin (they'll play sequentially) videos.forEach((video, index) => { engine.block.setPositionX(video, 0); engine.block.setPositionY(video, 0); engine.block.setDuration(video, SEGMENT_DURATION); engine.block.setTimeOffset(video, index * SEGMENT_DURATION); engine.block.appendChild(page, video); }); // Full-Block Blur: Apply blur to entire video // Use this when the entire video content needs obscuring // Check if the block supports blur const supportsBlur = engine.block.supportsBlur(fullBlurVideo); // eslint-disable-next-line no-console console.log('Video supports blur:', supportsBlur); // Create and apply uniform blur to entire video const uniformBlur = engine.block.createBlur('uniform'); engine.block.setFloat(uniformBlur, 'blur/uniform/intensity', 0.7); engine.block.setBlur(fullBlurVideo, uniformBlur); engine.block.setBlurEnabled(fullBlurVideo, true); // Pixelization: Apply mosaic effect for clearly intentional censoring // Check if the block supports effects if (engine.block.supportsEffects(pixelVideo)) { // Create and apply pixelize effect const pixelizeEffect = engine.block.createEffect('pixelize'); engine.block.setInt( pixelizeEffect, 'effect/pixelize/horizontalPixelSize', 24 ); engine.block.setInt( pixelizeEffect, 'effect/pixelize/verticalPixelSize', 24 ); engine.block.appendEffect(pixelVideo, pixelizeEffect); engine.block.setEffectEnabled(pixelizeEffect, true); } // Solid Overlay: Create opaque shape for complete blocking // Best for highly sensitive information like documents or credentials // Create a solid rectangle overlay const overlay = engine.block.create('//ly.img.ubq/graphic'); const rectShape = engine.block.createShape('//ly.img.ubq/shape/rect'); engine.block.setShape(overlay, rectShape); // Create solid black fill const solidFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(solidFill, 'fill/color/value', { r: 0.1, g: 0.1, b: 0.1, a: 1.0 }); engine.block.setFill(overlay, solidFill); // Position and size the overlay engine.block.setWidth(overlay, pageWidth * 0.4); engine.block.setHeight(overlay, pageHeight * 0.3); engine.block.setPositionX(overlay, pageWidth * 0.55); engine.block.setPositionY(overlay, pageHeight * 0.65); engine.block.appendChild(page, overlay); engine.block.setTimeOffset(overlay, 3 * SEGMENT_DURATION); engine.block.setDuration(overlay, SEGMENT_DURATION); // Time-Based Redaction: Redaction appears only during specific time range // Apply blur to the video const timedBlur = engine.block.createBlur('uniform'); engine.block.setFloat(timedBlur, 'blur/uniform/intensity', 0.9); engine.block.setBlur(timedVideo, timedBlur); engine.block.setBlurEnabled(timedVideo, true); // The video is already timed to appear at a specific offset (set earlier) // You can adjust timeOffset and duration to control when redaction is visible engine.block.setTimeOffset(timedVideo, 4 * SEGMENT_DURATION); engine.block.setDuration(timedVideo, SEGMENT_DURATION); // Radial Blur: Use radial blur for face-like regions // Apply radial blur for circular redaction effect const radialBlur = engine.block.createBlur('radial'); engine.block.setFloat(radialBlur, 'blur/radial/blurRadius', 50); engine.block.setFloat(radialBlur, 'blur/radial/radius', 25); engine.block.setFloat(radialBlur, 'blur/radial/gradientRadius', 35); engine.block.setFloat(radialBlur, 'blur/radial/x', 0.5); engine.block.setFloat(radialBlur, 'blur/radial/y', 0.45); engine.block.setBlur(radialVideo, radialBlur); engine.block.setBlurEnabled(radialVideo, true); // Add text labels for each video segment (positioned top-right) const labelWidth = 400; const labelHeight = 60; const labelPadding = 20; const labelMargin = 30; videos.forEach((_, index) => { const label = LABELS[index]; // Add background first (so it's behind text) const labelBg = engine.block.create('//ly.img.ubq/graphic'); const labelBgShape = engine.block.createShape('//ly.img.ubq/shape/rect'); engine.block.setShape(labelBg, labelBgShape); const labelBgFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(labelBgFill, 'fill/color/value', { r: 0.0, g: 0.0, b: 0.0, a: 0.8 }); engine.block.setFill(labelBg, labelBgFill); engine.block.setWidth(labelBg, labelWidth); engine.block.setHeight(labelBg, labelHeight + labelPadding); engine.block.setPositionX(labelBg, pageWidth - labelWidth - labelMargin); engine.block.setPositionY(labelBg, labelMargin); engine.block.setTimeOffset(labelBg, index * SEGMENT_DURATION); engine.block.setDuration(labelBg, SEGMENT_DURATION); engine.block.appendChild(page, labelBg); // Create text block for label const textBlock = engine.block.create('//ly.img.ubq/text'); engine.block.setString(textBlock, 'text/text', label); engine.block.setFloat(textBlock, 'text/fontSize', 48); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(textBlock, 'text/verticalAlignment', 'Center'); // Set white text color engine.block.setTextColor(textBlock, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Position label at top right engine.block.setWidth(textBlock, labelWidth); engine.block.setHeight(textBlock, labelHeight); engine.block.setPositionX( textBlock, pageWidth - labelWidth - labelMargin ); engine.block.setPositionY(textBlock, labelMargin + labelPadding / 2); engine.block.setTimeOffset(textBlock, index * SEGMENT_DURATION); engine.block.setDuration(textBlock, SEGMENT_DURATION); engine.block.appendChild(page, textBlock); }); // Enable auto-fit to keep page in view cesdk.engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); // Select first video to show timeline controls engine.block.select(fullBlurVideo); // eslint-disable-next-line no-console console.log( 'Video redaction guide initialized. Videos play sequentially - press play to see each redaction technique.' ); } } export default Example; ``` This guide covers how to use the built-in UI for blur and pixelization effects, and how to apply redaction programmatically using blur, pixelization, solid overlays, and time-based controls. ## Understanding Redaction in CE.SDK ### How Effects Work Effects in CE.SDK modify the block's appearance directly rather than creating transparent overlays that affect content beneath. When you blur a video block, the entire block becomes blurred—not just a region on top of the video. ### Choosing a Redaction Technique Select your technique based on privacy requirements and visual impact: - **Full-block blur**: Complete obscuration for backgrounds or placeholder content - **Radial blur**: Circular blur patterns ideal for face-like regions - **Pixelization**: Clearly intentional censoring that's faster to render than heavy blur - **Solid overlays**: Complete blocking for highly sensitive information like documents or credentials ## Using the Built-in UI ### Accessing Blur Controls When you select a video block, the inspector panel provides access to blur settings. Navigate to the blur section to find controls for different blur types including uniform, radial, linear, and mirrored. The uniform blur applies consistent intensity across the entire block. Adjust the intensity slider to control how strongly the content is obscured. Higher values create stronger privacy protection but may affect visual quality. ### Accessing Pixelization Controls The effects panel contains pixelization settings. Select your video block, open the effects section, and add a pixelize effect. Configure the horizontal and vertical pixel sizes to control the mosaic block dimensions. Larger pixel sizes create stronger obscuration but are more visually disruptive. Values between 15-30 pixels work well for standard redaction scenarios. ## Programmatic Redaction ### Full-Block Blur When the entire video needs obscuring, apply blur directly to the original block without duplication. This approach works well for background content or privacy placeholders. ```typescript highlight-full-block-blur // Check if the block supports blur const supportsBlur = engine.block.supportsBlur(fullBlurVideo); // eslint-disable-next-line no-console console.log('Video supports blur:', supportsBlur); // Create and apply uniform blur to entire video const uniformBlur = engine.block.createBlur('uniform'); engine.block.setFloat(uniformBlur, 'blur/uniform/intensity', 0.7); engine.block.setBlur(fullBlurVideo, uniformBlur); engine.block.setBlurEnabled(fullBlurVideo, true); ``` We first check that the block supports blur with `supportsBlur()`. Then we create a uniform blur, configure its intensity, attach it to the video block with `setBlur()`, and enable it with `setBlurEnabled()`. The intensity value ranges from 0.0 to 1.0, where higher values create stronger blur. ### Pixelization Pixelization creates a mosaic effect that's clearly intentional and renders faster than heavy blur. We use the effect system rather than the blur system for pixelization. ```typescript highlight-pixelization // Check if the block supports effects if (engine.block.supportsEffects(pixelVideo)) { // Create and apply pixelize effect const pixelizeEffect = engine.block.createEffect('pixelize'); engine.block.setInt( pixelizeEffect, 'effect/pixelize/horizontalPixelSize', 24 ); engine.block.setInt( pixelizeEffect, 'effect/pixelize/verticalPixelSize', 24 ); engine.block.appendEffect(pixelVideo, pixelizeEffect); engine.block.setEffectEnabled(pixelizeEffect, true); } ``` We check `supportsEffects()` before creating the pixelize effect. The horizontal and vertical pixel sizes control the mosaic block dimensions—larger values create stronger obscuration. ### Solid Overlays For complete blocking without any visual hint of the underlying content, create an opaque shape overlay. This approach doesn't require block duplication. ```typescript highlight-solid-overlay // Create a solid rectangle overlay const overlay = engine.block.create('//ly.img.ubq/graphic'); const rectShape = engine.block.createShape('//ly.img.ubq/shape/rect'); engine.block.setShape(overlay, rectShape); // Create solid black fill const solidFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(solidFill, 'fill/color/value', { r: 0.1, g: 0.1, b: 0.1, a: 1.0 }); engine.block.setFill(overlay, solidFill); // Position and size the overlay engine.block.setWidth(overlay, pageWidth * 0.4); engine.block.setHeight(overlay, pageHeight * 0.3); engine.block.setPositionX(overlay, pageWidth * 0.55); engine.block.setPositionY(overlay, pageHeight * 0.65); engine.block.appendChild(page, overlay); ``` We create a graphic block with a rectangle shape and solid color fill. The overlay uses absolute page coordinates for positioning. Set the alpha to 1.0 for complete opacity. ### Time-Based Redaction Redactions can appear only during specific portions of the video. We use `setTimeOffset()` and `setDuration()` to control when the redaction is visible. ```typescript highlight-time-based-redaction // Apply blur to the video const timedBlur = engine.block.createBlur('uniform'); engine.block.setFloat(timedBlur, 'blur/uniform/intensity', 0.9); engine.block.setBlur(timedVideo, timedBlur); engine.block.setBlurEnabled(timedVideo, true); // The video is already timed to appear at a specific offset (set earlier) // You can adjust timeOffset and duration to control when redaction is visible engine.block.setTimeOffset(timedVideo, 4 * SEGMENT_DURATION); engine.block.setDuration(timedVideo, SEGMENT_DURATION); ``` The time offset specifies when the redaction appears (in seconds from the start), and the duration controls how long it remains visible. This is useful for redacting faces or information that only appears briefly. ### Radial Blur For face-like regions, radial blur creates a circular blur pattern that works well with rounded subjects. ```typescript highlight-radial-blur // Apply radial blur for circular redaction effect const radialBlur = engine.block.createBlur('radial'); engine.block.setFloat(radialBlur, 'blur/radial/blurRadius', 50); engine.block.setFloat(radialBlur, 'blur/radial/radius', 25); engine.block.setFloat(radialBlur, 'blur/radial/gradientRadius', 35); engine.block.setFloat(radialBlur, 'blur/radial/x', 0.5); engine.block.setFloat(radialBlur, 'blur/radial/y', 0.45); engine.block.setBlur(radialVideo, radialBlur); engine.block.setBlurEnabled(radialVideo, true); ``` Radial blur properties control the blur center (`x`, `y` from 0.0-1.0), the unblurred center area (`radius`), the blur transition zone (`gradientRadius`), and the blur strength (`blurRadius`). ## Performance Considerations Different redaction techniques have different performance impacts: - **Solid overlays**: Minimal impact, can create many without significant overhead - **Pixelization**: Faster than blur, larger pixel sizes have minimal impact - **Blur effects**: Higher intensity values increase rendering time For complex scenes with multiple redactions, consider using solid overlays where blur isn't necessary, or reduce blur intensity to maintain smooth playback. ## Troubleshooting ### Redaction Not Visible If your redaction doesn't appear, verify that: - The overlay is a child of the page with `appendChild()` - Blur is enabled with `setBlurEnabled()` after setting it with `setBlur()` - Effects are enabled with `setEffectEnabled()` after appending with `appendEffect()` ### Performance Issues Reduce blur intensity, use pixelization instead of heavy blur, or switch to solid overlays for some redactions. ## Best Practices - **Preview thoroughly**: Scrub the entire timeline to verify all sensitive content is covered - **Add safety margins**: Make redaction regions slightly larger than the sensitive area - **Test at export resolution**: Higher resolutions may need stronger blur settings - **Archive originals**: Exported redactions are permanent and cannot be reversed - **Document redactions**: For compliance requirements, maintain records of what was redacted ## API Reference | Method | Description | | ------ | ----------- | | `block.supportsBlur(id)` | Check if block supports blur effects | | `block.createBlur(type)` | Create blur instance (uniform, radial, linear, mirrored) | | `block.setBlur(id, blur)` | Apply blur to block | | `block.setBlurEnabled(id, enabled)` | Enable or disable blur | | `block.supportsEffects(id)` | Check if block supports effects | | `block.createEffect(type)` | Create effect instance (pixelize, etc.) | | `block.appendEffect(id, effect)` | Add effect to block | | `block.setEffectEnabled(effect, enabled)` | Enable or disable effect | | `block.setTimeOffset(id, offset)` | Set when block appears | | `block.setDuration(id, duration)` | Set block duration | | `block.create(type)` | Create block of specified type | | `block.createShape(type)` | Create shape for graphic blocks | | `block.setShape(id, shape)` | Apply shape to graphic block | | `block.createFill(type)` | Create fill (color, image, video, gradient) | | `block.setFill(id, fill)` | Apply fill to block | | `block.setFloat(id, property, value)` | Set float property value | | `block.setInt(id, property, value)` | Set integer property value | | `block.setColor(id, property, color)` | Set color property value | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Split Video and Audio" description: "Learn how to split video and audio clips at specific time points in CE.SDK, creating two independent segments from a single clip." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/split-464167/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Split](https://img.ly/docs/cesdk/angular/edit-video/split-464167/) --- Split video and audio clips at specific time points using CE.SDK's timeline UI and programmatic split API to create independent segments. ![Video Split example showing timeline with video clips and split controls](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-split-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-split-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-split-browser/) Clip splitting divides one block into two at a specified time. The original block ends at the split point; a new block starts there. Both blocks reference the same source media with independent timing. This differs from trimming, which adjusts a single block's playback range without creating new blocks. ```typescript file=@cesdk_web_examples/guides-create-video-split-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Split Video Guide * * Demonstrates splitting video clips in CE.SDK: * - Basic splitting at specific time points * - Configuring split options (attachToParent, selectNewBlock, createParentTrackIfNeeded) * - Splitting at playhead position * - Understanding split results (trim properties) * - Splitting multiple tracks at timeline position * - Split and delete workflow */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); 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, 6); const { blockWidth, blockHeight, getPosition } = layout; // Get a video from demo asset sources const videoAssets = await engine.asset.findAssets('ly.img.video', { page: 0, perPage: 1 }); const videoUri = videoAssets.assets[0]?.payload?.sourceSet?.[0]?.uri ?? 'https://img.ly/static/ubq_video_samples/bbb.mp4'; // Create a video block to demonstrate basic splitting const basicSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the video fill and load resource to access duration const basicFill = engine.block.getFill(basicSplitVideo); await engine.block.forceLoadAVResource(basicFill); // Set block duration for the timeline engine.block.setDuration(basicSplitVideo, 10.0); // Split the video block at 5 seconds // Returns the ID of the newly created block (second segment) const splitResultBlock = engine.block.split(basicSplitVideo, 5.0); // eslint-disable-next-line no-console console.log( `Basic split - Original block: ${basicSplitVideo}, New block: ${splitResultBlock}` ); // Create another video block to demonstrate split options const optionsSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const optionsFill = engine.block.getFill(optionsSplitVideo); await engine.block.forceLoadAVResource(optionsFill); engine.block.setDuration(optionsSplitVideo, 10.0); // Split with custom options const optionsSplitResult = engine.block.split(optionsSplitVideo, 4.0, { attachToParent: true, // Attach new block to same parent (default: true) createParentTrackIfNeeded: false, // Don't create track if needed (default: false) selectNewBlock: false // Don't select the new block (default: true) }); // eslint-disable-next-line no-console console.log( `Split with options - New block: ${optionsSplitResult}, selectNewBlock: false` ); // Create a video block to demonstrate playhead-based splitting const playheadSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const playheadFill = engine.block.getFill(playheadSplitVideo); await engine.block.forceLoadAVResource(playheadFill); engine.block.setDuration(playheadSplitVideo, 10.0); // Get the clip's start time on the timeline const clipStartTime = engine.block.getTimeOffset(playheadSplitVideo); // Simulate a playhead position (in a real app, use engine.block.getPlaybackTime(page)) const simulatedPlayheadTime = clipStartTime + 3.0; // Calculate split time relative to the clip const splitTime = simulatedPlayheadTime - clipStartTime; // Perform the split at the calculated time const playheadSplitResult = engine.block.split( playheadSplitVideo, splitTime ); // eslint-disable-next-line no-console console.log( `Playhead split - Split at ${splitTime}s into clip, New block: ${playheadSplitResult}` ); // Create a video block to examine split results const resultsSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const resultsFill = engine.block.getFill(resultsSplitVideo); await engine.block.forceLoadAVResource(resultsFill); engine.block.setDuration(resultsSplitVideo, 10.0); // Get trim values before split const originalTrimOffset = engine.block.getTrimOffset(resultsFill); const originalTrimLength = engine.block.getTrimLength(resultsFill); // Split at 6 seconds const resultsNewBlock = engine.block.split(resultsSplitVideo, 6.0); const newBlockFill = engine.block.getFill(resultsNewBlock); // Examine trim properties after split const originalAfterSplitOffset = engine.block.getTrimOffset(resultsFill); const originalAfterSplitLength = engine.block.getTrimLength(resultsFill); const newBlockTrimOffset = engine.block.getTrimOffset(newBlockFill); const newBlockTrimLength = engine.block.getTrimLength(newBlockFill); // eslint-disable-next-line no-console console.log('Split results:'); // eslint-disable-next-line no-console console.log( ` Original before: offset=${originalTrimOffset}, length=${originalTrimLength}` ); // eslint-disable-next-line no-console console.log( ` Original after: offset=${originalAfterSplitOffset}, length=${originalAfterSplitLength}` ); // eslint-disable-next-line no-console console.log( ` New block: offset=${newBlockTrimOffset}, length=${newBlockTrimLength}` ); // Create a video block to demonstrate split-and-delete workflow const deleteWorkflowVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const deleteFill = engine.block.getFill(deleteWorkflowVideo); await engine.block.forceLoadAVResource(deleteFill); engine.block.setDuration(deleteWorkflowVideo, 10.0); // Remove middle section: split at start of section to remove (2s) const middleBlock = engine.block.split(deleteWorkflowVideo, 2.0); // Split again at the end of the section to remove (at 3s into middle block = 5s total) const endBlock = engine.block.split(middleBlock, 3.0); // Delete the middle segment engine.block.destroy(middleBlock); // eslint-disable-next-line no-console console.log( `Split and delete - Removed middle 3s section, kept blocks: ${deleteWorkflowVideo}, ${endBlock}` ); // Create a video block to demonstrate split time validation const validateVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const validateFill = engine.block.getFill(validateVideo); await engine.block.forceLoadAVResource(validateFill); engine.block.setDuration(validateVideo, 8.0); // Get block duration to validate split time const blockDuration = engine.block.getDuration(validateVideo); const desiredSplitTime = 4.0; // Validate split time is within bounds (must be > 0 and < duration) if (desiredSplitTime > 0 && desiredSplitTime < blockDuration) { const validatedSplitResult = engine.block.split( validateVideo, desiredSplitTime ); // eslint-disable-next-line no-console console.log( `Validated split - Duration: ${blockDuration}s, Split at: ${desiredSplitTime}s, New block: ${validatedSplitResult}` ); } else { // eslint-disable-next-line no-console console.log('Split time out of range'); } // ===== Position all blocks in grid layout ===== // Note: Some original blocks were modified by splits, position remaining visible blocks const blocks = [ basicSplitVideo, splitResultBlock, optionsSplitVideo, optionsSplitResult, playheadSplitVideo, playheadSplitResult ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Select first block so timeline controls are visible engine.block.setSelected(basicSplitVideo, true); // Set playback time to 8 seconds for hero image engine.block.setPlaybackTime(page, 8.0); // Start playback automatically when the example loads try { engine.block.setPlaying(page, true); // eslint-disable-next-line no-console console.log( 'Video split guide initialized. Playback started. Use timeline to see split results.' ); } catch (error) { // eslint-disable-next-line no-console console.log( 'Video split guide initialized. Click play button to start playback.' ); } } } export default Example; ``` This guide covers how to use the built-in timeline UI for visual splitting and how to split clips programmatically using the Engine API. ## Splitting Clips via the UI When you select a video or audio block in the timeline, CE.SDK provides split functionality through the toolbar. Position the playhead at the desired split point by clicking on the timeline ruler or dragging the playhead indicator. With the clip selected and playhead positioned, click the Split button in the timeline toolbar. CE.SDK divides the clip at the playhead position, creating two independent segments. Visual feedback shows the resulting segments as separate blocks on the timeline. The timeline enforces minimum duration constraints that prevent splitting too close to clip edges. If the playhead is positioned within this minimum boundary, the split operation will not be available. ## Programmatic Splitting For applications that need to split clips programmatically—whether for automation, batch processing, or dynamic editing—CE.SDK provides the `engine.block.split()` method. ### Basic Splitting at a Specific Time Split a block by providing the block ID and the split time in seconds. The time parameter is relative to the block's own time range, accounting for the block's time offset. ```typescript highlight-basic-split // Create a video block to demonstrate basic splitting const basicSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the video fill and load resource to access duration const basicFill = engine.block.getFill(basicSplitVideo); await engine.block.forceLoadAVResource(basicFill); // Set block duration for the timeline engine.block.setDuration(basicSplitVideo, 10.0); // Split the video block at 5 seconds // Returns the ID of the newly created block (second segment) const splitResultBlock = engine.block.split(basicSplitVideo, 5.0); // eslint-disable-next-line no-console console.log( `Basic split - Original block: ${basicSplitVideo}, New block: ${splitResultBlock}` ); ``` The `split()` method returns the ID of the newly created block. The original block becomes the first segment (before the split point), and the returned block is the second segment (after the split point). ### Configuring Split Options The `SplitOptions` object controls split behavior with three optional properties: - **`attachToParent`** (default: `true`): Whether to attach the new block to the same parent as the original - **`createParentTrackIfNeeded`** (default: `false`): Creates a parent track if needed and adds both blocks to it - **`selectNewBlock`** (default: `true`): Whether to select the newly created block after splitting ```typescript highlight-split-options // Create another video block to demonstrate split options const optionsSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const optionsFill = engine.block.getFill(optionsSplitVideo); await engine.block.forceLoadAVResource(optionsFill); engine.block.setDuration(optionsSplitVideo, 10.0); // Split with custom options const optionsSplitResult = engine.block.split(optionsSplitVideo, 4.0, { attachToParent: true, // Attach new block to same parent (default: true) createParentTrackIfNeeded: false, // Don't create track if needed (default: false) selectNewBlock: false // Don't select the new block (default: true) }); // eslint-disable-next-line no-console console.log( `Split with options - New block: ${optionsSplitResult}, selectNewBlock: false` ); ``` Use `selectNewBlock: false` when splitting multiple clips programmatically to avoid changing selection state between operations. ### Splitting at the Current Playhead Position To implement playhead-based splitting like the built-in UI, get the current playback time from the page and convert it to block-relative time. ```typescript highlight-split-at-playhead // Create a video block to demonstrate playhead-based splitting const playheadSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const playheadFill = engine.block.getFill(playheadSplitVideo); await engine.block.forceLoadAVResource(playheadFill); engine.block.setDuration(playheadSplitVideo, 10.0); // Get the clip's start time on the timeline const clipStartTime = engine.block.getTimeOffset(playheadSplitVideo); // Simulate a playhead position (in a real app, use engine.block.getPlaybackTime(page)) const simulatedPlayheadTime = clipStartTime + 3.0; // Calculate split time relative to the clip const splitTime = simulatedPlayheadTime - clipStartTime; // Perform the split at the calculated time const playheadSplitResult = engine.block.split( playheadSplitVideo, splitTime ); // eslint-disable-next-line no-console console.log( `Playhead split - Split at ${splitTime}s into clip, New block: ${playheadSplitResult}` ); ``` The playhead position from `getPlaybackTime(page)` is in absolute playback time. Subtract the clip's `getTimeOffset()` to convert to block-relative time before passing to `split()`. ## Understanding Split Results After a split operation, both the original and new blocks are configured with updated trim properties. ### Trim Properties After Split ```typescript highlight-split-results // Create a video block to examine split results const resultsSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const resultsFill = engine.block.getFill(resultsSplitVideo); await engine.block.forceLoadAVResource(resultsFill); engine.block.setDuration(resultsSplitVideo, 10.0); // Get trim values before split const originalTrimOffset = engine.block.getTrimOffset(resultsFill); const originalTrimLength = engine.block.getTrimLength(resultsFill); // Split at 6 seconds const resultsNewBlock = engine.block.split(resultsSplitVideo, 6.0); const newBlockFill = engine.block.getFill(resultsNewBlock); // Examine trim properties after split const originalAfterSplitOffset = engine.block.getTrimOffset(resultsFill); const originalAfterSplitLength = engine.block.getTrimLength(resultsFill); const newBlockTrimOffset = engine.block.getTrimOffset(newBlockFill); const newBlockTrimLength = engine.block.getTrimLength(newBlockFill); // eslint-disable-next-line no-console console.log('Split results:'); // eslint-disable-next-line no-console console.log( ` Original before: offset=${originalTrimOffset}, length=${originalTrimLength}` ); // eslint-disable-next-line no-console console.log( ` Original after: offset=${originalAfterSplitOffset}, length=${originalAfterSplitLength}` ); // eslint-disable-next-line no-console console.log( ` New block: offset=${newBlockTrimOffset}, length=${newBlockTrimLength}` ); ``` The original block keeps its trim offset unchanged, but its trim length is reduced to the split point. The new block has its trim offset advanced by the split time and trim length set to cover the remaining duration. Both blocks reference the same source media—splitting is non-destructive. ### Timeline Positioning The original block keeps its `getTimeOffset()`. When `attachToParent` is true, the new block is positioned immediately after the original on the same parent. Both blocks stay on the same track unless `createParentTrackIfNeeded` creates a new track structure. ## Split and Delete Workflow Remove a middle section from a clip by splitting at both boundaries and deleting the middle segment. ```typescript highlight-split-and-delete // Create a video block to demonstrate split-and-delete workflow const deleteWorkflowVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const deleteFill = engine.block.getFill(deleteWorkflowVideo); await engine.block.forceLoadAVResource(deleteFill); engine.block.setDuration(deleteWorkflowVideo, 10.0); // Remove middle section: split at start of section to remove (2s) const middleBlock = engine.block.split(deleteWorkflowVideo, 2.0); // Split again at the end of the section to remove (at 3s into middle block = 5s total) const endBlock = engine.block.split(middleBlock, 3.0); // Delete the middle segment engine.block.destroy(middleBlock); // eslint-disable-next-line no-console console.log( `Split and delete - Removed middle 3s section, kept blocks: ${deleteWorkflowVideo}, ${endBlock}` ); ``` This workflow is useful for removing unwanted sections, such as cutting out pauses, mistakes, or irrelevant portions from a recording. ## Validating Split Time Always validate that the split time is within valid bounds before calling `split()`. The split time must be greater than 0 and less than the block's duration. ```typescript highlight-validate-split-time // Create a video block to demonstrate split time validation const validateVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const validateFill = engine.block.getFill(validateVideo); await engine.block.forceLoadAVResource(validateFill); engine.block.setDuration(validateVideo, 8.0); // Get block duration to validate split time const blockDuration = engine.block.getDuration(validateVideo); const desiredSplitTime = 4.0; // Validate split time is within bounds (must be > 0 and < duration) if (desiredSplitTime > 0 && desiredSplitTime < blockDuration) { const validatedSplitResult = engine.block.split( validateVideo, desiredSplitTime ); // eslint-disable-next-line no-console console.log( `Validated split - Duration: ${blockDuration}s, Split at: ${desiredSplitTime}s, New block: ${validatedSplitResult}` ); } else { // eslint-disable-next-line no-console console.log('Split time out of range'); } ``` Attempting to split at an invalid time (at the beginning, end, or outside the block's duration) will fail or produce unexpected results. ## Troubleshooting ### Split Returns Unexpected Block If the returned block ID doesn't behave as expected, remember that the original block becomes the first segment (before split point) and the returned block is the second segment (after split point). ### Split Time Out of Range If split fails or produces unexpected results, verify the split time is within bounds. Use `getDuration()` to check the valid range before splitting. ### Clip Not Splitting If `split()` has no visible effect, check that the block type supports splitting. Verify `supportsTrim()` returns true for the block's fill. For video and audio fills, ensure `forceLoadAVResource()` has been awaited before attempting to split. ## API Reference | Method | Description | Parameters | Returns | | ----------------------------- | ---------------------------------------------- | -------------------------------------------------- | ---------------- | | `split(id, atTime, options?)` | Split a block at the specified time | `id: DesignBlockId, atTime: number, options?: SplitOptions` | `DesignBlockId` | | `getTimeOffset(id)` | Get time offset relative to parent | `id: DesignBlockId` | `number` | | `getDuration(id)` | Get playback duration | `id: DesignBlockId` | `number` | | `getPlaybackTime(id)` | Get current playback time | `id: DesignBlockId` | `number` | | `getTrimOffset(id)` | Get trim offset of media content | `id: DesignBlockId` | `number` | | `getTrimLength(id)` | Get trim length of media content | `id: DesignBlockId` | `number` | | `supportsTrim(id)` | Check if block supports trim properties | `id: DesignBlockId` | `boolean` | | `forceLoadAVResource(id)` | Force load media resource metadata | `id: DesignBlockId` | `Promise` | | `destroy(id)` | Destroy a block | `id: DesignBlockId` | `void` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Transform" description: "Documentation for Transform" platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) --- --- ## Related Pages - [Move Videos](https://img.ly/docs/cesdk/angular/edit-video/transform/move-aa9d89/) - Position videos on the canvas using absolute or percentage-based coordinates. - [Crop Videos](https://img.ly/docs/cesdk/angular/edit-video/transform/crop-8b1741/) - Cut out specific areas of a video to focus on key content or change aspect ratio. - [Rotate Videos](https://img.ly/docs/cesdk/angular/edit-video/transform/rotate-eaf662/) - Rotate video elements to adjust orientation and create dynamic compositions. - [Resize](https://img.ly/docs/cesdk/angular/edit-video/transform/resize-b1ce14/) - Resize videos in web apps using the CE.SDK - [Scale Videos in Web Apps](https://img.ly/docs/cesdk/angular/edit-video/transform/scale-f75c8a/) - Embed the CE.SDK scaling feature in your web app. - [Flip Videos](https://img.ly/docs/cesdk/angular/edit-video/transform/flip-a603b0/) - Flip videos horizontally or vertically to create mirror effects and symmetrical designs. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Crop Videos" description: "Cut out specific areas of a video to focus on key content or change aspect ratio." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/transform/crop-8b1741/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) > [Crop](https://img.ly/docs/cesdk/angular/edit-video/transform/crop-8b1741/) --- Crop videos to focus on specific areas, remove unwanted edges, or prepare clips for fixed formats like 9:16 stories using programmatic crop transforms. ![Crop videos example showing cropped video content](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-crop-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-transform-crop-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-crop-browser/) Video cropping in CreativeEditor SDK (CE.SDK) lets you re-frame clips, remove unwanted edges, or adapt footage for platform-specific formats. Unlike resizing or scaling which affects the entire frame uniformly, cropping selects a specific region to display. ```typescript file=@cesdk_web_examples/guides-create-video-transform-crop-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 720, height: 1280, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page from the scene const pages = engine.block.findByType('page'); const page = pages[0]; // Add a video using the convenience API - this handles track creation automatically const videoUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'; const videoBlock = await engine.block.addVideo(videoUri, 720, 1280); // Append the video block to the page (for video scenes, this adds to the track) engine.block.appendChild(page, videoBlock); // Set video duration on the timeline engine.block.setDuration(videoBlock, 10); // Get the fill to force load the video resource const videoFill = engine.block.getFill(videoBlock); await engine.block.forceLoadAVResource(videoFill); // Verify the block supports cropping before applying crop operations const supportsCrop = engine.block.supportsCrop(videoBlock); console.log('Block supports crop:', supportsCrop); // Set content fill mode to 'Crop' for manual crop control // This enables the crop transform APIs to take effect engine.block.setContentFillMode(videoBlock, 'Crop'); // Scale the video content within its frame using uniform scale ratio // Values greater than 1.0 zoom in, values less than 1.0 zoom out engine.block.setCropScaleRatio(videoBlock, 1.1); // Pan the video content within the crop frame // Translation values are percentages of the crop frame dimensions // Positive X moves content right, positive Y moves content down engine.block.setCropTranslationX(videoBlock, 0.0); engine.block.setCropTranslationY(videoBlock, 0.0); // Rotate the video content within its frame // Rotation is specified in radians (Math.PI = 180 degrees) engine.block.setCropRotation(videoBlock, Math.PI / 90); // 2 degrees // Retrieve the current crop state const scaleRatio = engine.block.getCropScaleRatio(videoBlock); const translationX = engine.block.getCropTranslationX(videoBlock); const translationY = engine.block.getCropTranslationY(videoBlock); const rotation = engine.block.getCropRotation(videoBlock); console.log('Crop scale ratio:', scaleRatio); console.log('Crop translation X:', translationX); console.log('Crop translation Y:', translationY); console.log('Crop rotation (radians):', rotation); // Adjust crop to ensure content fills the frame without letterboxing // The minScaleRatio parameter sets the minimum allowed scale // This corrects any black bars caused by rotation or translation engine.block.adjustCropToFillFrame(videoBlock, 1.1); const finalScale = engine.block.getCropScaleRatio(videoBlock); console.log('Adjusted scale ratio:', finalScale); // Flip the video content within its crop frame // This flips the content, not the entire block engine.block.flipCropHorizontal(videoBlock); // Lock the crop aspect ratio during interactive editing // When locked, crop handles maintain the current aspect ratio engine.block.setCropAspectRatioLocked(videoBlock, true); const isLocked = engine.block.isCropAspectRatioLocked(videoBlock); console.log('Crop aspect ratio locked:', isLocked); // Reset crop to default state (removes all crop transformations) engine.block.resetCrop(videoBlock); // Re-apply a subtle zoom to demonstrate crop is working engine.block.setCropScaleRatio(videoBlock, 1.05); // Select the video block to show it in the UI engine.block.select(videoBlock); // Set playback time to show video content engine.block.setPlaybackTime(page, 2.0); // Zoom to the video block for better visibility of the crop effect cesdk.engine.scene.zoomToBlock(videoBlock, { padding: { left: 0.5, top: 0.5, right: 0.5, bottom: 0.8 } }); } } export default Example; ``` This guide covers programmatic video cropping using scale, translation, and rotation transforms, checking crop support, adjusting crop to fill frames, flipping content, and locking aspect ratios. ## Check Crop Support Before applying crop operations, verify the block supports cropping using `engine.block.supportsCrop()`. Video blocks with fills support cropping: ```typescript highlight-check-crop-support // Verify the block supports cropping before applying crop operations const supportsCrop = engine.block.supportsCrop(videoBlock); console.log('Block supports crop:', supportsCrop); // Set content fill mode to 'Crop' for manual crop control // This enables the crop transform APIs to take effect engine.block.setContentFillMode(videoBlock, 'Crop'); ``` ## Scale Crop Scale the video content within its frame using `engine.block.setCropScaleRatio()`. Values greater than 1.0 zoom in, values less than 1.0 zoom out. This applies a uniform scale to both axes: ```typescript highlight-scale-crop // Scale the video content within its frame using uniform scale ratio // Values greater than 1.0 zoom in, values less than 1.0 zoom out engine.block.setCropScaleRatio(videoBlock, 1.1); ``` ## Translate Crop Pan the video content within the crop frame using `engine.block.setCropTranslationX()` and `engine.block.setCropTranslationY()`. Translation values are percentages of the crop frame dimensions. Positive X moves content right, positive Y moves content down: ```typescript highlight-translate-crop // Pan the video content within the crop frame // Translation values are percentages of the crop frame dimensions // Positive X moves content right, positive Y moves content down engine.block.setCropTranslationX(videoBlock, 0.0); engine.block.setCropTranslationY(videoBlock, 0.0); ``` ## Rotate Crop Rotate the video content within its frame using `engine.block.setCropRotation()`. Rotation is specified in radians where `Math.PI` equals 180 degrees: ```typescript highlight-rotate-crop // Rotate the video content within its frame // Rotation is specified in radians (Math.PI = 180 degrees) engine.block.setCropRotation(videoBlock, Math.PI / 90); // 2 degrees ``` ## Get Crop Values Retrieve the current crop state to read or restore crop settings using getter methods: ```typescript highlight-get-crop-values // Retrieve the current crop state const scaleRatio = engine.block.getCropScaleRatio(videoBlock); const translationX = engine.block.getCropTranslationX(videoBlock); const translationY = engine.block.getCropTranslationY(videoBlock); const rotation = engine.block.getCropRotation(videoBlock); console.log('Crop scale ratio:', scaleRatio); console.log('Crop translation X:', translationX); console.log('Crop translation Y:', translationY); console.log('Crop rotation (radians):', rotation); ``` ## Fill Frame Adjust the crop to ensure content fills the frame without letterboxing using `engine.block.adjustCropToFillFrame()`. The `minScaleRatio` parameter sets the minimum allowed scale: ```typescript highlight-fill-frame // Adjust crop to ensure content fills the frame without letterboxing // The minScaleRatio parameter sets the minimum allowed scale // This corrects any black bars caused by rotation or translation engine.block.adjustCropToFillFrame(videoBlock, 1.1); const finalScale = engine.block.getCropScaleRatio(videoBlock); console.log('Adjusted scale ratio:', finalScale); ``` This is useful after applying translations or rotations that might reveal empty areas. ## Flip Crop Flip the video content horizontally or vertically within its crop frame using `engine.block.flipCropHorizontal()` or `engine.block.flipCropVertical()`. This flips the content, not the block itself: ```typescript highlight-flip-crop // Flip the video content within its crop frame // This flips the content, not the entire block engine.block.flipCropHorizontal(videoBlock); ``` ## Lock Aspect Ratio Lock the crop aspect ratio during interactive editing using `engine.block.setCropAspectRatioLocked()`. When locked, crop handles maintain the current aspect ratio: ```typescript highlight-lock-aspect-ratio // Lock the crop aspect ratio during interactive editing // When locked, crop handles maintain the current aspect ratio engine.block.setCropAspectRatioLocked(videoBlock, true); const isLocked = engine.block.isCropAspectRatioLocked(videoBlock); console.log('Crop aspect ratio locked:', isLocked); ``` ## Reset Crop Reset all crop transformations to their default state using `engine.block.resetCrop()`: ```typescript highlight-reset-crop // Reset crop to default state (removes all crop transformations) engine.block.resetCrop(videoBlock); // Re-apply a subtle zoom to demonstrate crop is working engine.block.setCropScaleRatio(videoBlock, 1.05); ``` ## Coordinate System Crop transforms use normalized values: | Property | Value Type | Description | | --- | --- | --- | | Scale | Float (0.0+) | 1.0 is original size, 2.0 is double, 0.5 is half | | Translation | Float (-1.0 to 1.0) | Percentage of frame dimensions | | Rotation | Float (radians) | Math.PI = 180°, Math.PI/2 = 90° | All crop values are independent of canvas zoom level or timeline duration. ## Combining with Other Transforms You can combine crop operations with other block transforms like position, rotation, and scale. The crop transforms affect the content within the block, while block transforms affect the block itself on the canvas: ```typescript // Crop the content (scales/pans the video within its frame) engine.block.setCropScaleRatio(videoBlock, 1.5); engine.block.setCropRotation(videoBlock, Math.PI / 12); // Transform the block itself (moves/rotates the entire block on canvas) engine.block.setRotation(videoBlock, Math.PI / 6); engine.block.setWidth(videoBlock, 800); ``` ## Troubleshooting ### Crop Functions Not Working Check if the block supports cropping using `engine.block.supportsCrop()`. Ensure the block has a fill that supports cropping (video, image fills). ### Black Bars After Scaling Call `engine.block.adjustCropToFillFrame()` or increase the scale ratio so content fully covers the block frame. ### Unexpected Crop Behavior Verify you're operating on the correct block ID. Check that the video resource has loaded using `engine.block.forceLoadAVResource()` before applying crop transforms. ## API Reference | Method | Description | | --- | --- | | `engine.block.supportsCrop()` | Check if block supports cropping | | `engine.block.setCropScaleRatio()` | Set uniform scale ratio | | `engine.block.setCropScaleX()` | Set horizontal scale | | `engine.block.setCropScaleY()` | Set vertical scale | | `engine.block.setCropTranslationX()` | Set horizontal pan | | `engine.block.setCropTranslationY()` | Set vertical pan | | `engine.block.setCropRotation()` | Set rotation in radians | | `engine.block.getCropScaleRatio()` | Get current scale ratio | | `engine.block.getCropTranslationX()` | Get horizontal translation | | `engine.block.getCropTranslationY()` | Get vertical translation | | `engine.block.getCropRotation()` | Get rotation value | | `engine.block.adjustCropToFillFrame()` | Auto-adjust to fill frame | | `engine.block.flipCropHorizontal()` | Flip content horizontally | | `engine.block.flipCropVertical()` | Flip content vertically | | `engine.block.setCropAspectRatioLocked()` | Lock/unlock aspect ratio | | `engine.block.isCropAspectRatioLocked()` | Check if aspect ratio locked | | `engine.block.resetCrop()` | Reset all crop transforms | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Flip" description: "Flip videos horizontally or vertically to create mirror effects and symmetrical designs." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/transform/flip-a603b0/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) > [Flip](https://img.ly/docs/cesdk/angular/edit-video/transform/flip-a603b0/) --- 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 to the image-flipping workflow. ## What You’ll 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 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 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 To flip a video: 1. Call the BlockAPI with `engine.block.SetFipHorizontal` or `engine.block.SetFipVertical`. 2. Specify the **block ID** to flip. 3. Set the boolean to `true`. ```ts engine.block.setFlipHorizontal(videoBlock, true); engine.block.setFlipVertical(videoBlock, true); ``` ### 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. ```ts 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. > **Note:** 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 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: ```ts const groupId = await engine.block.group([clipId1, clipId2, clipId3]); engine.block.setFlipVertical(groupId, true); ``` 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 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 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: ```ts engine.block.setFlipHorizontal(videoBlock, false); ``` ### 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: ```ts const isFlipped = await engine.block.getFlipHorizontal(videoBlock); engine.block.setFlipHorizontal(videoBlock, !isFlipped); ``` In the preceding code, the 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 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` ```ts engine.block.setScopeEnabled(videoBlock, "layer/flip", false); ``` ## 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 | 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. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Move Videos" description: "Position videos on the canvas using absolute or percentage-based coordinates." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/transform/move-aa9d89/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) > [Move](https://img.ly/docs/cesdk/angular/edit-video/transform/move-aa9d89/) --- Position videos on the canvas using absolute pixel coordinates or percentage-based positioning for responsive layouts. ![Move videos example showing positioned videos with labels](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-move-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-transform-move-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-move-browser/) Position videos on the canvas using coordinates that start at the top-left corner (0, 0). X increases right, Y increases down. Values are relative to the parent block, simplifying nested layouts. ```typescript file=@cesdk_web_examples/guides-create-video-transform-move-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; class Example implements EditorPlugin { name = 'guides-create-video-transform-move-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Enable fill and set page fill color to #6686FF engine.block.setFillEnabled(page, true); engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 102 / 255, g: 134 / 255, b: 255 / 255, a: 1 }); // Demo 1: Movable Video - Can be freely repositioned by user const movableVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, movableVideo); engine.block.setPositionX(movableVideo, 0); engine.block.setPositionY(movableVideo, 100); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Movable'); engine.block.setFloat(text1, 'text/fontSize', 32); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 200); engine.block.setPositionX(text1, 0); engine.block.setPositionY(text1, 310); engine.block.setFillEnabled(text1, true); engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text1); // Add explanatory text below const explanation1 = engine.block.create('text'); engine.block.setString( explanation1, 'text/text', 'Uses absolute positioning with pixel coordinates' ); engine.block.setFloat(explanation1, 'text/fontSize', 14); engine.block.setEnum(explanation1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation1, 200); engine.block.setPositionX(explanation1, 0); engine.block.setPositionY(explanation1, 345); engine.block.setFillEnabled(explanation1, true); engine.block.setColor( engine.block.getFill(explanation1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation1); // Demo 2: Percentage Positioning - Responsive layout const percentVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, percentVideo); // Set position mode to percentage (0.0 to 1.0) engine.block.setPositionXMode(percentVideo, 'Percent'); engine.block.setPositionYMode(percentVideo, 'Percent'); // Position at 37.5% from left (300px), 30% from top (150px) engine.block.setPositionX(percentVideo, 0.375); engine.block.setPositionY(percentVideo, 0.3); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Percentage'); engine.block.setFloat(text2, 'text/fontSize', 32); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 200); engine.block.setPositionX(text2, 300); engine.block.setPositionY(text2, 310); engine.block.setFillEnabled(text2, true); engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text2); // Add explanatory text below const explanation2 = engine.block.create('text'); engine.block.setString( explanation2, 'text/text', 'Uses percentage values (0.0-1.0) for responsive layouts' ); engine.block.setFloat(explanation2, 'text/fontSize', 14); engine.block.setEnum(explanation2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation2, 200); engine.block.setPositionX(explanation2, 300); engine.block.setPositionY(explanation2, 345); engine.block.setFillEnabled(explanation2, true); engine.block.setColor( engine.block.getFill(explanation2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation2); // Demo 3: Locked Video - Cannot be moved, rotated, or scaled const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, 550); engine.block.setPositionY(lockedVideo, 150); // Lock the transform to prevent user interaction engine.block.setBool(lockedVideo, 'transformLocked', true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Locked'); engine.block.setFloat(text3, 'text/fontSize', 32); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 200); engine.block.setPositionX(text3, 550); engine.block.setPositionY(text3, 310); engine.block.setFillEnabled(text3, true); engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text3); // Add explanatory text below const explanation3 = engine.block.create('text'); engine.block.setString( explanation3, 'text/text', 'Transform locked - cannot be repositioned' ); engine.block.setFloat(explanation3, 'text/fontSize', 14); engine.block.setEnum(explanation3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation3, 200); engine.block.setPositionX(explanation3, 550); engine.block.setPositionY(explanation3, 345); engine.block.setFillEnabled(explanation3, true); engine.block.setColor( engine.block.getFill(explanation3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation3); // Get current position values const currentX = engine.block.getPositionX(movableVideo); const currentY = engine.block.getPositionY(movableVideo); console.log('Current position:', currentX, currentY); // Move relative to current position const offsetX = engine.block.getPositionX(movableVideo); const offsetY = engine.block.getPositionY(movableVideo); engine.block.setPositionX(movableVideo, offsetX + 50); engine.block.setPositionY(movableVideo, offsetY + 50); // Adjust text positions after relative movement engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 310); engine.block.setPositionX(explanation1, 50); engine.block.setPositionY(explanation1, 345); // Set playhead position to 2 seconds engine.block.setPlaybackTime(page, 2); } } export default Example; ``` This guide covers positioning videos with absolute or percentage coordinates, configuring position modes, and locking transforms to prevent repositioning. ## Position Coordinates Coordinates originate at the top-left (0, 0) of the parent container. Use **absolute** mode for fixed pixel values or **percentage** mode (0.0 to 1.0) for responsive layouts that adapt to parent size changes. ## Positioning Videos Position videos using `engine.block.setPositionX()` and `engine.block.setPositionY()` with absolute pixel coordinates: ```typescript highlight-movable-video engine.block.appendChild(page, movableVideo); engine.block.setPositionX(movableVideo, 0); engine.block.setPositionY(movableVideo, 100); ``` ## Getting Current Position Read current position values using `engine.block.getPositionX()` and `engine.block.getPositionY()`. Values are returned in the current position mode (absolute pixels or percentage 0.0-1.0): ```typescript highlight-get-position // Get current position values const currentX = engine.block.getPositionX(movableVideo); const currentY = engine.block.getPositionY(movableVideo); ``` ## Configuring Position Modes Control how position values are interpreted using `engine.block.setPositionXMode()` and `engine.block.setPositionYMode()`. Set to `'Absolute'` for pixels or `'Percent'` for percentage values (0.0 to 1.0). Check the current mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. The Percentage Positioning section below demonstrates setting these modes. ## Percentage Positioning Position videos using percentage values (0.0 to 1.0) for responsive layouts. Set the position mode to `'Percent'`, then use values between 0.0 and 1.0: ```typescript highlight-percentage-positioning // Set position mode to percentage (0.0 to 1.0) engine.block.setPositionXMode(percentVideo, 'Percent'); engine.block.setPositionYMode(percentVideo, 'Percent'); ``` Percentage positioning adapts automatically when the parent block dimensions change, maintaining relative positions in responsive designs. ## Relative Positioning Move videos relative to their current position by getting the current coordinates and adding offset values: ```typescript highlight-relative-positioning // Move relative to current position const offsetX = engine.block.getPositionX(movableVideo); const offsetY = engine.block.getPositionY(movableVideo); engine.block.setPositionX(movableVideo, offsetX + 50); engine.block.setPositionY(movableVideo, offsetY + 50); ``` ## Locking Transforms Lock transforms to prevent repositioning, rotation, and scaling by setting `transformLocked` to true: ```typescript highlight-locked-video // Lock the transform to prevent user interaction engine.block.setBool(lockedVideo, 'transformLocked', true); ``` ## Troubleshooting ### Video Not Moving Check if transforms are locked using `engine.block.getBool(block, 'transformLocked')`. Ensure the video block exists and values are within parent bounds. ### Unexpected Position Values Check position mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. Verify if using absolute (pixels) vs percentage (0.0-1.0) values. Review parent block dimensions if using percentage positioning. ### Positioned Outside Visible Area Verify parent block dimensions and boundaries. Check coordinate system: origin is top-left, not center. Review X/Y values for calculation errors. ### Percentage Positioning Not Responsive Ensure position mode is set to `'Percent'` using `engine.block.setPositionXMode(block, 'Percent')`. Verify percentage values are between 0.0 and 1.0. Check that parent block dimensions can change. ## API Reference | Method | Description | | ------------------------------------- | ------------------------------------------ | | `engine.block.addVideo()` | Create and position video in one operation | | `engine.block.setPositionX()` | Set X coordinate value | | `engine.block.setPositionY()` | Set Y coordinate value | | `engine.block.getPositionX()` | Get current X coordinate value | | `engine.block.getPositionY()` | Get current Y coordinate value | | `engine.block.setPositionXMode()` | Set position mode for X coordinate | | `engine.block.setPositionYMode()` | Set position mode for Y coordinate | | `engine.block.getPositionXMode()` | Get position mode for X coordinate | | `engine.block.getPositionYMode()` | Get position mode for Y coordinate | | `engine.block.setBool()` | Set transform lock state | | `engine.block.getBool()` | Get transform lock state | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Resize" description: "Resize videos in web apps using the CE.SDK" platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/transform/resize-b1ce14/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) > [Resize](https://img.ly/docs/cesdk/angular/edit-video/transform/resize-b1ce14/) --- The **CreativeEditor SDK (CE.SDK)** provides a video resizing feature. This guide offers a complete overview of the resizing feature, from using it in the default UI to locking resizing to safeguard layouts. ![Resize videos example showing videos with different sizing modes](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-video-transform-resize-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-video-transform-resize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-video-transform-resize-browser/) ```typescript file=@cesdk_web_examples/guides-edit-video-transform-resize-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; class Example implements EditorPlugin { name = 'guides-edit-video-transform-resize-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Enable fill and set page fill color to #6686FF engine.block.setFillEnabled(page, true); engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 102 / 255, g: 134 / 255, b: 255 / 255, a: 1 }); // Layout constants for centered positioning // Page: 800x500, 3 columns of 200px each with 50px spacing // Total width: 700px, centered start X: 50px // Column centers: 150, 400, 650 const videoWidth = 150; const videoHeight = 100; const columnWidth = 200; const startY = 165; // Vertically centered const labelY = startY + videoHeight + 10; const explanationY = labelY + 35; // Column 1 center: 150 const col1X = 50; const col1VideoX = col1X + (columnWidth - videoWidth) / 2; // 75 // Column 2 center: 400 (percentage video is 200px = 25% of 800) const col2X = 300; const col2VideoX = col2X; // 200px wide video centered at 400 // Column 3 center: 650 const col3X = 550; const col3VideoX = col3X + (columnWidth - videoWidth) / 2; // 575 // Demo 1: Resizable Video - Can be freely resized by user const resizableVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', videoWidth, videoHeight ); engine.block.appendChild(page, resizableVideo); engine.block.setPositionX(resizableVideo, col1VideoX); engine.block.setPositionY(resizableVideo, startY); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Resizable'); engine.block.setFloat(text1, 'text/fontSize', 28); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, columnWidth); engine.block.setPositionX(text1, col1X); engine.block.setPositionY(text1, labelY); engine.block.setFillEnabled(text1, true); engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text1); // Add explanatory text below const explanation1 = engine.block.create('text'); engine.block.setString( explanation1, 'text/text', 'Absolute pixel dimensions' ); engine.block.setFloat(explanation1, 'text/fontSize', 12); engine.block.setEnum(explanation1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation1, columnWidth); engine.block.setPositionX(explanation1, col1X); engine.block.setPositionY(explanation1, explanationY); engine.block.setFillEnabled(explanation1, true); engine.block.setColor( engine.block.getFill(explanation1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation1); // Demo 2: Percentage Sizing - Responsive layout const percentVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', videoWidth, videoHeight ); engine.block.appendChild(page, percentVideo); // Set size mode to percentage (0.0 to 1.0) engine.block.setWidthMode(percentVideo, 'Percent'); engine.block.setHeightMode(percentVideo, 'Percent'); // Set to 25% width, 20% height of parent engine.block.setWidth(percentVideo, 0.25); engine.block.setHeight(percentVideo, 0.2); engine.block.setPositionX(percentVideo, col2VideoX); engine.block.setPositionY(percentVideo, startY); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Percentage'); engine.block.setFloat(text2, 'text/fontSize', 28); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, columnWidth); engine.block.setPositionX(text2, col2X); engine.block.setPositionY(text2, labelY); engine.block.setFillEnabled(text2, true); engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text2); // Add explanatory text below const explanation2 = engine.block.create('text'); engine.block.setString(explanation2, 'text/text', '25% width, 20% height'); engine.block.setFloat(explanation2, 'text/fontSize', 12); engine.block.setEnum(explanation2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation2, columnWidth); engine.block.setPositionX(explanation2, col2X); engine.block.setPositionY(explanation2, explanationY); engine.block.setFillEnabled(explanation2, true); engine.block.setColor( engine.block.getFill(explanation2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation2); // Demo 3: Resize-Locked Video - Cannot be resized const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', videoWidth, videoHeight ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, col3VideoX); engine.block.setPositionY(lockedVideo, startY); // Lock the transform to prevent resizing engine.block.setTransformLocked(lockedVideo, true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Locked'); engine.block.setFloat(text3, 'text/fontSize', 28); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, columnWidth); engine.block.setPositionX(text3, col3X); engine.block.setPositionY(text3, labelY); engine.block.setFillEnabled(text3, true); engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text3); // Add explanatory text below const explanation3 = engine.block.create('text'); engine.block.setString(explanation3, 'text/text', 'Transform locked'); engine.block.setFloat(explanation3, 'text/fontSize', 12); engine.block.setEnum(explanation3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation3, columnWidth); engine.block.setPositionX(explanation3, col3X); engine.block.setPositionY(explanation3, explanationY); engine.block.setFillEnabled(explanation3, true); engine.block.setColor( engine.block.getFill(explanation3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation3); // Get current dimensions const currentWidth = engine.block.getWidth(resizableVideo); const currentHeight = engine.block.getHeight(resizableVideo); console.log('Current dimensions:', currentWidth, 'x', currentHeight); // Check size mode const widthMode = engine.block.getWidthMode(percentVideo); const heightMode = engine.block.getHeightMode(percentVideo); console.log('Size modes:', widthMode, heightMode); // Set playhead position to 2 seconds engine.block.setPlaybackTime(page, 2); } } export default Example; ``` ## What You'll Learn - Resize a single video block with the **default UI**. - Resize clips using **JavaScript** and the **CE.SDK API**. - Resize **groups** of video blocks uniformly. - **Lock** or restrict a user's ability to resize. ### When to Use Resize videos to: - Fit **template areas**. - Insert videos into reusable **layouts**. - Keep aspect ratios **consistent** for: - Social media posts (like reels) - Ads - Create **automation workflows** in JavaScript. - Combine with trimming or cropping. ## Resize a Video Block with the UI When using the default CE.SDK UI: 1. Select the video. 2. The resize handles appear. 3. Drag one of the handles to resize the video until you set the desired size. The editor provides two kinds of handles: - **Corner scale handles:** keep the video's aspect ratio. - **Edge handles:** stretch only the width or the height independently. Any embedded audio remains synchronous, because resizing affects only the block's frame, not the time-based properties. ### Hide the Resize Handles in the UI To prevent manual resizing in the UI, **hide the resize edge handles** using the **EditorAPI**: 1. Call the `setSetting` function. 2. Include the `"controlGizmo/showResizeHandles"` key. 3. Set the value to `false`. ```ts // Hide resize handles if you want to prevent manual resizing engine.editor.setSetting("controlGizmo/showResizeHandles", false); ``` > **Note:** This setting still **displays the corner handles** and helps avoid editing operations that change the size independently in the UI. ## Resize a Video Block with JavaScript When developing a custom UI use the CreativeEngine BlockAPI to edit a video's size. Two methods exist: choose the one that best suits your project. ### Set Absolute Sizing Set the video's absolute size with `setWidth` and `setHeight`. First, create the video block with `addVideo`, then set explicit pixel dimensions: ```typescript highlight-resizable-video const resizableVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', videoWidth, videoHeight ); engine.block.appendChild(page, resizableVideo); engine.block.setPositionX(resizableVideo, col1VideoX); engine.block.setPositionY(resizableVideo, startY); ``` ### Set Relative Sizing Set the video's size relative to its parent (for example, to the page): 1. Set the size mode with `setWidthMode` and `setHeightMode`. 2. Define the mode as `'Percent'`. 3. Set the size in normalized values, with `1` being full-width. ```typescript highlight-percentage-sizing // Set size mode to percentage (0.0 to 1.0) engine.block.setWidthMode(percentVideo, 'Percent'); engine.block.setHeightMode(percentVideo, 'Percent'); // Set to 25% width, 20% height of parent engine.block.setWidth(percentVideo, 0.25); engine.block.setHeight(percentVideo, 0.2); ``` The preceding code: - Sets the clip to 25% width of its parent. - Makes the clip 20% as tall. - Stays responsive to the parent's size changes. This method allows for the clip to follow the parent's size changes while maintaining proportional dimensions. ### Get Current Dimensions Read current size values using `getWidth` and `getHeight`. Values are returned in the current size mode (absolute pixels or percentage 0.0-1.0): ```typescript highlight-get-dimensions // Get current dimensions const currentWidth = engine.block.getWidth(resizableVideo); const currentHeight = engine.block.getHeight(resizableVideo); ``` ### Check Size Mode Query the current size mode using `getWidthMode` and `getHeightMode`: ```typescript highlight-get-size-mode // Check size mode const widthMode = engine.block.getWidthMode(percentVideo); const heightMode = engine.block.getHeightMode(percentVideo); ``` ### Maintain Aspect Ratio If the block's *fill* is a video (`FillType.video`), the engine preserves the footage's native aspect ratio. To force a different ratio, you must: 1. Calculate the ratio 2. Adjust one side, or add constraints (see **Locking** below). ## Resize Videos Together To resize several videos at once, instead of resizing each video individually: 1. Group the videos with `engine.block.group`. 2. Set the size for the entire group. ```ts // Group multiple video clips const group = engine.block.group([clipA, clipB, clipC]); // Resize the entire group - height scales proportionally engine.block.setWidth(group, 400); ``` To ensure consistent layout, groups of videos: - Always scale uniformly on both axes. - Show only *scale* and *rotate* gizmos in the UI, never individual resize handles. ## Lock or Constrain Resizing Use the BlockAPI to define if your app allows resizing for a specific block: 1. Tell the engine that each block has its own resize policy with `setGlobalScope`. 2. Call `setScopeEnabled`. 3. Include the video block ID. 4. Set the boolean's value for `locked`: - `true` enables resizing. - `false` deactivates resizing. ```ts // Disable only resize for this specific block engine.editor.setGlobalScope('layer/resize', 'Defer'); engine.block.setScopeEnabled(videoBlock, 'layer/resize', false); // The block can still be moved and rotated, but not resized via UI ``` Resize actions remain available through code, but not via the UI. Lock all transforms entirely to prevent resizing, repositioning, and rotation: ```typescript highlight-locked-video // Lock the transform to prevent resizing engine.block.setTransformLocked(lockedVideo, true); ``` The preceding code deactivates all transform actions, resize included: - Manual actions from the UI - Automated actions through code. Create templates with finer-grained scope keys to allow rotation or movement while forbidding size changes. ## Notes on Resizing with CE.SDK | Topic | What you want to do | What happens | | --- | --- | --- | | **Block duration** | Resize the block's on-canvas frame. | No need to retime; duration and trims stay untouched. | | **Content fill** | Switch the block to `.contain` or `.cover`. | Update it with `setContentFillMode` (see *common crop APIs*). | | **Performance** | Work on large canvases such as 4K. | Plan around GPU limits and the Video Editor 4K constraints. | ## Next Steps Now that you understand how to resize with the CE.SDK, take time to dive into other related features: - [Create a template](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) to enforce design rules. - [Use other transforms](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) available with the CreativeEditor. - [Add captions](https://img.ly/docs/cesdk/angular/edit-video/add-captions-f67565/) to videos. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Rotate Videos" description: "Rotate video elements to adjust orientation and create dynamic compositions." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/transform/rotate-eaf662/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) > [Rotate](https://img.ly/docs/cesdk/angular/edit-video/transform/rotate-eaf662/) --- Rotate video elements to any angle using radians or degrees, with precise programmatic control and UI rotation handles. ![Rotate videos example showing videos at different rotation angles](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-rotate-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-transform-rotate-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-rotate-browser/) Rotation in CE.SDK occurs around the block's center point. All rotation values use radians, where `Math.PI` equals 180 degrees. Positive values rotate counterclockwise, negative values rotate clockwise. ```typescript file=@cesdk_web_examples/guides-create-video-transform-rotate-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; class Example implements EditorPlugin { name = 'guides-create-video-transform-rotate-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Enable fill and set page fill color to #6686FF engine.block.setFillEnabled(page, true); engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 102 / 255, g: 134 / 255, b: 255 / 255, a: 1 }); // Demo 1: Rotated Video - Rotated 45 degrees const rotatedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, rotatedVideo); engine.block.setPositionX(rotatedVideo, 50); engine.block.setPositionY(rotatedVideo, 100); // Rotate the video 45 degrees (in radians) const toRadians = (degrees: number) => (degrees * Math.PI) / 180; engine.block.setRotation(rotatedVideo, toRadians(45)); // Add label for rotated video const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', '45° Rotation'); engine.block.setFloat(text1, 'text/fontSize', 28); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 200); engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 320); engine.block.setFillEnabled(text1, true); engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text1); // Get current rotation value const currentRotation = engine.block.getRotation(rotatedVideo); const toDegrees = (radians: number) => (radians * 180) / Math.PI; console.log('Current rotation:', toDegrees(currentRotation), 'degrees'); // Demo 2: 90 Degree Rotation const rotatedVideo90 = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, rotatedVideo90); engine.block.setPositionX(rotatedVideo90, 300); engine.block.setPositionY(rotatedVideo90, 100); // Rotate 90 degrees using Math.PI / 2 engine.block.setRotation(rotatedVideo90, Math.PI / 2); // Add label for 90 degree rotation const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', '90° Rotation'); engine.block.setFloat(text2, 'text/fontSize', 28); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 200); engine.block.setPositionX(text2, 300); engine.block.setPositionY(text2, 320); engine.block.setFillEnabled(text2, true); engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text2); // Demo 3: Locked Rotation - Rotation is disabled for this block const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, 550); engine.block.setPositionY(lockedVideo, 150); // Disable rotation for this specific block engine.block.setScopeEnabled(lockedVideo, 'layer/rotate', false); // Add label for locked video const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Rotation Locked'); engine.block.setFloat(text3, 'text/fontSize', 28); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 200); engine.block.setPositionX(text3, 550); engine.block.setPositionY(text3, 320); engine.block.setFillEnabled(text3, true); engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text3); // Check if rotation is enabled for a block const canRotate = engine.block.isScopeEnabled(lockedVideo, 'layer/rotate'); console.log('Rotation enabled:', canRotate); // Set playhead position to 2 seconds engine.block.setPlaybackTime(page, 2); } } export default Example; ``` This guide covers rotating videos programmatically, converting between degrees and radians, grouping blocks for collective rotation, and locking rotation permissions. ## Rotating Videos Rotate videos using `engine.block.setRotation()` with the angle in radians. Convert from degrees using the formula `radians = degrees * Math.PI / 180`: ```typescript highlight-rotate-video // Rotate the video 45 degrees (in radians) const toRadians = (degrees: number) => (degrees * Math.PI) / 180; engine.block.setRotation(rotatedVideo, toRadians(45)); ``` ## Getting Current Rotation Read the current rotation value using `engine.block.getRotation()`. The value is returned in radians. Convert to degrees with `degrees = radians * 180 / Math.PI`: ```typescript highlight-get-rotation // Get current rotation value const currentRotation = engine.block.getRotation(rotatedVideo); const toDegrees = (radians: number) => (radians * 180) / Math.PI; console.log('Current rotation:', toDegrees(currentRotation), 'degrees'); ``` ## Common Rotation Angles For 90-degree rotations, use `Math.PI / 2`. For 180 degrees, use `Math.PI`. For 270 degrees, use `3 * Math.PI / 2`: ```typescript highlight-rotate-90 // Rotate 90 degrees using Math.PI / 2 engine.block.setRotation(rotatedVideo90, Math.PI / 2); ``` ## Locking Rotation Disable rotation for specific blocks using `engine.block.setScopeEnabled()` with the `'layer/rotate'` scope set to false: ```typescript highlight-lock-rotation // Disable rotation for this specific block engine.block.setScopeEnabled(lockedVideo, 'layer/rotate', false); ``` ## Checking Rotation Permissions Check if rotation is enabled for a block using `engine.block.isScopeEnabled()`: ```typescript highlight-check-scope // Check if rotation is enabled for a block const canRotate = engine.block.isScopeEnabled(lockedVideo, 'layer/rotate'); console.log('Rotation enabled:', canRotate); ``` ## Troubleshooting ### Rotation Has No Effect Verify the block exists in the scene and is not a page block. Check if rotation is locked using `engine.block.isScopeEnabled(block, 'layer/rotate')`. ### Rotation Handle Missing Check if rotation handles are hidden globally via `controlGizmo/showRotateHandles` setting. Verify the `'layer/rotate'` scope is enabled for the block. ### Unexpected Rotation Direction Remember that positive values rotate counterclockwise in CE.SDK. To rotate clockwise, use negative radian values. ## API Reference | Method | Description | | ---------------------------------- | ---------------------------------------- | | `engine.block.setRotation()` | Set block rotation in radians | | `engine.block.getRotation()` | Get current rotation in radians | | `engine.block.setScopeEnabled()` | Enable/disable `'layer/rotate'` scope | | `engine.block.isScopeEnabled()` | Check if rotation is allowed | | `engine.block.setTransformLocked()`| Lock all transforms including rotation | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Scale Videos in Web Apps" description: "Embed the CE.SDK scaling feature in your web app." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/transform/scale-f75c8a/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/angular/edit-video/transform-369f28/) > [Scale](https://img.ly/docs/cesdk/angular/edit-video/transform/scale-f75c8a/) --- 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. ![Scale videos example showing different scaling techniques](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-scale-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-transform-scale-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-scale-browser/) ## What You'll 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 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 Scaling uses the `scale(block, scale, anchorX, anchorY)` function, with the following **parameters**: | Parameter | Description | Values | | ------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------- | | `block` | Handle (ID) of the block to scale. | `number` | | `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 and height | **Top/Left** = 0, **Center** = 0.5, **Bottom/Right** = 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. ```typescript file=@cesdk_web_examples/guides-create-video-transform-scale-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; class Example implements EditorPlugin { name = 'guides-create-video-transform-scale-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Enable fill and set page fill color to #6686FF engine.block.setFillEnabled(page, true); engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 102 / 255, g: 134 / 255, b: 255 / 255, a: 1 }); // Centered 2x2 grid layout for 800x500 canvas // Videos: 120x90, scaled to 180x135 // Grid positions are where videos APPEAR after scaling // Left column visual X=200, Right column visual X=420 // Top row visual Y=50, Bottom row visual Y=265 const leftColumnX = 200; const rightColumnX = 420; const topRowY = 50; const bottomRowY = 265; const titleOffsetY = 145; // 135 (video height) + 10 (gap) const subtitleOffsetY = 172; // title + 27 // For center-scaled video, compensate for position shift // Center scaling shifts top-left by (-30, -22.5) for 1.5x scale on 120x90 const centerScaleOffsetX = 30; const centerScaleOffsetY = 22.5; // Demo 1: Uniform scaling from top-left (default anchor) const uniformVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, uniformVideo); engine.block.setPositionX(uniformVideo, leftColumnX); engine.block.setPositionY(uniformVideo, topRowY); // Scale the video to 150% from the default top-left anchor engine.block.scale(uniformVideo, 1.5); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Uniform Scale'); engine.block.setFloat(text1, 'text/fontSize', 24); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 180); engine.block.setPositionX(text1, leftColumnX); engine.block.setPositionY(text1, topRowY + titleOffsetY); engine.block.setFillEnabled(text1, true); engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text1); const explanation1 = engine.block.create('text'); engine.block.setString( explanation1, 'text/text', '150% from top-left anchor' ); engine.block.setFloat(explanation1, 'text/fontSize', 12); engine.block.setEnum(explanation1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation1, 180); engine.block.setPositionX(explanation1, leftColumnX); engine.block.setPositionY(explanation1, topRowY + subtitleOffsetY); engine.block.setFillEnabled(explanation1, true); engine.block.setColor( engine.block.getFill(explanation1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation1); // Demo 2: Scaling from center anchor const centerVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, centerVideo); // Position compensates for center scaling shift so final position aligns with grid engine.block.setPositionX(centerVideo, rightColumnX + centerScaleOffsetX); engine.block.setPositionY(centerVideo, topRowY + centerScaleOffsetY); // Scale from center anchor (0.5, 0.5) engine.block.scale(centerVideo, 1.5, 0.5, 0.5); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Center Scale'); engine.block.setFloat(text2, 'text/fontSize', 24); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 180); engine.block.setPositionX(text2, rightColumnX); engine.block.setPositionY(text2, topRowY + titleOffsetY); engine.block.setFillEnabled(text2, true); engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text2); const explanation2 = engine.block.create('text'); engine.block.setString( explanation2, 'text/text', '150% from center anchor' ); engine.block.setFloat(explanation2, 'text/fontSize', 12); engine.block.setEnum(explanation2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation2, 180); engine.block.setPositionX(explanation2, rightColumnX); engine.block.setPositionY(explanation2, topRowY + subtitleOffsetY); engine.block.setFillEnabled(explanation2, true); engine.block.setColor( engine.block.getFill(explanation2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation2); // Demo 3: Non-uniform scaling (width only) const stretchVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, stretchVideo); engine.block.setPositionX(stretchVideo, leftColumnX); engine.block.setPositionY(stretchVideo, bottomRowY); // Stretch only the width by 1.5x engine.block.setWidthMode(stretchVideo, 'Absolute'); const currentWidth = engine.block.getWidth(stretchVideo); engine.block.setWidth(stretchVideo, currentWidth * 1.5, true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Width Stretch'); engine.block.setFloat(text3, 'text/fontSize', 24); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 180); engine.block.setPositionX(text3, leftColumnX); engine.block.setPositionY(text3, bottomRowY + titleOffsetY); engine.block.setFillEnabled(text3, true); engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text3); const explanation3 = engine.block.create('text'); engine.block.setString( explanation3, 'text/text', '150% width, height unchanged' ); engine.block.setFloat(explanation3, 'text/fontSize', 12); engine.block.setEnum(explanation3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation3, 180); engine.block.setPositionX(explanation3, leftColumnX); engine.block.setPositionY(explanation3, bottomRowY + subtitleOffsetY); engine.block.setFillEnabled(explanation3, true); engine.block.setColor( engine.block.getFill(explanation3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation3); // Demo 4: Locked scaling const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, rightColumnX); engine.block.setPositionY(lockedVideo, bottomRowY); // Lock all transforms to prevent scaling engine.block.setTransformLocked(lockedVideo, true); const text4 = engine.block.create('text'); engine.block.setString(text4, 'text/text', 'Scale Locked'); engine.block.setFloat(text4, 'text/fontSize', 24); engine.block.setEnum(text4, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text4, 180); engine.block.setPositionX(text4, rightColumnX); engine.block.setPositionY(text4, bottomRowY + titleOffsetY); engine.block.setFillEnabled(text4, true); engine.block.setColor(engine.block.getFill(text4), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text4); const explanation4 = engine.block.create('text'); engine.block.setString( explanation4, 'text/text', 'Transform locked - cannot scale' ); engine.block.setFloat(explanation4, 'text/fontSize', 12); engine.block.setEnum(explanation4, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation4, 180); engine.block.setPositionX(explanation4, rightColumnX); engine.block.setPositionY(explanation4, bottomRowY + subtitleOffsetY); engine.block.setFillEnabled(explanation4, true); engine.block.setColor( engine.block.getFill(explanation4), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation4); // Set playhead position to 2 seconds engine.block.setPlaybackTime(page, 2); } } export default Example; ``` ## 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()`: ```typescript highlight-uniform-scale const uniformVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, uniformVideo); engine.block.setPositionX(uniformVideo, leftColumnX); engine.block.setPositionY(uniformVideo, topRowY); // Scale the video to 150% from the default top-left anchor engine.block.scale(uniformVideo, 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 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: - `anchorX` to move the anchor point along the width. - `anchorY` to move the anchor point along the height. Both can have values between 0.0 and 1.0. For example, to scale from the center: ```typescript highlight-center-scale const centerVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, centerVideo); // Position compensates for center scaling shift so final position aligns with grid engine.block.setPositionX(centerVideo, rightColumnX + centerScaleOffsetX); engine.block.setPositionY(centerVideo, topRowY + centerScaleOffsetY); // Scale from center anchor (0.5, 0.5) engine.block.scale(centerVideo, 1.5, 0.5, 0.5); ``` This function: 1. Scales the video to **150%** of its original size. 2. Sets the origin anchor point at the center with `0.5, 0.5`. This way, the video expands from the center equally in all directions. ## 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** functions. ```typescript highlight-nonuniform-scale const stretchVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, stretchVideo); engine.block.setPositionX(stretchVideo, leftColumnX); engine.block.setPositionY(stretchVideo, bottomRowY); // Stretch only the width by 1.5x engine.block.setWidthMode(stretchVideo, 'Absolute'); const currentWidth = engine.block.getWidth(stretchVideo); engine.block.setWidth(stretchVideo, currentWidth * 1.5, true); ``` The preceding code: 1. Sets the width mode to `'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 with `maintainCrop` set to `true`. Use this to: - Create panoramic crops. - Compensate for aspect ratios during automation. ### 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. The `maintainCrop` parameter (third argument to `setWidth`) keeps the visible region intact and avoids distortion. Consider using `maintainCrop` if a **template** already uses cropping to frame a subject or hide a watermark. ## Scale Clips Together Grouping blocks is a useful way of scaling them proportionally. Use `engine.block.group()` to combine blocks into a group, then scale the group as a single unit: ```typescript const groupId = engine.block.group([videoBlockId, textBlockId]); engine.block.scale(groupId, 1.5, 0.5, 0.5); ``` The preceding code scales the entire group to 150% from the center anchor. > **Warning:** You can't group `page` with other blocks. Group elements on the **top** of the page, **not** with the page itself. ## 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 ```typescript highlight-locked-scale const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, rightColumnX); engine.block.setPositionY(lockedVideo, bottomRowY); // Lock all transforms to prevent scaling engine.block.setTransformLocked(lockedVideo, true); ``` ### Disable Resize Scope Disable the `layer/resize` scope when working with templates to **prevent users from scaling** blocks: ```typescript engine.block.setScopeEnabled(blockId, 'layer/resize', false); ``` ### Lock All Transformations To **lock** all transformations (move, resize, rotate), use `setTransformLocked`: ```typescript engine.block.setTransformLocked(blockId, true); ``` To check if scaling is currently allowed: ```typescript const canResize = engine.block.isScopeEnabled(blockId, 'layer/resize'); console.log('layer/resize scope enabled?', canResize); ``` ## Troubleshooting ### Video Not Scaling Check if transforms are locked using `engine.block.isTransformLocked(block)`. Ensure the block exists and is a valid design block. ### Unexpected Position After Scale Verify the anchor point coordinates. Default anchor (0, 0) causes expansion to the right and down. Use (0.5, 0.5) for center-based scaling. ### Crop Region Shifting When using `setWidth` or `setHeight`, pass `true` as the third parameter to maintain the crop region. ## Recap | Usage | How To | | ------------------ | ---------------------------------------------------------------------------------------------- | | Uniform scaling | `engine.block.scale(blockId, scaleFactor)` + optional anchor | | Stretching an axis | Set width mode to `'Absolute'`, then use `setWidth()` or `setHeight()` | | 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 Reference | 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.setHeightMode` | Enables absolute sizing for height changes. | | `block.getHeight` | Reads the current height before non-uniform scaling. | | `block.setHeight` | Writes the adjusted height after single-axis scaling. | | `block.group` | Group blocks so they scale together. | | `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. | | `block.isTransformLocked` | Checks whether all transforms are locked on a block. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Trim Video Clips" description: "Learn how to trim video clips in CE.SDK to control which portion of media plays back." platform: angular url: "https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) > [Trim](https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/) --- 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](./assets/browser.hero.webp) > **Reading time:** 12 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-trim-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-trim-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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 the composition. These two systems work together to give you complete control over video playback. ```typescript file=@cesdk_web_examples/guides-create-video-trim-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; 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'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); 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); // Verify looping is enabled const isLooping = engine.block.isLooping(loopingTrimFill); // eslint-disable-next-line no-console console.log('Looping enabled:', isLooping); // 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 ### 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. > **Note:** Audio blocks use the same trim API (`setTrimOffset`, `setTrimLength`) as video > blocks. The concepts are identical, though this guide focuses on video. ### Block-Level Timing Block-level timing is separate from trimming and controls when and how long a block exists in the composition. `setTimeOffset` determines when the block becomes active in the composition (useful for track-based layouts). `setDuration` controls how long the block appears in the composition. The *trim* controls what plays from the source media, while the *duration* controls how long that playback appears in the composition. 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 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 ### 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 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 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 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 ### 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. ```typescript highlight-load-video-resource // 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'); ``` 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 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. ```typescript highlight-check-trim-support // 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); ``` 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 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. ```typescript highlight-basic-video-trim // 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); ``` 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 We can retrieve the current trim settings to verify values, build UI controls, or make relative adjustments based on existing settings. ```typescript highlight-get-trim-values // 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` ); ``` 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 ### Trimming with Block Duration Take a look at this example to understand how trim length and block duration interact: ```typescript highlight-trim-with-duration // 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' ); ``` 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 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. ```typescript highlight-trim-with-looping // 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); // Verify looping is enabled const isLooping = engine.block.isLooping(loopingTrimFill); // eslint-disable-next-line no-console console.log('Looping enabled:', isLooping); // 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' ); ``` 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 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. ```typescript highlight-frame-accurate-trim // 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` ); ``` 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 When working with multiple video clips that need consistent trimming, we can iterate through collections and apply the same trim settings programmatically. ```typescript highlight-batch-trim-videos // 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'); ``` 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 ### 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 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 playback 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 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 ### 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 composition, while `setTrimOffset` controls where in the source media playback starts. Make sure you're using the correct method. ### 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 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 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 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. ## Best Practices ### 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 - 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 - 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 ## API Reference | Method | Description | Parameters | Returns | | -------------------------------- | ---------------------------------- | ------------------------------------- | --------------- | | `getFill(id)` | Get the fill block for a block | `id: DesignBlockId` | `DesignBlockId` | | `forceLoadAVResource(id)` | Force load media resource metadata | `id: DesignBlockId` | `Promise` | | `supportsTrim(id)` | Check if block supports trimming | `id: DesignBlockId` | `boolean` | | `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` | | `getAVResourceTotalDuration(id)` | Get total duration of source media | `id: DesignBlockId` | `number` | | `setLooping(id, enabled)` | Enable/disable media looping | `id: DesignBlockId, enabled: boolean` | `void` | | `isLooping(id)` | Check if media looping is enabled | `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` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Engine Interface" description: "Understand CE.SDK's architecture and learn when to use direct Engine access for automation workflows" platform: angular url: "https://img.ly/docs/cesdk/angular/engine-interface-6fb7cf/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Engine](https://img.ly/docs/cesdk/angular/engine-interface-6fb7cf/) --- Access CE.SDK's cross-platform C++ engine programmatically for client-side automation, background processing, and custom workflows in the browser. CE.SDK is built on a layered architecture where a cross-platform C++ core engine powers all creative operations. The Editor UI and your programmatic code access identical capabilities through the same underlying engine. ## Web SDK Packages CE.SDK offers three npm packages: **@cesdk/cesdk-js**: Full package with Editor UI and Engine. Initialize with `CreativeEditorSDK.create()` and access the Engine via `cesdk.engine`. Use this when users edit designs visually while your code handles background tasks. ```javascript import CreativeEditorSDK from '@cesdk/cesdk-js'; const cesdk = await CreativeEditorSDK.create('#container', { // license: 'YOUR_CESDK_LICENSE_KEY', }); const engine = cesdk.engine; ``` **@cesdk/engine**: Engine-only package without UI. Smaller bundle size. Initialize with `CreativeEngine.init()`. Use for browser automation, custom UIs, or hidden Engine instances. **@cesdk/node**: Node.js package for server-side processing. Same API, compiled for Node.js runtime. ## Engine API Namespaces The Engine organizes its functionality into six namespaces: - **engine.block**: Create, modify, and export design elements (shapes, text, images, videos) - **engine.scene**: Load, save, and manage scenes and pages - **engine.asset**: Register and query asset sources (images, templates, fonts) - **engine.editor**: Configure editor settings, manage edit modes, handle undo/redo - **engine.variable**: Define and update template variables for data merge - **engine.event**: Subscribe to engine events (selection changes, state updates) ## Combining UI and Engine Access The Editor UI calls Engine APIs internally. When you use `cesdk.engine`, you're accessing the same APIs. Most applications combine both: users interact with the visual editor while your code automates background tasks. Common patterns: - **Template loading**: Load scenes when users select templates - **Validation**: Check for empty placeholders before export - **Auto-save**: Serialize scenes with `engine.scene.saveToString()` - **Thumbnails**: Generate previews with `engine.block.export()` ## Hidden Engine Instances Run a second, invisible Engine alongside your main UI for background processing: ```javascript import CreativeEngine from '@cesdk/engine'; // Main editor with UI const cesdk = await CreativeEditorSDK.create('#container', config); // Hidden engine for background work const backgroundEngine = await CreativeEngine.init({ // license: 'YOUR_CESDK_LICENSE_KEY', }); async function generateThumbnail(sceneData) { await backgroundEngine.scene.loadFromString(sceneData); const page = backgroundEngine.scene.getPages()[0]; return await backgroundEngine.block.export(page, 'image/jpeg', { targetWidth: 200, targetHeight: 200, }); } ``` ## Memory Management Each Engine instance consumes memory. Dispose instances when done: ```javascript backgroundEngine.dispose(); ``` For resource-intensive tasks like high-resolution exports, consider server-side processing with `@cesdk/node`. ## Troubleshooting **Engine not initialized**: Ensure `CreativeEditorSDK.create()` or `CreativeEngine.init()` completes before accessing `engine`. **Hidden instance blocking UI**: Heavy operations can impact browser performance. Move resource-intensive tasks to server-side. **Memory issues**: Dispose unused instances with `engine.dispose()`. ## Next Steps - [Node.js SDK](https://img.ly/docs/cesdk/angular/what-is-cesdk-2e7acd/) for server-side processing - [Automation Overview](https://img.ly/docs/cesdk/angular/automation/overview-34d971/) for workflow examples --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Thumbnail" description: "Generate thumbnail preview images from CE.SDK scenes by exporting with target dimensions for galleries, file browsers, and design management interfaces." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/create-thumbnail-749be1/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [Create Thumbnail](https://img.ly/docs/cesdk/angular/export-save-publish/create-thumbnail-749be1/) --- Generate thumbnail preview images from CE.SDK scenes by exporting with target dimensions for galleries and design management. ![Create Thumbnail hero image](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-create-thumbnail-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-create-thumbnail-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-create-thumbnail-browser/) Thumbnails provide visual previews of designs without loading the full editor. Use `engine.block.export()` with `targetWidth` and `targetHeight` options to scale content while maintaining aspect ratio. Supported formats include PNG, JPEG, and WebP. ```typescript file=@cesdk_web_examples/guides-export-save-publish-create-thumbnail-browser/browser.ts reference-only import type CreativeEditorSDK from '@cesdk/cesdk-js'; import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Setup thumbnail export functionality await this.setupThumbnailActions(cesdk, page); } private async setupThumbnailActions( cesdk: CreativeEditorSDK, page: number ): Promise { const engine = cesdk.engine; // Add thumbnail export buttons to navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-thumbnail-small', label: 'Small Thumbnail', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', targetWidth: 150, targetHeight: 150, jpegQuality: 0.8 }); await cesdk.utils.downloadFile(blob, 'image/jpeg'); console.log( `✓ Small thumbnail: ${(blob.size / 1024).toFixed(1)} KB` ); } }, { id: 'ly.img.action.navigationBar', key: 'export-thumbnail-medium', label: 'Medium Thumbnail', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', targetWidth: 400, targetHeight: 300, jpegQuality: 0.85 }); await cesdk.utils.downloadFile(blob, 'image/jpeg'); console.log( `✓ Medium thumbnail: ${(blob.size / 1024).toFixed(1)} KB` ); } }, { id: 'ly.img.action.navigationBar', key: 'export-thumbnail-png', label: 'PNG Thumbnail', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 400, targetHeight: 300, pngCompressionLevel: 6 }); await cesdk.utils.downloadFile(blob, 'image/png'); console.log( `✓ PNG thumbnail: ${(blob.size / 1024).toFixed(1)} KB` ); } }, { id: 'ly.img.action.navigationBar', key: 'export-thumbnail-webp', label: 'WebP Thumbnail', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/webp', targetWidth: 400, targetHeight: 300, webpQuality: 0.8 }); await cesdk.utils.downloadFile(blob, 'image/webp'); console.log( `✓ WebP thumbnail: ${(blob.size / 1024).toFixed(1)} KB` ); } } ] } ); } } export default Example; ``` This guide covers exporting thumbnails at specific dimensions, choosing formats, optimizing quality and file size, and generating multiple thumbnail sizes. ## Export a Thumbnail Call `engine.block.export()` with target dimensions to create a scaled thumbnail. Both `targetWidth` and `targetHeight` must be set together for scaling to work. ```typescript highlight=highlight-thumbnail-small const blob = await engine.block.export(page, { mimeType: 'image/jpeg', targetWidth: 150, targetHeight: 150, jpegQuality: 0.8 }); ``` The block renders large enough to fill the target size while maintaining aspect ratio. If aspect ratios differ, the output extends beyond the target on one axis. ## Choose Thumbnail Format Select the format via the `mimeType` option based on your needs: - **`'image/jpeg'`** — Smaller files, good for photos, no transparency - **`'image/png'`** — Lossless quality, supports transparency - **`'image/webp'`** — Best compression, modern browsers only ### JPEG Thumbnails JPEG works well for photographic content. Control file size with `jpegQuality` (0-1, default 0.9). Values between 0.75-0.85 balance quality and size for thumbnails. ```typescript highlight=highlight-thumbnail-medium const blob = await engine.block.export(page, { mimeType: 'image/jpeg', targetWidth: 400, targetHeight: 300, jpegQuality: 0.85 }); ``` ### PNG Thumbnails PNG provides lossless quality with transparency support. Control encoding speed vs. file size with `pngCompressionLevel` (0-9, default 5). ```typescript highlight=highlight-thumbnail-png const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 400, targetHeight: 300, pngCompressionLevel: 6 }); ``` ### WebP Thumbnails WebP offers the best compression for modern browsers. Control quality with `webpQuality` (0-1, default 1.0 for lossless). ```typescript highlight=highlight-thumbnail-webp const blob = await engine.block.export(page, { mimeType: 'image/webp', targetWidth: 400, targetHeight: 300, webpQuality: 0.8 }); ``` ## Common Thumbnail Sizes Standard sizes for different use cases: | Size | Dimensions | Use Case | | ---- | ---------- | -------- | | Small | 150×150 | Grid galleries, file browsers | | Medium | 400×300 | Preview panels, cards | | Large | 800×600 | Full previews, detail views | ## Optimize Thumbnail Quality Balance quality with file size using format-specific options: | Format | Option | Range | Default | Notes | | ------ | ------ | ----- | ------- | ----- | | JPEG | `jpegQuality` | 0-1 | 0.9 | Lower = smaller files, visible artifacts | | PNG | `pngCompressionLevel` | 0-9 | 5 | Higher = smaller files, slower encoding | | WebP | `webpQuality` | 0-1 | 1.0 | 1.0 = lossless, lower = lossy compression | For thumbnails, JPEG quality of 0.8 or WebP quality of 0.75-0.85 typically provides good results with small file sizes. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export(blockId, options)` | Export a block as image with format and dimension options | | `engine.scene.getCurrentPage()` | Get the current page block ID | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a blob to the user's device | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export" description: "Explore export options, supported formats, and configuration features for sharing or rendering output." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) --- --- ## Related Pages - [Options](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Explore export options, supported formats, and configuration features for sharing or rendering output. - [Export for Social Media](https://img.ly/docs/cesdk/angular/export-save-publish/for-social-media-0e8a92/) - Export vertical videos with the correct dimensions, formats, and quality settings for Instagram Reels, TikTok, and YouTube Shorts. - [To MP4](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-mp4-c998a8/) - Export video compositions as MP4 files with configurable encoding options, progress tracking, and resolution control. - [For Audio Processing](https://img.ly/docs/cesdk/angular/guides/export-save-publish/export/audio-68de25/) - Learn how to export audio in WAV or MP4 format from any block type in CE.SDK. - [To PDF](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) - Export your designs as PDF documents with options for print compatibility, underlayer generation, and output control. - [To JPEG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-jpeg-6f88e9/) - Export CE.SDK designs to JPEG format with configurable quality settings for photographs, web images, and social media content. - [To PNG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-png-f87eaf/) - Export your designs as PNG images with transparency support and configurable compression for web graphics, UI elements, and content requiring crisp edges. - [To WebP](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-webp-aef6f4/) - Export your CE.SDK designs to WebP format for optimized web delivery with lossy and lossless compression options. - [Export to HTML5](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-html5-76d2ab/) - Export CE.SDK designs as HTML5 bundles with customizable output for display ads and interactive web content. - [Export to Raw Data](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-raw-data-abd7da/) - Export designs to uncompressed RGBA pixel data for custom image processing, GPU uploads, and advanced graphics workflows. - [Compress](https://img.ly/docs/cesdk/angular/export-save-publish/export/compress-29105e/) - Reduce file sizes when exporting images by configuring compression and quality settings for PNG, JPEG, and WebP formats. - [Export with a Color Mask](https://img.ly/docs/cesdk/angular/export-save-publish/export/with-color-mask-4f868f/) - Learn how to export design blocks with color masking in CE.SDK to remove specific colors and generate alpha masks for print workflows and compositing. - [Pre-Export Validation](https://img.ly/docs/cesdk/angular/export-save-publish/pre-export-validation-3a2cba/) - Documentation for Pre-Export Validation - [Partial Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/) - Documentation for Partial Export - [Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) - Configure and understand CE.SDK's image and video size limits for both input and export to optimize performance and memory usage. - [Create Thumbnail](https://img.ly/docs/cesdk/angular/export-save-publish/create-thumbnail-749be1/) - Generate thumbnail preview images from CE.SDK scenes by exporting with target dimensions for galleries, file browsers, and design management interfaces. - [Export for Printing](https://img.ly/docs/cesdk/angular/export-save-publish/for-printing-bca896/) - Export designs from CE.SDK as print-ready PDFs with professional output options including high compatibility mode, underlayers for special media, and scene DPI configuration. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Compress" description: "Reduce file sizes when exporting images by configuring compression and quality settings for PNG, JPEG, and WebP formats." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/compress-29105e/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [Compress](https://img.ly/docs/cesdk/angular/export-save-publish/export/compress-29105e/) --- Compression reduces file sizes during export while maintaining visual quality. With CE.SDK you can fine-tune compression settings for both images and videos, allowing your app to manage performance, quality, and storage efficiency. ![Compress example showing CE.SDK with export options](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-compress-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-compress-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-compress-browser/) Image compression reduces file sizes while maintaining acceptable visual quality. CE.SDK supports format-specific compression controls: lossless compression for PNG, lossy quality settings for JPEG, and both modes for WebP. The example includes a navigation bar dropdown menu with export options for comparing different formats and compression levels. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-compress-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { CaptionPresetsAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Compress Guide * * Demonstrates compression during export: * - PNG lossless compression levels * - JPEG lossy quality settings * - WebP quality settings * - Target dimension scaling * - Video compression with bitrate control * - Navigation bar dropdown with export options */ 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.addPlugin(new VideoEditorConfig()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); // Load a video template scene for demonstration await cesdk.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.video.template/templates/milli-surf-school.scene' ); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; if (page == null) throw new Error('No page found'); // Helper function to download blob const downloadBlob = (blob: Blob, filename: string) => { const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = filename; anchor.click(); URL.revokeObjectURL(url); }; // PNG uses lossless compression - level 0-9 // Higher levels = smaller files, slower encoding // Quality is identical at all levels const exportPngLevel9 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); downloadBlob(blob, 'export-png-level9.png'); cesdk.ui.showNotification({ message: `PNG Level 9: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; const exportPngLevel5 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 5 }); downloadBlob(blob, 'export-png-level5.png'); cesdk.ui.showNotification({ message: `PNG Level 5: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; // JPEG uses lossy compression - quality 0-1 // Lower values = smaller files, more artifacts const exportJpeg90 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); downloadBlob(blob, 'export-jpeg-90.jpg'); cesdk.ui.showNotification({ message: `JPEG 90%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; const exportJpeg60 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.6 }); downloadBlob(blob, 'export-jpeg-60.jpg'); cesdk.ui.showNotification({ message: `JPEG 60%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; // WebP supports both lossless (1.0) and lossy (<1.0) modes // Typically 20-30% smaller than JPEG at equivalent quality const exportWebp90 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 0.9 }); downloadBlob(blob, 'export-webp-90.webp'); cesdk.ui.showNotification({ message: `WebP 90%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; const exportWebp60 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 0.6 }); downloadBlob(blob, 'export-webp-60.webp'); cesdk.ui.showNotification({ message: `WebP 60%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; // Combine compression with dimension scaling // Useful for creating thumbnails or social media previews const exportScaled = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 6, targetWidth: 1200, targetHeight: 630 }); downloadBlob(blob, 'export-scaled-1200x630.png'); cesdk.ui.showNotification({ message: `Scaled 1200×630: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; // Video export with web-optimized bitrate (720p, 2 Mbps) const exportVideoWeb = async () => { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', videoBitrate: 2_000_000, audioBitrate: 128_000, framerate: 30, targetWidth: 1280, targetHeight: 720 }); downloadBlob(blob, 'export-web-720p.mp4'); cesdk.ui.showNotification({ message: `Video 720p: ${(blob.size / (1024 * 1024)).toFixed(1)} MB`, type: 'success' }); }; // Video export with HD bitrate (1080p, 8 Mbps) const exportVideoHD = async () => { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', videoBitrate: 8_000_000, audioBitrate: 192_000, framerate: 30, targetWidth: 1920, targetHeight: 1080 }); downloadBlob(blob, 'export-hd-1080p.mp4'); cesdk.ui.showNotification({ message: `Video 1080p: ${(blob.size / (1024 * 1024)).toFixed(1)} MB`, type: 'success' }); }; // Configure navigation bar with export dropdown cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.back.navigationBar', 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.zoom.navigationBar', // Actions dropdown with all export options { id: 'ly.img.actions.navigationBar', children: [ // PNG exports { id: 'ly.img.action.navigationBar', key: 'export-png-9', label: 'PNG (Level 9 - Smallest)', icon: '@imgly/Save', onClick: exportPngLevel9 }, { id: 'ly.img.action.navigationBar', key: 'export-png-5', label: 'PNG (Level 5 - Balanced)', icon: '@imgly/Save', onClick: exportPngLevel5 }, // JPEG exports { id: 'ly.img.action.navigationBar', key: 'export-jpeg-90', label: 'JPEG (90% Quality)', icon: '@imgly/Save', onClick: exportJpeg90 }, { id: 'ly.img.action.navigationBar', key: 'export-jpeg-60', label: 'JPEG (60% Quality)', icon: '@imgly/Save', onClick: exportJpeg60 }, // WebP exports { id: 'ly.img.action.navigationBar', key: 'export-webp-90', label: 'WebP (90% Quality)', icon: '@imgly/Save', onClick: exportWebp90 }, { id: 'ly.img.action.navigationBar', key: 'export-webp-60', label: 'WebP (60% Quality)', icon: '@imgly/Save', onClick: exportWebp60 }, // Scaled export { id: 'ly.img.action.navigationBar', key: 'export-scaled', label: 'Scaled (1200×630)', icon: '@imgly/Save', onClick: exportScaled }, // Video exports { id: 'ly.img.action.navigationBar', key: 'export-video-web', label: 'Video 720p (2 Mbps)', icon: '@imgly/Video', onClick: exportVideoWeb }, { id: 'ly.img.action.navigationBar', key: 'export-video-hd', label: 'Video 1080p (8 Mbps)', icon: '@imgly/Video', onClick: exportVideoHD } ] } ]); // eslint-disable-next-line no-console console.log( 'Compression guide initialized. Use the dropdown menu to export in different formats.' ); } } export default Example; ``` This guide covers exporting with compression settings, configuring quality levels, controlling output dimensions, and video compression options. ## Compression Options by Format To compress assets, use `engine.block.export` with format-specific options. Each format supports different parameters for balancing speed, file size, and quality. | Format | Parameter | Type | Effect | Default | | ------ | --------- | ---- | ------ | ------- | | PNG | `pngCompressionLevel` | 0–9 | Higher = smaller, slower (lossless) | 5 | | JPEG | `jpegQuality` | 0.0–1.0 | Lower = smaller, lower quality | 0.9 | | WebP | `webpQuality` | 0.0–1.0 | 1.0 = lossless, below 1.0 = lossy | 1.0 | | MP4 | `videoBitrate`, `audioBitrate` | bits/sec | Higher = larger, higher quality | 0 (auto) | ## Export with Compression Call `engine.block.export()` with format-specific compression options. Each format uses different parameters to control file size and quality. ### PNG Compression PNG uses lossless compression controlled by `pngCompressionLevel` (0-9). Higher values produce smaller files but take longer to encode. Quality remains identical at all levels. ```typescript highlight=highlight-png-compression // PNG uses lossless compression - level 0-9 // Higher levels = smaller files, slower encoding // Quality is identical at all levels const exportPngLevel9 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); downloadBlob(blob, 'export-png-level9.png'); cesdk.ui.showNotification({ message: `PNG Level 9: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; ``` Use level 5-6 for balanced results, or level 9 when file size is critical and encoding time is acceptable. ### JPEG Quality JPEG uses lossy compression controlled by `jpegQuality` (0-1). Lower values produce smaller files with more visible artifacts. ```typescript highlight=highlight-jpeg-quality // JPEG uses lossy compression - quality 0-1 // Lower values = smaller files, more artifacts const exportJpeg90 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); downloadBlob(blob, 'export-jpeg-90.jpg'); cesdk.ui.showNotification({ message: `JPEG 90%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; ``` Quality 0.8 provides a good balance for web delivery. Use 0.9+ for archival or print workflows. ### WebP Quality WebP supports both lossless and lossy modes via `webpQuality` (0-1). At 1.0, WebP uses lossless encoding. Values below 1.0 enable lossy compression. ```typescript highlight=highlight-webp-quality // WebP supports both lossless (1.0) and lossy (<1.0) modes // Typically 20-30% smaller than JPEG at equivalent quality const exportWebp90 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 0.9 }); downloadBlob(blob, 'export-webp-90.webp'); cesdk.ui.showNotification({ message: `WebP 90%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; ``` WebP typically produces 20-30% smaller files than JPEG at equivalent quality, with optional transparency support. ## Target Dimensions Use `targetWidth` and `targetHeight` together to export at specific dimensions. The block renders large enough to fill the target size while maintaining aspect ratio. ```typescript highlight=highlight-target-size // Combine compression with dimension scaling // Useful for creating thumbnails or social media previews const exportScaled = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 6, targetWidth: 1200, targetHeight: 630 }); downloadBlob(blob, 'export-scaled-1200x630.png'); cesdk.ui.showNotification({ message: `Scaled 1200×630: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; ``` Combining dimension scaling with compression produces smaller files suitable for specific platforms like social media thumbnails. ## Navigation Bar Export Menu The example demonstrates configuring the CE.SDK navigation bar with a dropdown menu containing all export options. This approach integrates naturally with the editor UI. ```typescript highlight=highlight-navigation-bar // Configure navigation bar with export dropdown cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.back.navigationBar', 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.zoom.navigationBar', // Actions dropdown with all export options { id: 'ly.img.actions.navigationBar', children: [ // PNG exports { id: 'ly.img.action.navigationBar', key: 'export-png-9', label: 'PNG (Level 9 - Smallest)', icon: '@imgly/Save', onClick: exportPngLevel9 }, { id: 'ly.img.action.navigationBar', key: 'export-png-5', label: 'PNG (Level 5 - Balanced)', icon: '@imgly/Save', onClick: exportPngLevel5 }, // JPEG exports { id: 'ly.img.action.navigationBar', key: 'export-jpeg-90', label: 'JPEG (90% Quality)', icon: '@imgly/Save', onClick: exportJpeg90 }, { id: 'ly.img.action.navigationBar', key: 'export-jpeg-60', label: 'JPEG (60% Quality)', icon: '@imgly/Save', onClick: exportJpeg60 }, // WebP exports { id: 'ly.img.action.navigationBar', key: 'export-webp-90', label: 'WebP (90% Quality)', icon: '@imgly/Save', onClick: exportWebp90 }, { id: 'ly.img.action.navigationBar', key: 'export-webp-60', label: 'WebP (60% Quality)', icon: '@imgly/Save', onClick: exportWebp60 }, // Scaled export { id: 'ly.img.action.navigationBar', key: 'export-scaled', label: 'Scaled (1200×630)', icon: '@imgly/Save', onClick: exportScaled }, // Video exports { id: 'ly.img.action.navigationBar', key: 'export-video-web', label: 'Video 720p (2 Mbps)', icon: '@imgly/Video', onClick: exportVideoWeb }, { id: 'ly.img.action.navigationBar', key: 'export-video-hd', label: 'Video 1080p (8 Mbps)', icon: '@imgly/Video', onClick: exportVideoHD } ] } ]); ``` Each menu item triggers an export with specific compression options and displays the resulting file size via a notification. ## Compress Videos To compress video, use the `VideoExportOptions` structure in the export workflow. You can specify: - **Bitrate**: Mbps for video, kbps for audio - **Frame rate**: fps (frames per second) - **H.264 profile**: Compatibility and feature level - **Target resolution**: Output dimensions in pixels The example includes video export options in the dropdown menu. CE.SDK automatically displays a progress modal during video encoding. ```typescript highlight=highlight-video-export // Video export with web-optimized bitrate (720p, 2 Mbps) const exportVideoWeb = async () => { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', videoBitrate: 2_000_000, audioBitrate: 128_000, framerate: 30, targetWidth: 1280, targetHeight: 720 }); downloadBlob(blob, 'export-web-720p.mp4'); cesdk.ui.showNotification({ message: `Video 720p: ${(blob.size / (1024 * 1024)).toFixed(1)} MB`, type: 'success' }); }; // Video export with HD bitrate (1080p, 8 Mbps) const exportVideoHD = async () => { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', videoBitrate: 8_000_000, audioBitrate: 192_000, framerate: 30, targetWidth: 1920, targetHeight: 1080 }); downloadBlob(blob, 'export-hd-1080p.mp4'); cesdk.ui.showNotification({ message: `Video 1080p: ${(blob.size / (1024 * 1024)).toFixed(1)} MB`, type: 'success' }); }; ``` ### Choose Bitrate Values Adjust bitrate according to your use case: - **Web/social media clips**: 1–2 Mbps - **Downloadable HD video**: 8–12 Mbps - **Automatic optimization**: Set `videoBitrate` to `0` to let CE.SDK choose based on resolution and frame rate ### H.264 Profile Selection The H.264 profile and level determine encoder compatibility and features: - **Baseline**: Mobile-friendly playback - **Main**: Standard HD - **High**: Highest quality (desktop/professional workflows) ## Performance and Trade-Offs Higher compression produces smaller files but has trade-offs: - **Slower export speeds** with higher compression levels - **JPEG and WebP** are faster but can introduce visible artifacts (blurring, color banding) - **Video exports** are resource-consuming and depend on device CPU/GPU performance ### Check Export Limits The EditorAPI provides options to check available export limits before encoding: ```typescript const maxSize = engine.editor.getMaxExportSize(); const availableMemory = engine.editor.getAvailableMemory(); console.log("Max export size:", maxSize, "Memory:", availableMemory); ``` ## Real-World Compression Comparison (1080×1080) | Format | Setting | Avg. File Size | Encode Time | PSNR | Notes | | ------ | ------- | -------------- | ----------- | ---- | ----- | | **PNG** | Level 0 | ~1,450 KB | ~44 ms | ∞ (lossless) | Fastest, largest | | **PNG** | Level 5 | ~1,260 KB | ~61 ms | ∞ | Balanced speed and size | | **PNG** | Level 9 | ~1,080 KB | ~88 ms | ∞ | Smallest, slowest | | **JPEG** | Quality 95 | ~640 KB | ~24 ms | 43 dB | Near-lossless | | **JPEG** | Quality 80 | ~420 KB | ~20 ms | 39 dB | Good default for photos | | **JPEG** | Quality 60 | ~290 KB | ~17 ms | 35 dB | Some artifacts visible | | **WebP** | Quality 95 | ~510 KB | ~27 ms | 44 dB | Smaller than JPEG | | **WebP** | Quality 80 | ~350 KB | ~23 ms | 39 dB | Good web balance | | **WebP** | Lossless | ~830 KB | ~33 ms | ∞ | Smaller than PNG, keeps alpha | *PSNR > 40 dB ≈ visually lossless; 30–35 dB shows mild artifacts.* **Key Takeaways**: - **WebP** achieves 70–85% smaller files than PNG with high quality around 0.8 - **JPEG** performs well for photographs; use 0.8–0.9 for web/print, 0.6 for compact exports - **PNG** is essential for transparency; higher levels reduce size modestly at the cost of speed ## Practical Presets | Use Case | Format | Settings | Notes | | -------- | ------ | -------- | ----- | | **Web/Social Sharing** | JPEG/WebP | `jpegQuality: 0.8` | Balanced quality and size | | **Transparent Assets** | PNG/WebP | `pngCompressionLevel: 6` | Maintains transparency | | **Print/Archival** | PNG | `pngCompressionLevel: 9` | Best fidelity, large files | | **Video for Web** | MP4 | `videoBitrate: 2_000_000` | Smooth playback, small file | | **Video HD Download** | MP4 | `videoBitrate: 8_000_000` | Full HD quality | > **Note:** Consider showing users an **estimated file size** before export. It helps them make informed choices about quality vs. performance. ## Troubleshooting | Issue | Solution | | ----- | -------- | | File size not reduced | Use the correct option name (`jpegQuality`, `webpQuality`) | | JPEG quality too low | Raise quality to 0.9 or switch to PNG/WebP lossless | | Slow export | Lower the compression level—PNG level 5–6 is a good target | | Video not compressing | Set `videoBitrate` to a reasonable non-zero value | ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export(blockId, options)` | Export a block with compression and format options | | `engine.block.exportVideo(blockId, options)` | Export a video with compression settings | | `engine.editor.getMaxExportSize()` | Get maximum export dimensions | | `engine.editor.getAvailableMemory()` | Get available memory for export | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Compare all supported export formats - [Export to PNG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-png-f87eaf/) - Full PNG export options and transparency handling - [Export to JPEG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-jpeg-6f88e9/) - JPEG-specific options for photographs - [Export to WebP](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-webp-aef6f4/) - WebP format with lossless and lossy modes - [Batch Processing](https://img.ly/docs/cesdk/angular/automation/batch-processing-ab2d18/) - Apply compression consistently in automated exports --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Options" description: "Explore export options, supported formats, and configuration features for sharing or rendering output." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) --- Export your designs to multiple formats including PNG, JPEG, WebP, SVG, PDF, and MP4. CE.SDK handles all export processing entirely on the client side, giving you fine-grained control over format-specific options like compression, quality, and target dimensions. ![Export overview showing different export format options](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-overview-browser/) Whether you're building a design tool, photo editor, or content automation workflow, understanding export options helps you deliver the right output for each use case. This guide covers supported formats, their options, and how to export programmatically or via the UI. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-overview-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export Overview Guide * * This example demonstrates: * - Exporting designs to different formats (PNG, JPEG, WebP, PDF) * - Configuring export options (compression, quality, target size) * - Exporting with color masks for print workflows * - Downloading exported files to user device */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load a template scene from a remote URL await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); // Get the page const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Helper function to download blob const downloadBlob = (blob: Blob, filename: string) => { const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = filename; anchor.click(); URL.revokeObjectURL(url); }; // Export to PNG with compression const exportToPng = async () => { const pngBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 5 // 0-9, higher = smaller file, slower }); downloadBlob(pngBlob, 'design.png'); cesdk.ui.showNotification({ message: `PNG exported (${(pngBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export to JPEG with quality setting const exportToJpeg = async () => { const jpegBlob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.9 // 0-1, higher = better quality, larger file }); downloadBlob(jpegBlob, 'design.jpg'); cesdk.ui.showNotification({ message: `JPEG exported (${(jpegBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export to WebP with lossless quality const exportToWebp = async () => { const webpBlob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 1.0 // 1.0 = lossless, smaller files than PNG }); downloadBlob(webpBlob, 'design.webp'); cesdk.ui.showNotification({ message: `WebP exported (${(webpBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export to PDF const exportToPdf = async () => { const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true // Rasterize for broader viewer support }); downloadBlob(pdfBlob, 'design.pdf'); cesdk.ui.showNotification({ message: `PDF exported (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export with target size const exportWithTargetSize = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); downloadBlob(blob, 'design-hd.png'); cesdk.ui.showNotification({ message: `HD export complete (${(blob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export with color mask - removes specified RGB color and creates alpha mask const exportWithColorMask = async () => { // Export with color mask - RGB values are in 0.0-1.0 range // Pure magenta (1.0, 0.0, 1.0) is commonly used for registration marks const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( page, 1.0, // maskColorR - red component 0.0, // maskColorG - green component 1.0, // maskColorB - blue component (RGB: pure magenta) { mimeType: 'image/png' } ); downloadBlob(maskedImage, 'design-masked.png'); downloadBlob(alphaMask, 'design-alpha-mask.png'); cesdk.ui.showNotification({ message: `Color mask export: image (${(maskedImage.size / 1024).toFixed( 1 )} KB) + mask (${(alphaMask.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Configure navigation bar with export buttons cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', onClick: exportToPng, key: 'export-png', label: 'PNG', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportToJpeg, key: 'export-jpeg', label: 'JPEG', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportToWebp, key: 'export-webp', label: 'WebP', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportToPdf, key: 'export-pdf', label: 'PDF', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportWithTargetSize, key: 'export-hd', label: 'HD', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportWithColorMask, key: 'export-mask', label: 'Mask', icon: '@imgly/Save', variant: 'plain', color: 'accent' } ]); cesdk.ui.showNotification({ message: 'Use the export buttons to export in different formats', type: 'info', duration: 'infinite' }); } } export default Example; ``` This guide covers how to export designs in different formats, configure format-specific options, check device limits, and download exports to the user's device. ## Supported Export Formats CE.SDK supports exporting scenes, pages, groups, or individual blocks in these formats: | Format | MIME Type | Transparency | Best For | | ------ | --------- | ------------ | -------- | | PNG | `image/png` | Yes | Web graphics, UI elements, logos | | JPEG | `image/jpeg` | No | Photographs, web images | | WebP | `image/webp` | Yes (lossless) | Web delivery, smaller files | | SVG | `image/svg+xml` | Yes | Scalable graphics, web embedding, post-processing | | PDF | `application/pdf` | Partial | Print, documents | | MP4 | `video/mp4` | No | Video content | | Binary | `application/octet-stream` | Yes | Raw data processing | Each format serves different purposes. PNG preserves transparency and works well for graphics with sharp edges or text. JPEG compresses photographs efficiently but drops transparency. WebP provides excellent compression with optional lossless mode. SVG produces scalable vector output ideal for web embedding and post-processing with standard SVG tooling. PDF preserves vector information for print workflows. MP4 exports animated content as video. ## Export Images ### Export to PNG PNG export uses lossless compression with a configurable compression level. Higher compression produces smaller files but takes longer to encode. Quality is not affected. ```typescript highlight-export-png const pngBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 5 // 0-9, higher = smaller file, slower }); ``` The `pngCompressionLevel` ranges from 0 (no compression, fastest) to 9 (maximum compression, slowest). The default is 5, which balances file size and encoding speed. ### Export to JPEG JPEG export uses lossy compression controlled by the quality setting. Lower quality produces smaller files but introduces visible artifacts. ```typescript highlight-export-jpeg const jpegBlob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.9 // 0-1, higher = better quality, larger file }); ``` The `jpegQuality` ranges from 0 to 1. Values above 0.9 provide excellent quality for most use cases. The default is 0.9. > **Caution:** JPEG drops transparency from exports. Transparent areas render with a solid background, which may produce unexpected results for designs relying on alpha channels. ### Export to WebP WebP provides better compression than PNG or JPEG for web delivery. A quality of 1.0 enables lossless mode. ```typescript highlight-export-webp const webpBlob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 1.0 // 1.0 = lossless, smaller files than PNG }); ``` The `webpQuality` ranges from 0 to 1. At 1.0, WebP uses lossless compression that typically produces smaller files than equivalent PNG exports. ### Export to SVG SVG export produces scalable vector graphics that can be embedded directly in web pages, post-processed with standard SVG tooling, or scaled to any resolution without quality loss. ```typescript const blob = await engine.block.export(page, { mimeType: 'image/svg+xml' }); await cesdk.utils.downloadFile(blob, 'image/svg+xml'); ``` Text is exported as vector paths to ensure consistent rendering across environments without requiring the original fonts. Shapes, strokes, and gradients are exported as native SVG elements. > **Note:** Drop shadows, blur, effects (filters, adjustments), and raster images cannot be represented as native SVG vector elements. These features are rasterized and embedded as PNG images within the SVG. This preserves visual fidelity but increases file size and means those parts of the output are not scalable. > **Note:** SVG export renders a single page. To export a multi-page scene, export each page individually. ### Image Export Options | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `string` | - | Output format: `'image/png'`, `'image/jpeg'`, `'image/webp'`, or `'image/svg+xml'` | | `pngCompressionLevel` | `number` | `5` | PNG compression level (0-9). Higher = smaller file, slower encoding | | `jpegQuality` | `number` | `0.9` | JPEG quality (0-1). Higher = better quality, larger file | | `webpQuality` | `number` | `0.8` | WebP quality (0-1). Set to 1.0 for lossless compression | | `targetWidth` | `number` | - | Target output width in pixels | | `targetHeight` | `number` | - | Target output height in pixels | ## Export PDF PDF export preserves vector information and supports print workflows. The high compatibility option rasterizes content for broader viewer support. ```typescript highlight-export-pdf const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true // Rasterize for broader viewer support }); ``` When `exportPdfWithHighCompatibility` is `true` (the default), images and effects are rasterized according to the scene's DPI setting. Set it to `false` for faster exports, though gradients with transparency may not render correctly in Safari or macOS Preview. The underlayer options are useful for print workflows where you need a solid base layer (often white ink) beneath the design elements. The `underlayerSpotColorName` should match a spot color defined in your print workflow. ### PDF Export Options | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `string` | - | Must be `'application/pdf'` | | `exportPdfWithHighCompatibility` | `boolean` | `true` | Rasterize images and effects (like gradients) according to the scene's DPI setting for broader viewer support | | `exportPdfWithUnderlayer` | `boolean` | `false` | Add an underlayer behind existing elements matching the shape of page content | | `underlayerSpotColorName` | `string` | `''` | Spot color name for the underlayer fill (used with print workflows) | | `underlayerOffset` | `number` | `0` | Size adjustment for the underlayer shape in design units | | `targetWidth` | `number` | - | Target output width in pixels | | `targetHeight` | `number` | - | Target output height in pixels | ## Export with Color Mask Color mask export removes pixels matching a specific RGB color and generates two output files: the masked image with transparency applied, and an alpha mask showing which pixels were removed. ```typescript highlight-export-color-mask // Export with color mask - RGB values are in 0.0-1.0 range // Pure magenta (1.0, 0.0, 1.0) is commonly used for registration marks const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( page, 1.0, // maskColorR - red component 0.0, // maskColorG - green component 1.0, // maskColorB - blue component (RGB: pure magenta) { mimeType: 'image/png' } ); ``` The `exportWithColorMask()` method accepts the block to export, three RGB color components (0.0-1.0 range), and optional export options. RGB values use floating-point notation where 1.0 equals 255 in standard color notation. Common mask colors for print workflows: - Pure red: `(1.0, 0.0, 0.0)` — Registration marks - Pure magenta: `(1.0, 0.0, 1.0)` — Distinctive marker color - Pure cyan: `(0.0, 1.0, 1.0)` — Alternative marker color The method returns a Promise resolving to an array of two Blobs: the masked image (with matched pixels made transparent) and the alpha mask (black pixels for removed areas, white for retained areas). > **Note:** Color matching is exact. Only pixels with RGB values precisely matching the specified color are removed. Anti-aliased edges or color variations will not be affected. ### Color Mask Export Options The `exportWithColorMask()` method accepts the same options as image export: | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `string` | `'image/png'` | Output format: `'image/png'`, `'image/jpeg'`, or `'image/webp'` | | `pngCompressionLevel` | `number` | `5` | PNG compression level (0-9) | | `jpegQuality` | `number` | `0.9` | JPEG quality (0-1) | | `webpQuality` | `number` | `0.8` | WebP quality (0-1) | | `targetWidth` | `number` | - | Target output width in pixels | | `targetHeight` | `number` | - | Target output height in pixels | ## Export Video Video export uses the H.264 codec and outputs MP4 or QuickTime files. Unlike image exports, video exports accept a progress callback to track encoding status. ```typescript const page = engine.scene.getCurrentPage(); const videoBlob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (rendered, encoded, total) => { console.log(`Progress: ${Math.round((encoded / total) * 100)}%`); } }); ``` ### Video Export Options Configure video encoding with these options: | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `'video/mp4'` | `'video/quicktime'` | `'video/mp4'` | Output video format | | `h264Profile` | `number` | `77` (Main) | H.264 profile: 66=Baseline, 77=Main, 100=High | | `h264Level` | `number` | `52` | Encoding level (multiply desired level by 10, e.g., 52 = level 5.2) | | `videoBitrate` | `number` | `0` (auto) | Video bitrate in bits/second. Maximum determined by profile and level | | `audioBitrate` | `number` | `0` (auto) | Audio bitrate in bits/second. Default auto-selects 128kbps for stereo AAC | | `framerate` | `number` | `30` | Target framerate in Hz | | `targetWidth` | `number` | - | Output width in pixels | | `targetHeight` | `number` | - | Output height in pixels | | `timeOffset` | `number` | `0` | Start time offset in seconds | | `duration` | `number` | scene duration | Video duration in seconds | | `allowTextOverhang` | `boolean` | `false` | Include text bounding boxes that account for glyph overhangs | | `abortSignal` | `AbortSignal` | - | Signal to cancel export | The `h264Profile` determines encoder quality and compatibility: - **Baseline (66)**: Broadest device compatibility, lowest quality - **Main (77)**: Good balance of quality and compatibility (default) - **High (100)**: Best quality, may not play on older devices > **Caution:** H.264 does not support transparency. Transparent areas render with a black background. ## Export Audio Export audio tracks from pages or audio blocks. Supported formats are WAV (uncompressed) and MP4 (AAC encoded). ```typescript const page = engine.scene.getCurrentPage(); const audioBlob = await engine.block.exportAudio(page, { mimeType: 'audio/mp4', // or 'audio/wav' onProgress: (rendered, encoded, total) => { console.log(`Progress: ${Math.round((encoded / total) * 100)}%`); } }); ``` ### Audio Export Options Configure audio export with these options: | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `'audio/wav'` | `'audio/mp4'` | `'audio/wav'` | Output audio format | | `sampleRate` | `number` | `48000` | Sample rate in Hz | | `numberOfChannels` | `number` | `2` | Number of audio channels (1=mono, 2=stereo) | | `timeOffset` | `number` | `0` | Start time offset in seconds | | `duration` | `number` | block duration | Audio duration in seconds | | `skipEncoding` | `boolean` | `false` | Return raw audio data without encoding | | `abortSignal` | `AbortSignal` | - | Signal to cancel export | Use `audio/wav` for lossless quality when file size is not a concern. Use `audio/mp4` (AAC) for compressed output suitable for web delivery. > **Note:** Audio export extracts and processes audio from all audio-capable blocks within the target block, including video fills with audio tracks and standalone audio blocks. ## Target Size Control You can export 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. ```typescript highlight-export-target-size const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); ``` If the target aspect ratio differs from the block's aspect ratio, the output fills the target dimensions completely. The output may extend beyond the target size on one axis to preserve correct proportions. ## Device Export Limits Before exporting large designs, check the device's export capabilities. Memory constraints or GPU limitations may prevent exports that exceed certain dimensions. ```typescript const maxExportSize = engine.editor.getMaxExportSize(); const availableMemory = engine.editor.getAvailableMemory(); console.log(`Max dimension: ${maxExportSize}px`); console.log(`Available memory: ${availableMemory / 1024 / 1024} MB`); ``` `getMaxExportSize()` returns the maximum width or height in pixels. Both dimensions must stay below this limit. `getAvailableMemory()` returns available memory in bytes, helping you assess whether large exports are feasible. > **Note:** The max export size is an upper bound. Exports may still fail due to memory constraints even when within size limits. For high-resolution exports, consider checking available memory first. ## Built-in Export Action CE.SDK provides a built-in `exportDesign` action that handles export with progress dialogs and error handling. Use `cesdk.utils.export()` to export and `cesdk.utils.downloadFile()` to download the result. Export an image: ```typescript const { blobs, options } = await cesdk.utils.export({ mimeType: 'image/png' }); await cesdk.utils.downloadFile(blobs[0], options.mimeType); ``` Export a PDF: ```typescript const { blobs, options } = await cesdk.utils.export({ mimeType: 'application/pdf' }); await cesdk.utils.downloadFile(blobs[0], options.mimeType); ``` Export a video: ```typescript const { blobs, options } = await cesdk.utils.export({ mimeType: 'video/mp4' }); await cesdk.utils.downloadFile(blobs[0], options.mimeType); ``` ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export()` | Export a block with format and quality options | | `engine.block.exportWithColorMask()` | Export a block with specific RGB color removed, returning masked image and alpha mask | | `engine.block.exportVideo()` | Export a page as video with encoding options | | `engine.block.exportAudio()` | Export audio from a page or audio block | | `engine.editor.getMaxExportSize()` | Get maximum export dimension in pixels | | `engine.editor.getAvailableMemory()` | Get available memory in bytes | | `cesdk.utils.export()` | Export with progress dialog and error handling | | `cesdk.utils.downloadFile()` | Download a blob or string to the user's device | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Partial Export" description: "Documentation for Partial Export" platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [Partial Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/) --- 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](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-partial-export-browser/) 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. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-partial-export-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK cesdk method await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); 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 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.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ '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 ### 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 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. > **Note:** 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 ### 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 Here we export a single image block as PNG with compression settings. The export returns a Blob containing the image data. ```typescript highlight-export-individual-block // 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(); ``` 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 ### 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. ```typescript highlight-create-and-export-group // 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(); ``` 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 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. ```typescript // Get currently selected blocks const 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 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. ```typescript highlight-export-current-page // 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(); ``` 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 ### 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 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 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 ### 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](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) for detailed performance guidance. ### 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 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 | Method | Description | | --- | --- | | `engine.block.export()` | Export a block with specified format and quality options | | `engine.block.findByType()` | Find blocks by type identifier | | `engine.block.group()` | Group multiple blocks into a single logical unit | | `engine.scene.getPages()` | Get all pages in the current scene | | `engine.editor.getMaxExportSize()` | Get maximum export dimension in pixels | | `engine.editor.getAvailableMemory()` | Get available engine memory in bytes | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Size Limits" description: "Configure and understand CE.SDK's image and video size limits for both input and export to optimize performance and memory usage." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) --- Configure size limits to balance quality and performance in CE.SDK applications. ![Size Limits example showing CE.SDK with maxImageSize configuration](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-size-limits-browser/) CE.SDK processes images and videos client-side, which means size limits depend on the user's GPU capabilities and available memory. Understanding and configuring these limits helps you build applications that deliver high-quality results while maintaining smooth performance across different devices. ```typescript file=@cesdk_web_examples/guides-export-save-publish-size-limits-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Add export image action to navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: ['ly.img.exportImage.navigationBar'] } ); const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // ===== Section 1: Reading Current maxImageSize ===== // Get the current maxImageSize setting const currentMaxSize = engine.editor.getSetting('maxImageSize'); console.log('Current maxImageSize:', currentMaxSize); // Default is 4096 pixels // ===== Section 2: Setting Different maxImageSize Values ===== // Configure maxImageSize for different use cases // This must be set BEFORE loading images to ensure they're downscaled // Low memory devices (mobile, tablets) - use 2048 for safety engine.editor.setSetting('maxImageSize', 2048); // High quality (professional workflows, desktop) // engine.editor.setSetting('maxImageSize', 8192); console.log( 'Updated maxImageSize:', engine.editor.getSetting('maxImageSize') ); // ===== Section 3: Observing Settings Changes ===== // Subscribe to settings changes to update UI when maxImageSize changes engine.editor.onSettingsChanged(() => { const newMaxSize = engine.editor.getSetting('maxImageSize'); console.log('maxImageSize changed to:', newMaxSize); // In a real app, update UI here to reflect the new setting }); // The subscription returns an unsubscribe function if you need to clean up later // const unsubscribe = engine.editor.onSettingsChanged(() => { ... }); // unsubscribe(); // Call when no longer needed // ===== Section 4: GPU Capability Detection (Web) ===== // Query GPU max texture size to understand export limits const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl2') || canvas.getContext('webgl'); if (gl) { const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); console.log('GPU Max Texture Size:', maxTextureSize); console.log( 'Safe export dimensions: up to', maxTextureSize, '×', maxTextureSize ); // Most modern GPUs support 4096×4096 to 16384×16384 // Safe baseline is 4096×4096 for universal compatibility } // ===== Section 5: Pre-Export Size Validation ===== // Calculate actual export dimensions including all content // Get bounding box of all content to check actual export size const allBlocks = engine.block.findByType('//ly.img.ubq/graphic'); let maxRight = 0; let maxBottom = 0; allBlocks.forEach((blockId) => { const x = engine.block.getPositionX(blockId); const y = engine.block.getPositionY(blockId); const width = engine.block.getWidth(blockId); const height = engine.block.getHeight(blockId); maxRight = Math.max(maxRight, x + width); maxBottom = Math.max(maxBottom, y + height); }); const exportWidth = Math.max(engine.block.getWidth(page), maxRight); const exportHeight = Math.max(engine.block.getHeight(page), maxBottom); console.log('Export dimensions:', exportWidth, '×', exportHeight); if (gl) { const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); // Use conservative limit (50% of max) for actual VRAM availability const safeTextureSize = Math.floor(maxTextureSize * 0.5); if (exportWidth > safeTextureSize || exportHeight > safeTextureSize) { cesdk.ui.showNotification({ type: 'warning', message: `Export dimensions (${Math.round(exportWidth)}×${Math.round( exportHeight )}) exceed safe GPU limit (${safeTextureSize}×${safeTextureSize})` }); } else { cesdk.ui.showNotification({ type: 'success', message: 'Export dimensions are within safe limits' }); } } // ===== Section 6: Handling Export Errors ===== // Demonstrate proper error handling for size-related export failures try { // Example export operation (not actually exporting in this demo) // const blob = await engine.block.export(page, 'image/png'); // If export fails, catch and handle the error console.log('Export would proceed here with proper error handling'); } catch (error) { console.error('Export failed:', error); // Check if error is size-related if ( error instanceof Error && (error.message.includes('texture') || error.message.includes('size') || error.message.includes('memory')) ) { console.error('Size-related export error detected'); console.error('Suggested remediation:'); console.error('1. Reduce output dimensions'); console.error('2. Decrease maxImageSize setting'); console.error('3. Use export compression options'); } } // Add an image to the page for demonstration // Note: NOT specifying size here - let maxImageSize control the texture loading const imageBlock = await engine.block.addImage(imageUri); engine.block.appendChild(page, imageBlock); // Fit image to page dimensions engine.block.setWidth(imageBlock, 800); engine.block.setHeight(imageBlock, 600); // Position image to fill the page (already matches page dimensions) engine.block.setPositionX(imageBlock, 0); engine.block.setPositionY(imageBlock, 0); // Zoom to fit the content engine.scene.zoomToBlock(page, { padding: 40 }); // Display information in console console.log('=== Size Limits Configuration Summary ==='); console.log( 'Current maxImageSize:', engine.editor.getSetting('maxImageSize') ); console.log( 'Page dimensions:', engine.block.getWidth(page), '×', engine.block.getHeight(page) ); console.log( 'Image dimensions:', engine.block.getWidth(imageBlock), '×', engine.block.getHeight(imageBlock) ); if (gl) { const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); console.log('GPU max texture size:', maxTextureSize); } } } export default Example; ``` This guide covers how to configure the `maxImageSize` setting, query GPU capabilities, validate export dimensions, and handle size-related errors gracefully. ## Understanding Size Limits CE.SDK manages size limits at two stages: **input** (when loading images) and **output** (when exporting). The `maxImageSize` setting controls input resolution, automatically downscaling images that exceed the configured limit (default: 4096×4096px). This reduces memory usage and improves performance across devices. Export resolution has no artificial limits—the theoretical maximum is 16,384×16,384 pixels, constrained only by GPU texture size, available VRAM, and platform capabilities (WebGL/WebGPU on web, Metal/OpenGL on native). ## Resolution & Duration Limits ## Configuring maxImageSize You can read and modify the `maxImageSize` setting using the Settings API to match your application's requirements and target hardware capabilities. ### Reading the Current Setting To check what `maxImageSize` value is currently configured: ```typescript highlight-get-max-image-size // Get the current maxImageSize setting const currentMaxSize = engine.editor.getSetting('maxImageSize'); console.log('Current maxImageSize:', currentMaxSize); // Default is 4096 pixels ``` This returns the maximum size in pixels as an integer value (e.g., `4096` for the default 4096×4096 limit). You might display this value in your UI to inform users about the current quality settings, or use it to make runtime decisions about asset loading strategies. ### Setting a New Value Configure `maxImageSize` to minimize memory usage on constrained devices: ```typescript highlight-set-max-image-size // Configure maxImageSize for different use cases // This must be set BEFORE loading images to ensure they're downscaled // Low memory devices (mobile, tablets) - use 2048 for safety engine.editor.setSetting('maxImageSize', 2048); // High quality (professional workflows, desktop) // engine.editor.setSetting('maxImageSize', 8192); console.log( 'Updated maxImageSize:', engine.editor.getSetting('maxImageSize') ); ``` The setting takes effect immediately for newly loaded images. Images already loaded on the canvas retain their current resolution until reloaded. ### Observing Settings Changes Subscribe to setting changes to update your UI when `maxImageSize` is modified: ```typescript highlight-observe-settings-changes // Subscribe to settings changes to update UI when maxImageSize changes engine.editor.onSettingsChanged(() => { const newMaxSize = engine.editor.getSetting('maxImageSize'); console.log('maxImageSize changed to:', newMaxSize); // In a real app, update UI here to reflect the new setting }); // The subscription returns an unsubscribe function if you need to clean up later // const unsubscribe = engine.editor.onSettingsChanged(() => { ... }); // unsubscribe(); // Call when no longer needed ``` This callback fires whenever any setting changes through the Settings API. You can use it to update quality indicators in your interface, recalculate memory estimates, or trigger asset reloading with the new size limit. ## GPU Capability Detection Modern browsers expose GPU capabilities through WebGL, allowing you to determine safe export dimensions for the user's hardware. ```typescript highlight-query-gpu-capabilities // Query GPU max texture size to understand export limits const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl2') || canvas.getContext('webgl'); if (gl) { const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); console.log('GPU Max Texture Size:', maxTextureSize); console.log( 'Safe export dimensions: up to', maxTextureSize, '×', maxTextureSize ); // Most modern GPUs support 4096×4096 to 16384×16384 // Safe baseline is 4096×4096 for universal compatibility } ``` The `MAX_TEXTURE_SIZE` parameter returns the maximum width or height (in pixels) for a texture on the current GPU. Most modern GPUs support 4096×4096 to 16384×16384, while older or integrated GPUs may be limited to smaller dimensions. You can use this information to: - Set conservative `maxImageSize` defaults based on detected capabilities - Show warnings when users attempt exports that may exceed hardware limits - Provide quality presets that match the device's capabilities - Calculate safe export dimensions automatically ## Troubleshooting Common issues and solutions when working with size limits: | Issue | Cause | Solution | | ------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------- | | Images appear blurry/low quality | `maxImageSize` too low | Increase `maxImageSize` if GPU supports it (query `MAX_TEXTURE_SIZE` first) | | Out of memory errors during editing | `maxImageSize` too high | Decrease `maxImageSize` to reduce memory footprint | | Export fails with no error message | Output exceeds GPU texture limit | Reduce export dimensions or query `MAX_TEXTURE_SIZE` to set safe maximums | | Video export fails | Resolution/duration too high | Export at 1080p instead of 4K, or reduce video duration to under 2 minutes | | Inconsistent results across devices | Different GPU capabilities | Set conservative `maxImageSize` (4096) or detect capabilities programmatically | | Images load slowly | High `maxImageSize` on slow hardware | Lower `maxImageSize` to reduce processing time, especially on mobile devices | | Export succeeds but file is too large | No compression applied | Use JPEG format with quality settings, or apply PNG compression options | ## API Reference Core methods for managing size limits and export operations: | Method | Description | | ------------------------------- | --------------------------------------- | | `engine.editor.getSetting()` | Retrieves the current value of a setting | | `engine.editor.setSetting()` | Updates a setting value | | `engine.editor.onSettingsChanged()` | Subscribes to setting change events | | `engine.block.export()` | Exports a block as an image or video | | `engine.block.getWidth()` | Gets the width of a block in pixels | | `engine.block.getHeight()` | Gets the height of a block in pixels | ## Next Steps Explore related guides to build complete export workflows: - [Settings Guide](https://img.ly/docs/cesdk/angular/settings-970c98/) - Complete Settings API reference and configuration options - [File Format Support](https://img.ly/docs/cesdk/angular/file-format-support-3c4b2a/) - Supported image and video formats with capabilities - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Fundamentals of exporting images and videos from CE.SDK - [Export to PDF](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) - PDF export guide with multi-page support and print optimization --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export to HTML5" description: "Export CE.SDK designs as HTML5 bundles with customizable output for display ads and interactive web content." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/to-html5-76d2ab/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [To HTML5](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-html5-76d2ab/) > [Plugins](https://img.ly/docs/cesdk/angular/plugins-693c48/) > [HTML5 Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-html5-76d2ab/) --- Export CE.SDK designs as HTML5 bundles containing HTML, images and fonts — ready for distribution as display ads or interactive web content. ![Export to HTML5](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-export-save-publish-export-to-html5-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-html5-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-html5-browser/) The `@imgly/html-exporter` package converts a CE.SDK scene page into an HTML5 bundle using `exportHtml(engine, options)`. The result is a `FileMap` — a standard `Map` extended with a `toZip()` method — that you can inspect, customize with additional files and scripts, then package as a ZIP for delivery. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-html5-browser/browser.ts reference-only import type { CreativeEngine, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; import { exportHtml, injectGsapPlayer } from '@imgly/html-exporter'; 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 the video editor config (provides full UI: navigation, dock, inspector, canvas, panels) await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins (populates editor panels with content) await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: ['ly.img.image.*'] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a video scene (enables animation timeline) await cesdk.actions.run('scene.create', { mode: 'Video' }); const engine = cesdk.engine; // Register an "Export HTML5" button in the navigation bar let isExporting = false; cesdk.ui.registerComponent( 'ly.img.html5-export.navigationBar', ({ builder }) => { builder.Button('html5-export-preview', { color: 'accent', variant: 'regular', label: 'Export and Preview HTML5', isLoading: isExporting, isDisabled: isExporting, onClick: async () => { if (isExporting) return; isExporting = true; try { await previewHtml5(engine); } finally { isExporting = false; } } }); builder.Button('html5-export-download', { variant: 'regular', label: 'Download ZIP', isLoading: isExporting, isDisabled: isExporting, onClick: async () => { if (isExporting) return; isExporting = true; try { await downloadHtml5Zip(engine); } finally { isExporting = false; } } }); } ); // Add the export buttons to the navigation bar cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.zoom.navigationBar', 'ly.img.html5-export.navigationBar' ]); } } async function previewHtml5(engine: CreativeEngine) { // Export as a single self-contained HTML file (base64-embedded assets) const embeddedResult = await exportHtml(engine, { format: 'embedded', pageIndex: 0 }); // Inject the GSAP library to make animations playable const htmlFile = embeddedResult.files.get('index.html'); const htmlContent = typeof htmlFile!.content === 'string' ? htmlFile!.content : new TextDecoder().decode(htmlFile!.content); const playableHtml = injectGsapPlayer(htmlContent); // Open a preview in a new browser tab const previewBlob = new Blob([playableHtml], { type: 'text/html' }); window.open(URL.createObjectURL(previewBlob), '_blank'); } async function downloadHtml5Zip(engine: CreativeEngine) { const page = engine.block.findByType('page')[0]; // Export the first page as an external HTML5 bundle (HTML + separate assets) const externalResult = await exportHtml(engine, { format: 'external', pageIndex: 0 }); // The result contains a FileMap with all generated files console.log('External export files:'); for (const [path] of externalResult.files) { console.log(` ${path}`); } // Check for warnings or errors during export if (externalResult.messages && externalResult.messages.length > 0) { for (const msg of externalResult.messages) { console.log(`[${msg.type}] ${msg.message}`); } } // Read the index.html from the external export and inject metadata let html = externalResult.files.get('index.html')!.content as string; // Inject an ad.size meta tag into the const pageWidth = Math.round(engine.block.getWidth(page)); const pageHeight = Math.round(engine.block.getHeight(page)); html = html.replace( '', ` \n` ); // Inject a click-tracking script before const clickScript = ` `; html = html.replace('', clickScript + '\n'); // Write the modified HTML back to the FileMap externalResult.files.set('index.html', { content: html, mimeType: 'text/html' }); // Add a manifest.json describing the bundle externalResult.files.set('manifest.json', { content: JSON.stringify( { version: '1.0', title: 'My Creative', width: pageWidth, height: pageHeight, source: 'index.html' }, null, 2 ), mimeType: 'application/json' }); // Generate a static backup image and add it to the bundle const backupBlob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.8, targetWidth: pageWidth, targetHeight: pageHeight }); const backupBytes = new Uint8Array(await backupBlob.arrayBuffer()); externalResult.files.set('backup.jpg', { content: backupBytes, mimeType: 'image/jpeg' }); // Package all files as a ZIP and trigger a browser download const zip = await externalResult.files.toZip(); const downloadBlob = new Blob([zip.buffer as ArrayBuffer], { type: 'application/zip' }); const a = document.createElement('a'); a.href = URL.createObjectURL(downloadBlob); a.download = 'html5-export.zip'; a.click(); } export default Example; ``` This guide covers exporting scenes as HTML5, choosing between external and embedded formats, injecting GSAP for animated playback, and customizing the output with click tracking, metadata, and extra files. ## Getting Started Install the `@imgly/html-exporter` package and import `exportHtml` and optionally `injectGsapPlayer`. ```typescript highlight=highlight-import import { exportHtml, injectGsapPlayer } from '@imgly/html-exporter'; ``` ## Exporting a Scene Page Call `exportHtml()` with the engine instance and an options object. The `pageIndex` option (0-based) selects which page to export. Each call exports one page. ```typescript highlight=highlight-export-external // Export the first page as an external HTML5 bundle (HTML + separate assets) const externalResult = await exportHtml(engine, { format: 'external', pageIndex: 0 }); // The result contains a FileMap with all generated files console.log('External export files:'); for (const [path] of externalResult.files) { console.log(` ${path}`); } // Check for warnings or errors during export if (externalResult.messages && externalResult.messages.length > 0) { for (const msg of externalResult.messages) { console.log(`[${msg.type}] ${msg.message}`); } } ``` The returned `ExportHtmlResult` contains `files` (a `FileMap` of generated files) and `messages` (an array of `LogMessage` objects with any warnings or errors from the export process). ### Export Options | Option | Type | Default | Description | |--------|------|---------|-------------| | `format` | `'external' \| 'embedded'` | `'external'` | Output format | | `pageIndex` | `number` | (required) | 0-based page index | | `quality` | `number` | `90` | WebP image quality 0–100 | | `animated` | `boolean \| 'auto'` | `'auto'` | Generate GSAP animation timeline | | `insertExplicitLineBreaks` | `boolean` | `true` | Insert `
` at CE.SDK line breaks | | `useSyntheticIds` | `boolean` | `false` | Stable deterministic element IDs | | `abortSignal` | `AbortSignal` | — | Cancel the export | ## Choosing a Format: External vs Embedded The **external** format (default) writes `index.html` plus separate image and font files. Use this for production delivery — each file is individually cacheable and the total size is transparent for validation. The **embedded** format inlines all assets as base64 data URLs into a single `index.html`. Use this for in-browser preview or sharing a single file. ```typescript highlight=highlight-export-embedded // Export as a single self-contained HTML file (base64-embedded assets) const embeddedResult = await exportHtml(engine, { format: 'embedded', pageIndex: 0 }); ``` ## Animated Exports and GSAP Injection When `animated` is `'auto'` (the default), the exporter checks the scene mode and generates a GSAP animation timeline for video scenes. The timeline is embedded as an inline script in the HTML output. To make it playable, inject the GSAP library from a CDN using `injectGsapPlayer()`. ```typescript highlight=highlight-gsap-injection // Inject the GSAP library to make animations playable const htmlFile = embeddedResult.files.get('index.html'); const htmlContent = typeof htmlFile!.content === 'string' ? htmlFile!.content : new TextDecoder().decode(htmlFile!.content); const playableHtml = injectGsapPlayer(htmlContent); // Open a preview in a new browser tab const previewBlob = new Blob([playableHtml], { type: 'text/html' }); window.open(URL.createObjectURL(previewBlob), '_blank'); ``` `injectGsapPlayer()` accepts optional overrides: - **`gsapUrl`** — Custom GSAP CDN URL (default: jsDelivr 3.x). Some platforms whitelist specific CDN URLs and exempt them from file-size limits. - **`splitTextUrl`** — Custom SplitText CDN URL, or `false` to disable auto-injection. - **`autoplay`** — Whether to inject the autoplay loop script (default: `true`). ## Customizing the Output The `FileMap` returned by `exportHtml()` is a standard `Map` extended with `toZip()`. Use `files.get()`, `files.set()`, and `files.delete()` to read, add, or remove files before packaging. Each `ExportFile` has a `content` property (`string` or `Uint8Array`) and an optional `mimeType`. ### Modifying the HTML We read the `index.html` content as a string, use `String.replace()` to inject an `ad.size` meta tag before `` and a click-tracking script before ``, then write it back with `files.set()`. ```typescript highlight=highlight-customize-html // Read the index.html from the external export and inject metadata let html = externalResult.files.get('index.html')!.content as string; // Inject an ad.size meta tag into the const pageWidth = Math.round(engine.block.getWidth(page)); const pageHeight = Math.round(engine.block.getHeight(page)); html = html.replace( '', ` \n` ); // Inject a click-tracking script before const clickScript = ` `; html = html.replace('', clickScript + '\n'); // Write the modified HTML back to the FileMap externalResult.files.set('index.html', { content: html, mimeType: 'text/html' }); ``` The same pattern works for injecting any content — tracking pixels, analytics beacons, platform SDK scripts, or additional stylesheets. ### Adding Extra Files We add a `manifest.json` describing the bundle dimensions and entry point, then generate a static JPEG backup image using `engine.block.export()` and include it in the bundle. ```typescript highlight=highlight-add-files // Add a manifest.json describing the bundle externalResult.files.set('manifest.json', { content: JSON.stringify( { version: '1.0', title: 'My Creative', width: pageWidth, height: pageHeight, source: 'index.html' }, null, 2 ), mimeType: 'application/json' }); // Generate a static backup image and add it to the bundle const backupBlob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.8, targetWidth: pageWidth, targetHeight: pageHeight }); const backupBytes = new Uint8Array(await backupBlob.arrayBuffer()); externalResult.files.set('backup.jpg', { content: backupBytes, mimeType: 'image/jpeg' }); ``` You can add any file to the bundle this way — data feed templates, custom fonts, or platform-specific configuration files. ## Packaging and Downloading After all customizations, call `files.toZip()` to produce a `Uint8Array` containing the ZIP archive. We wrap it in a `Blob` and trigger a browser download. ```typescript highlight=highlight-download-zip // Package all files as a ZIP and trigger a browser download const zip = await externalResult.files.toZip(); const downloadBlob = new Blob([zip.buffer as ArrayBuffer], { type: 'application/zip' }); const a = document.createElement('a'); a.href = URL.createObjectURL(downloadBlob); a.download = 'html5-export.zip'; a.click(); ``` ## Troubleshooting **Exported HTML is blank** — Verify `pageIndex` is within bounds by checking `engine.block.findByType('page').length`. Review `result.messages` for warnings about unsupported blocks. **Animations do not play** — Ensure the scene mode is `'Video'` or set `animated: true` explicitly. Call `injectGsapPlayer()` on the HTML string before opening it in a browser. Verify the GSAP CDN URL is reachable. **Bundle rejected for file size** — Use the external format instead of embedded, which inflates size through base64 encoding. Reduce the `quality` option for smaller image assets. Remove unused files from the `FileMap` before calling `toZip()`. **Missing click tracking or metadata** — Inject the click-tracking script required by your target platform before ``. Add required meta tags to `` and include a `manifest.json` if the platform requires one. ## API Reference | Method / Type | Description | |---------------|-------------| | `exportHtml(engine, options)` | Export a scene page as HTML5 | | `injectGsapPlayer(html, options?)` | Inject GSAP CDN and autoplay script | | `FileMap` | Map of export files extending `Map` | | `FileMap.prototype.toZip()` | Package all files as a ZIP (`Uint8Array`) | | `ExportHtmlOptions` | Options interface for `exportHtml()` | | `ExportHtmlResult` | Result with `files` and `messages` | | `ExportFile` | File entry with `content` and optional `mimeType` | | `LogMessage` | Export message with `message` and `type` | | `engine.block.export(block, options)` | Export a block as an image | | `engine.block.findByType('page')` | Find all pages in the scene | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) — Compare all available export formats - [Export to MP4](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-mp4-c998a8/) — Export animations as video - [Export to PNG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-png-f87eaf/) — Export as a static image - [Compress Exports](https://img.ly/docs/cesdk/angular/export-save-publish/export/compress-29105e/) — Optimize file sizes --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To JPEG" description: "Export CE.SDK designs to JPEG format with configurable quality settings for photographs, web images, and social media content." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/to-jpeg-6f88e9/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [To JPEG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-jpeg-6f88e9/) --- Export CE.SDK designs to JPEG format—ideal for photographs, social media, and web content where file size matters more than transparency. ![Export to JPEG](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-jpeg-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-jpeg-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-jpeg-browser/) JPEG uses lossy compression optimized for photographs and smooth color gradients. Unlike PNG, JPEG does not support transparency—transparent areas render with a solid background. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-jpeg-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage()!; // Zoom to fit page in view await engine.scene.zoomToBlock(page); cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', onClick: async () => { await cesdk.actions.run('exportDesign', { mimeType: 'image/jpeg', jpegQuality: 0.9 }); }, key: 'export-action', label: 'Export', icon: '@imgly/Download' }, { id: 'ly.img.action.navigationBar', onClick: async () => { const currentPage = engine.scene.getCurrentPage()!; const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); cesdk.ui.showNotification({ message: `Standard (${(exported.size / 1024).toFixed(0)} KB)`, type: 'success' }); }, key: 'export-standard', label: 'Standard', icon: '@imgly/Save' }, { id: 'ly.img.action.navigationBar', onClick: async () => { const currentPage = engine.scene.getCurrentPage()!; const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 1.0 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); cesdk.ui.showNotification({ message: `High Quality (${(exported.size / 1024).toFixed( 0 )} KB)`, type: 'success' }); }, key: 'export-high', label: 'High Quality', icon: '@imgly/Save' }, { id: 'ly.img.action.navigationBar', onClick: async () => { const currentPage = engine.scene.getCurrentPage()!; const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); cesdk.ui.showNotification({ message: `1920×1080 (${(exported.size / 1024).toFixed(0)} KB)`, type: 'success' }); }, key: 'export-hd', label: '1920×1080', icon: '@imgly/Save' } ] } ); cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage()!; const jpeg = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); await cesdk.utils.downloadFile(jpeg, 'image/jpeg'); }); } } export default Example; ``` This guide covers exporting to JPEG, configuring quality and dimensions, and integrating CE.SDK's built-in export action. ## Export to JPEG Export a design block to JPEG by calling `engine.block.export()` with `mimeType: 'image/jpeg'`. Use `cesdk.utils.downloadFile()` to trigger a browser download. ```typescript highlight=highlight-export-jpeg const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); ``` The `jpegQuality` parameter accepts values from greater than 0 to 1. Higher values produce better quality at larger file sizes. The default is 0.9. ## Export Options JPEG export supports these configuration options: | Option | Type | Default | Description | |--------|------|---------|-------------| | `mimeType` | `string` | `'image/png'` | Set to `'image/jpeg'` for JPEG | | `jpegQuality` | `number` | `0.9` | Quality from >0 to 1 | | `targetWidth` | `number` | — | Output width in pixels | | `targetHeight` | `number` | — | Output height in pixels | ### Quality Control Set `jpegQuality` to 1.0 for maximum quality with minimal compression artifacts. This is useful for archival or print preparation. ```typescript highlight=highlight-export-quality const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 1.0 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); ``` For web delivery, values around 0.8 balance quality and file size effectively. ### Target Dimensions Specify `targetWidth` and `targetHeight` to export at exact dimensions. The output fills the target size while maintaining aspect ratio. ```typescript highlight=highlight-export-size const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); ``` ## Built-in Export Action CE.SDK includes a built-in export button you can add to the navigation bar. This provides a familiar export experience without additional code. ```typescript highlight=highlight-builtin-action { id: 'ly.img.action.navigationBar', onClick: async () => { await cesdk.actions.run('exportDesign', { mimeType: 'image/jpeg', jpegQuality: 0.9 }); }, key: 'export-action', label: 'Export', icon: '@imgly/Download' }, ``` The button triggers the `exportDesign` action when clicked. You can customize what happens by registering your own handler. ### Customize Export Behavior Override the `exportDesign` action to control the export format, quality, and download behavior. ```typescript highlight=highlight-custom-action cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage()!; const jpeg = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); await cesdk.utils.downloadFile(jpeg, 'image/jpeg'); }); ``` When you register `exportDesign`, the built-in export button uses your custom handler instead of the default. ## When to Use JPEG JPEG works well for: - Photographs and images with gradual color transitions - Social media posts and web content - Scenarios where file size matters more than perfect quality > **Note:** For graphics with sharp edges, text, or transparency, use PNG instead. For modern web delivery with better compression, consider WebP. ## Troubleshooting **Output looks blurry** — Increase `jpegQuality` toward 1.0, or use PNG for graphics with hard edges. **File size too large** — Decrease `jpegQuality` to 0.7–0.8, or reduce dimensions with `targetWidth` and `targetHeight`. **Unexpected background** — JPEG does not support transparency. Use PNG or WebP for transparent content. ## API Reference | Method | Description | |--------|-------------| | `engine.block.export(block, options)` | Export a block to the specified format | | `cesdk.utils.downloadFile(blob, mimeType)` | Trigger browser download | | `cesdk.actions.register(name, handler)` | Register or override an action | | `cesdk.ui.insertOrderComponent()` | Add components to navigation bar | | `engine.scene.zoomToBlock(block)` | Zoom camera to fit a block | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) — Compare all available export formats - [Export to PDF](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) — Export for print and document workflows - [Partial Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/) — Export specific regions or elements - [Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) — Handle large exports and memory constraints --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To MP4" description: "Export video compositions as MP4 files with configurable encoding options, progress tracking, and resolution control." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/to-mp4-c998a8/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [To MP4](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-mp4-c998a8/) --- Export your video compositions as MP4 files with H.264 encoding, progress tracking, and configurable quality settings. ![Export to MP4 hero image](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-mp4-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-mp4-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-mp4-browser/) MP4 is the most widely supported video format, using H.264 encoding for efficient compression. CE.SDK handles frame rendering, encoding, and audio muxing entirely client-side, giving you control over quality and file size. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-mp4-browser/browser.ts reference-only import type CreativeEditorSDK from '@cesdk/cesdk-js'; import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; cesdk.feature.enable('ly.img.video'); await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.video.template/templates/milli-surf-school.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await cesdk.actions.run('zoom.toPage', { autoFit: true }); // Setup export functionality await this.setupExportActions(cesdk, page); } private async setupExportActions( cesdk: CreativeEditorSDK, page: number ): Promise { const engine = cesdk.engine; // Add export buttons to navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-builtin', label: 'Export Video', icon: '@imgly/Save', onClick: () => { cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-video', label: 'Export MP4', icon: '@imgly/Save', onClick: async () => { const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Video', message: 'Encoding MP4...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.close(); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } } }, { id: 'ly.img.action.navigationBar', key: 'export-video-progress', label: 'Export (dialog)', icon: '@imgly/Save', onClick: async () => { const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Video', message: 'Encoding MP4...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.showSuccess({ message: 'Export complete!' }); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } } }, { id: 'ly.img.action.navigationBar', key: 'export-video-hd', label: 'Export HD', icon: '@imgly/Save', onClick: async () => { const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting HD Video', message: 'Encoding 1080p...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { targetWidth: 1920, targetHeight: 1080, framerate: 30, onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.close(); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } } }, { id: 'ly.img.action.navigationBar', key: 'export-video-quality', label: 'Export HQ', icon: '@imgly/Save', onClick: async () => { const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting HQ Video', message: 'Encoding high quality...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { h264Profile: 100, videoBitrate: 8_000_000, onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.close(); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } } } ] } ); } } export default Example; ``` This guide covers exporting videos to MP4, tracking progress, configuring resolution and quality, and using built-in export actions. ## Export to MP4 Call `engine.block.exportVideo()` with a page block to export it as an MP4 video. The method returns a Blob containing the encoded video data. ```typescript highlight=highlight-export-video const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', ``` Pass the page ID from `engine.scene.getCurrentPage()` to export the current video scene. ## Export Options Video export supports configuration options for progress tracking, resolution, framerate, and encoding quality. ### Progress Dialog Use `cesdk.utils.showLoadingDialog()` to display a progress dialog during export. The `onProgress` callback updates the dialog with rendering progress. ```typescript highlight=highlight-progress-dialog const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Video', message: 'Encoding MP4...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.showSuccess({ message: 'Export complete!' }); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } ``` The dialog provides `updateProgress()` to show a progress bar, `showSuccess()` for completion feedback, and `showError()` for failures. The `onProgress` callback receives rendered frames, encoded frames, and total frames. ### Resolution and Framerate Use `targetWidth`, `targetHeight`, and `framerate` to control output dimensions and smoothness. ```typescript highlight=highlight-resolution const blob = await engine.block.exportVideo(page, { targetWidth: 1920, targetHeight: 1080, framerate: 30, ``` If only one dimension is specified, the other is calculated to maintain aspect ratio. Default framerate is 30 fps. ### H.264 Profile and Quality The `h264Profile` option controls encoding quality and device compatibility: - **66 (Baseline)**: Maximum compatibility, lower compression - **77 (Main)**: Balanced quality and compatibility (default) - **100 (High)**: Best compression, modern devices only Set `videoBitrate` in bits per second to control file size. ```typescript highlight=highlight-quality const blob = await engine.block.exportVideo(page, { h264Profile: 100, videoBitrate: 8_000_000, ``` ### All MP4 Export Options | Option | Description | | ------ | ----------- | | `mimeType` | Output format: `'video/mp4'` or `'video/quicktime'`. Defaults to `'video/mp4'`. | | `onProgress` | Callback receiving `(renderedFrames, encodedFrames, totalFrames)` for progress tracking. | | `targetWidth` | Target output width in pixels. | | `targetHeight` | Target output height in pixels. | | `framerate` | Target framerate in Hz. Defaults to `30`. | | `h264Profile` | H.264 profile: 66 (Baseline), 77 (Main), 100 (High). Defaults to `77`. | | `h264Level` | H.264 level multiplied by 10 (e.g., 52 = level 5.2). Defaults to `52`. | | `videoBitrate` | Video bitrate in bits/second. `0` enables automatic selection. | | `audioBitrate` | Audio bitrate in bits/second. `0` enables automatic selection. | | `timeOffset` | Start time in seconds for partial export. Defaults to `0`. | | `duration` | Export duration in seconds. Defaults to scene duration. | | `abortSignal` | Signal to cancel the export operation. | ## Built-in Export Action CE.SDK provides a built-in `exportDesign` action that handles export with a progress dialog and automatic download. Trigger it with `cesdk.actions.run()`: ```typescript highlight=highlight-builtin-action cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' }); ``` The built-in action exports the current page as MP4 and prompts the user to download the result. It displays a progress dialog during encoding. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.exportVideo(blockId, options)` | Export a page block as MP4 video with encoding options | | `cesdk.actions.run('exportDesign', options)` | Run the built-in export action with progress dialog | | `cesdk.utils.showLoadingDialog(options)` | Show a loading dialog with progress tracking | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a blob to the user's device | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Compare all supported export formats - [Export Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) - Check device limits before exporting large videos - [Export Audio](https://img.ly/docs/cesdk/angular/guides/export-save-publish/export/audio-68de25/) - Export audio tracks separately - [Partial Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/) - Export specific blocks or timeline segments --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To PDF" description: "Export your designs as PDF documents with options for print compatibility, underlayer generation, and output control." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [To PDF](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) --- Export your designs as PDF documents with high compatibility mode and underlayer support for special media printing. ![Export to PDF hero image](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-pdf-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-pdf-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-pdf-browser/) PDF provides a universal document format for sharing and printing designs. CE.SDK exports PDF files that preserve vector graphics, support multi-page documents, and include options for print compatibility. You can configure high compatibility mode to ensure consistent rendering across different PDF viewers, and generate underlayers for special media printing like fabric, glass, or DTF transfers. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-pdf-browser/browser.ts reference-only import { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export to PDF Guide * * This example demonstrates: * - Exporting designs as PDF documents * - Configuring high compatibility mode for consistent rendering * - Generating underlayers for special media printing * - Controlling output dimensions * - Using the built-in export action */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load a template scene and zoom to fit await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Register a custom export action with PDF-specific options cesdk.actions.register('exportDesign', async () => { // Export the scene block to include all pages in the PDF const scene = engine.scene.get()!; // Merge PDF-specific defaults with provided options const blob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(blob, 'application/pdf'); }); // Configure navigation bar with export buttons using insertOrderComponent cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-pdf', label: 'PDF', icon: '@imgly/Download', onClick: async () => { // Export scene to include all pages in the PDF const scene = engine.scene.get()!; // Export scene as PDF (includes all pages) const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); } }, { id: 'ly.img.action.navigationBar', key: 'export-high-compat', label: 'High Compat', icon: '@imgly/Download', onClick: async () => { // Export scene to include all pages in the PDF const scene = engine.scene.get()!; // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); } }, { id: 'ly.img.action.navigationBar', key: 'export-underlayer', label: 'Underlayer', icon: '@imgly/Download', onClick: async () => { // Export scene to include all pages in the PDF const scene = engine.scene.get()!; // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); } }, { id: 'ly.img.action.navigationBar', key: 'export-a4', label: 'A4 @ 300 DPI', icon: '@imgly/Download', onClick: async () => { // Export scene to include all pages in the PDF const scene = engine.scene.get()!; // Export with specific dimensions for print output const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', targetWidth: 2480, // A4 at 300 DPI (210mm) targetHeight: 3508 // A4 at 300 DPI (297mm) }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); } }, { id: 'ly.img.action.navigationBar', key: 'export-action', label: 'Export', icon: '@imgly/Download', onClick: () => { // Run built-in export with PDF format cesdk.actions.run('exportDesign', { mimeType: 'application/pdf' }); } } ] } ); } } export default Example; ``` This guide covers exporting designs to PDF format, configuring high compatibility mode, generating underlayers with spot colors, and controlling output dimensions. ## Export to PDF Call `engine.block.export()` with `mimeType: 'application/pdf'` to export any block as a PDF document. The method returns a Blob containing the PDF data. ```typescript highlight=highlight-export-pdf // Export scene as PDF (includes all pages) const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); ``` Pass the scene ID from `engine.scene.get()` to export all pages as a multi-page PDF. You can also pass a single page ID from `engine.scene.getCurrentPage()` if you only need to export one page. ## Configure High Compatibility Mode Enable `exportPdfWithHighCompatibility` to rasterize complex elements like gradients with transparency at the scene's DPI. This ensures consistent rendering across all PDF viewers. ```typescript highlight=highlight-high-compatibility // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); ``` Use high compatibility mode when: - Designs contain gradients with transparency - Effects or blend modes render inconsistently across viewers - Maximum compatibility matters more than vector precision High compatibility mode increases file size because complex elements are converted to raster images rather than remaining as vectors. ## Generate Underlayers for Special Media Underlayers provide a base ink layer (typically white) for printing on transparent or non-white substrates like fabric, glass, or acrylic. The underlayer sits behind your design elements and provides opacity on transparent materials. ### Define the Underlayer Spot Color Before exporting, define a spot color that represents the underlayer ink. The RGB values provide a preview representation in PDF viewers. ```typescript highlight=highlight-spot-color // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); ``` The spot color name (e.g., `'RDG_WHITE'`) must match your print provider's requirements. Common names include `RDG_WHITE` for Roland DG printers and `White` for other systems. ### Export with Underlayer Options Configure the underlayer spot color name and optional offset. The `underlayerOffset` adjusts the underlayer size in design units—negative values shrink it inward to prevent visible edges from print misalignment (trapping). ```typescript highlight=highlight-underlayer // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); ``` The underlayer is generated automatically from the contours of all design elements on the page. Elements with transparency will have proportionally reduced underlayer opacity. ## Export at Target Dimensions Use `targetWidth` and `targetHeight` to control the exported PDF dimensions in pixels. The block renders large enough to fill the target size while maintaining aspect ratio. ```typescript highlight=highlight-target-size // Export with specific dimensions for print output const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', targetWidth: 2480, // A4 at 300 DPI (210mm) targetHeight: 3508 // A4 at 300 DPI (297mm) }); ``` For print output, calculate the target dimensions based on your desired DPI: - A4 at 300 DPI: 2480 × 3508 pixels - Letter at 300 DPI: 2550 × 3300 pixels ## Built-in Export Action Run the `exportDesign` action to execute the default export flow programmatically. ```typescript highlight=highlight-trigger-export // Run built-in export with PDF format cesdk.actions.run('exportDesign', { mimeType: 'application/pdf' }); ``` This executes the registered export action, which handles the complete export process including format selection and file download. ## Customize Export Action Register a custom `exportDesign` action to apply PDF-specific options automatically. This lets you set defaults like high compatibility mode that apply whenever the export action runs. ```typescript highlight=highlight-customize-action // Register a custom export action with PDF-specific options cesdk.actions.register('exportDesign', async () => { // Export the scene block to include all pages in the PDF const scene = engine.scene.get()!; // Merge PDF-specific defaults with provided options const blob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(blob, 'application/pdf'); }); ``` The custom action merges your PDF defaults with any options passed when the action runs. This approach centralizes export configuration and ensures consistent behavior across your application. ## Download Export Use `cesdk.utils.downloadFile()` to trigger the browser's download dialog for the exported blob. ```typescript highlight=highlight-download // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); ``` Pass the blob and MIME type to prompt the user to save the file locally. ## PDF Export Options | Option | Description | | ------ | ----------- | | `mimeType` | Output format. Must be `'application/pdf'`. | | `exportPdfWithHighCompatibility` | Rasterize complex elements at scene DPI for consistent rendering. Defaults to `true`. | | `exportPdfWithUnderlayer` | Generate an underlayer from design contours. Defaults to `false`. | | `underlayerSpotColorName` | Spot color name for the underlayer ink. Required when `exportPdfWithUnderlayer` is true. | | `underlayerOffset` | Size adjustment in design units. Negative values shrink the underlayer inward. | | `targetWidth` | Target output width in pixels. Must be used with `targetHeight`. | | `targetHeight` | Target output height in pixels. Must be used with `targetWidth`. | | `abortSignal` | Signal to cancel the export operation. | ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export(blockId, options)` | Export a block as PDF with format and compatibility options | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color for underlayer ink | | `engine.scene.get()` | Get the scene for multi-page PDF export | | `engine.scene.getCurrentPage()` | Get the current page for single-page export | | `cesdk.actions.run()` | Runs a built-in action like `exportDesign` | | `cesdk.actions.register()` | Registers a custom action to override default behavior | | `cesdk.utils.downloadFile()` | Triggers browser download dialog for a blob | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Compare all supported export formats - [Export for Printing](https://img.ly/docs/cesdk/angular/export-save-publish/for-printing-bca896/) - Print workflows with DPI and color management - [Spot Colors](https://img.ly/docs/cesdk/angular/colors/for-print/spot-c3a150/) - Define and use spot colors in designs - [Export Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) - Check device limits before exporting large designs --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To PNG" description: "Export your designs as PNG images with transparency support and configurable compression for web graphics, UI elements, and content requiring crisp edges." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/to-png-f87eaf/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [To PNG](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-png-f87eaf/) --- Export your designs as PNG images with full transparency support and configurable compression. ![Export to PNG hero image](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-png-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-png-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-png-browser/) PNG (Portable Network Graphics) provides lossless compression with full alpha channel support. It's ideal for web graphics, UI elements, and content requiring crisp edges or transparency. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-png-browser/browser.ts reference-only import type CreativeEditorSDK from '@cesdk/cesdk-js'; import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Setup export functionality await this.setupExportActions(cesdk, page); } private async setupExportActions( cesdk: CreativeEditorSDK, page: number ): Promise { const engine = cesdk.engine; // Add export button to navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-design', label: 'Export PNG', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/png' }); await cesdk.utils.downloadFile(blob, 'image/png'); } }, { id: 'ly.img.action.navigationBar', key: 'export-design', label: 'Export PNG (default)', icon: '@imgly/Save', onClick: () => cesdk.actions.run('exportDesign') }, { id: 'ly.img.action.navigationBar', key: 'export-design', label: 'Export PNG (compressed)', icon: '@imgly/Save', onClick: async () => { // Export with compression const compressedBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); await cesdk.utils.downloadFile(compressedBlob, 'image/png'); } }, { id: 'ly.img.action.navigationBar', key: 'export-design', label: 'Export PNG (hd)', icon: '@imgly/Save', onClick: async () => { const hdBlob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(hdBlob, 'image/png'); } } ] } ); } } export default Example; ``` This guide covers exporting designs to PNG, configuring compression, controlling output dimensions, and using built-in export actions. ## Export to PNG Call `engine.block.export()` with `mimeType: 'image/png'` to export any block as a PNG image. The method returns a Blob containing the image data. ```typescript highlight=highlight-export-png const blob = await engine.block.export(page, { mimeType: 'image/png' }); ``` Pass the page ID from `engine.scene.getCurrentPage()` or any block ID to export specific elements. ## Export Options PNG export supports several configuration options for compression, dimensions, and text rendering. ### Compression Level The `pngCompressionLevel` option (0-9) controls file size vs. encoding speed. Higher values produce smaller files but take longer to encode. PNG compression is lossless, so quality remains unchanged. ```typescript highlight=highlight-compression const compressedBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); ``` - **0**: No compression, fastest encoding - **5**: Balanced (default) - **9**: Maximum compression, slowest encoding ### Target Dimensions Use `targetWidth` and `targetHeight` together to export at specific dimensions. The block renders large enough to fill the target size while maintaining aspect ratio. ```typescript highlight=highlight-target-size const hdBlob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); ``` If the target aspect ratio differs from the block's aspect ratio, the output extends beyond the target on one axis to preserve proportions. ### All PNG Export Options | Option | Description | | ------ | ----------- | | `mimeType` | Output format. Defaults to `'image/png'`. | | `pngCompressionLevel` | Compression level (0-9). Higher values produce smaller files but take longer to encode. Quality is unaffected. Defaults to `5`. | | `targetWidth` | Target output width in pixels. Must be used with `targetHeight`. | | `targetHeight` | Target output height in pixels. Must be used with `targetWidth`. | | `allowTextOverhang` | When `true`, text blocks with glyphs extending beyond their frame export with full glyph bounds visible. Defaults to `false`. | | `abortSignal` | Signal to cancel the export operation. | ## Built-in Export Action CE.SDK provides a built-in `exportDesign` action that handles export with a progress dialog and automatic download. Trigger it with `cesdk.actions.run()`: ```typescript highlight=highlight-builtin-action onClick: () => cesdk.actions.run('exportDesign') ``` The built-in action exports the current page as PNG and prompts the user to download the result. Add an export button to the navigation bar to let users trigger this action from the UI. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export(blockId, options)` | Export a block as PNG with format and quality options | | `cesdk.actions.run('exportDesign')` | Run the built-in export action with progress dialog | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a blob to the user's device | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Compare all supported export formats - [Export Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) - Check device limits before exporting large designs - [Export with Color Mask](https://img.ly/docs/cesdk/angular/export-save-publish/export/with-color-mask-4f868f/) - Remove specific colors and generate alpha masks - [Partial Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/) - Export specific blocks or regions --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export to Raw Data" description: "Export designs to uncompressed RGBA pixel data for custom image processing, GPU uploads, and advanced graphics workflows." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/to-raw-data-abd7da/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [To Raw Data](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-raw-data-abd7da/) --- 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](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-raw-data-browser/) ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-raw-data-browser/src/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from '../package.json'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Load asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: ['ly.img.image.*'] }) ); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set explicit page dimensions 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.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { 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 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 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 To export a block as raw pixel data, use the `engine.block.export()` method with `mimeType: 'application/octet-stream'`: ```typescript highlight-basic-export 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 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: ```typescript highlight-export-action-body // 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); ``` This complete workflow demonstrates exporting to raw pixel data, applying grayscale processing, and downloading the processed image as PNG. ## 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: ```typescript 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 | Method | Description | | -------------------------------------- | --------------------------------------------------------- | | `engine.block.export()` | Exports a block with `mimeType: 'application/octet-stream'` for raw RGBA data | | `engine.block.getWidth()` | Returns the width of a block in pixels | | `engine.block.getHeight()` | Returns the height of a block in pixels | | `Blob.arrayBuffer()` | Converts the blob to an ArrayBuffer for raw data access | | `ImageData()` | Creates an ImageData object from a Uint8ClampedArray | | `CanvasRenderingContext2D.putImageData()` | Paints pixel data onto a canvas | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To WebP" description: "Export your CE.SDK designs to WebP format for optimized web delivery with lossy and lossless compression options." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/to-webp-aef6f4/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [To WebP](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-webp-aef6f4/) --- Export designs to WebP format for optimized web delivery with smaller file sizes than PNG or JPEG. ![Export to WebP showing the editor with export options](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-webp-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-webp-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-webp-browser/) WebP delivers smaller file sizes than PNG and JPEG while preserving image quality and transparency support. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-webp-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export to WebP Guide * * Demonstrates exporting designs to WebP format with: * - Built-in export action triggered programmatically * - Three export buttons showcasing different quality presets * - Lossy, lossless, and social media export options */ 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load template and zoom to fit await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Three export buttons with different WebP settings cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'webp-lossy', label: 'Lossy', icon: '@imgly/Download', onClick: async () => { const p = engine.scene.getCurrentPage()!; // Export with lossy compression const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 0.8 }); // Download using CE.SDK utils await cesdk.utils.downloadFile(blob, 'image/webp'); } }, { id: 'ly.img.action.navigationBar', key: 'webp-lossless', label: 'Lossless', icon: '@imgly/Download', onClick: async () => { const p = engine.scene.getCurrentPage()!; const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 1.0 }); await cesdk.utils.downloadFile(blob, 'image/webp'); } }, { id: 'ly.img.action.navigationBar', key: 'webp-social', label: 'Social', icon: '@imgly/Download', onClick: async () => { const p = engine.scene.getCurrentPage()!; // Export with target dimensions for social media const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 0.9, targetWidth: 1200, targetHeight: 630 }); await cesdk.utils.downloadFile(blob, 'image/webp'); } }, { id: 'ly.img.action.navigationBar', key: 'export-action', label: 'Export', icon: '@imgly/Download', onClick: () => { // Run built-in export with WebP format cesdk.actions.run('exportDesign', { mimeType: 'image/webp' }); } } ] } ); } } export default Example; ``` This guide covers exporting to WebP, configuring quality settings, and triggering downloads. ## Export to WebP Call `engine.block.export()` with `mimeType: 'image/webp'` and a `webpQuality` value between 0 and 1. ```typescript highlight=highlight-export-webp // Export with lossy compression const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 0.8 }); ``` The `webpQuality` parameter controls compression. A value of 0.8 provides a good balance between file size and visual quality for most use cases. ## Export Options WebP export supports these options: | Option | Type | Description | |--------|------|-------------| | `mimeType` | `'image/webp'` | Required. Specifies WebP format | | `webpQuality` | `number` | Quality from 0 to 1. Default 1.0 (lossless) | | `targetWidth` | `number` | Optional resize width | | `targetHeight` | `number` | Optional resize height | Combine `targetWidth` and `targetHeight` to resize the output, useful for social media or thumbnail generation. ```typescript highlight=highlight-export-options // Export with target dimensions for social media const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 0.9, targetWidth: 1200, targetHeight: 630 }); ``` Set `webpQuality` to 1.0 for lossless compression when pixel-perfect output is required. ## Built-in Export Action Run the `exportDesign` action to execute the default export flow programmatically. ```typescript highlight=highlight-trigger-export // Run built-in export with WebP format cesdk.actions.run('exportDesign', { mimeType: 'image/webp' }); ``` This executes the registered export action, which handles the complete export process including format selection and file download. ## Download Export Use `cesdk.utils.downloadFile()` to trigger the browser's download dialog for the exported blob. ```typescript highlight=highlight-download // Download using CE.SDK utils await cesdk.utils.downloadFile(blob, 'image/webp'); ``` Pass the blob and MIME type to prompt the user to save the file locally. > **Note:** WebP is supported in all modern browsers. For older browsers, consider PNG or JPEG as fallback formats. ## API Reference | API | Description | |-----|-------------| | `engine.block.export()` | Exports a block to an image blob with format and quality options | | `cesdk.actions.run()` | Runs a built-in action like `exportDesign` | | `cesdk.utils.downloadFile()` | Triggers browser download dialog for a blob | ## Next Steps [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Learn about all supported export formats and their options. [Export to PDF](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) - Generate print-ready PDF documents from your designs. [Size Limits](https://img.ly/docs/cesdk/angular/export-save-publish/export/size-limits-6f0695/) - Understand export size constraints and optimization strategies. [Partial Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/) - Export specific blocks or regions instead of the full design. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export with a Color Mask" description: "Learn how to export design blocks with color masking in CE.SDK to remove specific colors and generate alpha masks for print workflows and compositing." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/export/with-color-mask-4f868f/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [With a Color Mask](https://img.ly/docs/cesdk/angular/export-save-publish/export/with-color-mask-4f868f/) --- 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](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-with-color-mask-browser/) 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. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-with-color-mask-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; 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.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { 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 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. ```typescript highlight-export-with-color-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 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 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. ```typescript highlight-register-export-action // 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 }); }); ``` 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 | Method | Description | | ----------------------------------------------- | --------------------------------------------------------- | | `cesdk.actions.register()` | Registers a custom action that can be triggered by UI elements | | `cesdk.ui.insertOrderComponent()` | Adds UI components to the editor's navigation bar | | `cesdk.utils.downloadFile()` | Triggers a browser download for a file blob | | `engine.scene.getCurrentPage()` | Gets the currently active page in the scene | | `engine.block.exportWithColorMask()` | Exports a block with specific RGB color removed, generating masked image and alpha mask | | `engine.block.addImage()` | Adds an image block to the scene | | `engine.block.create()` | Creates a new block of the specified type | | `engine.block.setShape()` | Sets the shape for a graphic block | | `engine.block.createShape()` | Creates a shape definition for graphic blocks | | `engine.block.createFill()` | Creates a fill definition for blocks | | `engine.block.setColor()` | Sets the color value for a fill | | `engine.block.setFill()` | Applies a fill to a block | | `engine.block.appendChild()` | Adds a block as a child of another block | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export for Printing" description: "Export designs from CE.SDK as print-ready PDFs with professional output options including high compatibility mode, underlayers for special media, and scene DPI configuration." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/for-printing-bca896/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [For Printing](https://img.ly/docs/cesdk/angular/export-save-publish/for-printing-bca896/) --- Export print-ready PDFs from CE.SDK with options for high compatibility mode, underlayers for special media like fabric or glass, and configurable output resolution. ![Export for Printing example showing PDF export options](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-for-printing-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-for-printing-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-for-printing-browser/) CE.SDK exports designs as PDFs, but professional print workflows require specific configurations beyond standard export. This guide covers PDF export options for print, including high compatibility mode for complex designs, underlayers for printing on special media, and output resolution settings. ```typescript file=@cesdk_web_examples/guides-export-save-publish-for-printing-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export for Printing Guide * * This example demonstrates: * - Exporting designs as print-ready PDFs * - Configuring high compatibility mode for complex designs * - Generating underlayers for special media (DTF, fabric, glass) * - Setting scene DPI for print resolution */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load a template scene - this will be our print design await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); // Get the scene and page const scene = engine.scene.get(); if (!scene) { throw new Error('No scene found'); } const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Set print resolution (DPI) on the scene // 300 DPI is standard for high-quality print output engine.block.setFloat(scene, 'scene/dpi', 300); // Helper function to download blob const downloadBlob = (blob: Blob, filename: string) => { const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = filename; anchor.click(); URL.revokeObjectURL(url); }; // Export PDF with high compatibility mode const exportWithHighCompatibility = async () => { // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at the scene's DPI const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); downloadBlob(pdfBlob, 'print-high-compatibility.pdf'); cesdk.ui.showNotification({ message: `PDF exported with high compatibility (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export PDF without high compatibility (faster, smaller files) const exportStandardPdf = async () => { // Disable high compatibility for faster exports when targeting modern PDF viewers // Complex elements remain as vectors but may render differently across viewers const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: false }); downloadBlob(pdfBlob, 'print-standard.pdf'); cesdk.ui.showNotification({ message: `Standard PDF exported (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Define underlayer spot color and export with underlayer const exportWithUnderlayer = async () => { // Define the underlayer spot color before export // This creates a named spot color that will be used for the underlayer ink // The RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); // Export with underlayer enabled for DTF or special media printing // The underlayer generates a shape behind design elements filled with the spot color const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks the underlayer inward to prevent visible edges underlayerOffset: -2.0 }); downloadBlob(pdfBlob, 'print-with-underlayer.pdf'); cesdk.ui.showNotification({ message: `PDF exported with underlayer (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export with custom target size const exportWithTargetSize = async () => { // Export with specific dimensions for print output // targetWidth and targetHeight control the exported PDF dimensions in pixels const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, targetWidth: 2480, // A4 at 300 DPI (210mm) targetHeight: 3508 // A4 at 300 DPI (297mm) }); downloadBlob(pdfBlob, 'print-a4-300dpi.pdf'); cesdk.ui.showNotification({ message: `A4 PDF exported (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Configure navigation bar with export buttons cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', onClick: exportWithHighCompatibility, key: 'export-high-compat', label: 'High Compat PDF', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportStandardPdf, key: 'export-standard', label: 'Standard PDF', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportWithUnderlayer, key: 'export-underlayer', label: 'With Underlayer', icon: '@imgly/Save', variant: 'plain', color: 'accent' }, { id: 'ly.img.action.navigationBar', onClick: exportWithTargetSize, key: 'export-a4', label: 'A4 @ 300 DPI', icon: '@imgly/Save', variant: 'plain' } ]); cesdk.ui.showNotification({ message: 'Use the export buttons to export print-ready PDFs with different options', type: 'info', duration: 'infinite' }); } } export default Example; ``` ## Default PDF Color Behavior CE.SDK exports PDFs in RGB color space. CMYK or spot colors defined in your design convert to RGB during standard export. For CMYK output with ICC profiles, use the **Print Ready PDF plugin**. The base `engine.block.export()` method provides print compatibility options, but full CMYK workflow requires the plugin. ## Setting Up for Print Export Before exporting, configure your scene with appropriate print settings. Set the scene's DPI to control print resolution—300 DPI is standard for high-quality print output. ```typescript highlight-setup // Load a template scene - this will be our print design await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); // Get the scene and page const scene = engine.scene.get(); if (!scene) { throw new Error('No scene found'); } const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Set print resolution (DPI) on the scene // 300 DPI is standard for high-quality print output engine.block.setFloat(scene, 'scene/dpi', 300); ``` ## PDF Export Options for Print Export a page as PDF using `engine.block.export()` with `mimeType: 'application/pdf'`. ### High Compatibility Mode The `exportPdfWithHighCompatibility` option rasterizes complex elements like gradients with transparency at the scene's DPI. Enable this when: - Designs use gradients with transparency - Effects or blend modes render inconsistently across PDF viewers - Maximum compatibility across print RIPs matters more than vector precision ```typescript highlight-export-high-compatibility // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at the scene's DPI const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); ``` Disabling high compatibility produces faster exports with smaller file sizes but may cause rendering inconsistencies in some PDF viewers. ### Standard PDF Export When targeting modern PDF viewers where file size and export speed matter more than universal compatibility: ```typescript highlight-export-standard-pdf // Disable high compatibility for faster exports when targeting modern PDF viewers // Complex elements remain as vectors but may render differently across viewers const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: false }); ``` ## Underlayers for Special Media Underlayers provide a base ink layer (typically white) for printing on: - Transparent or non-white substrates - DTF (Direct-to-Film) transfers - Fabric, glass, or dark materials ### Define the Underlayer Spot Color Before exporting with an underlayer, define the spot color that represents the underlayer ink. Use `engine.editor.setSpotColorRGB()` to create a named spot color with RGB preview values. ```typescript highlight-define-spot-color // Define the underlayer spot color before export // This creates a named spot color that will be used for the underlayer ink // The RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); ``` ### Export with Underlayer Enable `exportPdfWithUnderlayer` and specify the `underlayerSpotColorName` to generate an underlayer from design contours. The underlayer offset controls the size adjustment—negative values shrink the underlayer inward to prevent visible edges from print misalignment. ```typescript highlight-export-with-underlayer // Export with underlayer enabled for DTF or special media printing // The underlayer generates a shape behind design elements filled with the spot color const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks the underlayer inward to prevent visible edges underlayerOffset: -2.0 }); ``` ### Underlayer Offset The `underlayerOffset` option adjusts the underlayer size in design units. Negative values shrink the underlayer inward, which prevents visible white edges when the print layers don't align perfectly. Start with values like `-1.0` to `-3.0` and adjust based on your print equipment's alignment accuracy. ## Export with Target Size Control the exported PDF dimensions using `targetWidth` and `targetHeight`. These values are in pixels and work together with the scene's DPI setting to determine physical print size. ```typescript highlight-export-target-size // Export with specific dimensions for print output // targetWidth and targetHeight control the exported PDF dimensions in pixels const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, targetWidth: 2480, // A4 at 300 DPI (210mm) targetHeight: 3508 // A4 at 300 DPI (297mm) }); ``` ## CMYK PDFs with ICC Profiles For CMYK color space and ICC profile embedding, use the **Print Ready PDF plugin**. This plugin post-processes exports to convert RGB to CMYK with embedded ICC profiles. See the [Print Ready PDF Plugin](https://img.ly/docs/cesdk/angular/plugins/print-ready-pdf-iroalu/) for setup and usage. ## Troubleshooting ### PDF Not Opening Correctly in Print Software Enable `exportPdfWithHighCompatibility: true` to rasterize complex elements that may not render correctly in prepress software. ### Underlayer Not Visible in PDF Viewer Standard PDF viewers may not display spot colors. Use professional print software like Adobe Acrobat Pro or prepress tools to verify the underlayer separation. ### Colors Look Different After Printing Standard export uses RGB. Use the Print Ready PDF plugin with appropriate ICC profiles for accurate CMYK reproduction. ### White Edges on Special Media Increase the negative `underlayerOffset` value to shrink the underlayer further from design edges. Try values like `-2.0` or `-3.0` depending on your equipment's alignment tolerance. ## API Reference | Method/Option | Purpose | |---------------|---------| | `engine.block.export(block, options)` | Export block to PDF | | `mimeType: 'application/pdf'` | Specify PDF output format | | `targetWidth` | Target width for exported PDF in pixels | | `targetHeight` | Target height for exported PDF in pixels | | `exportPdfWithHighCompatibility` | Rasterize bitmap images and gradients at scene DPI (default: `true`) | | `exportPdfWithUnderlayer` | Generate underlayer from contours (default: `false`) | | `underlayerSpotColorName` | Spot color name for underlayer ink | | `underlayerOffset` | Size adjustment in design units (negative shrinks) | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define spot color for underlayer | | `engine.block.setFloat(scene, 'scene/dpi', value)` | Set scene DPI for print resolution | ## Next Steps - [Print Ready PDF Plugin](https://img.ly/docs/cesdk/angular/plugins/print-ready-pdf-iroalu/) - CMYK PDFs with ICC profiles - [CMYK Colors](https://img.ly/docs/cesdk/angular/colors/for-print/cmyk-8a1334/) - Configure CMYK colors - [Spot Colors](https://img.ly/docs/cesdk/angular/colors/for-print/spot-c3a150/) - Define and use spot colors - [Export to PDF](https://img.ly/docs/cesdk/angular/export-save-publish/export/to-pdf-95e04b/) - General PDF export options --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export for Social Media" description: "Export vertical videos with the correct dimensions, formats, and quality settings for Instagram Reels, TikTok, and YouTube Shorts." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/for-social-media-0e8a92/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [For Social Media](https://img.ly/docs/cesdk/angular/export-save-publish/for-social-media-0e8a92/) --- Export vertical video designs for social media platforms with the correct dimensions, formats, and quality settings. Configure video exports with appropriate resolution, framerate, and bitrate optimized for Instagram Reels, TikTok, and YouTube Shorts. ![Export for Social Media example showing CE.SDK with export buttons for different platforms](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-for-social-media-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-for-social-media-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-for-social-media-browser/) Short-form vertical video has become the dominant format for social media. Instagram Reels, TikTok, and YouTube Shorts all use the 9:16 aspect ratio at 1080×1920 pixels. This guide demonstrates how to create and export vertical video content with the correct settings for these platforms. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-for-social-media-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export for Social Media Guide * * This example demonstrates: * - Creating a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts * - Exporting videos with resolution, framerate, and bitrate settings * - Tracking video export progress */ 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Create a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel', color: { r: 0, g: 0, b: 0, a: 1 } } }); const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Add a video clip that fills the vertical frame const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const videoBlock = await engine.block.addVideo( 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4', pageWidth, pageHeight ); engine.block.fillParent(videoBlock); // Export video for Instagram Reels / TikTok / YouTube Shorts (9:16) const exportVideo = async () => { cesdk.ui.showNotification({ message: 'Exporting video...', type: 'info' }); const currentPage = engine.scene.getCurrentPage(); if (!currentPage) return; const videoBlob = await engine.block.exportVideo(currentPage, { mimeType: 'video/mp4', targetWidth: 1080, targetHeight: 1920, framerate: 30, videoBitrate: 8_000_000, // 8 Mbps onProgress: (renderedFrames, encodedFrames, totalFrames) => { const percent = Math.round((encodedFrames / totalFrames) * 100); console.log( `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)` ); } }); await cesdk.utils.downloadFile(videoBlob, 'video/mp4'); cesdk.ui.showNotification({ message: `Video exported: ${(videoBlob.size / 1024 / 1024).toFixed( 1 )} MB (1080×1920)`, type: 'success' }); }; // Configure navigation bar with export button cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', onClick: exportVideo, key: 'export-video', label: 'Export Video', icon: '@imgly/Video', variant: 'plain', color: 'accent' } ]); } } export default Example; ``` This guide covers creating a vertical video scene, exporting with resolution, framerate, and bitrate settings, and tracking export progress. ## Creating a Scene Create a scene with the correct dimensions for vertical video. Use `cesdk.actions.run('scene.create')` with explicit pixel dimensions to ensure your content matches platform requirements. ```typescript highlight-setup // Create a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel', color: { r: 0, g: 0, b: 0, a: 1 } } }); const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Add a video clip that fills the vertical frame const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const videoBlock = await engine.block.addVideo( 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4', pageWidth, pageHeight ); engine.block.fillParent(videoBlock); ``` The scene uses 1080×1920 pixels (9:16 aspect ratio), which is the standard resolution for Instagram Reels, TikTok, and YouTube Shorts. The video block fills the entire page dimensions. ## Exporting Videos Export video content using `engine.block.exportVideo()`. Configure resolution, framerate, and bitrate for optimal quality and file size. ```typescript highlight-export-video const videoBlob = await engine.block.exportVideo(currentPage, { mimeType: 'video/mp4', targetWidth: 1080, targetHeight: 1920, framerate: 30, videoBitrate: 8_000_000, // 8 Mbps onProgress: (renderedFrames, encodedFrames, totalFrames) => { const percent = Math.round((encodedFrames / totalFrames) * 100); console.log( `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)` ); } }); ``` Key video export settings: - **mimeType**: `video/mp4` for broad platform compatibility - **targetWidth/targetHeight**: Output resolution (1080×1920 for vertical) - **framerate**: 30 frames per second (standard for social media) - **videoBitrate**: 8 Mbps provides good quality while keeping file sizes reasonable Higher bitrates produce better quality but larger files. For short-form vertical video, 8 Mbps (8,000,000 bits per second) balances quality and upload speed. ## Tracking Export Progress Video exports can take time, especially for longer content. Use the `onProgress` callback to provide users with feedback during export. ```typescript highlight-progress onProgress: (renderedFrames, encodedFrames, totalFrames) => { const percent = Math.round((encodedFrames / totalFrames) * 100); console.log( `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)` ); } ``` The callback receives three parameters: - **renderedFrames**: Number of frames rendered so far - **encodedFrames**: Number of frames encoded to the output file - **totalFrames**: Total frames to be exported The encoding stage typically trails rendering slightly. Calculate progress percentage from `encodedFrames / totalFrames` for an accurate completion indicator. ## Downloading Exported Files After export, use `cesdk.utils.downloadFile()` to trigger a browser download: ```typescript const videoBlob = await engine.block.exportVideo(page, { /* options */ }); await cesdk.utils.downloadFile(videoBlob, 'video/mp4'); ``` This utility handles the download process automatically, including memory cleanup. For server uploads, pass the Blob directly to your upload function or FormData. ## API Reference | Method | Purpose | |--------|---------| | `cesdk.actions.run('scene.create')` | Create a scene with specified dimensions | | `engine.block.exportVideo()` | Export block as video (MP4) | | `engine.scene.getCurrentPage()` | Get the active page for export | | `cesdk.utils.downloadFile()` | Trigger browser download for exported files | ### Export Options (Videos) | Option | Type | Description | |--------|------|-------------| | `mimeType` | `string` | Output format: `video/mp4` | | `targetWidth` | `number` | Output width in pixels | | `targetHeight` | `number` | Output height in pixels | | `framerate` | `number` | Frames per second | | `videoBitrate` | `number` | Video bitrate in bits per second | | `onProgress` | `function` | Progress callback with frame counts | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Complete export options including H.264 profiles and advanced settings --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Pre-Export Validation" description: "Documentation for Pre-Export Validation" platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/pre-export-validation-3a2cba/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [Pre-Export Validation](https://img.ly/docs/cesdk/angular/export-save-publish/pre-export-validation-3a2cba/) --- Validate your design before export by detecting elements outside the page, protruding content, obscured text, and other issues that could affect the final output quality. ![Pre-Export Validation example showing validation workflow](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-pre-export-validation-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-pre-export-validation-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-pre-export-validation-browser/) Pre-export validation catches layout and quality issues before export, preventing problems like cropped content, hidden text, and elements missing from the final output. Production-quality designs require elements to be properly positioned within the page boundaries. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-pre-export-validation-browser/browser.ts reference-only import type { CreativeEngine, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import type CreativeEditorSDK from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; type ValidationSeverity = 'error' | 'warning'; interface ValidationIssue { type: | 'outside_page' | 'protruding' | 'text_obscured' | 'unfilled_placeholder'; severity: ValidationSeverity; blockId: number; blockName: string; message: string; } interface ValidationResult { errors: ValidationIssue[]; warnings: ValidationIssue[]; } 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Set role to adopter so placeholders can be replaced engine.editor.setRole('Adopter'); const page = engine.block.findByType('page')[0]; await this.createDemoScene(engine, page); this.overrideExportAction(cesdk, engine); } private async createDemoScene( engine: CreativeEngine, page: number ): Promise { const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const centerY = pageHeight / 2; // Row 1: Main validation examples (horizontally aligned) const row1Y = centerY - 120; const elementWidth = 150; const elementHeight = 100; const spacing = 20; // Calculate positions for 4 elements in a row const totalRowWidth = elementWidth * 4 + spacing * 3; const startX = (pageWidth - totalRowWidth) / 2; // Create an image that's outside the page (will trigger error) // Positioned to the left of the page - completely outside const outsideImage = engine.block.create('graphic'); engine.block.setName(outsideImage, 'Outside Image'); engine.block.setShape(outsideImage, engine.block.createShape('rect')); const outsideFill = engine.block.createFill('image'); engine.block.setString( outsideFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(outsideImage, outsideFill); engine.block.setWidth(outsideImage, elementWidth); engine.block.setHeight(outsideImage, elementHeight); engine.block.setPositionX(outsideImage, -elementWidth - 10); // Left of the page engine.block.setPositionY(outsideImage, row1Y); engine.block.appendChild(page, outsideImage); // Create a properly placed image for reference (first in row) const validImage = engine.block.create('graphic'); engine.block.setName(validImage, 'Valid Image'); engine.block.setShape(validImage, engine.block.createShape('rect')); const validFill = engine.block.createFill('image'); engine.block.setString( validFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_3.jpg' ); engine.block.setFill(validImage, validFill); engine.block.setWidth(validImage, elementWidth); engine.block.setHeight(validImage, elementHeight); engine.block.setPositionX(validImage, startX); engine.block.setPositionY(validImage, row1Y); engine.block.appendChild(page, validImage); // Create unfilled placeholder (second in row - triggers error) const placeholder = engine.block.create('graphic'); engine.block.setName(placeholder, 'Unfilled Placeholder'); engine.block.setShape(placeholder, engine.block.createShape('rect')); const placeholderFill = engine.block.createFill('image'); engine.block.setFill(placeholder, placeholderFill); engine.block.setWidth(placeholder, elementWidth); engine.block.setHeight(placeholder, elementHeight); engine.block.setPositionX(placeholder, startX + elementWidth + spacing); engine.block.setPositionY(placeholder, row1Y); engine.block.appendChild(page, placeholder); engine.block.setScopeEnabled(placeholder, 'fill/change', true); engine.block.setPlaceholderBehaviorEnabled(placeholderFill, true); engine.block.setPlaceholderEnabled(placeholder, true); engine.block.setPlaceholderControlsOverlayEnabled(placeholder, true); engine.block.setPlaceholderControlsButtonEnabled(placeholder, true); // Create text that will be partially obscured (third in row) const obscuredText = engine.block.create('text'); engine.block.setName(obscuredText, 'Obscured Text'); engine.block.setPositionX( obscuredText, startX + (elementWidth + spacing) * 2 ); engine.block.setPositionY(obscuredText, row1Y); engine.block.setWidth(obscuredText, elementWidth); engine.block.setHeight(obscuredText, elementHeight); engine.block.replaceText(obscuredText, 'Hidden'); engine.block.setFloat(obscuredText, 'text/fontSize', 48); engine.block.appendChild(page, obscuredText); // Create a shape that overlaps the text (added after text = on top) const overlappingShape = engine.block.create('graphic'); engine.block.setName(overlappingShape, 'Overlapping Shape'); engine.block.setShape(overlappingShape, engine.block.createShape('rect')); const shapeFill = engine.block.createFill('color'); engine.block.setColor(shapeFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 0.8 }); engine.block.setFill(overlappingShape, shapeFill); engine.block.setWidth(overlappingShape, elementWidth); engine.block.setHeight(overlappingShape, elementHeight); engine.block.setPositionX( overlappingShape, startX + (elementWidth + spacing) * 2 ); engine.block.setPositionY(overlappingShape, row1Y); engine.block.appendChild(page, overlappingShape); // Create an image that protrudes from the page (fourth in row - will trigger warning) // Extends past right page boundary const protrudingImage = engine.block.create('graphic'); engine.block.setName(protrudingImage, 'Protruding Image'); engine.block.setShape(protrudingImage, engine.block.createShape('rect')); const protrudingFill = engine.block.createFill('image'); engine.block.setString( protrudingFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); engine.block.setFill(protrudingImage, protrudingFill); engine.block.setWidth(protrudingImage, elementWidth); engine.block.setHeight(protrudingImage, elementHeight); engine.block.setPositionX(protrudingImage, pageWidth - elementWidth / 2); // Extends 75px past right engine.block.setPositionY(protrudingImage, row1Y); engine.block.appendChild(page, protrudingImage); // Add explanatory text below the row const explanationText = engine.block.create('text'); engine.block.setPositionX(explanationText, 50); engine.block.setPositionY(explanationText, row1Y + elementHeight + 40); engine.block.setWidth(explanationText, pageWidth - 100); engine.block.setHeightMode(explanationText, 'Auto'); engine.block.replaceText( explanationText, 'Click Export to run validation. Move elements to fix issues.' ); engine.block.setFloat(explanationText, 'text/fontSize', 48); engine.block.setEnum(explanationText, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, explanationText); } private getBoundingBox( engine: CreativeEngine, blockId: number ): [number, number, number, number] { const x = engine.block.getGlobalBoundingBoxX(blockId); const y = engine.block.getGlobalBoundingBoxY(blockId); const width = engine.block.getGlobalBoundingBoxWidth(blockId); const height = engine.block.getGlobalBoundingBoxHeight(blockId); return [x, y, x + width, y + height]; } private calculateOverlap( box1: [number, number, number, number], box2: [number, number, number, number] ): number { const [ax1, ay1, ax2, ay2] = box1; const [bx1, by1, bx2, by2] = box2; const overlapWidth = Math.max(0, Math.min(ax2, bx2) - Math.max(ax1, bx1)); const overlapHeight = Math.max(0, Math.min(ay2, by2) - Math.max(ay1, by1)); const overlapArea = overlapWidth * overlapHeight; const box1Area = (ax2 - ax1) * (ay2 - ay1); if (box1Area === 0) return 0; return overlapArea / box1Area; } private getBlockName(engine: CreativeEngine, blockId: number): string { const name = engine.block.getName(blockId); if (name) return name; const kind = engine.block.getKind(blockId); return kind.charAt(0).toUpperCase() + kind.slice(1); } private getRelevantBlocks(engine: CreativeEngine): number[] { return [ ...engine.block.findByType('text'), ...engine.block.findByType('graphic') ]; } private findOutsideBlocks( engine: CreativeEngine, page: number ): ValidationIssue[] { const issues: ValidationIssue[] = []; const pageBounds = this.getBoundingBox(engine, page); for (const blockId of this.getRelevantBlocks(engine)) { if (!engine.block.isValid(blockId)) continue; const blockBounds = this.getBoundingBox(engine, blockId); const overlap = this.calculateOverlap(blockBounds, pageBounds); if (overlap === 0) { // Element is completely outside the page issues.push({ type: 'outside_page', severity: 'error', blockId, blockName: this.getBlockName(engine, blockId), message: 'Element is completely outside the visible page area' }); } } return issues; } private findProtrudingBlocks( engine: CreativeEngine, page: number ): ValidationIssue[] { const issues: ValidationIssue[] = []; const pageBounds = this.getBoundingBox(engine, page); for (const blockId of this.getRelevantBlocks(engine)) { if (!engine.block.isValid(blockId)) continue; // Compare element bounds against page bounds const blockBounds = this.getBoundingBox(engine, blockId); const overlap = this.calculateOverlap(blockBounds, pageBounds); // Protruding: partially inside (overlap > 0) but not fully inside (overlap < 1) if (overlap > 0 && overlap < 0.99) { issues.push({ type: 'protruding', severity: 'warning', blockId, blockName: this.getBlockName(engine, blockId), message: 'Element extends beyond page boundaries' }); } } return issues; } private findObscuredText( engine: CreativeEngine, page: number ): ValidationIssue[] { const issues: ValidationIssue[] = []; const children = engine.block.getChildren(page); const textBlocks = engine.block.findByType('text'); for (const textId of textBlocks) { if (!engine.block.isValid(textId)) continue; const textIndex = children.indexOf(textId); if (textIndex === -1) continue; // Elements later in children array are rendered on top const blocksAbove = children.slice(textIndex + 1); for (const aboveId of blocksAbove) { // Skip text blocks - they don't typically obscure other text if (engine.block.getType(aboveId) === '//ly.img.ubq/text') continue; const overlap = this.calculateOverlap( this.getBoundingBox(engine, textId), this.getBoundingBox(engine, aboveId) ); if (overlap > 0) { // Text is obscured by element above it issues.push({ type: 'text_obscured', severity: 'warning', blockId: textId, blockName: this.getBlockName(engine, textId), message: 'Text may be partially hidden by overlapping elements' }); break; } } } return issues; } private findUnfilledPlaceholders(engine: CreativeEngine): ValidationIssue[] { const issues: ValidationIssue[] = []; const placeholders = engine.block.findAllPlaceholders(); for (const blockId of placeholders) { if (!engine.block.isValid(blockId)) continue; if (!this.isPlaceholderFilled(engine, blockId)) { issues.push({ type: 'unfilled_placeholder', severity: 'error', blockId, blockName: this.getBlockName(engine, blockId), message: 'Placeholder has not been filled with content' }); } } return issues; } private isPlaceholderFilled( engine: CreativeEngine, blockId: number ): boolean { const fillId = engine.block.getFill(blockId); if (!fillId || !engine.block.isValid(fillId)) return false; const fillType = engine.block.getType(fillId); // Check image fill - empty URI means unfilled placeholder if (fillType === '//ly.img.ubq/fill/image') { const imageUri = engine.block.getString(fillId, 'fill/image/imageFileURI'); return imageUri !== '' && imageUri !== undefined; } // Other fill types are considered filled return true; } private validateDesign(engine: CreativeEngine): ValidationResult { const page = engine.block.findByType('page')[0]; const outsideIssues = this.findOutsideBlocks(engine, page); const protrudingIssues = this.findProtrudingBlocks(engine, page); const obscuredIssues = this.findObscuredText(engine, page); const placeholderIssues = this.findUnfilledPlaceholders(engine); const allIssues = [ ...outsideIssues, ...protrudingIssues, ...obscuredIssues, ...placeholderIssues ]; return { errors: allIssues.filter((i) => i.severity === 'error'), warnings: allIssues.filter((i) => i.severity === 'warning') }; } private overrideExportAction( cesdk: CreativeEditorSDK, engine: CreativeEngine ): void { cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: ['ly.img.exportImage.navigationBar'] }); const exportDesign = cesdk.actions.get('exportDesign'); cesdk.actions.register('exportDesign', async () => { const result = this.validateDesign(engine); const hasErrors = result.errors.length > 0; const hasWarnings = result.warnings.length > 0; // Log all issues to console for debugging if (hasErrors || hasWarnings) { console.log('Validation Results:', result); } // Block export for errors if (hasErrors) { cesdk.ui.showNotification({ message: `${result.errors.length} error(s) found - export blocked`, type: 'error', duration: 'long' }); // Select first problematic block const firstError = result.errors[0]; if (engine.block.isValid(firstError.blockId)) { engine.block.select(firstError.blockId); } return; } // Show warning but allow export if (hasWarnings) { cesdk.ui.showNotification({ message: `${result.warnings.length} warning(s) found - proceeding with export`, type: 'warning', duration: 'medium' }); } // Proceed with export exportDesign(); }); } } export default Example; ``` This guide demonstrates how to detect elements outside the page, find protruding content, identify obscured text, and integrate validation into the export workflow. ## Getting Element Bounds To detect spatial issues, we need to get the bounding box of elements in global coordinates. The `getGlobalBoundingBox*` methods return positions that account for all transformations: ```typescript highlight-get-bounding-box const x = engine.block.getGlobalBoundingBoxX(blockId); const y = engine.block.getGlobalBoundingBoxY(blockId); const width = engine.block.getGlobalBoundingBoxWidth(blockId); const height = engine.block.getGlobalBoundingBoxHeight(blockId); return [x, y, x + width, y + height]; ``` This returns coordinates as `[x1, y1, x2, y2]` representing the top-left and bottom-right corners of the element. The overlap between element and page bounds is calculated as the intersection area divided by the element's total area. An overlap of 0 means completely outside, while 1 (100%) means fully inside. ## Detecting Elements Outside the Page Elements completely outside the page won't appear in the exported output. We find these by checking for blocks with zero overlap with the page bounds: ```typescript highlight-find-outside-blocks const blockBounds = this.getBoundingBox(engine, blockId); const overlap = this.calculateOverlap(blockBounds, pageBounds); if (overlap === 0) { // Element is completely outside the page ``` These issues are categorized as errors because the content is completely missing from the export. ## Detecting Protruding Elements Elements that extend beyond the page boundaries will be partially cropped in the export. For each block, compare its bounds against the page bounds and calculate the overlap ratio: ```typescript highlight-find-protruding-blocks // Compare element bounds against page bounds const blockBounds = this.getBoundingBox(engine, blockId); const overlap = this.calculateOverlap(blockBounds, pageBounds); // Protruding: partially inside (overlap > 0) but not fully inside (overlap < 1) if (overlap > 0 && overlap < 0.99) { ``` An overlap between 0% and 100% indicates the element is partially inside the page. These issues are warnings because the content is partially visible but may not appear as intended. ## Finding Obscured Text Text hidden behind other elements may be unreadable in the final export. First, get the stacking order and all text blocks: ```typescript highlight-find-obscured-text const children = engine.block.getChildren(page); const textBlocks = engine.block.findByType('text'); ``` The `getChildren()` method returns blocks in stacking order - elements later in the array are rendered on top. For each text block, check if any non-text element above it overlaps with its bounds: ```typescript highlight-check-text-obscured // Elements later in children array are rendered on top const blocksAbove = children.slice(textIndex + 1); for (const aboveId of blocksAbove) { // Skip text blocks - they don't typically obscure other text if (engine.block.getType(aboveId) === '//ly.img.ubq/text') continue; const overlap = this.calculateOverlap( this.getBoundingBox(engine, textId), this.getBoundingBox(engine, aboveId) ); if (overlap > 0) { // Text is obscured by element above it ``` We skip text-on-text comparisons since transparent text backgrounds don't typically obscure other text. When overlap is detected, we flag the text as potentially obscured. ## Checking Placeholder Content Placeholders mark areas where users must add content before export. First, find all placeholder blocks in the design: ```typescript highlight-find-placeholders const placeholders = engine.block.findAllPlaceholders(); ``` Then inspect each placeholder's fill to determine if content has been added. Get the fill block and check its type to determine the validation logic: ```typescript highlight-check-placeholder-filled const fillId = engine.block.getFill(blockId); if (!fillId || !engine.block.isValid(fillId)) return false; const fillType = engine.block.getType(fillId); // Check image fill - empty URI means unfilled placeholder if (fillType === '//ly.img.ubq/fill/image') { const imageUri = engine.block.getString(fillId, 'fill/image/imageFileURI'); return imageUri !== '' && imageUri !== undefined; } ``` For image placeholders, check if the `fill/image/imageFileURI` property has a value. An empty or undefined URI indicates the placeholder hasn't been filled. Unfilled placeholders are treated as errors that block export, ensuring users complete all required content before exporting. ## Overriding the Export Action Intercept the navigation bar export action using `cesdk.actions.get()` and `cesdk.actions.register()`. The action ID `'exportDesign'` controls the export button in the CE.SDK interface: ```typescript highlight-override-export-action cesdk.actions.register('exportDesign', async () => { const result = this.validateDesign(engine); const hasErrors = result.errors.length > 0; const hasWarnings = result.warnings.length > 0; // Log all issues to console for debugging if (hasErrors || hasWarnings) { console.log('Validation Results:', result); } // Block export for errors if (hasErrors) { cesdk.ui.showNotification({ message: `${result.errors.length} error(s) found - export blocked`, type: 'error', duration: 'long' }); // Select first problematic block const firstError = result.errors[0]; if (engine.block.isValid(firstError.blockId)) { engine.block.select(firstError.blockId); } return; } // Show warning but allow export if (hasWarnings) { cesdk.ui.showNotification({ message: `${result.warnings.length} warning(s) found - proceeding with export`, type: 'warning', duration: 'medium' }); } // Proceed with export exportDesign(); }); ``` This override runs validation before export, shows notifications for errors or warnings, and selects the first problematic block to help users locate issues. Export proceeds only when validation passes. ## API Reference | Method | Purpose | |--------|---------| | `engine.block.getGlobalBoundingBoxX(id)` | Get element's global X position | | `engine.block.getGlobalBoundingBoxY(id)` | Get element's global Y position | | `engine.block.getGlobalBoundingBoxWidth(id)` | Get element's global width | | `engine.block.getGlobalBoundingBoxHeight(id)` | Get element's global height | | `engine.block.findByType(type)` | Find all blocks of a specific type | | `engine.block.getChildren(id)` | Get child blocks in stacking order | | `engine.block.getType(id)` | Get the block's type string | | `engine.block.getName(id)` | Get the block's display name | | `engine.block.isValid(id)` | Check if block exists | | `engine.block.select(id)` | Select a block in the editor | | `engine.block.findAllPlaceholders()` | Find all placeholder blocks | | `engine.block.getFill(id)` | Get the fill block | | `engine.block.getString(id, property)` | Get a string property value | | `cesdk.actions.get(actionId)` | Get an action function (browser) | | `cesdk.actions.register(actionId, fn)` | Register an action (browser) | | `cesdk.ui.showNotification(options)` | Display notification (browser) | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Save" description: "Save design progress locally or to a backend service to allow for later editing or publishing." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/save-c8b124/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Save](https://img.ly/docs/cesdk/angular/export-save-publish/save-c8b124/) --- Save and serialize designs in CE.SDK for later retrieval, sharing, or storage using string or archive formats. ![Save designs showing different save format options](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-save-browser/) CE.SDK provides two formats for persisting designs. Choose the format based on your storage and portability requirements. ```typescript file=@cesdk_web_examples/guides-export-save-publish-save-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Save Designs Guide * * Demonstrates how to save and serialize designs in CE.SDK: * - Saving scenes to string format for database storage * - Saving scenes to archive format with embedded assets * - Using built-in save actions and customization */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (cesdk == null) { throw new Error('CE.SDK instance is required'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (page == null) { throw new Error('No page found in scene'); } engine.scene.zoomToBlock(page, { padding: 40 }); cesdk.actions.register('saveScene', async () => { const sceneString = await engine.scene.saveToString(); // Send to your backend API console.log('Custom save:', sceneString.length, 'bytes'); }); // Button: Save Scene & Download const handleSaveScene = async () => { const sceneString = await engine.scene.saveToString(); const sceneBlob = new Blob([sceneString], { type: 'application/octet-stream' }); await cesdk.utils.downloadFile(sceneBlob, 'application/octet-stream'); cesdk.ui.showNotification({ message: `Scene downloaded (${(sceneString.length / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Button: Save to Archive & Download const handleSaveToArchive = async () => { const archiveBlob = await engine.scene.saveToArchive(); await cesdk.utils.downloadFile(archiveBlob, 'application/zip'); cesdk.ui.showNotification({ message: `Archive downloaded (${(archiveBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; const handleLoadScene = async () => { await cesdk.actions.run('importScene', { format: 'scene' }); }; const handleLoadArchive = async () => { await cesdk.actions.run('importScene', { format: 'archive' }); const loadedPage = engine.scene.getCurrentPage(); if (loadedPage != null) { engine.scene.zoomToBlock(loadedPage, { padding: 40 }); } }; cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'save-scene', label: 'Save Scene', icon: '@imgly/Save', onClick: handleSaveScene }, { id: 'ly.img.action.navigationBar', key: 'save-archive', label: 'Save Archive', icon: '@imgly/Download', onClick: handleSaveToArchive }, { id: 'ly.img.action.navigationBar', key: 'load-scene', label: 'Load Scene', icon: '@imgly/Upload', onClick: handleLoadScene }, { id: 'ly.img.action.navigationBar', key: 'load-archive', label: 'Load Archive', icon: '@imgly/Upload', onClick: handleLoadArchive } ] } ); } } export default Example; ``` ## Save Format Comparison | Format | Method | Assets | Best For | | ------ | ------ | ------ | -------- | | String | `saveToString()` | Referenced by URL | Database storage, cloud sync | | Archive | `saveToArchive()` | Embedded in ZIP | Offline use, file sharing | **String format** produces a lightweight Base64-encoded string where assets remain as URL references. Use this when asset URLs will remain accessible. **Archive format** creates a self-contained ZIP with all assets embedded. Use this for portable designs that work offline. ## Save to String Serialize the current scene to a Base64-encoded string suitable for database storage. ```typescript highlight=highlight-save-to-string const sceneString = await engine.scene.saveToString(); ``` The string contains the complete scene structure but references assets by their original URLs. ## Save to Archive Create a self-contained ZIP file with the scene and all embedded assets. ```typescript highlight=highlight-save-to-archive const archiveBlob = await engine.scene.saveToArchive(); ``` The archive includes all pages, elements, and asset data in a single portable file. ## Compression Options CE.SDK supports optional compression for saved scenes to reduce file size. Compression is particularly useful for large scenes or when storage space is limited. ```typescript // Save with Zstd compression (recommended) const compressed = await cesdk.engine.scene.saveToString({ compression: { format: 'Zstd', level: 'Default' } }); ``` **Compression Formats:** - `'None'` - No compression (default) - `'Zstd'` - Zstandard compression (recommended for best performance) **Compression Levels:** - `'Fastest'` - Fastest compression, larger output - `'Default'` - Balanced speed and size (recommended) - `'Best'` - Best compression, slower **Performance:** Compression adds minimal overhead (\<50ms) while reducing scene size by approximately 64%. The Default level provides the best balance of speed and compression ratio. ## Download to User Device Use `cesdk.utils.downloadFile()` to trigger a browser download with the correct MIME type. For scene strings, convert to a Blob first: ```typescript highlight=highlight-download-scene const sceneBlob = new Blob([sceneString], { type: 'application/octet-stream' }); await cesdk.utils.downloadFile(sceneBlob, 'application/octet-stream'); ``` For archive blobs, pass directly to the download utility: ```typescript highlight=highlight-download-archive await cesdk.utils.downloadFile(archiveBlob, 'application/zip'); ``` This utility handles creating and revoking object URLs automatically. ## Load Scene from File Use the built-in `importScene` action to open a file picker for `.scene` files. This restores a previously saved design from its serialized string format. ```typescript highlight=highlight-load-scene const handleLoadScene = async () => { await cesdk.actions.run('importScene', { format: 'scene' }); }; ``` Scene files are lightweight but require the original asset URLs to remain accessible. ## Load Archive from File Load a self-contained `.zip` archive that includes all embedded assets. ```typescript highlight=highlight-load-archive const handleLoadArchive = async () => { await cesdk.actions.run('importScene', { format: 'archive' }); ``` Archives are portable and work offline since all assets are bundled within the file. ## Built-in Save Action CE.SDK includes a built-in `saveScene` action that integrates with the navigation bar. ### Running an Action Trigger the default save behavior programmatically using `actions.run()`: ```typescript await cesdk.actions.run('saveScene'); ``` This executes the registered handler for `saveScene`, which by default downloads the scene file. ### Customizing an Action Override the default behavior by registering a custom handler: ```typescript highlight=highlight-register-custom-action cesdk.actions.register('saveScene', async () => { const sceneString = await engine.scene.saveToString(); // Send to your backend API console.log('Custom save:', sceneString.length, 'bytes'); }); ``` The registered handler runs when the built-in save button is clicked or when the action is triggered via `actions.run()`. ## API Reference | Method | Description | | ------ | ----------- | | `engine.scene.saveToString()` | Serialize scene to Base64 string | | `engine.scene.saveToArchive()` | Save scene with assets as ZIP blob | | `engine.scene.loadFromString()` | Load scene from serialized string | | `engine.scene.loadFromURL()` | Load scene from remote URL | | `engine.scene.loadFromArchiveURL()` | Load scene from URL (file://, http://, https://, or object URL) | | `cesdk.utils.downloadFile()` | Download blob or string to user device | | `cesdk.actions.run()` | Execute a registered action with parameters | | `cesdk.actions.register()` | Register or override an action handler | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/angular/export-save-publish/export/overview-9ed3a8/) - Export designs to image, PDF, and video formats - [Load Scene](https://img.ly/docs/cesdk/angular/open-the-editor/load-scene-478833/) - Load scenes from remote URLs and archives - [Store Custom Metadata](https://img.ly/docs/cesdk/angular/export-save-publish/store-custom-metadata-337248/) - Attach metadata like tags or version info to designs - [Partial Export](https://img.ly/docs/cesdk/angular/export-save-publish/export/partial-export-89aaf6/) - Export individual blocks or selections --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Store Custom Metadata" description: "Attach, retrieve, and manage custom key-value metadata on design blocks in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/export-save-publish/store-custom-metadata-337248/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Store Custom Metadata](https://img.ly/docs/cesdk/angular/export-save-publish/store-custom-metadata-337248/) --- Attach custom key-value metadata to design blocks in CE.SDK for tracking asset origins, storing application state, or linking to external systems. ![Store Custom Metadata example showing an image block with metadata](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-store-custom-metadata-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-store-custom-metadata-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-store-custom-metadata-browser/) Metadata lets you attach arbitrary string key-value pairs to any design block. This data is invisible to end users but persists with the scene through save/load operations. Common use cases include tracking asset origins, storing application-specific state, and linking blocks to external databases or content management systems. ```typescript file=@cesdk_web_examples/guides-export-save-publish-store-custom-metadata-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Store Custom Metadata Guide * * Demonstrates how to attach, retrieve, and manage custom metadata on design blocks: * - Setting metadata key-value pairs * - Getting metadata values by key * - Checking if metadata exists * - Listing all metadata keys * - Removing metadata * - Storing structured data as 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create an image block to attach metadata to const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 400, height: 300 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); // Set metadata key-value pairs on the block engine.block.setMetadata(imageBlock, 'externalId', 'asset-12345'); engine.block.setMetadata(imageBlock, 'source', 'user-upload'); engine.block.setMetadata(imageBlock, 'uploadedBy', 'user@example.com'); console.log('Set metadata: externalId, source, uploadedBy'); // Retrieve a metadata value by key if (engine.block.hasMetadata(imageBlock, 'externalId')) { const externalId = engine.block.getMetadata(imageBlock, 'externalId'); console.log('External ID:', externalId); } // List all metadata keys on the block const allKeys = engine.block.findAllMetadata(imageBlock); console.log('All metadata keys:', allKeys); // Log all key-value pairs for (const key of allKeys) { const value = engine.block.getMetadata(imageBlock, key); console.log(` ${key}: ${value}`); } // Store structured data as JSON const generationInfo = { source: 'ai-generated', model: 'stable-diffusion', timestamp: Date.now() }; engine.block.setMetadata( imageBlock, 'generationInfo', JSON.stringify(generationInfo) ); // Retrieve and parse structured data const retrievedJson = engine.block.getMetadata( imageBlock, 'generationInfo' ); const parsedInfo = JSON.parse(retrievedJson); console.log('Parsed generation info:', parsedInfo); // Remove a metadata key engine.block.removeMetadata(imageBlock, 'uploadedBy'); console.log('Removed metadata key: uploadedBy'); // Verify the key was removed const hasUploadedBy = engine.block.hasMetadata(imageBlock, 'uploadedBy'); console.log('Has uploadedBy after removal:', hasUploadedBy); // List remaining keys const remainingKeys = engine.block.findAllMetadata(imageBlock); console.log('Remaining metadata keys:', remainingKeys); // Select the image block to show it in focus engine.block.select(imageBlock); console.log( 'Metadata guide initialized. Check the console for metadata operations.' ); } } export default Example; ``` This guide covers how to set, retrieve, list, and remove metadata on blocks, as well as how to store structured data as JSON strings. ## Initialize CE.SDK We start by initializing CE.SDK with a basic configuration. The metadata APIs are available on the `engine.block` namespace. ```typescript highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create an image block to attach metadata to const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 400, height: 300 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); ``` ## Set Metadata Use `engine.block.setMetadata()` to attach a key-value pair to a block. Both the key and value must be strings. If the key already exists, the value is overwritten. ```typescript highlight-set-metadata // Set metadata key-value pairs on the block engine.block.setMetadata(imageBlock, 'externalId', 'asset-12345'); engine.block.setMetadata(imageBlock, 'source', 'user-upload'); engine.block.setMetadata(imageBlock, 'uploadedBy', 'user@example.com'); console.log('Set metadata: externalId, source, uploadedBy'); ``` You can attach multiple metadata entries to a single block. Each entry is independent and can be accessed, modified, or removed separately. ## Get Metadata Use `engine.block.getMetadata()` to retrieve a value by its key. This method throws an error if the key doesn't exist, so always check with `hasMetadata()` first for conditional access. ```typescript highlight-get-metadata // Retrieve a metadata value by key if (engine.block.hasMetadata(imageBlock, 'externalId')) { const externalId = engine.block.getMetadata(imageBlock, 'externalId'); console.log('External ID:', externalId); } ``` The `hasMetadata()` method returns `true` if the block has metadata for the specified key, and `false` otherwise. This pattern prevents runtime errors when accessing metadata that may not be set. ## List All Metadata Keys Use `engine.block.findAllMetadata()` to get an array of all metadata keys stored on a block. ```typescript highlight-find-all-metadata // List all metadata keys on the block const allKeys = engine.block.findAllMetadata(imageBlock); console.log('All metadata keys:', allKeys); // Log all key-value pairs for (const key of allKeys) { const value = engine.block.getMetadata(imageBlock, key); console.log(` ${key}: ${value}`); } ``` This is useful for iterating through all metadata on a block or debugging what metadata is attached. ## Store Structured Data Since metadata values must be strings, you can store structured data by serializing it to JSON. Parse the JSON when retrieving the data. ```typescript highlight-store-structured-data // Store structured data as JSON const generationInfo = { source: 'ai-generated', model: 'stable-diffusion', timestamp: Date.now() }; engine.block.setMetadata( imageBlock, 'generationInfo', JSON.stringify(generationInfo) ); // Retrieve and parse structured data const retrievedJson = engine.block.getMetadata( imageBlock, 'generationInfo' ); const parsedInfo = JSON.parse(retrievedJson); console.log('Parsed generation info:', parsedInfo); ``` This pattern lets you store complex objects like configuration settings, generation parameters, or any structured information that can be serialized to JSON. ## Remove Metadata Use `engine.block.removeMetadata()` to delete a key-value pair from a block. This method does not throw an error if the key doesn't exist. ```typescript highlight-remove-metadata // Remove a metadata key engine.block.removeMetadata(imageBlock, 'uploadedBy'); console.log('Removed metadata key: uploadedBy'); ``` After removal, you can verify the key was deleted by checking with `hasMetadata()`. ```typescript highlight-verify-removal // Verify the key was removed const hasUploadedBy = engine.block.hasMetadata(imageBlock, 'uploadedBy'); console.log('Has uploadedBy after removal:', hasUploadedBy); // List remaining keys const remainingKeys = engine.block.findAllMetadata(imageBlock); console.log('Remaining metadata keys:', remainingKeys); ``` ## Metadata Persistence Metadata is automatically preserved when saving scenes with `engine.scene.saveToString()` or `engine.scene.saveToArchive()`. When loading a saved scene, all metadata is restored to the blocks. > **Note:** Metadata is only preserved when saving the scene data. Exporting to image or > video formats (PNG, JPEG, MP4) does not include metadata since these are final > output formats. ## Troubleshooting ### getMetadata Throws Error If `getMetadata()` throws an error, the key doesn't exist on the block. Always use `hasMetadata()` to check before retrieving: ```typescript if (engine.block.hasMetadata(block, 'myKey')) { const value = engine.block.getMetadata(block, 'myKey'); } ``` ### Metadata Lost After Load Ensure you're saving with `saveToString()` or `saveToArchive()`, not exporting to image/video formats. Only scene saves preserve metadata. ### Large Metadata Values Metadata is designed for small strings. Very large values may impact performance during save/load operations. For large data, consider storing a reference (like a URL or ID) rather than the data itself. ## API Reference | Method | Description | | --------------------------------------------- | ----------------------------------------- | | `engine.block.setMetadata(block, key, value)` | Set a metadata key-value pair on a block | | `engine.block.getMetadata(block, key)` | Get the value for a metadata key | | `engine.block.hasMetadata(block, key)` | Check if a metadata key exists | | `engine.block.findAllMetadata(block)` | List all metadata keys on a block | | `engine.block.removeMetadata(block, key)` | Remove a metadata key-value pair | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "File Format Support" description: "See which image, video, audio, font, and template formats CE.SDK supports for import and export." platform: angular url: "https://img.ly/docs/cesdk/angular/file-format-support-3c4b2a/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/angular/compatibility-fef719/) > [File Format Support](https://img.ly/docs/cesdk/angular/file-format-support-3c4b2a/) --- ## Importing Media ### SVG Limitations ## Exporting Media ## Importing Templates ## Font Formats ## Video & Audio Codecs CE.SDK supports the most widely adopted video and audio codecs to ensure compatibility across platforms: ## Size Limits ### Image Resolution Limits ### Video Resolution & Duration Limits --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Fills" description: "Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements." platform: angular url: "https://img.ly/docs/cesdk/angular/fills-402ddc/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/angular/fills-402ddc/) --- --- ## Related Pages - [Fills](https://img.ly/docs/cesdk/angular/fills/overview-3895ee/) - Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements. - [Color Fills](https://img.ly/docs/cesdk/angular/fills/color-7129cd/) - Learn how to apply solid color fills to design elements using RGB, CMYK, and Spot Colors in CE.SDK - [Gradient Fills](https://img.ly/docs/cesdk/angular/filters-and-effects/gradients-0ff079/) - Learn how to create and apply linear, radial, and conical gradient fills to design elements in CE.SDK - [Image Fills](https://img.ly/docs/cesdk/angular/fills/image-e9cb5c/) - Apply photos, textures, and patterns to design elements using image fills in CE.SDK for web browsers. - [Video Fills](https://img.ly/docs/cesdk/angular/fills/video-ec7f9f/) - Learn how to apply video content as fills to design elements in CE.SDK. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Color Fills" description: "Learn how to apply solid color fills to design elements using RGB, CMYK, and Spot Colors in CE.SDK" platform: angular url: "https://img.ly/docs/cesdk/angular/fills/color-7129cd/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/angular/fills-402ddc/) > [Solid Color](https://img.ly/docs/cesdk/angular/fills/color-7129cd/) --- 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](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-color-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-fills-color-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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. ```typescript file=@cesdk_web_examples/guides-fills-color-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK cesdk method await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); 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 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 ### 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 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 ### 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. ```typescript highlight-check-fill-support // Check if block supports fills const 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 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'`. ```typescript highlight-create-fill // Create a color fill const 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 New color fills have default properties—typically white or transparent. You can discover all available properties using `findAllProperties()`: ```typescript const properties = engine.block.findAllProperties(colorFillId); console.log(properties); // ["fill/color/value", "type"] ``` ## Applying Color Fills ### Setting a Fill on a Block Once you've created a color fill, attach it to a block using `setFill()`: ```typescript highlight-apply-fill // Apply the fill to the block engine.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 Retrieve the current fill attached to a block using `getFill()` and inspect its type: ```typescript highlight-get-fill // 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' ``` ## Modifying Color Fill Properties ### 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. ```typescript highlight-set-rgb 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 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. ```typescript highlight-set-cmyk 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 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. ```typescript highlight-set-spot // 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 }); ``` 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 Retrieve the current color value from a fill using `getColor()`: ```typescript highlight-get-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); ``` ## Enabling and Disabling Color Fills ### 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: ```typescript highlight-toggle-fill 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 ``` 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 ### Sharing Color Fills You can share a single fill instance between multiple blocks. Changes to the shared fill affect all blocks using it: ```typescript highlight-share-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); ``` 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 Convert colors between different color spaces using `convertColorToColorSpace()`: ```typescript highlight-convert-color 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); ``` This is useful when you need to ensure color consistency across different output mediums (screen vs. print). ## Common Use Cases ### Brand Color Application Define and apply brand colors as spot colors to maintain consistency across all design elements: ```typescript highlight-brand-colors // 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); ``` 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 Create semi-transparent overlays and visual effects by adjusting the alpha channel: ```typescript highlight-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 }); ``` ### Print-Ready Colors Use CMYK color space for designs destined for print production: ```typescript highlight-print-colors 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 ### 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 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 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 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 | 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 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 --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Image Fills" description: "Apply photos, textures, and patterns to design elements using image fills in CE.SDK for web browsers." platform: angular url: "https://img.ly/docs/cesdk/angular/fills/image-e9cb5c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/angular/fills-402ddc/) > [Image](https://img.ly/docs/cesdk/angular/fills/image-e9cb5c/) --- 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](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-image-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-fills-image-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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. ```typescript file=@cesdk_web_examples/guides-fills-image-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Calculate responsive grid layout for demonstrations const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 7); 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: 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 opacityBlock // Position 6 ]; 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 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 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. ```typescript highlight-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); ``` 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 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 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: ```typescript highlight-create-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); ``` This convenience method handles all the underlying setup automatically, including creating the graphic block, shape, fill, and positioning. ### Manual Image Fill Creation For more control over the fill configuration or to apply fills to existing blocks, you can create fills manually: ```typescript highlight-manual-fill-creation // 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); ``` 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 You can retrieve the fill from any block and inspect its type to verify it's an image fill: ```typescript highlight-get-current-fill // 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' ``` 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 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 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: ```typescript highlight-fill-mode-cover // 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'); ``` 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 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: ```typescript highlight-fill-mode-contain // 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'); ``` 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 You can query the current fill mode to understand how the image is being displayed: ```typescript highlight-get-fill-mode // Get current fill mode const 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 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 A source set is an array of image sources, each with a URI and dimensions: ```typescript highlight-source-set // 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); ``` 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. > **Note:** 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 You can get the current source set from a fill to inspect or modify it: ```typescript highlight-get-source-set // Get current source set const sourceSet = engine.block.getSourceSet( responsiveFill, 'fill/image/sourceSet' ); console.log('Source set entries:', sourceSet.length); ``` ## 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 You can embed image data directly using data URIs, which is particularly useful for small images, icons, or dynamically generated graphics: ```typescript highlight-data-uri // 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 ### Controlling Opacity You can control the overall opacity of blocks with image fills, affecting the entire block including its fill: ```typescript highlight-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); ``` 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. > **Note:** 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 ### 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 | 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 | Property | Type | Values | Description | | ------------------ | ---- | ------------------ | ------------------------------------- | | `contentFill/mode` | Enum | 'Cover', 'Contain' | How the image scales within its block | ### SourceSet Interface ```typescript interface SourceSetEntry { uri: string; // Image URI width: number; // Image width in pixels height: number; // Image height in pixels } ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Fills" description: "Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements." platform: angular url: "https://img.ly/docs/cesdk/angular/fills/overview-3895ee/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/angular/fills-402ddc/) > [Overview](https://img.ly/docs/cesdk/angular/fills/overview-3895ee/) --- Some [design blocks](https://img.ly/docs/cesdk/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](https://img.ly/docs/cesdk/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 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. ```javascript engine.block.supportsFill(scene); // Returns false engine.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. ```javascript const colorFill = engine.block.getFill(block); const defaultRectFillType = engine.block.getType(colorFill); ``` ## 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](https://img.ly/docs/cesdk/angular/concepts/blocks-90241e/) for a complete list of all available properties for each type of fill. ```javascript 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. ```javascript engine.block.setColor(colorFill, 'fill/color/value', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); ``` ## 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. ```javascript engine.block.setFillEnabled(block, false); engine.block.setFillEnabled(block, !engine.block.isFillEnabled(block)); ``` ## 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`. ```javascript 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. ```javascript 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 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. ```javascript 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 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. ```javascript 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)); ``` --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video Fills" description: "Learn how to apply video content as fills to design elements in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/fills/video-ec7f9f/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/angular/fills-402ddc/) > [Video](https://img.ly/docs/cesdk/angular/fills/video-ec7f9f/) --- 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](./assets/browser.hero.webp) > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-video-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-fills-video-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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 time-based blocks 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. ```typescript file=@cesdk_web_examples/guides-fills-video-browser/browser.ts reference-only import type { CreativeEngine, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; 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'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); 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 // 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); // Set playback time to 2 seconds to show video content engine.block.setPlaybackTime(page, 2); // 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 ### 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 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 time-based properties including trim support, duration, and playback time. Use video blocks 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](https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/). ## Checking Video Fill Support Before applying video fills, verify that blocks support fills. ```typescript highlight-check-fill-support // 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 ``` 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 a video fill involves three steps: create the fill object, set the video source, and apply it to a block. ```typescript highlight-create-video-fill // 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); ``` 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 We can retrieve the current fill from a block and inspect its type to verify it's a video fill. ```typescript highlight-get-current-fill // 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' ``` 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 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 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. ```typescript highlight-fill-mode-cover // 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' ``` 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 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. ```typescript highlight-fill-mode-contain // 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'); ``` 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 Before accessing video metadata like duration or dimensions, you must force load the video resource. This ensures CE.SDK has downloaded the necessary information. ```typescript highlight-force-load-resource // 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'); ``` 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 ### Video as Shape Fill Video fills aren't limited to rectangles. You can fill any shape with video content. ```typescript highlight-video-shape-fill // 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); ``` Ellipse shapes, polygons, stars, and custom paths all support video fills. The video content fills the shape boundary, masking the video. ### Video with Opacity Control the transparency of video-filled blocks to create overlay effects or blend video content with backgrounds. ```typescript highlight-opacity // 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); ``` 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 ### 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. ```typescript highlight-shared-fill // 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' ); ``` 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 ### 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 If creating a video fill throws an error, verify the block supports fills using `engine.block.supportsFill(block)` and that the block is part of a valid scene hierarchy. ### 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 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 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 | 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 | 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 | Property | Type | Values | Description | | ------------------ | ---- | ------------------ | ----------------------------- | | `contentFill/mode` | Enum | 'Cover', 'Contain' | How video scales within block | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Filters and Effects" description: "Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) --- --- ## Related Pages - [Filters & Effects Library](https://img.ly/docs/cesdk/angular/filters-and-effects/overview-299b15/) - Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying. - [Supported Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/support-a666dd/) - View the full list of visual effects and filters available in CE.SDK, including both built-in and custom options. - [Apply Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) - Apply filters and effects to design elements to enhance images and create visual transformations. - [Create Custom Filters](https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-filters-c796ba/) - Extend CE.SDK with custom LUT filter asset sources for brand-specific color grading and filter collections. - [Chroma Key (Green Screen)](https://img.ly/docs/cesdk/angular/filters-and-effects/chroma-key-green-screen-1e3e99/) - Apply the green screen effect to images and videos, replacing specific colors with transparency for compositing workflows. - [Blur Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/blur-71d642/) - Apply blur effects to design elements to create depth, focus attention, or soften backgrounds. - [Create a Custom LUT Filter](https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-lut-filter-6e3f49/) - Create and apply custom LUT filters to achieve consistent, brand-aligned visual styles. - [Distortion Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/distortion-5b5a66/) - Apply distortion effects to warp, shift, and transform design elements for dynamic artistic visuals in CE.SDK. - [Duotone](https://img.ly/docs/cesdk/angular/filters-and-effects/duotone-831fc5/) - Apply duotone effects to images, mapping tones to two colors for stylized visuals, vintage aesthetics, or brand-specific treatments. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Apply Filters and Effects" description: "Apply filters and effects to design elements to enhance images and create visual transformations." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Apply Filter or Effect](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) --- 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](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-apply-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-apply-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-apply-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; 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', { page: 0, perPage: 10 }); const duotoneResults = await engine.asset.findAssets('ly.img.filter', { 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 ### 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. ```typescript highlight-enable-effects-features // 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 ``` 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 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 > **Note:** 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 ### Initialize CE.SDK 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. ```typescript highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; 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 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. ```typescript highlight-check-effect-support // 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); ``` 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 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. > **Tip:** 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 > time-based properties. ```typescript highlight-apply-basic-effects // 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); ``` 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 > **Note:** `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 After creating an effect, we can customize its appearance by setting properties. Each effect exposes different parameters depending on its type and capabilities. ```typescript highlight-configure-effect-parameters // 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 ); ``` 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 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')`, then applying them using metadata from the asset results. This approach matches how CE.SDK's built-in filter panel works. ```typescript highlight-apply-lut-filter // 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 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. ```typescript highlight-apply-duotone-filter // 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 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. > **Note:** 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. ```typescript highlight-combine-multiple-effects // 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 ### 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. ```typescript highlight-list-effects // 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}`); }); ``` This allows you to iterate through all applied effects, read their properties, and make modifications as needed. ### Enable/Disable 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. ```typescript highlight-enable-disable-effects // Check if effect is enabled const isBlurEnabled = engine.block.isEffectEnabled(combinedBlur); // eslint-disable-next-line no-console console.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 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. ```typescript highlight-remove-effects // 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); ``` 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 ### 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. ```typescript highlight-batch-processing // 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); } } }); ``` 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 with Animations You can combine effects with CE.SDK's built-in animation system to create dynamic visual treatments that change over time. > **Caution:** 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.) 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 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: ```typescript // Create a reusable preset function async 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 preset const 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 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 ### 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 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 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 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 | 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 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 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 --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Blur Effects" description: "Apply blur effects to design elements to create depth, focus attention, or soften backgrounds." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/blur-71d642/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Apply Blur](https://img.ly/docs/cesdk/angular/filters-and-effects/blur-71d642/) --- Apply blur effects to design elements using CE.SDK's dedicated blur system for creating depth, focus, and atmospheric effects. ![Blur Effects example showing an image with radial blur applied](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-blur-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-blur-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-blur-browser/) Unlike general effects that stack on elements, blur is a dedicated feature with its own API methods. Each block supports exactly one blur at a time, though the same blur instance can be shared across multiple blocks. CE.SDK provides four blur types: **uniform** for consistent softening, **linear** and **mirrored** for gradient-based effects along axes, and **radial** for circular focal points. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-blur-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; class BlurPlugin implements EditorPlugin { name = 'BlurPlugin'; version = '1.0.0'; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const page = engine.block.findByType('page')[0]; // Get page dimensions to position content correctly const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); if (!engine.block.supportsBlur(page)) { console.log('Block does not support blur'); return; } // Create an image block const imageBlock = engine.block.create('graphic'); engine.block.setShape(imageBlock, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setFill(imageBlock, imageFill); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); // Position image to fill the page engine.block.setWidth(imageBlock, pageWidth); engine.block.setHeight(imageBlock, pageHeight); engine.block.setPositionX(imageBlock, 0); engine.block.setPositionY(imageBlock, 0); engine.block.appendChild(page, imageBlock); const blur = engine.block.createBlur('//ly.img.ubq/blur/radial'); engine.block.setFloat(blur, 'blur/radial/blurRadius', 40); engine.block.setFloat(blur, 'blur/radial/radius', 100); engine.block.setFloat(blur, 'blur/radial/gradientRadius', 80); engine.block.setFloat(blur, 'blur/radial/x', 0.5); engine.block.setFloat(blur, 'blur/radial/y', 0.5); engine.block.setBlur(imageBlock, blur); engine.block.setBlurEnabled(imageBlock, true); const appliedBlur = engine.block.getBlur(imageBlock); const isEnabled = engine.block.isBlurEnabled(imageBlock); const blurType = engine.block.getType(appliedBlur); console.log('Blur type:', blurType, 'Enabled:', isEnabled); engine.block.setBlurEnabled(imageBlock, false); const nowEnabled = engine.block.isBlurEnabled(imageBlock); console.log('Blur now enabled:', nowEnabled); engine.block.setBlurEnabled(imageBlock, true); } } export default BlurPlugin; ``` This guide covers how to apply blur effects programmatically using the block API. ## Programmatic Blur Application ### Check Blur Support Before applying blur to a block, verify it supports blur effects. Graphic blocks with shapes and pages support blur. ```typescript highlight-check-blur-support if (!engine.block.supportsBlur(page)) { console.log('Block does not support blur'); return; } ``` Always check support before creating and applying blur to avoid errors. ### Create and Apply Blur Create a blur instance using `createBlur()` with a blur type, then attach it to a block using `setBlur()`. Enable the blur with `setBlurEnabled()`. ```typescript highlight-create-blur const blur = engine.block.createBlur('//ly.img.ubq/blur/radial'); ``` CE.SDK provides four blur types: - **`//ly.img.ubq/blur/uniform`** - Even softening across the entire element - **`//ly.img.ubq/blur/linear`** - Gradient blur along a line defined by two control points - **`//ly.img.ubq/blur/mirrored`** - Band of focus with blur on both sides (tilt-shift style) - **`//ly.img.ubq/blur/radial`** - Circular blur pattern from a center point > **Note:** Omitting the prefix is also accepted, e.g., `'radial'` instead of > `'//ly.img.ubq/blur/radial'`. ### Configure Blur Parameters Each blur type has specific parameters to control its appearance. Configure them using `setFloat()`. ```typescript highlight-configure-blur engine.block.setFloat(blur, 'blur/radial/blurRadius', 40); engine.block.setFloat(blur, 'blur/radial/radius', 100); engine.block.setFloat(blur, 'blur/radial/gradientRadius', 80); engine.block.setFloat(blur, 'blur/radial/x', 0.5); engine.block.setFloat(blur, 'blur/radial/y', 0.5); ``` **Radial blur parameters:** - `blur/radial/blurRadius` - Blur intensity (default: 30) - `blur/radial/radius` - Size of the non-blurred center area (default: 75) - `blur/radial/gradientRadius` - Size of the blur transition zone (default: 50) - `blur/radial/x` - Center point x-value, 0.0 to 1.0 (default: 0.5) - `blur/radial/y` - Center point y-value, 0.0 to 1.0 (default: 0.5) **Uniform blur parameters:** - `blur/uniform/intensity` - Blur strength, 0.0 to 1.0 (default: 0.5) **Linear blur parameters:** - `blur/linear/blurRadius` - Blur intensity (default: 30) - `blur/linear/x1`, `blur/linear/y1` - Control point 1 (default: 0, 0.5) - `blur/linear/x2`, `blur/linear/y2` - Control point 2 (default: 1, 0.5) **Mirrored blur parameters:** - `blur/mirrored/blurRadius` - Blur intensity (default: 30) - `blur/mirrored/gradientSize` - Hardness of gradient transition (default: 50) - `blur/mirrored/size` - Size of the blurred area (default: 75) - `blur/mirrored/x1`, `blur/mirrored/y1` - Control point 1 (default: 0, 0.5) - `blur/mirrored/x2`, `blur/mirrored/y2` - Control point 2 (default: 1, 0.5) ### Apply Blur to Block After configuring the blur, apply it to the target block and enable it. ```typescript highlight-apply-blur engine.block.setBlur(imageBlock, blur); engine.block.setBlurEnabled(imageBlock, true); ``` The blur takes effect immediately once enabled. You can modify parameters at any time and changes apply in real-time. ## Managing Blur ### Access Existing Blur Retrieve the blur applied to a block using `getBlur()`. You can then read or modify its properties. ```typescript highlight-read-blur const appliedBlur = engine.block.getBlur(imageBlock); const isEnabled = engine.block.isBlurEnabled(imageBlock); const blurType = engine.block.getType(appliedBlur); console.log('Blur type:', blurType, 'Enabled:', isEnabled); ``` ### Enable/Disable Blur Toggle blur on and off without removing it using `setBlurEnabled()`. This preserves all blur parameters for quick before/after comparisons. ```typescript highlight-toggle-blur engine.block.setBlurEnabled(imageBlock, false); const nowEnabled = engine.block.isBlurEnabled(imageBlock); console.log('Blur now enabled:', nowEnabled); engine.block.setBlurEnabled(imageBlock, true); ``` When disabled, the blur remains attached to the block but doesn't render until re-enabled. ### Share Blur Across Blocks A single blur instance can be applied to multiple blocks. Create the blur once, then assign it to each block with `setBlur()`. ```typescript const sharedBlur = engine.block.createBlur('//ly.img.ubq/blur/uniform'); engine.block.setFloat(sharedBlur, 'blur/uniform/intensity', 0.4); engine.block.setBlur(block1, sharedBlur); engine.block.setBlur(block2, sharedBlur); engine.block.setBlurEnabled(block1, true); engine.block.setBlurEnabled(block2, true); ``` Changes to the shared blur affect all blocks using it. ### Replace Blur To change the blur type on a block, create a new blur and assign it with `setBlur()`. The previous blur association is automatically removed. ```typescript const newBlur = engine.block.createBlur('//ly.img.ubq/blur/linear'); engine.block.setBlur(block, newBlur); engine.block.setBlurEnabled(block, true); ``` If the old blur isn't used elsewhere, destroy it with `engine.block.destroy(oldBlur)`. ## Troubleshooting ### Blur Not Visible If blur doesn't appear after applying: - Check the block supports blur with `supportsBlur()` - Verify blur is enabled with `isBlurEnabled()` - Ensure the blur instance is valid ### Blur Appears on Wrong Area For radial, linear, and mirrored blurs: - Verify control point coordinates are within 0.0 to 1.0 range - Check that x/y values match your intended focus area ### Blur Too Subtle or Too Strong - Increase or decrease `blurRadius` or `intensity` values - For radial blur, adjust `gradientRadius` to control the transition softness ## API Reference | Method | Description | | --------------------------------------- | ---------------------------- | | `block.createBlur(type)` | Create new blur instance | | `block.supportsBlur(block)` | Check if block supports blur | | `block.setBlur(block, blur)` | Apply blur to block | | `block.getBlur(block)` | Get blur from block | | `block.setBlurEnabled(block, enabled)` | Enable or disable blur | | `block.isBlurEnabled(block)` | Check if blur is enabled | | `block.setFloat(blur, property, value)` | Set blur float property | | `block.getFloat(blur, property)` | Get blur float property | | `block.getType(blur)` | Get blur type identifier | | `block.destroy(blur)` | Destroy unused blur instance | ## 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 | 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 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 | 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 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 | 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 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 | Description | | ------------------------ | ------- | ------- | ------------------- | | `blur/uniform/intensity` | `Float` | `0.5` | The blur intensity. | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Chroma Key (Green Screen)" description: "Apply the green screen effect to images and videos, replacing specific colors with transparency for compositing workflows." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/chroma-key-green-screen-1e3e99/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Apply Chroma Key (Green Screen)](https://img.ly/docs/cesdk/angular/filters-and-effects/chroma-key-green-screen-1e3e99/) --- Replace specific colors with transparency using CE.SDK's green screen effect for video compositing and virtual background applications. ![Chroma Key (Green Screen) example showing an image with color keying applied](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-chroma-key-green-screen-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-chroma-key-green-screen-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-chroma-key-green-screen-browser/) The green screen effect (chroma key) replaces a specified color with transparency, enabling compositing workflows where foreground subjects appear over different backgrounds. While green is the most common key color due to its contrast with skin tones, the effect works with any solid color—blue screens, white backgrounds, or custom colors. CE.SDK processes chroma keying in real-time using GPU-accelerated shaders. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-chroma-key-green-screen-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Chroma Key (Green Screen) Guide * * Demonstrates the green screen effect for color keying: * - Applying the green screen effect to an image * - Configuring the target color to key out * - Adjusting colorMatch, smoothness, and spill parameters * - Compositing with background layers * - Managing and toggling 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create an image block to apply the green screen effect const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', { size: { width: 600, height: 450 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 100); engine.block.setPositionY(imageBlock, 75); // Create the green screen effect const greenScreenEffect = engine.block.createEffect('green_screen'); // Apply the effect to the image block engine.block.appendEffect(imageBlock, greenScreenEffect); // Set the target color to key out // Use off-white to remove the bright sky background // For traditional green screen footage, use { r: 0.0, g: 1.0, b: 0.0, a: 1.0 } engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.98, g: 0.98, b: 0.98, a: 1.0 }); // Adjust color matching tolerance // Higher values (closer to 1.0) key out more color variations // Lower values create more precise keying engine.block.setFloat( greenScreenEffect, 'effect/green_screen/colorMatch', 0.26 ); // Control edge smoothness for natural transitions // Higher values create softer edges that blend with backgrounds engine.block.setFloat( greenScreenEffect, 'effect/green_screen/smoothness', 1.0 ); // Remove color spill from reflective surfaces // Reduces color tint on edges near the keyed background engine.block.setFloat(greenScreenEffect, 'effect/green_screen/spill', 1.0); // Create a background layer for compositing const backgroundBlock = engine.block.create('graphic'); const backgroundShape = engine.block.createShape('rect'); engine.block.setShape(backgroundBlock, backgroundShape); // Create a solid color fill for the background const backgroundFill = engine.block.createFill('color'); engine.block.setColor(backgroundFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }); engine.block.setFill(backgroundBlock, backgroundFill); // Size and position the background to cover the page engine.block.setWidth(backgroundBlock, 800); engine.block.setHeight(backgroundBlock, 600); engine.block.setPositionX(backgroundBlock, 0); engine.block.setPositionY(backgroundBlock, 0); // Add to page and send to back engine.block.appendChild(page, backgroundBlock); engine.block.sendToBack(backgroundBlock); // Bring the keyed image to front engine.block.bringToFront(imageBlock); // Check if the effect is currently enabled const isEnabled = engine.block.isEffectEnabled(greenScreenEffect); console.log('Green screen effect enabled:', isEnabled); // Toggle the effect on or off engine.block.setEffectEnabled(greenScreenEffect, !isEnabled); console.log( 'Effect toggled:', engine.block.isEffectEnabled(greenScreenEffect) ); // Re-enable for demonstration engine.block.setEffectEnabled(greenScreenEffect, true); // Check if the block supports effects const supportsEffects = engine.block.supportsEffects(imageBlock); console.log('Block supports effects:', supportsEffects); // Get all effects applied to the block const effects = engine.block.getEffects(imageBlock); console.log('Number of effects:', effects.length); // Remove the effect from the block (by index) engine.block.removeEffect(imageBlock, 0); console.log('Effect removed from block'); // Destroy the effect instance to free resources engine.block.destroy(greenScreenEffect); console.log('Effect destroyed'); // Re-apply the effect for final display const finalEffect = engine.block.createEffect('green_screen'); engine.block.appendEffect(imageBlock, finalEffect); engine.block.setColor(finalEffect, 'effect/green_screen/fromColor', { r: 0.98, g: 0.98, b: 0.98, a: 1.0 }); engine.block.setFloat(finalEffect, 'effect/green_screen/colorMatch', 0.26); engine.block.setFloat(finalEffect, 'effect/green_screen/smoothness', 1.0); engine.block.setFloat(finalEffect, 'effect/green_screen/spill', 1.0); // Select the image block so the inspector panel shows it engine.block.setSelected(imageBlock, true); console.log( 'Chroma key guide initialized. Select the image to see effect parameters.' ); } } export default Example; ``` This guide covers how to apply the green screen effect programmatically, configure color selection and keying parameters, composite with background layers, and manage effects on blocks. ## Apply the Green Screen Effect We start by creating an image block and applying the green screen effect to it. The effect immediately processes the target color, making matching pixels transparent. ```typescript highlight-create-effect // Create an image block to apply the green screen effect const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', { size: { width: 600, height: 450 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 100); engine.block.setPositionY(imageBlock, 75); // Create the green screen effect const greenScreenEffect = engine.block.createEffect('green_screen'); // Apply the effect to the image block engine.block.appendEffect(imageBlock, greenScreenEffect); ``` The `createEffect('green_screen')` method creates a new green screen effect instance. We then attach it to the image block using `appendEffect()`, which adds the effect to the block's effect stack. ## Configure Color Selection The green screen effect targets a specific color to key out. We set this color using `setColor()` with the `effect/green_screen/fromColor` property. ```typescript highlight-configure-color // Set the target color to key out // Use off-white to remove the bright sky background // For traditional green screen footage, use { r: 0.0, g: 1.0, b: 0.0, a: 1.0 } engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.98, g: 0.98, b: 0.98, a: 1.0 }); ``` The example uses off-white (`r: 0.98, g: 0.98, b: 0.98`) to key out a bright sky background. For traditional green screen footage, use pure green (`r: 0.0, g: 1.0, b: 0.0`). For blue screen footage, set the color to pure blue. Match the exact color you want to remove for best results. ## Adjust Color Matching Tolerance The `colorMatch` parameter controls how closely pixels must match the target color to be keyed out. We adjust this using `setFloat()`. ```typescript highlight-adjust-color-match // Adjust color matching tolerance // Higher values (closer to 1.0) key out more color variations // Lower values create more precise keying engine.block.setFloat( greenScreenEffect, 'effect/green_screen/colorMatch', 0.26 ); ``` Higher values (closer to 1.0) key out a wider range of similar colors, which is useful for footage with uneven lighting or color variations in the background. Lower values create more precise keying for well-lit footage with uniform backgrounds. ## Control Edge Smoothness The `smoothness` parameter controls the transition between opaque and transparent areas. This affects how sharp or soft the edges appear around keyed subjects. ```typescript highlight-adjust-smoothness // Control edge smoothness for natural transitions // Higher values create softer edges that blend with backgrounds engine.block.setFloat( greenScreenEffect, 'effect/green_screen/smoothness', 1.0 ); ``` Higher smoothness values create softer edges that blend naturally with new backgrounds, reducing harsh outlines. Lower values produce sharper edges, which may be preferable for high-contrast composites or when preserving fine detail. ## Remove Color Spill Color spill occurs when the key color reflects onto the foreground subject, creating a green or blue tint on edges. The `spill` parameter reduces this color cast. ```typescript highlight-adjust-spill // Remove color spill from reflective surfaces // Reduces color tint on edges near the keyed background engine.block.setFloat(greenScreenEffect, 'effect/green_screen/spill', 1.0); ``` Increase the spill value when you notice the key color appearing on subject edges or reflective surfaces. This is common with shiny hair, glasses, or metallic objects near the screen. ## Composite with Background Layers After keying, we can layer the transparent content over backgrounds using block ordering. We create a background block and use `sendToBack()` to place it behind the keyed image. ```typescript highlight-composite-background // Create a background layer for compositing const backgroundBlock = engine.block.create('graphic'); const backgroundShape = engine.block.createShape('rect'); engine.block.setShape(backgroundBlock, backgroundShape); // Create a solid color fill for the background const backgroundFill = engine.block.createFill('color'); engine.block.setColor(backgroundFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }); engine.block.setFill(backgroundBlock, backgroundFill); // Size and position the background to cover the page engine.block.setWidth(backgroundBlock, 800); engine.block.setHeight(backgroundBlock, 600); engine.block.setPositionX(backgroundBlock, 0); engine.block.setPositionY(backgroundBlock, 0); // Add to page and send to back engine.block.appendChild(page, backgroundBlock); engine.block.sendToBack(backgroundBlock); // Bring the keyed image to front engine.block.bringToFront(imageBlock); ``` The background appears through the transparent areas where the key color was removed. You can use image or video fills instead of solid colors for more dynamic backgrounds. ## Toggle the Effect We can check whether an effect is enabled using `isEffectEnabled()`. ```typescript highlight-check-enabled // Check if the effect is currently enabled const isEnabled = engine.block.isEffectEnabled(greenScreenEffect); ``` To toggle the effect on or off, use `setEffectEnabled()`. This preserves the effect configuration while temporarily removing its visual impact. ```typescript highlight-set-enabled // Toggle the effect on or off engine.block.setEffectEnabled(greenScreenEffect, !isEnabled); ``` Toggling effects is useful for before/after comparisons or conditional processing without removing and recreating the effect. ## Manage the Effect Beyond toggling, you can query, remove, and clean up effects. Use `supportsEffects()` to check if a block can have effects, `getEffects()` to list all applied effects, `removeEffect()` to detach an effect from a block, and `destroy()` to free the effect's resources. ```typescript highlight-manage-effects // Check if the block supports effects const supportsEffects = engine.block.supportsEffects(imageBlock); console.log('Block supports effects:', supportsEffects); // Get all effects applied to the block const effects = engine.block.getEffects(imageBlock); console.log('Number of effects:', effects.length); // Remove the effect from the block (by index) engine.block.removeEffect(imageBlock, 0); console.log('Effect removed from block'); // Destroy the effect instance to free resources engine.block.destroy(greenScreenEffect); console.log('Effect destroyed'); ``` When removing effects, use the index from `getEffects()` to specify which effect to remove. After removing an effect from a block, call `destroy()` on the effect instance to release its resources. This is important for memory management in long-running applications. ## Troubleshooting ### Keying Results Appear Rough or Incomplete - Increase `colorMatch` value to capture more color variations - Ensure source footage has even lighting on the screen - Check that the target color accurately matches the screen color ### Edges Have Color Fringing - Increase `spill` value to remove color cast - Adjust `smoothness` to soften hard edges - Consider using a higher `colorMatch` for gradual color transitions ### Transparent Areas Appear in Wrong Places - Decrease `colorMatch` to be more selective about which colors are keyed - Verify the `fromColor` matches only the intended background color - Check that foreground subjects don't contain colors similar to the key color ## API Reference | Method | Description | | ------------------------------------------------------------------- | -------------------------------------- | | `block.createEffect('green_screen')` | Create a green screen effect instance | | `block.appendEffect(block, effect)` | Add effect to a block's effect stack | | `block.setColor(effect, 'effect/green_screen/fromColor', color)` | Set the color to key out | | `block.setFloat(effect, 'effect/green_screen/colorMatch', value)` | Set color matching tolerance (0.0-1.0) | | `block.setFloat(effect, 'effect/green_screen/smoothness', value)` | Set edge smoothness (0.0-1.0) | | `block.setFloat(effect, 'effect/green_screen/spill', value)` | Set spill removal intensity (0.0-1.0) | | `block.isEffectEnabled(effect)` | Check if an effect is enabled | | `block.setEffectEnabled(effect, enabled)` | Enable or disable an effect | | `block.supportsEffects(block)` | Check if a block supports effects | | `block.getEffects(block)` | Get all effects applied to a block | | `block.removeEffect(block, index)` | Remove effect at specified index | | `block.destroy(effect)` | Destroy an effect instance | ## Next Steps - [Apply Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) - Learn the fundamentals of the effect system - [Blur](https://img.ly/docs/cesdk/angular/filters-and-effects/blur-71d642/) - Add blur effects for depth of field - [Duotone](https://img.ly/docs/cesdk/angular/filters-and-effects/duotone-831fc5/) - Create two-color artistic treatments --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Custom Filters" description: "Extend CE.SDK with custom LUT filter asset sources for brand-specific color grading and filter collections." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-filters-c796ba/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Create Custom Filters](https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-filters-c796ba/) --- Extend CE.SDK with your own LUT filters by creating and registering custom filter asset sources for brand-specific color grading. ![Create Custom Filters example showing images with custom filters applied](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-add-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-add-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-add-browser/) CE.SDK provides built-in LUT filters, but many applications need brand-specific color grading or custom filter collections. Custom filter asset sources let you register your own LUT filters that appear alongside or replace the defaults. Once registered, custom filters integrate seamlessly with the built-in UI and can be applied programmatically. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-add-browser/browser.ts reference-only import type { AssetQueryData, AssetResult, AssetSource, AssetsQueryResult, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; /** * CE.SDK Plugin: Create Custom Filters Guide * * Demonstrates creating and registering custom LUT filter asset sources: * - Creating a filter source with addSource() * - Defining filter assets with LUT metadata * - Loading filters from JSON configuration * - Querying custom filters * - Applying filters from custom sources */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Enable filters in the inspector panel using the Feature API cesdk.feature.enable('ly.img.filter'); // Add a custom filter to the built-in LUT filter source // The ID must follow the format //ly.img.cesdk.filters.lut/{name} // for the UI to display the label correctly engine.asset.addAssetToSource('ly.img.filter', { id: '//ly.img.cesdk.filters.lut/mycustomfilter', label: { en: 'MY CUSTOM FILTER' }, tags: { en: ['custom', 'brand'] }, meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }); // Add translation for the custom filter label cesdk.i18n.setTranslations({ en: { 'property.lutFilter.mycustomfilter': 'MY CUSTOM FILTER' } }); // Create a custom filter asset source for organizing multiple filters const customFilterSource: AssetSource = { id: 'my-custom-filters', async findAssets( queryData: AssetQueryData ): Promise { // Define custom LUT filter assets const filters: AssetResult[] = [ { id: 'vintage-warm', label: 'Vintage Warm', tags: ['vintage', 'warm', 'retro'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'cool-cinema', label: 'Cool Cinema', tags: ['cinema', 'cool', 'film'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'bw-classic', label: 'B&W Classic', tags: ['black and white', 'classic', 'monochrome'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } } ]; // Filter by query if provided let filteredAssets = filters; if (queryData.query) { const searchTerm = queryData.query.toLowerCase(); filteredAssets = filters.filter( (asset) => asset.label?.toLowerCase().includes(searchTerm) || asset.tags?.some((tag) => tag.toLowerCase().includes(searchTerm)) ); } // Filter by groups if provided if (queryData.groups && queryData.groups.length > 0) { filteredAssets = filteredAssets.filter((asset) => asset.tags?.some((tag) => queryData.groups?.includes(tag)) ); } // Handle pagination const page = queryData.page ?? 0; const perPage = queryData.perPage ?? 10; const startIndex = page * perPage; const paginatedAssets = filteredAssets.slice( startIndex, startIndex + perPage ); return { assets: paginatedAssets, total: filteredAssets.length, currentPage: page, nextPage: startIndex + perPage < filteredAssets.length ? page + 1 : undefined }; }, // Return available filter categories async getGroups(): Promise { return ['vintage', 'cinema', 'black and white']; } }; // Register the custom filter source for programmatic access engine.asset.addSource(customFilterSource); // Load filters from a JSON configuration string const filterConfigJSON = JSON.stringify({ version: '2.0.0', id: 'my-json-filters', assets: [ { id: 'sunset-glow', label: { en: 'Sunset Glow' }, tags: { en: ['warm', 'sunset', 'golden'] }, groups: ['Warm Tones'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'ocean-breeze', label: { en: 'Ocean Breeze' }, tags: { en: ['cool', 'blue', 'ocean'] }, groups: ['Cool Tones'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } } ] }); // Create asset source from JSON string const jsonSourceId = await engine.asset.addLocalAssetSourceFromJSONString( filterConfigJSON ); // eslint-disable-next-line no-console console.log('Created JSON-based filter source:', jsonSourceId); // Query filters from our custom source for programmatic use const customFilterResults = await engine.asset.findAssets( 'my-custom-filters', { page: 0, perPage: 10 } ); // Create an image block to demonstrate applying a custom filter const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { x: 50, y: 150, size: { width: 300, height: 200 } }); engine.block.appendChild(page, imageBlock); // Get a filter from our custom source const filterAsset = customFilterResults.assets[0]; if (filterAsset && filterAsset.meta) { // Create and configure the LUT filter effect const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); // Set LUT file URI from asset metadata engine.block.setString( lutEffect, 'effect/lut_filter/lutFileURI', filterAsset.meta.uri as string ); // Configure LUT grid dimensions engine.block.setInt( lutEffect, 'effect/lut_filter/horizontalTileCount', parseInt(filterAsset.meta.horizontalTileCount as string, 10) ); engine.block.setInt( lutEffect, 'effect/lut_filter/verticalTileCount', parseInt(filterAsset.meta.verticalTileCount as string, 10) ); // Set filter intensity (0.0 to 1.0) engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85); // Apply the effect to the image block engine.block.appendEffect(imageBlock, lutEffect); } // Create a second image without a filter for comparison const imageBlock2 = await engine.block.addImage(imageUri, { x: 450, y: 150, size: { width: 300, height: 200 } }); engine.block.appendChild(page, imageBlock2); // Select the filtered image to show the filter in the inspector engine.block.select(imageBlock); // eslint-disable-next-line no-console console.log( 'Custom filters guide initialized. Select an image to see filters in the inspector panel.' ); } } export default Example; ``` This guide covers how to create filter asset sources, define filter metadata, load filters from JSON configuration, and apply custom filters to design elements. ## Filter Asset Metadata LUT filters need these properties in the `meta` object: - **`uri`** - URL to the LUT image file (PNG format) - **`thumbUri`** - URL to the thumbnail preview image - **`horizontalTileCount`** - Number of horizontal tiles in the LUT grid (typically 5 or 8) - **`verticalTileCount`** - Number of vertical tiles in the LUT grid (typically 5 or 8) - **`blockType`** - Must be `//ly.img.ubq/effect/lut_filter` for LUT filters ## Adding a Custom Filter We register a custom filter source using `engine.asset.addSource()` with a `findAssets` callback. This callback returns filter assets matching the query parameters. After registering the source, we use `cesdk.ui.updateAssetLibraryEntry()` to add our custom source to the filter inspector panel. ```typescript highlight-create-custom-source // Add a custom filter to the built-in LUT filter source // The ID must follow the format //ly.img.cesdk.filters.lut/{name} // for the UI to display the label correctly engine.asset.addAssetToSource('ly.img.filter', { id: '//ly.img.cesdk.filters.lut/mycustomfilter', label: { en: 'MY CUSTOM FILTER' }, tags: { en: ['custom', 'brand'] }, meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }); // Add translation for the custom filter label cesdk.i18n.setTranslations({ en: { 'property.lutFilter.mycustomfilter': 'MY CUSTOM FILTER' } }); // Create a custom filter asset source for organizing multiple filters const customFilterSource: AssetSource = { id: 'my-custom-filters', async findAssets( queryData: AssetQueryData ): Promise { // Define custom LUT filter assets const filters: AssetResult[] = [ { id: 'vintage-warm', label: 'Vintage Warm', tags: ['vintage', 'warm', 'retro'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'cool-cinema', label: 'Cool Cinema', tags: ['cinema', 'cool', 'film'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'bw-classic', label: 'B&W Classic', tags: ['black and white', 'classic', 'monochrome'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } } ]; // Filter by query if provided let filteredAssets = filters; if (queryData.query) { const searchTerm = queryData.query.toLowerCase(); filteredAssets = filters.filter( (asset) => asset.label?.toLowerCase().includes(searchTerm) || asset.tags?.some((tag) => tag.toLowerCase().includes(searchTerm)) ); } // Filter by groups if provided if (queryData.groups && queryData.groups.length > 0) { filteredAssets = filteredAssets.filter((asset) => asset.tags?.some((tag) => queryData.groups?.includes(tag)) ); } // Handle pagination const page = queryData.page ?? 0; const perPage = queryData.perPage ?? 10; const startIndex = page * perPage; const paginatedAssets = filteredAssets.slice( startIndex, startIndex + perPage ); return { assets: paginatedAssets, total: filteredAssets.length, currentPage: page, nextPage: startIndex + perPage < filteredAssets.length ? page + 1 : undefined }; }, // Return available filter categories async getGroups(): Promise { return ['vintage', 'cinema', 'black and white']; } }; // Register the custom filter source for programmatic access engine.asset.addSource(customFilterSource); ``` The `findAssets` callback receives query parameters including pagination (`page`, `perPage`), search terms (`query`), and category filters (`groups`). We filter and paginate the results accordingly. The `updateAssetLibraryEntry()` call connects our custom source to the `ly.img.filter` panel, making our filters appear alongside the built-in LUT filters when a user selects an image. ### Filter Asset Structure Each filter asset returned by `findAssets` needs: - **`id`** - Unique identifier for the filter - **`label`** - Display name shown in the UI - **`tags`** - Keywords for search filtering - **`meta`** - Object containing LUT configuration (uri, thumbUri, tile counts, blockType) The optional `getGroups()` method returns available filter categories for the UI. ## Loading Filters from JSON Configuration For larger filter collections, we load definitions from JSON using `engine.asset.addLocalAssetSourceFromJSONString()`. This approach simplifies management of filter libraries. ```typescript highlight-load-from-json-string // Load filters from a JSON configuration string const filterConfigJSON = JSON.stringify({ version: '2.0.0', id: 'my-json-filters', assets: [ { id: 'sunset-glow', label: { en: 'Sunset Glow' }, tags: { en: ['warm', 'sunset', 'golden'] }, groups: ['Warm Tones'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'ocean-breeze', label: { en: 'Ocean Breeze' }, tags: { en: ['cool', 'blue', 'ocean'] }, groups: ['Cool Tones'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } } ] }); // Create asset source from JSON string const jsonSourceId = await engine.asset.addLocalAssetSourceFromJSONString( filterConfigJSON ); // eslint-disable-next-line no-console console.log('Created JSON-based filter source:', jsonSourceId); ``` ### JSON Structure for Filter Assets The JSON format includes: - **`version`** - Schema version (use "2.0.0") - **`id`** - Unique source identifier - **`assets`** - Array of filter definitions Each asset in the array contains: - **`id`** - Unique filter identifier - **`label`** - Localized label object (e.g., `{ "en": "Filter Name" }`) - **`tags`** - Localized tags for search - **`groups`** - Category assignments for UI organization - **`meta`** - LUT configuration properties For filters hosted on a CDN, use `engine.asset.addLocalAssetSourceFromJSONURI()` instead, which resolves relative URLs against the JSON file's parent directory. ## Troubleshooting ### Filters Not Appearing in UI - Verify the asset source is registered before loading the scene - Check that filter metadata includes all required fields (`uri`, `thumbUri`, tile counts) - Ensure the `blockType` is set to `//ly.img.ubq/effect/lut_filter` - Confirm thumbnails are accessible URLs ### LUT Not Rendering Correctly - Verify tile count values match the actual LUT image grid dimensions - Check that the LUT image URL is CORS-enabled for cross-origin requests - Confirm the LUT image uses PNG format ### Filter Thumbnails Missing - Verify `thumbUri` points to an accessible image - Check that thumbnail URLs don't have CORS restrictions - Ensure thumbnail dimensions are appropriate for UI display (typically 100-200px) ## API Reference | Method | Description | | --- | --- | | `engine.asset.addSource(source)` | Register a custom asset source with findAssets callback | | `engine.asset.addLocalAssetSourceFromJSONString(json, basePath)` | Create asset source from inline JSON configuration | | `engine.asset.addLocalAssetSourceFromJSONURI(uri)` | Load asset source from remote JSON file | | `engine.asset.findAssets(sourceId, query)` | Query assets from a registered source | | `engine.asset.findAllSources()` | Get all registered asset source IDs | | `engine.asset.removeSource(id)` | Remove a registered asset source | | `cesdk.ui.updateAssetLibraryEntry(entryId, config)` | Add custom sources to filter inspector panel | | `engine.block.createEffect(type)` | Create effect instance (use `//ly.img.ubq/effect/lut_filter` for LUT filters) | | `engine.block.setString(effect, property, value)` | Set string property (LUT file URI) | | `engine.block.setInt(effect, property, value)` | Set integer property (tile counts) | | `engine.block.setFloat(effect, property, value)` | Set float property (intensity) | | `engine.block.appendEffect(block, effect)` | Add effect to block's effect stack | ## Next Steps Now that you understand how to create and register custom filter sources, explore related topics: - [Apply Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) - Learn to apply filters to design elements and manage effect stacks - [Create a Custom LUT Filter](https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-lut-filter-6e3f49/) - Understand LUT image format and create your own color grading filters - [Blur Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/blur-71d642/) - Add blur effects to images and videos --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create a Custom LUT Filter" description: "Create and apply custom LUT filters to achieve consistent, brand-aligned visual styles." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-lut-filter-6e3f49/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Apply Custom LUT Filter](https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-lut-filter-6e3f49/) --- Apply custom LUT (Look-Up Table) filters to achieve brand-consistent color grading directly through CE.SDK's effect API. ![Create Custom LUT Filter example showing an image with a custom LUT color grade applied](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-create-custom-lut-filter-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-create-custom-lut-filter-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-create-custom-lut-filter-browser/) LUT filters remap colors through a predefined transformation table, enabling cinematic color grading and consistent brand aesthetics. This guide shows how to apply your own LUT files directly to design elements using the effect API. For organizing collections of filters through asset sources, see [Create Custom Filters](https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-filters-c796ba/). ```typescript file=@cesdk_web_examples/guides-filters-and-effects-create-custom-lut-filter-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Create Custom LUT Filter Guide * * Demonstrates applying custom LUT filters directly using the effect API: * - Creating a lut_filter effect * - Configuring the LUT file URI and tile dimensions * - Setting filter intensity * - Toggling the effect on and off */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a gradient background for the page const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.15, g: 0.1, b: 0.25, a: 1 }, stop: 0 }, { color: { r: 0.3, g: 0.15, b: 0.4, a: 1 }, stop: 0.5 }, { color: { r: 0.2, g: 0.1, b: 0.35, a: 1 }, stop: 1 } ]); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); engine.block.setFill(page, gradientFill); // Create a centered title text const titleText = engine.block.create('text'); engine.block.setString(titleText, 'text/text', 'Custom LUT Filter'); engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center'); engine.block.setTextFontSize(titleText, 96); engine.block.setTextColor(titleText, { r: 1, g: 1, b: 1, a: 1 }); engine.block.setWidthMode(titleText, 'Auto'); engine.block.setHeightMode(titleText, 'Auto'); engine.block.appendChild(page, titleText); // Create a subtext below the title const subText = engine.block.create('text'); engine.block.setString(subText, 'text/text', 'img.ly'); engine.block.setEnum(subText, 'text/horizontalAlignment', 'Center'); engine.block.setTextFontSize(subText, 64); engine.block.setTextColor(subText, { r: 0.8, g: 0.8, b: 0.8, a: 1 }); engine.block.setWidthMode(subText, 'Auto'); engine.block.setHeightMode(subText, 'Auto'); engine.block.appendChild(page, subText); // Get text dimensions for centering calculations const titleWidth = engine.block.getFrameWidth(titleText); const titleHeight = engine.block.getFrameHeight(titleText); const subTextWidth = engine.block.getFrameWidth(subText); const subTextHeight = engine.block.getFrameHeight(subText); // Image dimensions (smaller) const imageWidth = 200; const imageHeight = 150; // Calculate total content height and vertical centering const textGap = 8; const imagePadding = 60; const totalContentHeight = titleHeight + textGap + subTextHeight + imagePadding + imageHeight; const startY = (pageHeight - totalContentHeight) / 2; // Position title centered engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleText, startY); // Position subtext below title engine.block.setPositionX(subText, (pageWidth - subTextWidth) / 2); engine.block.setPositionY(subText, startY + titleHeight + textGap); // Add an image block to apply the LUT filter const imageY = startY + titleHeight + textGap + subTextHeight + imagePadding; const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { x: (pageWidth - imageWidth) / 2, y: imageY, size: { width: imageWidth, height: imageHeight } }); engine.block.appendChild(page, imageBlock); // Create a LUT filter effect const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); // Configure the LUT file URI - this is a tiled PNG containing the color lookup table const lutUrl = 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png'; engine.block.setString(lutEffect, 'effect/lut_filter/lutFileURI', lutUrl); // Set the tile grid dimensions - must match the LUT image structure engine.block.setInt(lutEffect, 'effect/lut_filter/horizontalTileCount', 5); engine.block.setInt(lutEffect, 'effect/lut_filter/verticalTileCount', 5); // Set filter intensity (0.0 = no effect, 1.0 = full effect) engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.8); // Apply the effect to the image block engine.block.appendEffect(imageBlock, lutEffect); // Register a custom button component to toggle the LUT filter cesdk.ui.registerComponent('lut.toggle', ({ builder }) => { const isEnabled = engine.block.isEffectEnabled(lutEffect); builder.Button('toggle-lut', { label: 'LUT Filter', icon: isEnabled ? '@imgly/ToggleIconOn' : '@imgly/ToggleIconOff', isActive: isEnabled, onClick: () => { engine.block.setEffectEnabled(lutEffect, !isEnabled); } }); }); // Add the toggle button to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'lut.toggle' ); // Retrieve all effects on the block const effects = engine.block.getEffects(imageBlock); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 1 // Check if block supports effects const supportsEffects = engine.block.supportsEffects(imageBlock); // eslint-disable-next-line no-console console.log('Supports effects:', supportsEffects); // true // Select the image to show it in the editor engine.block.select(imageBlock); // eslint-disable-next-line no-console console.log('Custom LUT filter applied successfully.'); } } export default Example; ``` ## Understanding LUT Image Format CE.SDK uses a tiled PNG format where a 3D color cube is laid out as a 2D grid. Each tile represents a slice of the color cube along the blue axis. The LUT image requires two configuration values: - **`horizontalTileCount`** - Number of tiles across the image width - **`verticalTileCount`** - Number of tiles down the image height CE.SDK supports these tile configurations: - 5×5 tiles with 128px cube size - 8×8 tiles with 512px cube size Standard `.cube` files must be converted to this tiled PNG format using image processing tools. ## Creating LUT PNG Images ### Obtaining LUT Files LUT files are available from multiple sources: - **Color grading software** - Adobe Photoshop, DaVinci Resolve, and Affinity Photo can export 3D LUT files in `.cube` format - **Online LUT libraries** - Many free and commercial LUT packs are available for download - **LUT generators** - Tools that create custom color transformations from reference images ### Converting .cube to Tiled PNG CE.SDK requires LUTs in a specific tiled PNG format where each tile represents a slice of the 3D color cube along the blue axis. To convert a standard `.cube` file: 1. **Parse the .cube file** - Read the 3D color lookup table data 2. **Arrange slices as tiles** - Each blue channel value becomes a separate tile containing the red-green color plane 3. **Export as PNG** - Save the grid as a PNG image CE.SDK's built-in LUTs follow a naming convention: `imgly_lut_{name}_{h}_{v}_{cubeSize}.png` where `h` and `v` are tile counts and `cubeSize` indicates the LUT precision. ### Using Python for Conversion You can write a Python script using PIL/Pillow and NumPy to convert `.cube` files: ```python # Pseudocode for .cube to tiled PNG conversion # 1. Parse the .cube file to extract the 3D LUT data # 2. Reshape data into (blue_slices, height, width, 3) array # 3. Arrange slices in a grid matching tile configuration # 4. Save as PNG with Image.fromarray() ``` ### Using CE.SDK's Built-in LUTs The simplest approach is to use CE.SDK's existing LUT assets as a starting point. The built-in filters use pre-generated tiled PNGs that you can reference for format verification. Check the filter extension at `ly.img.cesdk.filters.lut` for examples of properly formatted LUT images. ## Hosting LUT Files LUT images must be served from an accessible URL. For production deployments, use HTTPS and enable CORS headers for cross-origin requests in browser environments. ## Creating the LUT Effect Create a `lut_filter` effect instance using the effect API: ```typescript highlight-create-effect // Create a LUT filter effect const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); ``` This creates an effect that can be configured and applied to image blocks. ## Configuring LUT Properties Set the LUT file URL and tile dimensions to match your LUT image: ```typescript highlight-configure-lut // Configure the LUT file URI - this is a tiled PNG containing the color lookup table const lutUrl = 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png'; engine.block.setString(lutEffect, 'effect/lut_filter/lutFileURI', lutUrl); // Set the tile grid dimensions - must match the LUT image structure engine.block.setInt(lutEffect, 'effect/lut_filter/horizontalTileCount', 5); engine.block.setInt(lutEffect, 'effect/lut_filter/verticalTileCount', 5); ``` The tile counts must match the actual LUT image grid structure. Using incorrect values produces distorted colors. ## Setting Filter Intensity Control the strength of the color transformation with intensity: ```typescript highlight-set-intensity // Set filter intensity (0.0 = no effect, 1.0 = full effect) engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.8); ``` Values range from 0.0 (no effect) to 1.0 (full effect). Use intermediate values for subtle color grading. ## Applying the Effect Attach the configured effect to an image block: ```typescript highlight-apply-effect // Apply the effect to the image block engine.block.appendEffect(imageBlock, lutEffect); ``` The effect renders immediately after being applied. ## Toggling the Effect Add a toggle button to the navigation bar for enabling and disabling the filter: ```typescript highlight-toggle-effect // Register a custom button component to toggle the LUT filter cesdk.ui.registerComponent('lut.toggle', ({ builder }) => { const isEnabled = engine.block.isEffectEnabled(lutEffect); builder.Button('toggle-lut', { label: 'LUT Filter', icon: isEnabled ? '@imgly/ToggleIconOn' : '@imgly/ToggleIconOff', isActive: isEnabled, onClick: () => { engine.block.setEffectEnabled(lutEffect, !isEnabled); } }); }); // Add the toggle button to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'lut.toggle' ); ``` The `registerComponent` function creates a custom UI component that tracks the effect's enabled state. The `insertOrderComponent` method adds it to the navigation bar. Clicking the button toggles the effect while preserving all settings. ## Managing Effects Retrieve and inspect effects applied to a block: ```typescript highlight-manage-effects // Retrieve all effects on the block const effects = engine.block.getEffects(imageBlock); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 1 // Check if block supports effects const supportsEffects = engine.block.supportsEffects(imageBlock); // eslint-disable-next-line no-console console.log('Supports effects:', supportsEffects); // true ``` Use `getEffects()` to access all effects on a block and `supportsEffects()` to verify compatibility before applying. ## Troubleshooting ### LUT Not Rendering - Verify the LUT image URL is accessible and CORS-enabled - Confirm the image uses PNG format - Check that tile count values match the actual image grid ### Colors Look Wrong - Verify tile counts match the LUT image structure - Ensure the LUT was generated with sRGB color space ## API Reference | Method | Description | | --- | --- | | `engine.block.createEffect('//ly.img.ubq/effect/lut_filter')` | Create a LUT filter effect instance | | `engine.block.setString(effect, 'effect/lut_filter/lutFileURI', uri)` | Set the LUT image URL | | `engine.block.setInt(effect, 'effect/lut_filter/horizontalTileCount', count)` | Set horizontal tile count | | `engine.block.setInt(effect, 'effect/lut_filter/verticalTileCount', count)` | Set vertical tile count | | `engine.block.setFloat(effect, 'effect/lut_filter/intensity', value)` | Set filter intensity (0.0-1.0) | | `engine.block.appendEffect(block, effect)` | Apply effect to a block | | `engine.block.getEffects(block)` | Get all effects on a block | | `engine.block.setEffectEnabled(effect, enabled)` | Enable or disable an effect | | `engine.block.isEffectEnabled(effect)` | Check if effect is enabled | | `engine.block.removeEffect(block, index)` | Remove effect at index | | `engine.block.destroy(effect)` | Destroy an effect instance | | `engine.block.supportsEffects(block)` | Check if block supports effects | | `cesdk.ui.registerComponent(id, renderFn)` | Register a custom UI component | | `cesdk.ui.insertOrderComponent(options, component)` | Add a component to the navigation bar | ## Next Steps - [Create Custom Filters](https://img.ly/docs/cesdk/angular/filters-and-effects/create-custom-filters-c796ba/) - Register custom LUT filters as asset sources - [Apply Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) - Learn more about the effects system - [Duotone Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/duotone-831fc5/) - Create two-color artistic treatments --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Distortion Effects" description: "Apply distortion effects to warp, shift, and transform design elements for dynamic artistic visuals in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/distortion-5b5a66/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Distortion](https://img.ly/docs/cesdk/angular/filters-and-effects/distortion-5b5a66/) --- Apply distortion effects to warp, shift, and transform images and videos for dynamic artistic visuals. ![Distortion Effects](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-distortion-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-distortion-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-distortion-browser/) Distortion effects differ from color filters in that they modify the geometry and spatial arrangement of pixels rather than their color values. CE.SDK provides several distortion effect types: liquid warping, mirror reflections, color channel shifting, radial pixelation, and TV glitch. Each effect offers configurable parameters to control the intensity and style of the distortion. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-distortion-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Distortion Effects Guide * * Demonstrates applying various distortion effects to image blocks: * - Checking effect support * - Applying liquid distortion * - Applying mirror effect * - Applying shifter (chromatic aberration) * - Applying radial pixel effect * - Applying TV glitch effect * - Combining multiple distortion effects * - Managing effects (enable/disable/remove) */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; 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'); // Calculate responsive grid layout based on page dimensions const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Use a sample image URL const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const blockSize = { width: blockWidth, height: blockHeight }; // Create a sample block to demonstrate effect support checking const sampleBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, sampleBlock); // Check if a block supports effects before applying them const supportsEffects = engine.block.supportsEffects(sampleBlock); console.log('Block supports effects:', supportsEffects); // Create an image block for liquid distortion demonstration const liquidBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, liquidBlock); // Create and apply liquid effect - creates flowing, organic warping const liquidEffect = engine.block.createEffect('liquid'); engine.block.setFloat(liquidEffect, 'effect/liquid/amount', 0.5); engine.block.setFloat(liquidEffect, 'effect/liquid/scale', 1.0); engine.block.setFloat(liquidEffect, 'effect/liquid/time', 0.0); engine.block.appendEffect(liquidBlock, liquidEffect); // Create an image block for mirror effect demonstration const mirrorBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, mirrorBlock); // Create and apply mirror effect - reflects image along a side const mirrorEffect = engine.block.createEffect('mirror'); // Side values: 0 = Left, 1 = Right, 2 = Top, 3 = Bottom engine.block.setInt(mirrorEffect, 'effect/mirror/side', 0); engine.block.appendEffect(mirrorBlock, mirrorEffect); // Create an image block for shifter effect demonstration const shifterBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, shifterBlock); // Create and apply shifter effect - displaces color channels const shifterEffect = engine.block.createEffect('shifter'); engine.block.setFloat(shifterEffect, 'effect/shifter/amount', 0.3); engine.block.setFloat(shifterEffect, 'effect/shifter/angle', 0.785); engine.block.appendEffect(shifterBlock, shifterEffect); // Create an image block for radial pixel effect demonstration const radialPixelBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, radialPixelBlock); // Create and apply radial pixel effect - pixelates in circular pattern const radialPixelEffect = engine.block.createEffect('radial_pixel'); engine.block.setFloat(radialPixelEffect, 'effect/radial_pixel/radius', 0.5); engine.block.setFloat( radialPixelEffect, 'effect/radial_pixel/segments', 0.5 ); engine.block.appendEffect(radialPixelBlock, radialPixelEffect); // Create an image block for TV glitch effect demonstration const tvGlitchBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, tvGlitchBlock); // Create and apply TV glitch effect - simulates analog TV interference const tvGlitchEffect = engine.block.createEffect('tv_glitch'); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/distortion', 0.4); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/distortion2', 0.2); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/speed', 0.5); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/rollSpeed', 0.1); engine.block.appendEffect(tvGlitchBlock, tvGlitchEffect); // Get all effects applied to a block const effects = engine.block.getEffects(tvGlitchBlock); console.log('Applied effects:', effects); // Get the type of each effect effects.forEach((effect, index) => { const effectType = engine.block.getType(effect); console.log(`Effect ${index}: ${effectType}`); }); // Check if an effect is enabled const isEnabled = engine.block.isEffectEnabled(liquidEffect); console.log('Liquid effect enabled:', isEnabled); // Disable an effect without removing it engine.block.setEffectEnabled(liquidEffect, false); console.log( 'Liquid effect now disabled:', !engine.block.isEffectEnabled(liquidEffect) ); // Re-enable the effect engine.block.setEffectEnabled(liquidEffect, true); // To remove an effect, get its index and use removeEffect const shifterEffects = engine.block.getEffects(shifterBlock); const effectIndex = shifterEffects.indexOf(shifterEffect); if (effectIndex !== -1) { // Remove effect at the specified index engine.block.removeEffect(shifterBlock, effectIndex); // Destroy the removed effect to free memory engine.block.destroy(shifterEffect); } // Re-add the effect for display purposes const newShifterEffect = engine.block.createEffect('shifter'); engine.block.setFloat(newShifterEffect, 'effect/shifter/amount', 0.3); engine.block.setFloat(newShifterEffect, 'effect/shifter/angle', 0.785); engine.block.appendEffect(shifterBlock, newShifterEffect); // Find all available properties for an effect const tvGlitchProperties = engine.block.findAllProperties(tvGlitchEffect); console.log('TV glitch properties:', tvGlitchProperties); // Position all blocks in grid layout const blocks = [ sampleBlock, liquidBlock, mirrorBlock, shifterBlock, radialPixelBlock, tvGlitchBlock ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Select the liquid effect block (second block) and open the effects panel engine.block.select(liquidBlock); cesdk.ui.openPanel('//ly.img.panel/inspector/effects'); console.log('Distortion effects guide initialized.'); } } export default Example; ``` This guide covers how to enable distortion effects in the built-in UI and how to apply and configure them programmatically using the block API. ## Using the Built-in Distortion UI To enable distortion effects in the inspector panel, use the Feature API: ```typescript highlight-enable-effects // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); ``` Once enabled, users can access distortion effects from the inspector when selecting an image or video block. The effects panel displays available distortions with real-time preview as parameters are adjusted. ## Check Effect Support Before applying distortion effects, verify the block supports them. Graphic blocks with image or video fills support effects, while scene blocks do not. ```typescript highlight-check-support // Create a sample block to demonstrate effect support checking const sampleBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, sampleBlock); // Check if a block supports effects before applying them const supportsEffects = engine.block.supportsEffects(sampleBlock); console.log('Block supports effects:', supportsEffects); ``` ## Apply Liquid Effect The liquid effect creates organic, flowing distortions that warp the image as if viewed through water. We can configure the intensity and scale of the warping. ```typescript highlight-liquid-effect // Create an image block for liquid distortion demonstration const liquidBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, liquidBlock); // Create and apply liquid effect - creates flowing, organic warping const liquidEffect = engine.block.createEffect('liquid'); engine.block.setFloat(liquidEffect, 'effect/liquid/amount', 0.5); engine.block.setFloat(liquidEffect, 'effect/liquid/scale', 1.0); engine.block.setFloat(liquidEffect, 'effect/liquid/time', 0.0); engine.block.appendEffect(liquidBlock, liquidEffect); ``` The liquid effect parameters: - **amount** (0.0 to 1.0) - Controls the intensity of the warping - **scale** - Adjusts the size of the liquid pattern - **time** - Animation time offset for animated liquid distortions ## Apply Mirror Effect The mirror effect reflects the image along a configurable side, creating symmetrical compositions. ```typescript highlight-mirror-effect // Create an image block for mirror effect demonstration const mirrorBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, mirrorBlock); // Create and apply mirror effect - reflects image along a side const mirrorEffect = engine.block.createEffect('mirror'); // Side values: 0 = Left, 1 = Right, 2 = Top, 3 = Bottom engine.block.setInt(mirrorEffect, 'effect/mirror/side', 0); engine.block.appendEffect(mirrorBlock, mirrorEffect); ``` The `side` parameter uses integer values: `0` (Left), `1` (Right), `2` (Top), or `3` (Bottom) to specify the reflection axis. ## Apply Shifter Effect The shifter effect displaces color channels at an angle, creating chromatic aberration commonly seen in glitch art and retro visuals. ```typescript highlight-shifter-effect // Create an image block for shifter effect demonstration const shifterBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, shifterBlock); // Create and apply shifter effect - displaces color channels const shifterEffect = engine.block.createEffect('shifter'); engine.block.setFloat(shifterEffect, 'effect/shifter/amount', 0.3); engine.block.setFloat(shifterEffect, 'effect/shifter/angle', 0.785); engine.block.appendEffect(shifterBlock, shifterEffect); ``` The shifter effect parameters: - **amount** (0.0 to 1.0) - Controls the displacement distance - **angle** - Sets the direction of the shift in radians ## Apply Radial Pixel Effect The radial pixel effect pixelates the image in a circular pattern emanating from the center, useful for focus effects or stylized treatments. ```typescript highlight-radial-pixel-effect // Create an image block for radial pixel effect demonstration const radialPixelBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, radialPixelBlock); // Create and apply radial pixel effect - pixelates in circular pattern const radialPixelEffect = engine.block.createEffect('radial_pixel'); engine.block.setFloat(radialPixelEffect, 'effect/radial_pixel/radius', 0.5); engine.block.setFloat( radialPixelEffect, 'effect/radial_pixel/segments', 0.5 ); engine.block.appendEffect(radialPixelBlock, radialPixelEffect); ``` The radial pixel effect parameters: - **radius** (0.0 to 1.0) - Controls the size of the pixelation effect - **segments** (0.0 to 1.0) - Controls the angular segmentation intensity ## Apply TV Glitch Effect The TV glitch effect simulates analog television interference with horizontal distortion and rolling effects, popular for retro and digital aesthetics. ```typescript highlight-tv-glitch-effect // Create an image block for TV glitch effect demonstration const tvGlitchBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, tvGlitchBlock); // Create and apply TV glitch effect - simulates analog TV interference const tvGlitchEffect = engine.block.createEffect('tv_glitch'); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/distortion', 0.4); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/distortion2', 0.2); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/speed', 0.5); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/rollSpeed', 0.1); engine.block.appendEffect(tvGlitchBlock, tvGlitchEffect); ``` The TV glitch effect parameters: - **distortion** - Primary horizontal distortion intensity - **distortion2** - Secondary distortion layer - **speed** - Animation speed for the glitch effect - **rollSpeed** - Vertical roll speed simulating signal sync issues ## List Applied Effects Retrieve all effects applied to a block to inspect or iterate over them. ```typescript highlight-get-effects // Get all effects applied to a block const effects = engine.block.getEffects(tvGlitchBlock); console.log('Applied effects:', effects); // Get the type of each effect effects.forEach((effect, index) => { const effectType = engine.block.getType(effect); console.log(`Effect ${index}: ${effectType}`); }); ``` This returns an array of effect IDs in the order they were applied. ## Enable and Disable Effects Toggle effects on and off without removing them from the block. This preserves all effect parameters while controlling visibility. ```typescript highlight-toggle-effect // Check if an effect is enabled const isEnabled = engine.block.isEffectEnabled(liquidEffect); console.log('Liquid effect enabled:', isEnabled); // Disable an effect without removing it engine.block.setEffectEnabled(liquidEffect, false); console.log( 'Liquid effect now disabled:', !engine.block.isEffectEnabled(liquidEffect) ); // Re-enable the effect engine.block.setEffectEnabled(liquidEffect, true); ``` Disabled effects remain attached to the block but won't be rendered until re-enabled. This is useful for before/after comparisons or performance optimization. ## Remove Effects Remove effects from a block when they're no longer needed. Always destroy removed effects to free memory. ```typescript highlight-remove-effect // To remove an effect, get its index and use removeEffect const shifterEffects = engine.block.getEffects(shifterBlock); const effectIndex = shifterEffects.indexOf(shifterEffect); if (effectIndex !== -1) { // Remove effect at the specified index engine.block.removeEffect(shifterBlock, effectIndex); // Destroy the removed effect to free memory engine.block.destroy(shifterEffect); } // Re-add the effect for display purposes const newShifterEffect = engine.block.createEffect('shifter'); engine.block.setFloat(newShifterEffect, 'effect/shifter/amount', 0.3); engine.block.setFloat(newShifterEffect, 'effect/shifter/angle', 0.785); engine.block.appendEffect(shifterBlock, newShifterEffect); ``` ## Discover Effect Properties Use `findAllProperties()` to discover all available properties for any effect type. ```typescript highlight-effect-properties // Find all available properties for an effect const tvGlitchProperties = engine.block.findAllProperties(tvGlitchEffect); console.log('TV glitch properties:', tvGlitchProperties); ``` This returns an array of property paths that can be used with `setFloat()`, `setInt()`, or `setEnum()`. ## API Reference | Method | Description | |--------|-------------| | `engine.block.supportsEffects(id)` | Check if a block supports effects | | `engine.block.createEffect(type)` | Create a new effect instance | | `engine.block.appendEffect(id, effectId)` | Add an effect to a block | | `engine.block.getEffects(id)` | Get all effects applied to a block | | `engine.block.setEffectEnabled(effectId, enabled)` | Enable or disable an effect | | `engine.block.isEffectEnabled(effectId)` | Check if an effect is enabled | | `engine.block.removeEffect(id, index)` | Remove an effect at a specific index | | `engine.block.findAllProperties(id)` | Discover all properties of an effect | | `engine.block.setFloat(id, property, value)` | Set a float property value | | `engine.block.setInt(id, property, value)` | Set an integer property value | | `engine.block.destroy(id)` | Destroy a block to free memory | | `engine.block.getType(id)` | Get the type of a block | ## Available Distortion Effects | Effect Type | Description | Key Properties | |-------------|-------------|----------------| | `liquid` | Flowing, organic warping | `amount`, `scale`, `time` | | `mirror` | Reflection along a side | `side` (0=Left, 1=Right, 2=Top, 3=Bottom) | | `shifter` | Chromatic aberration | `amount`, `angle` | | `radial_pixel` | Circular pixelation | `radius`, `segments` | | `tv_glitch` | Analog TV interference | `distortion`, `distortion2`, `speed`, `rollSpeed` | ## Next Steps - [Apply Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) - Learn the foundational effect APIs - [Blur Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/blur-71d642/) - Apply blur techniques for depth and focus effects --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Duotone" description: "Apply duotone effects to images, mapping tones to two colors for stylized visuals, vintage aesthetics, or brand-specific treatments." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/duotone-831fc5/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Duotone](https://img.ly/docs/cesdk/angular/filters-and-effects/duotone-831fc5/) --- Apply duotone effects to images, mapping tones to two colors for stylized visuals and brand-specific treatments. ![CE.SDK Duotone](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-duotone-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-duotone-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-duotone-browser/) Duotone is a color effect that maps image brightness to two colors: a dark color for shadows and a light color for highlights. The result is a striking two-tone image where all original colors are replaced by gradations between your chosen pair. This technique creates bold, cohesive visuals that are particularly effective for brand consistency, vintage aesthetics, and artistic treatments. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-duotone-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; import { hexToRgba } from './utils'; /** * CE.SDK Plugin: Duotone Guide * * Demonstrates applying duotone effects to image blocks: * - Querying duotone presets from the asset library * - Applying duotone with preset colors * - Creating custom duotone color combinations * - Managing and removing 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Enable duotone filters in the inspector panel cesdk.feature.enable('ly.img.filter'); // Use a sample image URL const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Create image block for preset demonstration const presetImageBlock = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.appendChild(page, presetImageBlock); engine.block.setPositionX(presetImageBlock, 25); engine.block.setPositionY(presetImageBlock, 25); // Verify a block supports effects before applying them const canApplyEffects = engine.block.supportsEffects(presetImageBlock); if (!canApplyEffects) { console.warn('Block does not support effects'); return; } // Query duotone presets from the asset library const duotoneResults = await engine.asset.findAssets('ly.img.filter', { page: 0, perPage: 10 }); const duotonePresets = duotoneResults.assets; // Apply a preset to the first image if (duotonePresets.length > 0) { const preset = duotonePresets[0]; // Create a new duotone effect block const duotoneEffect = engine.block.createEffect('duotone_filter'); // Configure effect with preset colors (convert hex to RGBA) if (preset.meta?.darkColor) { engine.block.setColor( duotoneEffect, 'effect/duotone_filter/darkColor', hexToRgba(preset.meta.darkColor as string) ); } if (preset.meta?.lightColor) { engine.block.setColor( duotoneEffect, 'effect/duotone_filter/lightColor', hexToRgba(preset.meta.lightColor as string) ); } engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.9 ); // Attach the configured effect to the image block engine.block.appendEffect(presetImageBlock, duotoneEffect); } // Create image block for custom duotone demonstration const customImageBlock = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.appendChild(page, customImageBlock); engine.block.setPositionX(customImageBlock, 425); engine.block.setPositionY(customImageBlock, 25); // Create duotone with custom brand colors const customDuotone = engine.block.createEffect('duotone_filter'); // Dark color: deep navy blue (shadows) engine.block.setColor(customDuotone, 'effect/duotone_filter/darkColor', { r: 0.1, g: 0.15, b: 0.3, a: 1.0 }); // Light color: warm cream (highlights) engine.block.setColor(customDuotone, 'effect/duotone_filter/lightColor', { r: 0.95, g: 0.9, b: 0.8, a: 1.0 }); // Control effect strength (0.0 = original, 1.0 = full duotone) engine.block.setFloat( customDuotone, 'effect/duotone_filter/intensity', 0.85 ); engine.block.appendEffect(customImageBlock, customDuotone); // Create image block for combined effects demonstration const combinedImageBlock = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.appendChild(page, combinedImageBlock); engine.block.setPositionX(combinedImageBlock, 225); engine.block.setPositionY(combinedImageBlock, 325); // Combine duotone with other effects // First, add adjustments for brightness and contrast const adjustments = engine.block.createEffect('adjustments'); engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.1); engine.block.setFloat(adjustments, 'effect/adjustments/contrast', 0.15); engine.block.appendEffect(combinedImageBlock, adjustments); // Then add duotone on top const combinedDuotone = engine.block.createEffect('duotone_filter'); engine.block.setColor( combinedDuotone, 'effect/duotone_filter/darkColor', { r: 0.2, g: 0.1, b: 0.3, a: 1.0 } // Deep purple ); engine.block.setColor( combinedDuotone, 'effect/duotone_filter/lightColor', { r: 1.0, g: 0.85, b: 0.7, a: 1.0 } // Warm peach ); engine.block.setFloat( combinedDuotone, 'effect/duotone_filter/intensity', 0.75 ); engine.block.appendEffect(combinedImageBlock, combinedDuotone); // Get all effects currently applied to a block const appliedEffects = engine.block.getEffects(presetImageBlock); console.log(`Block has ${appliedEffects.length} effect(s) applied`); // Disable an effect without removing it if (appliedEffects.length > 0) { engine.block.setEffectEnabled(appliedEffects[0], false); // Check if an effect is currently enabled const isEnabled = engine.block.isEffectEnabled(appliedEffects[0]); console.log(`Effect enabled: ${isEnabled}`); // Re-enable the effect engine.block.setEffectEnabled(appliedEffects[0], true); } // Remove an effect at a specific index from a block const effectsOnCustom = engine.block.getEffects(customImageBlock); if (effectsOnCustom.length > 0) { engine.block.removeEffect(customImageBlock, 0); } // Destroy removed effect blocks to free memory if (effectsOnCustom.length > 0) { engine.block.destroy(effectsOnCustom[0]); } // Re-apply custom duotone after demonstration const newCustomDuotone = engine.block.createEffect('duotone_filter'); engine.block.setColor(newCustomDuotone, 'effect/duotone_filter/darkColor', { r: 0.1, g: 0.15, b: 0.3, a: 1.0 }); engine.block.setColor( newCustomDuotone, 'effect/duotone_filter/lightColor', { r: 0.95, g: 0.9, b: 0.8, a: 1.0 } ); engine.block.setFloat( newCustomDuotone, 'effect/duotone_filter/intensity', 0.85 ); engine.block.appendEffect(customImageBlock, newCustomDuotone); // Select the first image block to show the effects panel engine.block.select(presetImageBlock); console.log( 'Duotone guide initialized. Select any image to see the filters panel.' ); } } export default Example; ``` ## Understanding Duotone Unlike filters that simply tint or shift colors, duotone completely remaps the tonal range of an image. The effect analyzes each pixel's luminosity and assigns a color based on where it falls between pure black and pure white: - **Dark tones** (shadows, blacks) adopt the dark color - **Light tones** (highlights, whites) adopt the light color - **Midtones** blend between the two colors This creates images with a consistent color palette regardless of the original colors, making duotone ideal for: - **Brand consistency** - Apply your brand's color palette across diverse imagery - **Visual cohesion** - Unify photos from different sources in a design - **Vintage aesthetics** - Recreate classic print techniques like cyanotype or sepia - **Bold statements** - Create eye-catching visuals for social media or marketing The intensity property lets you blend between the original image and the full duotone effect, giving you creative control over how strongly the effect is applied. ## Using the Built-in Duotone UI CE.SDK provides a filters panel where users can browse and apply duotone presets interactively. To enable this, use the Feature API: ```typescript highlight=highlight-enable-filters // Enable duotone filters in the inspector panel cesdk.feature.enable('ly.img.filter'); ``` With filters enabled, users can: 1. Select any image block in the canvas 2. Open the inspector panel 3. Navigate to the Filters section 4. Browse available duotone presets and apply with a single click 5. Adjust the intensity slider to control effect strength ## Check Effect Support Before applying effects programmatically, verify the block supports them. Only graphic blocks with image or video fills can have effects applied: ```typescript highlight=highlight-check-support // Verify a block supports effects before applying them const canApplyEffects = engine.block.supportsEffects(presetImageBlock); if (!canApplyEffects) { console.warn('Block does not support effects'); return; } ``` Attempting to apply effects to unsupported blocks (like text or shapes without fills) will result in an error. ## Applying Duotone Presets CE.SDK includes a library of professionally designed duotone presets. Each preset defines a dark/light color pair optimized for visual appeal. ### Query Built-in Presets Use the Asset API to retrieve available duotone presets from the asset library: ```typescript highlight=highlight-query-presets // Query duotone presets from the asset library const duotoneResults = await engine.asset.findAssets('ly.img.filter', { page: 0, perPage: 10 }); const duotonePresets = duotoneResults.assets; ``` Preset metadata contains `darkColor` and `lightColor` as hex strings. Convert these to RGBA format (values 0-1) before passing to the effect API. ### Create Effect Block Create a new duotone effect block that can be configured and attached to an image: ```typescript highlight=highlight-create-effect // Create a new duotone effect block const duotoneEffect = engine.block.createEffect('duotone_filter'); ``` ### Configure Preset Colors Apply the preset's color values to the effect using `setColor()` for colors and `setFloat()` for intensity: ```typescript highlight=highlight-apply-preset // Configure effect with preset colors (convert hex to RGBA) if (preset.meta?.darkColor) { engine.block.setColor( duotoneEffect, 'effect/duotone_filter/darkColor', hexToRgba(preset.meta.darkColor as string) ); } if (preset.meta?.lightColor) { engine.block.setColor( duotoneEffect, 'effect/duotone_filter/lightColor', hexToRgba(preset.meta.lightColor as string) ); } engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.9 ); ``` ### Append Effect to Block Attach the fully configured effect to an image block: ```typescript highlight=highlight-append-effect // Attach the configured effect to the image block engine.block.appendEffect(presetImageBlock, duotoneEffect); ``` ## Creating Custom Colors For brand-specific treatments or unique creative effects, define your own color combinations using `engine.block.setColor()`: ```typescript highlight=highlight-custom-colors // Create duotone with custom brand colors const customDuotone = engine.block.createEffect('duotone_filter'); // Dark color: deep navy blue (shadows) engine.block.setColor(customDuotone, 'effect/duotone_filter/darkColor', { r: 0.1, g: 0.15, b: 0.3, a: 1.0 }); // Light color: warm cream (highlights) engine.block.setColor(customDuotone, 'effect/duotone_filter/lightColor', { r: 0.95, g: 0.9, b: 0.8, a: 1.0 }); // Control effect strength (0.0 = original, 1.0 = full duotone) engine.block.setFloat( customDuotone, 'effect/duotone_filter/intensity', 0.85 ); engine.block.appendEffect(customImageBlock, customDuotone); ``` ### Choosing Effective Color Pairs The relationship between your dark and light colors determines the final aesthetic: | Color Relationship | Visual Effect | Example Use Case | | --- | --- | --- | | **High contrast** | Bold, graphic look | Social media, posters | | **Low contrast** | Subtle, sophisticated | Editorial, luxury brands | | **Warm to cool** | Dynamic temperature shift | Lifestyle, fashion | | **Monochromatic** | Tinted photography style | Vintage, noir aesthetic | **Classic combinations to try:** - **Cyanotype**: Deep blue (`#1a365d`) to light cyan (`#e0f7fa`) - **Sepia**: Dark brown (`#3e2723`) to cream (`#fff8e1`) - **Neon**: Deep purple (`#1a1a2e`) to hot pink (`#ff1493`) - **Corporate**: Navy (`#0d47a1`) to silver (`#eceff1`) > **Tip:** Start with colors from your brand palette. Use your primary brand color as the light color for highlights, paired with a darker complementary shade for shadows. ## Combining with Other Effects Duotone can be stacked with other effects like brightness adjustments, contrast, or blur. Effects are applied in stack order, so the sequence affects the final result: ```typescript highlight=highlight-combine-effects // Combine duotone with other effects // First, add adjustments for brightness and contrast const adjustments = engine.block.createEffect('adjustments'); engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.1); engine.block.setFloat(adjustments, 'effect/adjustments/contrast', 0.15); engine.block.appendEffect(combinedImageBlock, adjustments); // Then add duotone on top const combinedDuotone = engine.block.createEffect('duotone_filter'); engine.block.setColor( combinedDuotone, 'effect/duotone_filter/darkColor', { r: 0.2, g: 0.1, b: 0.3, a: 1.0 } // Deep purple ); engine.block.setColor( combinedDuotone, 'effect/duotone_filter/lightColor', { r: 1.0, g: 0.85, b: 0.7, a: 1.0 } // Warm peach ); engine.block.setFloat( combinedDuotone, 'effect/duotone_filter/intensity', 0.75 ); engine.block.appendEffect(combinedImageBlock, combinedDuotone); ``` **Effect order matters**: In this example, brightness and contrast are applied first, then duotone maps the adjusted tones. Reversing the order would apply duotone first, then adjust the duotone colors' brightness—producing a different result. Common combinations: - **Adjustments → Duotone**: Optimize image contrast before applying duotone for better tonal separation - **Duotone → Vignette**: Add depth with darkened edges after the color treatment - **Blur → Duotone**: Create dreamy, soft-focus duotone backgrounds ## Managing Duotone Effects Once effects are applied to a block, you can list, toggle, and remove them programmatically. ### List Applied Effects Retrieve all effect block IDs currently attached to a block: ```typescript highlight=highlight-list-effects // Get all effects currently applied to a block const appliedEffects = engine.block.getEffects(presetImageBlock); ``` ### Toggle Effect Visibility Disable an effect temporarily without removing it from the block: ```typescript highlight=highlight-toggle-effects // Disable an effect without removing it if (appliedEffects.length > 0) { engine.block.setEffectEnabled(appliedEffects[0], false); // Check if an effect is currently enabled const isEnabled = engine.block.isEffectEnabled(appliedEffects[0]); console.log(`Effect enabled: ${isEnabled}`); // Re-enable the effect engine.block.setEffectEnabled(appliedEffects[0], true); } ``` ### Remove Effects Detach an effect from a block by specifying its index in the effect stack: ```typescript highlight=highlight-remove-effect // Remove an effect at a specific index from a block const effectsOnCustom = engine.block.getEffects(customImageBlock); if (effectsOnCustom.length > 0) { engine.block.removeEffect(customImageBlock, 0); } ``` ### Clean Up Resources After removing an effect, destroy it to free memory: ```typescript highlight=highlight-cleanup-effect // Destroy removed effect blocks to free memory if (effectsOnCustom.length > 0) { engine.block.destroy(effectsOnCustom[0]); } ``` > **Caution:** When removing effects, always destroy the effect block afterward to prevent memory leaks. Effects are independent blocks that persist until explicitly destroyed. ### Duotone Properties | Property | Type | Range | Description | | --- | --- | --- | --- | | `effect/duotone_filter/darkColor` | Color | RGBA (0-1) | Color applied to shadows and dark tones | | `effect/duotone_filter/lightColor` | Color | RGBA (0-1) | Color applied to highlights and light tones | | `effect/duotone_filter/intensity` | Float | 0.0 - 1.0 | Effect strength (0 = original, 1 = full duotone) | **Intensity guidelines:** - `0.5 - 0.7`: Subtle tint, original image still recognizable - `0.8 - 0.9`: Strong duotone effect, ideal for most use cases - `1.0`: Full duotone, no original colors remain ## Best Practices ### Performance Considerations - **Batch effect creation**: When applying the same duotone to multiple images, create the effect once and clone it rather than creating new effects for each block - **Limit effect stacking**: Each additional effect increases render time; keep stacks minimal for real-time editing - **Clean up unused effects**: Always destroy effect blocks when they're no longer needed to free GPU resources - **Disable rather than remove**: For temporary changes, use `setEffectEnabled(false)` instead of removing and re-creating effects ### Common Issues **Duotone not visible**: Verify the block supports effects with `engine.block.supportsEffects(block)`. Only graphic blocks with image or video fills support effects. **Colors look wrong**: Ensure RGBA values are in the 0-1 range, not 0-255. For example, use `{ r: 0.5, g: 0.5, b: 0.5, a: 1.0 }` instead of `{ r: 128, g: 128, b: 128, a: 255 }`. **Effect too subtle or overwhelming**: Adjust the intensity property. Start at 0.85 and tune based on your image content and color choices. **Muddy midtones**: If midtones look flat, increase contrast between your dark and light colors, or add an adjustments effect before duotone to improve tonal separation. ## API Reference ### Effect Methods | Method | Description | | --- | --- | | `engine.asset.findAssets(sourceId, query)` | Queries assets from an asset source | | `engine.block.supportsEffects(block)` | Returns `true` if the block can have effects applied | | `engine.block.createEffect(type)` | Creates a new effect block of the specified type | | `engine.block.setColor(block, property, color)` | Sets a color property on a block | | `engine.block.setFloat(block, property, value)` | Sets a float property on a block | | `engine.block.appendEffect(block, effect)` | Appends an effect to a block's effect stack | | `engine.block.getEffects(block)` | Returns array of effect block IDs applied to a block | | `engine.block.setEffectEnabled(effect, enabled)` | Enables or disables an effect | | `engine.block.isEffectEnabled(effect)` | Returns `true` if the effect is enabled | | `engine.block.removeEffect(block, index)` | Removes an effect at the given index from a block | | `engine.block.destroy(block)` | Destroys a block and frees resources | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Gradient Fills" description: "Learn how to create and apply linear, radial, and conical gradient fills to design elements in CE.SDK" platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/gradients-0ff079/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/angular/fills-402ddc/) > [Gradient](https://img.ly/docs/cesdk/angular/filters-and-effects/gradients-0ff079/) --- Create smooth color transitions in shapes, text, and design blocks using CE.SDK's gradient fill system with support for linear, radial, and conical gradients. ![Gradient Fills example showing linear, radial, and conical gradient transitions](./assets/browser.hero.webp) > **Reading time:** 20 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-gradient-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-fills-gradient-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-fills-gradient-browser/) Gradient fills are one of the fundamental fill types in CE.SDK, allowing you to paint design blocks with smooth color transitions. Unlike solid color fills that apply a uniform color or image fills that display photo content, gradient fills create dynamic visual effects with depth and visual interest. The gradient fill system supports three types: linear gradients that transition along a straight line, radial gradients that emanate from a center point, and conical gradients that rotate around a center point like a color wheel. ```typescript file=@cesdk_web_examples/guides-fills-gradient-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Gradient Fills Guide * * This example demonstrates: * - Creating linear, radial, and conical gradient fills * - Configuring gradient color stops * - Positioning gradients * - Using different color spaces in gradients * - Advanced gradient techniques */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Fill features are enabled by default in CE.SDK // You can check and control fill feature availability: const engine = cesdk.engine; const isFillEnabled = cesdk.feature.isEnabled('ly.img.fill', { engine }); console.log('Fill feature enabled:', isFillEnabled); // Create a design scene using CE.SDK cesdk method await cesdk.actions.run('scene.create', { page: { width: 1200, height: 900, unit: 'Pixel' } }); // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // 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, 15); const { blockWidth, blockHeight, getPosition } = layout; // Helper function to create a shape with a fill const createShapeWithFill = ( fillType: 'gradient/linear' | 'gradient/radial' | 'gradient/conical' ): { block: number; fill: number } => { const block = engine.block.create('graphic'); const shape = engine.block.createShape('rect'); 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 gradient fill const gradientFill = engine.block.createFill(fillType); // Apply the fill to the block engine.block.setFill(block, gradientFill); return { block, fill: gradientFill }; }; // ============================================================================= // Example 1: Linear Gradient (Vertical) // ============================================================================= const { block: linearVerticalBlock, fill: linearVertical } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(linearVertical, '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 } ]); // Set vertical gradient (top to bottom) engine.block.setFloat( linearVertical, 'fill/gradient/linear/startPointX', 0.5 ); engine.block.setFloat( linearVertical, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat( linearVertical, 'fill/gradient/linear/endPointX', 0.5 ); engine.block.setFloat(linearVertical, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 2: Linear Gradient (Horizontal) // ============================================================================= const { block: linearHorizontalBlock, fill: linearHorizontal } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( linearHorizontal, 'fill/gradient/colors', [ { color: { r: 0.8, g: 0.2, b: 0.4, a: 1.0 }, stop: 0 }, { color: { r: 0.2, g: 0.8, b: 0.6, a: 1.0 }, stop: 1 } ] ); // Set horizontal gradient (left to right) engine.block.setFloat( linearHorizontal, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( linearHorizontal, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat( linearHorizontal, 'fill/gradient/linear/endPointX', 1 ); engine.block.setFloat( linearHorizontal, 'fill/gradient/linear/endPointY', 0.5 ); // ============================================================================= // Example 3: Linear Gradient (Diagonal) // ============================================================================= const { block: linearDiagonalBlock, fill: linearDiagonal } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(linearDiagonal, 'fill/gradient/colors', [ { color: { r: 0.5, g: 0.2, b: 0.8, a: 1.0 }, stop: 0 }, { color: { r: 0.9, g: 0.6, b: 0.2, a: 1.0 }, stop: 1 } ]); // Set diagonal gradient (top-left to bottom-right) engine.block.setFloat( linearDiagonal, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( linearDiagonal, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat(linearDiagonal, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(linearDiagonal, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 4: Multi-Stop Linear Gradient (Aurora Effect) // ============================================================================= const { block: auroraGradientBlock, fill: auroraGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(auroraGradient, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.1, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.8, g: 0.2, b: 0.6, a: 1 }, stop: 0.3 }, { color: { r: 1.0, g: 0.5, b: 0.3, a: 1 }, stop: 0.6 }, { color: { r: 1.0, g: 0.8, b: 0.2, a: 1 }, stop: 1 } ]); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(auroraGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/endPointY', 0.5 ); // ============================================================================= // Example 5: Radial Gradient (Centered) // ============================================================================= const { block: radialCenteredBlock, fill: radialCentered } = createShapeWithFill('gradient/radial'); engine.block.setGradientColorStops(radialCentered, 'fill/gradient/colors', [ { color: { r: 1.0, g: 1.0, b: 1.0, a: 0.3 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } ]); // Set center point (middle of block) engine.block.setFloat( radialCentered, 'fill/gradient/radial/centerPointX', 0.5 ); engine.block.setFloat( radialCentered, 'fill/gradient/radial/centerPointY', 0.5 ); engine.block.setFloat(radialCentered, 'fill/gradient/radial/radius', 0.8); // ============================================================================= // Example 6: Radial Gradient (Top-Left Highlight) // ============================================================================= const { block: radialHighlightBlock, fill: radialHighlight } = createShapeWithFill('gradient/radial'); engine.block.setGradientColorStops( radialHighlight, 'fill/gradient/colors', [ { color: { r: 1.0, g: 1.0, b: 1.0, a: 0.3 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } ] ); // Set top-left highlight engine.block.setFloat( radialHighlight, 'fill/gradient/radial/centerPointX', 0 ); engine.block.setFloat( radialHighlight, 'fill/gradient/radial/centerPointY', 0 ); engine.block.setFloat(radialHighlight, 'fill/gradient/radial/radius', 1.0); // ============================================================================= // Example 7: Radial Gradient (Vignette Effect) // ============================================================================= const { block: radialVignetteBlock, fill: radialVignette } = createShapeWithFill('gradient/radial'); engine.block.setGradientColorStops(radialVignette, 'fill/gradient/colors', [ { color: { r: 0.9, g: 0.9, b: 0.9, a: 1.0 }, stop: 0 }, { color: { r: 0.1, g: 0.1, b: 0.1, a: 1.0 }, stop: 1 } ]); // Centered vignette engine.block.setFloat( radialVignette, 'fill/gradient/radial/centerPointX', 0.5 ); engine.block.setFloat( radialVignette, 'fill/gradient/radial/centerPointY', 0.5 ); engine.block.setFloat(radialVignette, 'fill/gradient/radial/radius', 0.6); // ============================================================================= // Example 8: Conical Gradient (Color Wheel) // ============================================================================= const { block: conicalColorWheelBlock, fill: conicalColorWheel } = createShapeWithFill('gradient/conical'); engine.block.setGradientColorStops( conicalColorWheel, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.0, b: 0.0, a: 1 }, stop: 0 }, { color: { r: 1.0, g: 1.0, b: 0.0, a: 1 }, stop: 0.25 }, { color: { r: 0.0, g: 1.0, b: 0.0, a: 1 }, stop: 0.5 }, { color: { r: 0.0, g: 0.0, b: 1.0, a: 1 }, stop: 0.75 }, { color: { r: 1.0, g: 0.0, b: 0.0, a: 1 }, stop: 1 } ] ); // Set center point (middle of block) engine.block.setFloat( conicalColorWheel, 'fill/gradient/conical/centerPointX', 0.5 ); engine.block.setFloat( conicalColorWheel, 'fill/gradient/conical/centerPointY', 0.5 ); // ============================================================================= // Example 9: Conical Gradient (Loading Spinner) // ============================================================================= const { block: conicalSpinnerBlock, fill: conicalSpinner } = createShapeWithFill('gradient/conical'); engine.block.setGradientColorStops(conicalSpinner, 'fill/gradient/colors', [ { color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 0 }, stop: 0.75 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }, stop: 1 } ]); engine.block.setFloat( conicalSpinner, 'fill/gradient/conical/centerPointX', 0.5 ); engine.block.setFloat( conicalSpinner, 'fill/gradient/conical/centerPointY', 0.5 ); // ============================================================================= // Example 10: Gradient with CMYK Colors // ============================================================================= const { block: cmykGradientBlock, fill: cmykGradient } = createShapeWithFill('gradient/linear'); // CMYK color stops for print engine.block.setGradientColorStops(cmykGradient, 'fill/gradient/colors', [ { color: { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 0 }, { color: { c: 1.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 1 } ]); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat( cmykGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/endPointY', 0.5); // ============================================================================= // Example 11: Gradient with Spot Colors // ============================================================================= // First define spot colors engine.editor.setSpotColorRGB('BrandPrimary', 0.2, 0.4, 0.8); engine.editor.setSpotColorRGB('BrandSecondary', 1.0, 0.6, 0.0); const { block: spotGradientBlock, fill: spotGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(spotGradient, 'fill/gradient/colors', [ { color: { name: 'BrandPrimary', tint: 1.0, externalReference: '' }, stop: 0 }, { color: { name: 'BrandSecondary', tint: 1.0, externalReference: '' }, stop: 1 } ]); engine.block.setFloat(spotGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(spotGradient, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(spotGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(spotGradient, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 12: Transparency Overlay Gradient // ============================================================================= const { block: overlayGradientBlock, fill: overlayGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( overlayGradient, 'fill/gradient/colors', [ { color: { r: 0.0, g: 0.0, b: 0.0, a: 0 }, stop: 0 }, { color: { r: 0.0, g: 0.0, b: 0.0, a: 0.7 }, stop: 1 } ] ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/startPointX', 0.5 ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/endPointX', 0.5 ); engine.block.setFloat(overlayGradient, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 13: Duotone Gradient // ============================================================================= const { block: duotoneGradientBlock, fill: duotoneGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( duotoneGradient, 'fill/gradient/colors', [ { color: { r: 0.8, g: 0.2, b: 0.9, a: 1 }, stop: 0 }, { color: { r: 0.2, g: 0.9, b: 0.8, a: 1 }, stop: 1 } ] ); engine.block.setFloat( duotoneGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( duotoneGradient, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat(duotoneGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(duotoneGradient, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 14: Shared Gradient 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 - 5); 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 - 5); engine.block.appendChild(page, block2); // Create one gradient fill const sharedGradient = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(sharedGradient, 'fill/gradient/colors', [ { color: { r: 1, g: 0, b: 0, a: 1 }, stop: 0 }, { color: { r: 0, g: 0, b: 1, a: 1 }, stop: 1 } ]); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(sharedGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/endPointY', 0.5 ); // Apply to both blocks engine.block.setFill(block1, sharedGradient); engine.block.setFill(block2, sharedGradient); // Change gradient after a delay to show it affects both setTimeout(() => { engine.block.setGradientColorStops( sharedGradient, 'fill/gradient/colors', [ { color: { r: 0, g: 1, b: 0, a: 1 }, stop: 0 }, { color: { r: 1, g: 1, b: 0, a: 1 }, stop: 1 } ] ); }, 2000); // ============================================================================= // Example 15: Get Gradient Properties // ============================================================================= const { block: inspectGradientBlock, fill: inspectGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( inspectGradient, 'fill/gradient/colors', [ { color: { r: 0.6, g: 0.3, b: 0.7, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.7, b: 0.6, a: 1.0 }, stop: 1 } ] ); // Get current fill from block const fillId = engine.block.getFill(block1); const fillType = engine.block.getType(fillId); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/gradient/linear' // Get gradient color stops const colorStops = engine.block.getGradientColorStops( inspectGradient, 'fill/gradient/colors' ); // eslint-disable-next-line no-console console.log('Color stops:', colorStops); // Get linear gradient position const startX = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/startPointX' ); const startY = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/startPointY' ); const endX = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/endPointX' ); const endY = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/endPointY' ); // eslint-disable-next-line no-console console.log('Linear gradient position:', { startX, startY, endX, endY }); // ===== Position all blocks in grid layout ===== const blocks = [ linearVerticalBlock, // Position 0 linearHorizontalBlock, // Position 1 linearDiagonalBlock, // Position 2 auroraGradientBlock, // Position 3 radialCenteredBlock, // Position 4 radialHighlightBlock, // Position 5 radialVignetteBlock, // Position 6 conicalColorWheelBlock, // Position 7 conicalSpinnerBlock, // Position 8 cmykGradientBlock, // Position 9 spotGradientBlock, // Position 10 overlayGradientBlock, // Position 11 duotoneGradientBlock, // Position 12 block1, // Position 13 (top half) inspectGradientBlock // Position 14 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Position block2 below block1 in the same grid cell const block1Pos = getPosition(13); engine.block.setPositionX(block2, block1Pos.x); engine.block.setPositionY(block2, block1Pos.y + blockHeight / 2 + 5); // 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 configure gradient fills programmatically, work with color stops, position gradients, and create modern visual effects like aurora gradients and button highlights. ## Understanding Gradient Fills ### What is a Gradient Fill? A gradient fill is a fill object that paints a design block with smooth color transitions. Gradient fills are part of the broader fill system in CE.SDK and come in three types, each identified by a unique type string: - **Linear**: `'//ly.img.ubq/fill/gradient/linear'` or `'gradient/linear'` - **Radial**: `'//ly.img.ubq/fill/gradient/radial'` or `'gradient/radial'` - **Conical**: `'//ly.img.ubq/fill/gradient/conical'` or `'gradient/conical'` Each gradient type contains color stops that define colors at specific positions and positioning properties that control the gradient's direction and coverage. ### Gradient Types Comparison #### Linear Gradients Linear gradients transition colors along a straight line defined by start and end points. They're the most common gradient type and create clean, modern looks. Common use cases include hero sections, call-to-action buttons, headers, and banners. ```typescript highlight-linear-gradient const { block: linearVerticalBlock, fill: linearVertical } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(linearVertical, '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 } ]); ``` #### Radial Gradients Radial gradients emanate from a central point outward, creating circular or elliptical color transitions. They add depth and create focal points or spotlight effects. Common use cases include button highlights, card shadows, vignettes, and circular badges. ```typescript highlight-radial-gradient engine.block.setGradientColorStops(radialCentered, 'fill/gradient/colors', [ { color: { r: 1.0, g: 1.0, b: 1.0, a: 0.3 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } ]); ``` #### Conical Gradients Conical gradients transition colors around a center point like a color wheel, starting at the top (12 o'clock) and rotating clockwise. Colors are specified by position rather than angle. Common use cases include pie charts, loading spinners, circular progress indicators, and color picker wheels. ```typescript highlight-conical-gradient engine.block.setGradientColorStops( conicalColorWheel, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.0, b: 0.0, a: 1 }, stop: 0 }, { color: { r: 1.0, g: 1.0, b: 0.0, a: 1 }, stop: 0.25 }, { color: { r: 0.0, g: 1.0, b: 0.0, a: 1 }, stop: 0.5 }, { color: { r: 0.0, g: 0.0, b: 1.0, a: 1 }, stop: 0.75 }, { color: { r: 1.0, g: 0.0, b: 0.0, a: 1 }, stop: 1 } ] ); ``` ### Gradient vs Other Fill Types Understanding how gradients differ from other fill types helps you choose the right fill for your design: - **Gradient fills**: Smooth color transitions (linear, radial, conical) - **Color fills**: Solid, uniform color - **Image fills**: Photo or raster content - **Video fills**: Animated video content ### Color Stops Explained Color stops define the colors at specific positions in the gradient. Each stop consists of: - `color`: An RGB, CMYK, or Spot color value - `stop`: Position value between 0.0 and 1.0 (0% to 100%) A gradient requires a minimum of two color stops. You can add multiple stops to create complex color transitions. Color stops can use any color space supported by CE.SDK, including RGB for screen display, CMYK for print, and Spot Colors for brand consistency. ```typescript highlight-color-stops engine.block.setGradientColorStops(auroraGradient, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.1, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.8, g: 0.2, b: 0.6, a: 1 }, stop: 0.3 }, { color: { r: 1.0, g: 0.5, b: 0.3, a: 1 }, stop: 0.6 }, { color: { r: 1.0, g: 0.8, b: 0.2, a: 1 }, stop: 1 } ]); ``` ## Using the Built-in Gradient UI CE.SDK provides built-in UI controls for working with gradients through the **inspector bar** and **advanced inspector**. Users can switch between solid color and gradient fills, select gradient type (linear, radial, conical), add and remove color stops visually, adjust individual stop colors, and drag gradient control points for positioning. **Note**: Currently, only **linear gradients** are fully supported in the built-in UI. Radial and conical gradients are available programmatically. ### Enabling Fill Features Gradient controls are part of the fill feature system. You can check if the fill feature is enabled and control it programmatically: ```typescript highlight-enable-fill-feature // Fill features are enabled by default in CE.SDK // You can check and control fill feature availability: const engine = cesdk.engine; const isFillEnabled = cesdk.feature.isEnabled('ly.img.fill', { engine }); console.log('Fill feature enabled:', isFillEnabled); ``` ## Checking Gradient Fill Support ### Verifying Block Compatibility Before applying gradient fills, verify that the block type supports fills. Not all blocks support fills—for example, scenes and pages typically don't. ```typescript highlight-check-fill-support // Check if block supports fills const canHaveFill = engine.block.supportsFill(block); if (!canHaveFill) { throw new Error('Block does not support fills'); } ``` Always check `supportsFill()` before accessing fill APIs. Graphic blocks, shapes, and text typically support fills. ## Creating Gradient Fills ### Creating a New Linear Gradient Create a new linear gradient fill using the `createFill()` method with the type `'gradient/linear'`: ```typescript highlight-create-linear const { block: linearVerticalBlock, fill: linearVertical } = createShapeWithFill('gradient/linear'); ``` ### Creating a Radial Gradient Create a radial gradient using the type `'gradient/radial'`: ```typescript highlight-create-radial const { block: radialCenteredBlock, fill: radialCentered } = createShapeWithFill('gradient/radial'); ``` ### Creating a Conical Gradient Create a conical gradient using the type `'gradient/conical'`: ```typescript highlight-create-conical const { block: conicalColorWheelBlock, fill: conicalColorWheel } = createShapeWithFill('gradient/conical'); ``` The `createFill()` method returns a numeric fill ID. The fill exists independently until you attach it to a block. If you create a fill but don't attach it to a block, you must destroy it manually to prevent memory leaks. ## Applying Gradient Fills ### Setting a Gradient Fill on a Block Once you've created a gradient fill, attach it to a block using `setFill()`: ```typescript highlight-apply-gradient // Create gradient fill const gradientFill = engine.block.createFill(fillType); // Apply the fill to the block engine.block.setFill(block, gradientFill); ``` ### Getting the Current Fill Retrieve the current fill attached to a block and inspect its type: ```typescript highlight-get-fill const { block: inspectGradientBlock, fill: inspectGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( inspectGradient, 'fill/gradient/colors', [ { color: { r: 0.6, g: 0.3, b: 0.7, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.7, b: 0.6, a: 1.0 }, stop: 1 } ] ); // Get current fill from block const fillId = engine.block.getFill(block1); const fillType = engine.block.getType(fillId); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/gradient/linear' ``` ## Configuring Gradient Color Stops ### Setting Color Stops Set color stops using the `setGradientColorStops()` method with an array of color and position pairs: ```typescript highlight-set-color-stops engine.block.setGradientColorStops(linearVertical, '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 } ]); ``` RGB values are normalized floats from 0.0 to 1.0. Stop positions are normalized where 0.0 represents the start and 1.0 represents the end. The alpha channel controls opacity per color stop. ### Getting Color Stops Retrieve the current color stops from a gradient fill: ```typescript highlight-get-color-stops // Get gradient color stops const colorStops = engine.block.getGradientColorStops( inspectGradient, 'fill/gradient/colors' ); // eslint-disable-next-line no-console console.log('Color stops:', colorStops); ``` ### Using Different Color Spaces Gradient color stops support multiple color spaces: ```typescript highlight-color-spaces const { block: cmykGradientBlock, fill: cmykGradient } = createShapeWithFill('gradient/linear'); // CMYK color stops for print engine.block.setGradientColorStops(cmykGradient, 'fill/gradient/colors', [ { color: { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 0 }, { color: { c: 1.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 1 } ]); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat( cmykGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/endPointY', 0.5); ``` ## Positioning Linear Gradients ### Setting Start and End Points Linear gradients are positioned using start and end points with normalized coordinates (0.0 to 1.0) relative to block dimensions: ```typescript highlight-linear-position // Set vertical gradient (top to bottom) engine.block.setFloat( linearVertical, 'fill/gradient/linear/startPointX', 0.5 ); engine.block.setFloat( linearVertical, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat( linearVertical, 'fill/gradient/linear/endPointX', 0.5 ); engine.block.setFloat(linearVertical, 'fill/gradient/linear/endPointY', 1); ``` Coordinates are normalized where (0, 0) represents the top-left corner and (1, 1) represents the bottom-right corner. ### Common Linear Gradient Directions **Horizontal (Left to Right):** ```typescript engine.block.setFloat(linearGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(linearGradient, 'fill/gradient/linear/startPointY', 0.5); engine.block.setFloat(linearGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(linearGradient, 'fill/gradient/linear/endPointY', 0.5); ``` **Diagonal (Top-Left to Bottom-Right):** ```typescript engine.block.setFloat(linearGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(linearGradient, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(linearGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(linearGradient, 'fill/gradient/linear/endPointY', 1); ``` ### Getting Current Position Retrieve the current position values: ```typescript highlight-get-linear-position // Get linear gradient position const startX = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/startPointX' ); const startY = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/startPointY' ); const endX = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/endPointX' ); const endY = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/endPointY' ); // eslint-disable-next-line no-console console.log('Linear gradient position:', { startX, startY, endX, endY }); ``` ## Positioning Radial Gradients ### Setting Center Point and Radius Radial gradients are positioned using a center point and radius: ```typescript highlight-radial-position // Set center point (middle of block) engine.block.setFloat( radialCentered, 'fill/gradient/radial/centerPointX', 0.5 ); engine.block.setFloat( radialCentered, 'fill/gradient/radial/centerPointY', 0.5 ); engine.block.setFloat(radialCentered, 'fill/gradient/radial/radius', 0.8); ``` The `centerPointX/Y` properties use normalized coordinates (0.0 to 1.0) relative to block dimensions. The `radius` property is relative to the smaller side of the block frame, where 1.0 equals full coverage. Default values are centerX = 0.0, centerY = 0.0, and radius = 1.0. ### Common Radial Patterns **Centered Circle:** ```typescript engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointX', 0.5); engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointY', 0.5); engine.block.setFloat(radialGradient, 'fill/gradient/radial/radius', 0.7); ``` **Top-Left Highlight:** ```typescript engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointX', 0); engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointY', 0); engine.block.setFloat(radialGradient, 'fill/gradient/radial/radius', 1.0); ``` **Bottom-Right Vignette:** ```typescript engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointX', 1); engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointY', 1); engine.block.setFloat(radialGradient, 'fill/gradient/radial/radius', 1.5); ``` ## Positioning Conical Gradients ### Setting Center Point Conical gradients are positioned using a center point. The rotation starts at the top (12 o'clock) and proceeds clockwise: ```typescript highlight-conical-position // Set center point (middle of block) engine.block.setFloat( conicalColorWheel, 'fill/gradient/conical/centerPointX', 0.5 ); engine.block.setFloat( conicalColorWheel, 'fill/gradient/conical/centerPointY', 0.5 ); ``` The `centerPointX/Y` properties use normalized coordinates (0.0 to 1.0) relative to block dimensions. There is no separate rotation or angle property—the gradient always starts at the top. Default values are centerX = 0.0 and centerY = 0.0. ## Additional Techniques ### Sharing Gradient Fills You can share a single gradient fill between multiple blocks. Changes to the shared gradient affect all blocks using it: ```typescript highlight-share-gradient 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 - 5); 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 - 5); engine.block.appendChild(page, block2); // Create one gradient fill const sharedGradient = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(sharedGradient, 'fill/gradient/colors', [ { color: { r: 1, g: 0, b: 0, a: 1 }, stop: 0 }, { color: { r: 0, g: 0, b: 1, a: 1 }, stop: 1 } ]); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(sharedGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/endPointY', 0.5 ); // Apply to both blocks engine.block.setFill(block1, sharedGradient); engine.block.setFill(block2, sharedGradient); // Change gradient after a delay to show it affects both setTimeout(() => { engine.block.setGradientColorStops( sharedGradient, 'fill/gradient/colors', [ { color: { r: 0, g: 1, b: 0, a: 1 }, stop: 0 }, { color: { r: 1, g: 1, b: 0, a: 1 }, stop: 1 } ] ); }, 2000); ``` ### Duplicating Gradient Fills When you duplicate a block, its gradient fill is automatically duplicated, creating an independent copy. Each duplicate has its own fill instance that can be modified independently without affecting the original. ## Common Use Cases ### Modern Hero Background (Aurora Effect) Create dreamy multi-color gradient backgrounds for hero sections: ```typescript highlight-aurora-gradient const { block: auroraGradientBlock, fill: auroraGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(auroraGradient, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.1, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.8, g: 0.2, b: 0.6, a: 1 }, stop: 0.3 }, { color: { r: 1.0, g: 0.5, b: 0.3, a: 1 }, stop: 0.6 }, { color: { r: 1.0, g: 0.8, b: 0.2, a: 1 }, stop: 1 } ]); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(auroraGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/endPointY', 0.5 ); ``` ### Button Highlight Effect Use radial gradients to add depth and highlight effects to buttons: ```typescript highlight-button-gradient const { block: radialHighlightBlock, fill: radialHighlight } = createShapeWithFill('gradient/radial'); engine.block.setGradientColorStops( radialHighlight, 'fill/gradient/colors', [ { color: { r: 1.0, g: 1.0, b: 1.0, a: 0.3 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } ] ); // Set top-left highlight engine.block.setFloat( radialHighlight, 'fill/gradient/radial/centerPointX', 0 ); engine.block.setFloat( radialHighlight, 'fill/gradient/radial/centerPointY', 0 ); engine.block.setFloat(radialHighlight, 'fill/gradient/radial/radius', 1.0); ``` ### Loading Spinner (Conical) Create circular progress indicators and loading animations with conical gradients: ```typescript highlight-spinner-gradient const { block: conicalSpinnerBlock, fill: conicalSpinner } = createShapeWithFill('gradient/conical'); engine.block.setGradientColorStops(conicalSpinner, 'fill/gradient/colors', [ { color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 0 }, stop: 0.75 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }, stop: 1 } ]); engine.block.setFloat( conicalSpinner, 'fill/gradient/conical/centerPointX', 0.5 ); engine.block.setFloat( conicalSpinner, 'fill/gradient/conical/centerPointY', 0.5 ); ``` ### Transparency Overlay Create smooth transparency effects with alpha channel transitions: ```typescript highlight-overlay-gradient const { block: overlayGradientBlock, fill: overlayGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( overlayGradient, 'fill/gradient/colors', [ { color: { r: 0.0, g: 0.0, b: 0.0, a: 0 }, stop: 0 }, { color: { r: 0.0, g: 0.0, b: 0.0, a: 0.7 }, stop: 1 } ] ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/startPointX', 0.5 ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/endPointX', 0.5 ); engine.block.setFloat(overlayGradient, 'fill/gradient/linear/endPointY', 1); ``` ### Duotone Effect Create modern two-color gradient overlays: ```typescript highlight-duotone-gradient const { block: duotoneGradientBlock, fill: duotoneGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( duotoneGradient, 'fill/gradient/colors', [ { color: { r: 0.8, g: 0.2, b: 0.9, a: 1 }, stop: 0 }, { color: { r: 0.2, g: 0.9, b: 0.8, a: 1 }, stop: 1 } ] ); engine.block.setFloat( duotoneGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( duotoneGradient, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat(duotoneGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(duotoneGradient, 'fill/gradient/linear/endPointY', 1); ``` ## Troubleshooting ### Gradient Not Visible If your gradient doesn't appear: - Check if fill is enabled: `engine.block.isFillEnabled(block)` - Verify color stops have visible colors (check alpha channels) - Ensure block has valid dimensions (width and height > 0) - Confirm block is in the scene hierarchy - Check if color stops are properly ordered by stop position ### Gradient Looks Different Than Expected If the gradient doesn't look right: - Verify color stop positions are between 0.0 and 1.0 - Check gradient direction and positioning properties - Ensure correct gradient type is used (linear vs radial vs conical) - Review color space (RGB vs CMYK) for output medium - Confirm alpha values for transparency effects ### Gradient Direction Wrong If the gradient direction is incorrect: - For linear gradients, check `startPointX/Y` and `endPointX/Y` values - Remember coordinates are normalized (0.0 to 1.0), not pixels - Verify the block's coordinate system and transformations - Test with simple horizontal or vertical gradients first ### Memory Leaks To prevent memory leaks: - Always destroy replaced gradients: `engine.block.destroy(oldFill)` - Don't create gradient fills without attaching them to blocks - Clean up shared gradients when no longer needed ### Cannot Apply Gradient to Block If you can't apply a gradient fill: - Verify block supports fills: `engine.block.supportsFill(block)` - Check if block has a shape: Some blocks require shapes - Ensure gradient fill object is valid and not already destroyed ### Color Stops Not Updating If color stops don't update: - Verify you're calling `setGradientColorStops()` not `setColor()` - Ensure property name is exactly `'fill/gradient/colors'` - Check that color stop array is properly formatted - Confirm fill ID is correct and still valid ## API Reference ### Core Methods | Method | Description | | ---------------------------------------------- | --------------------------------------- | | `createFill('gradient/linear')` | Create a new linear gradient fill | | `createFill('gradient/radial')` | Create a new radial gradient fill | | `createFill('gradient/conical')` | Create a new conical gradient fill | | `setFill(block, fill)` | Assign gradient fill to a block | | `getFill(block)` | Get the fill ID from a block | | `setGradientColorStops(fill, property, stops)` | Set gradient color stops array | | `getGradientColorStops(fill, property)` | Get current gradient color stops | | `setFloat(fill, property, value)` | Set gradient position/radius properties | | `getFloat(fill, property)` | Get gradient position/radius values | | `setFillEnabled(block, enabled)` | Enable or disable fill rendering | | `isFillEnabled(block)` | Check if fill is enabled | | `supportsFill(block)` | Check if block supports fills | ### Linear Gradient Properties | Property | Type | Default | Description | | ---------------------------------- | ------------------- | ------- | ------------------------- | | `fill/gradient/colors` | GradientColorStop\[] | - | Array of color stops | | `fill/gradient/linear/startPointX` | Float (0.0-1.0) | 0.5 | Horizontal start position | | `fill/gradient/linear/startPointY` | Float (0.0-1.0) | 0.0 | Vertical start position | | `fill/gradient/linear/endPointX` | Float (0.0-1.0) | 0.5 | Horizontal end position | | `fill/gradient/linear/endPointY` | Float (0.0-1.0) | 1.0 | Vertical end position | ### Radial Gradient Properties | Property | Type | Default | Description | | ----------------------------------- | ------------------- | ------- | ------------------------------- | | `fill/gradient/colors` | GradientColorStop\[] | - | Array of color stops | | `fill/gradient/radial/centerPointX` | Float (0.0-1.0) | 0.0 | Horizontal center position | | `fill/gradient/radial/centerPointY` | Float (0.0-1.0) | 0.0 | Vertical center position | | `fill/gradient/radial/radius` | Float | 1.0 | Radius relative to smaller side | ### Conical Gradient Properties | Property | Type | Default | Description | | ------------------------------------ | ------------------- | ------- | -------------------------- | | `fill/gradient/colors` | GradientColorStop\[] | - | Array of color stops | | `fill/gradient/conical/centerPointX` | Float (0.0-1.0) | 0.0 | Horizontal center position | | `fill/gradient/conical/centerPointY` | Float (0.0-1.0) | 0.0 | Vertical center position | **Note**: Conical gradients rotate clockwise starting from the top (12 o'clock). There is no rotation or angle property. ### GradientColorStop Interface ```typescript interface GradientColorStop { color: Color; // RGB, CMYK, or Spot color stop: number; // Position (0.0 to 1.0) } // Color formats supported: type Color = | { r: number; g: number; b: number; a: number } // RGB | { c: number; m: number; y: number; k: number; tint: number } // CMYK | { name: string; tint: number; externalReference: string }; // Spot ``` ## Next Steps Now that you understand gradient fills, explore other fill types and color management features: - Learn about Color Fills for solid colors - 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 --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Filters & Effects Library" description: "Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/overview-299b15/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Overview](https://img.ly/docs/cesdk/angular/filters-and-effects/overview-299b15/) --- In CreativeEditor SDK (CE.SDK), *filters* and *effects* refer to visual modifications that enhance or transform the appearance of design elements. Filters typically adjust an element’s overall color or tone, while effects add specific visual treatments like blur, sharpness, or distortion. You can apply both filters and effects through the user interface or programmatically using the CE.SDK API. They allow you to refine the look of images, videos, and graphic elements in your designs with precision and flexibility. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Supported Filters and Effects" description: "View the full list of visual effects and filters available in CE.SDK, including both built-in and custom options." platform: angular url: "https://img.ly/docs/cesdk/angular/filters-and-effects/support-a666dd/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) > [Supported Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/support-a666dd/) --- Discover all available filters and effects in CE.SDK and learn how to check if a block supports them. ![Supported Filters and Effects example showing a gradient background with glow and vignette effects](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-support-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-support-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-support-browser/) CE.SDK provides 22 built-in effect types for visual transformations including color adjustments, blur effects, artistic filters, and distortion effects. This reference guide shows how to check effect support and add effects programmatically, followed by detailed property tables for each effect type. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-support-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Supported Filters and Effects Reference * * Demonstrates how to check effect support and add effects to blocks: * - Checking if a block supports effects * - Creating and appending effects * - Configuring effect 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'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Enable effects and filters in the inspector panel cesdk.feature.enable('ly.img.effect'); cesdk.feature.enable('ly.img.filter'); // Create a beautiful gradient background const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.02, g: 0.02, b: 0.08, a: 1.0 }, stop: 0 }, // Near black { color: { r: 0.04, g: 0.06, b: 0.18, a: 1.0 }, stop: 0.4 }, // Dark navy { color: { r: 0.08, g: 0.12, b: 0.28, a: 1.0 }, stop: 0.7 }, // Deep blue { color: { r: 0.1, g: 0.15, b: 0.35, a: 1.0 }, stop: 1 } // Dark blue ]); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); engine.block.setFill(page, gradientFill); // Define font for text const fontUri = 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Bold.ttf'; const typeface = { name: 'Roboto', fonts: [ { uri: fontUri, subFamily: 'Bold', weight: 'bold' as const, style: 'normal' as const } ] }; // Create title text: "Supported Filters and Effects" at 80pt (centered) const titleText = engine.block.create('text'); engine.block.appendChild(page, titleText); engine.block.replaceText(titleText, 'Supported Filters and Effects'); engine.block.setFont(titleText, fontUri, typeface); engine.block.setTextFontSize(titleText, 80); engine.block.setTextColor(titleText, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(titleText, 780); engine.block.setWidthMode(titleText, 'Absolute'); engine.block.setHeightMode(titleText, 'Auto'); engine.block.setPositionX(titleText, 10); engine.block.setPositionY(titleText, 160); // Create subtext: "img.ly" at 64pt (closer to title) const subtitleText = engine.block.create('text'); engine.block.appendChild(page, subtitleText); engine.block.replaceText(subtitleText, 'img.ly'); engine.block.setFont(subtitleText, fontUri, typeface); engine.block.setTextFontSize(subtitleText, 64); engine.block.setTextColor(subtitleText, { r: 0.75, g: 0.82, b: 1.0, a: 0.85 }); engine.block.setEnum(subtitleText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(subtitleText, 780); engine.block.setWidthMode(subtitleText, 'Absolute'); engine.block.setHeightMode(subtitleText, 'Auto'); engine.block.setPositionX(subtitleText, 10); engine.block.setPositionY(subtitleText, 210); // Check if a block supports effects before applying them // Not all block types support effects - verify first to avoid errors // Add an image to demonstrate effects (centered below text) const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { size: { width: 300, height: 210 } }); engine.block.appendChild(page, imageBlock); // Center the image below the subtext engine.block.setPositionX(imageBlock, (800 - 300) / 2); // 250 engine.block.setPositionY(imageBlock, 310); // Image blocks support effects const imageSupportsEffects = engine.block.supportsEffects(imageBlock); console.log('Image supports effects:', imageSupportsEffects); // true // Create an effect using the effect type identifier // CE.SDK provides 22 built-in effect types (see property tables below) const duotoneEffect = engine.block.createEffect('duotone_filter'); // Append the effect to the image's effect stack engine.block.appendEffect(imageBlock, duotoneEffect); // Configure effect properties using the property path format: // effect/{effect-type}/{property-name} // Set duotone colors to match the dark blue gradient background engine.block.setColor(duotoneEffect, 'effect/duotone_filter/darkColor', { r: 0.02, g: 0.04, b: 0.12, a: 1.0 }); // Near black blue engine.block.setColor(duotoneEffect, 'effect/duotone_filter/lightColor', { r: 0.5, g: 0.7, b: 1.0, a: 1.0 }); // Light blue engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.8 ); // Retrieve all effects applied to a block const appliedEffects = engine.block.getEffects(imageBlock); console.log('Number of applied effects:', appliedEffects.length); // Log each effect's type appliedEffects.forEach((effect, index) => { const effectType = engine.block.getType(effect); console.log(`Effect ${index}: ${effectType}`); }); // Select the image to show effects in inspector engine.block.select(imageBlock); console.log( 'Support guide initialized. Select the image to see effects in the inspector.' ); } } export default Example; ``` This guide covers checking effect support on blocks, adding effects programmatically, and the complete list of available effect types with their properties. For detailed tutorials on configuring and combining multiple effects, see the [Apply Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) guide. ## Check Effect Support Before applying effects to a block, verify whether it supports them using `supportsEffects()`. Not all block types can have effects applied. ```typescript highlight-check-effect-support // Check if a block supports effects before applying them // Not all block types support effects - verify first to avoid errors // Add an image to demonstrate effects (centered below text) const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { size: { width: 300, height: 210 } }); engine.block.appendChild(page, imageBlock); // Center the image below the subtext engine.block.setPositionX(imageBlock, (800 - 300) / 2); // 250 engine.block.setPositionY(imageBlock, 310); // Image blocks support effects const imageSupportsEffects = engine.block.supportsEffects(imageBlock); console.log('Image supports effects:', imageSupportsEffects); // true ``` Effect support is available for: - **Graphic blocks** with image or video fills - **Shape blocks** with fills - **Text blocks** (with limited effect types) - **Page blocks** (particularly when they have background fills) ## Add an Effect Create an effect using `createEffect()` with the effect type identifier, then attach it to a block with `appendEffect()`. ```typescript highlight-add-effect // Create an effect using the effect type identifier // CE.SDK provides 22 built-in effect types (see property tables below) const duotoneEffect = engine.block.createEffect('duotone_filter'); // Append the effect to the image's effect stack engine.block.appendEffect(imageBlock, duotoneEffect); ``` ## Configure Effect Properties Configure effect parameters using setter methods. Property paths follow the format `effect/{effect-type}/{property-name}`. ```typescript highlight-configure-effect // Configure effect properties using the property path format: // effect/{effect-type}/{property-name} // Set duotone colors to match the dark blue gradient background engine.block.setColor(duotoneEffect, 'effect/duotone_filter/darkColor', { r: 0.02, g: 0.04, b: 0.12, a: 1.0 }); // Near black blue engine.block.setColor(duotoneEffect, 'effect/duotone_filter/lightColor', { r: 0.5, g: 0.7, b: 1.0, a: 1.0 }); // Light blue engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.8 ); ``` CE.SDK provides typed setter methods for different parameter types: - **`setFloat()`** - For intensity, amount, and decimal values - **`setInt()`** - For discrete values like pixel sizes - **`setString()`** - For file URIs (LUT files) - **`setBool()`** - For enabling or disabling features - **`setColor()`** - For color values (RGBA format) ## Retrieve Applied Effects Use `getEffects()` to retrieve all effects applied to a block. ```typescript highlight-get-effects // Retrieve all effects applied to a block const appliedEffects = engine.block.getEffects(imageBlock); console.log('Number of applied effects:', appliedEffects.length); // Log each effect's type appliedEffects.forEach((effect, index) => { const effectType = engine.block.getType(effect); console.log(`Effect ${index}: ${effectType}`); }); ``` ## Effects The following tables document all available effect types and their configurable properties. ## Adjustments Type An effect block for basic image adjustments. This section describes the properties available for the **Adjustments Type** (`//ly.img.ubq/effect/adjustments`) block type. | Property | Type | Default | Description | | -------------------------------- | ------- | ------- | ------------------------------------ | | `effect/adjustments/blacks` | `Float` | `0` | Adjustment of only the blacks. | | `effect/adjustments/brightness` | `Float` | `0` | Adjustment of the brightness. | | `effect/adjustments/clarity` | `Float` | `0` | Adjustment of the detail. | | `effect/adjustments/contrast` | `Float` | `0` | Adjustment of the contrast. | | `effect/adjustments/exposure` | `Float` | `0` | Adjustment of the exposure. | | `effect/adjustments/gamma` | `Float` | `0` | Gamma correction, non-linear. | | `effect/adjustments/highlights` | `Float` | `0` | Adjustment of only the highlights. | | `effect/adjustments/saturation` | `Float` | `0` | Adjustment of the saturation. | | `effect/adjustments/shadows` | `Float` | `0` | Adjustment of only the shadows. | | `effect/adjustments/sharpness` | `Float` | `0` | Adjustment of the sharpness. | | `effect/adjustments/temperature` | `Float` | `0` | Adjustment of the color temperature. | | `effect/adjustments/whites` | `Float` | `0` | Adjustment of only the whites. | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Cross Cut Type An effect that distorts the image with horizontal slices. This section describes the properties available for the **Cross Cut Type** (`//ly.img.ubq/effect/cross_cut`) block type. | Property | Type | Default | Description | | ------------------------- | ------- | ------- | ------------------------------ | | `effect/cross_cut/offset` | `Float` | `0.07` | Horizontal offset per slice. | | `effect/cross_cut/slices` | `Float` | `5` | Number of horizontal slices. | | `effect/cross_cut/speedV` | `Float` | `0.5` | Vertical slice position. | | `effect/cross_cut/time` | `Float` | `1` | Randomness input. | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Dot Pattern Type An effect that displays the image using a dot matrix. This section describes the properties available for the **Dot Pattern Type** (`//ly.img.ubq/effect/dot_pattern`) block type. | Property | Type | Default | Description | | ------------------------- | ------- | ------- | ------------------------------ | | `effect/dot_pattern/blur` | `Float` | `0.3` | Global blur. | | `effect/dot_pattern/dots` | `Float` | `30` | Number of dots. | | `effect/dot_pattern/size` | `Float` | `0.5` | Size of an individual dot. | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Duotone Filter Type An effect that applies a two-tone color mapping. This section describes the properties available for the **Duotone Filter Type** (`//ly.img.ubq/effect/duotone_filter`) block type. | Property | Type | Default | Description | | ---------------------------------- | ------- | --------------------------- | --------------------------------------------------------------------------------- | | `effect/duotone_filter/darkColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0}` | The darker of the two colors. Negative filter intensities emphasize this color. | | `effect/duotone_filter/intensity` | `Float` | `0` | The mixing weight of the two colors in the range \[-1, 1]. | | `effect/duotone_filter/lightColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0}` | The brighter of the two colors. Positive filter intensities emphasize this color. | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Extrude Blur Type An effect that applies a radial extrude blur. This section describes the properties available for the **Extrude Blur Type** (`//ly.img.ubq/effect/extrude_blur`) block type. | Property | Type | Default | Description | | ---------------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/extrude_blur/amount` | `Float` | `0.2` | Blur intensity. | ## Glow Type An effect that applies an artificial glow. This section describes the properties available for the **Glow Type** (`//ly.img.ubq/effect/glow`) block type. | Property | Type | Default | Description | | ---------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/glow/amount` | `Float` | `0.5` | Glow brightness. | | `effect/glow/darkness` | `Float` | `0.3` | Glow darkness. | | `effect/glow/size` | `Float` | `4` | Intensity of the glow. | ## Green Screen Type An effect that replaces a specific color with transparency. This section describes the properties available for the **Green Screen Type** (`//ly.img.ubq/effect/green_screen`) block type. | Property | Type | Default | Description | | -------------------------------- | ------- | --------------------------- | ---------------------------------------------------------------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/green_screen/colorMatch` | `Float` | `0.4` | Threshold between the source color and the from color. | | `effect/green_screen/fromColor` | `Color` | `{"r":0,"g":1,"b":0,"a":1}` | The color to be replaced. | | `effect/green_screen/smoothness` | `Float` | `0.08` | Controls the rate at which the color transition increases when the similarity threshold is exceeded. | | `effect/green_screen/spill` | `Float` | `0` | Controls the desaturation of the source color to reduce color spill. | ## Half Tone Type An effect that overlays a halftone pattern. This section describes the properties available for the **Half Tone Type** (`//ly.img.ubq/effect/half_tone`) block type. | Property | Type | Default | Description | | ------------------------ | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/half_tone/angle` | `Float` | `0` | Angle of pattern. | | `effect/half_tone/scale` | `Float` | `0.5` | Scale of pattern. | ## Linocut Type An effect that overlays a linocut pattern. This section describes the properties available for the **Linocut Type** (`//ly.img.ubq/effect/linocut`) block type. | Property | Type | Default | Description | | ---------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/linocut/scale` | `Float` | `0.5` | Scale of pattern. | ## Liquid Type An effect that applies a liquefy distortion. This section describes the properties available for the **Liquid Type** (`//ly.img.ubq/effect/liquid`) block type. | Property | Type | Default | Description | | ---------------------- | ------- | ------- | ------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/liquid/amount` | `Float` | `0.06` | Severity of the applied effect. | | `effect/liquid/scale` | `Float` | `0.62` | Global scale. | | `effect/liquid/time` | `Float` | `0.5` | Continuous randomness input. | ## Lut Filter Type An effect that applies a color lookup table (LUT). This section describes the properties available for the **Lut Filter Type** (`//ly.img.ubq/effect/lut_filter`) block type. | Property | Type | Default | Description | | --------------------------------------- | -------- | ------- | ---------------------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/lut_filter/horizontalTileCount` | `Int` | `5` | The horizontal number of tiles contained in the LUT image. | | `effect/lut_filter/intensity` | `Float` | `1` | A value in the range of \[0, 1]. Defaults to 1.0. | | `effect/lut_filter/lutFileURI` | `String` | `""` | The URI to a LUT PNG file. | | `effect/lut_filter/verticalTileCount` | `Int` | `5` | The vertical number of tiles contained in the LUT image. | ## Mirror Type An effect that mirrors the image along a central axis. This section describes the properties available for the **Mirror Type** (`//ly.img.ubq/effect/mirror`) block type. | Property | Type | Default | Description | | -------------------- | ------ | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/mirror/side` | `Int` | `1` | Axis to mirror along. | ## Outliner Type An effect that highlights the outlines in an image. This section describes the properties available for the **Outliner Type** (`//ly.img.ubq/effect/outliner`) block type. | Property | Type | Default | Description | | ----------------------------- | ------- | ------- | -------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/outliner/amount` | `Float` | `0.5` | Intensity of edge highlighting. | | `effect/outliner/passthrough` | `Float` | `0.5` | Visibility of input image in non-edge areas. | ## Pixelize Type An effect that pixelizes the image. This section describes the properties available for the **Pixelize Type** (`//ly.img.ubq/effect/pixelize`) block type. | Property | Type | Default | Description | | ------------------------------------- | ------ | ------- | ----------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/pixelize/horizontalPixelSize` | `Int` | `20` | The number of pixels on the x-axis. | | `effect/pixelize/verticalPixelSize` | `Int` | `20` | The number of pixels on the y-axis. | ## Posterize Type An effect that reduces the number of colors in the image. This section describes the properties available for the **Posterize Type** (`//ly.img.ubq/effect/posterize`) block type. | Property | Type | Default | Description | | ------------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/posterize/levels` | `Float` | `3` | Number of color levels. | ## Radial Pixel Type An effect that reduces the image into radial pixel rows. This section describes the properties available for the **Radial Pixel Type** (`//ly.img.ubq/effect/radial_pixel`) block type. | Property | Type | Default | Description | | ------------------------------ | ------- | ------- | ------------------------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/radial_pixel/radius` | `Float` | `0.1` | Radius of an individual row of pixels, relative to the image. | | `effect/radial_pixel/segments` | `Float` | `0.01` | Proportional size of a pixel in each row. | ## Recolor Type An effect that replaces one color with another. This section describes the properties available for the **Recolor Type** (`//ly.img.ubq/effect/recolor`) block type. | Property | Type | Default | Description | | -------------------------------- | ------- | --------------------------- | ---------------------------------------------------------------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/recolor/brightnessMatch` | `Float` | `1` | Affects the weight of brightness when calculating color similarity. | | `effect/recolor/colorMatch` | `Float` | `0.4` | Threshold between the source color and the from color. | | `effect/recolor/fromColor` | `Color` | `{"r":1,"g":1,"b":1,"a":1}` | The color to be replaced. | | `effect/recolor/smoothness` | `Float` | `0.08` | Controls the rate at which the color transition increases when the similarity threshold is exceeded. | | `effect/recolor/toColor` | `Color` | `{"r":0,"g":0,"b":1,"a":1}` | The color to replace with. | ## Sharpie Type Cartoon-like effect. This section describes the properties available for the **Sharpie Type** (`//ly.img.ubq/effect/sharpie`) block type. | Property | Type | Default | Description | | ---------------- | ------ | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Shifter Type An effect that shifts individual color channels. This section describes the properties available for the **Shifter Type** (`//ly.img.ubq/effect/shifter`) block type. | Property | Type | Default | Description | | ----------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/shifter/amount` | `Float` | `0.05` | Intensity of the shift. | | `effect/shifter/angle` | `Float` | `0.3` | Shift direction. | ## Tilt Shift Type An effect that applies a tilt-shift blur. This section describes the properties available for the **Tilt Shift Type** (`//ly.img.ubq/effect/tilt_shift`) block type. | Property | Type | Default | Description | | ---------------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/tilt_shift/amount` | `Float` | `0.016` | Blur intensity. | | `effect/tilt_shift/position` | `Float` | `0.4` | Horizontal position in image. | ## Tv Glitch Type An effect that mimics TV banding and distortion. This section describes the properties available for the **Tv Glitch Type** (`//ly.img.ubq/effect/tv_glitch`) block type. | Property | Type | Default | Description | | ------------------------------ | ------- | ------- | ---------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/tv_glitch/distortion` | `Float` | `3` | Rough horizontal distortion. | | `effect/tv_glitch/distortion2` | `Float` | `1` | Fine horizontal distortion. | | `effect/tv_glitch/rollSpeed` | `Float` | `1` | Vertical offset. | | `effect/tv_glitch/speed` | `Float` | `2` | Number of changes per time change. | ## Vignette Type An effect that adds a vignette (darkened corners). This section describes the properties available for the **Vignette Type** (`//ly.img.ubq/effect/vignette`) block type. | Property | Type | Default | Description | | -------------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/vignette/darkness` | `Float` | `1` | Brightness of vignette. | | `effect/vignette/offset` | `Float` | `1` | Radial offset. | ## Next Steps - [Apply Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects/apply-2764e4/) - Learn how to configure, combine, and manage multiple effects --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Agent Skills" description: "Install CE.SDK documentation and code generation skills for AI coding assistants." platform: angular url: "https://img.ly/docs/cesdk/angular/get-started/agent-skills-f7g8h9/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) > [Build with AI](https://img.ly/docs/cesdk/angular/get-started/build-with-ai-k7m9p2/) > [Agent Skills](https://img.ly/docs/cesdk/angular/get-started/agent-skills-f7g8h9/) --- The CE.SDK Agent Skills plugin gives AI coding assistants bundled documentation, guided code generation, and autonomous project scaffolding for building applications with CreativeEditor SDK across 10 Web frameworks. ## What Are Agent Skills? [Agent Skills](https://agentskills.io) are portable knowledge packs that plug into AI coding assistants. By installing the CE.SDK skills, you get: - **Offline documentation**: All guides, API references, and best practices bundled locally — no external API calls - **Guided code generation**: Build and explain skills that walk through CE.SDK implementation step by step - **Autonomous scaffolding**: A builder agent that creates complete CE.SDK projects from scratch ## Available Skills | Skill | Description | |-------|-------------| | `docs-react` | Look up CE.SDK React reference guides and documentation | | `docs-vue` | Look up CE.SDK Vue.js reference guides and documentation | | `docs-svelte` | Look up CE.SDK Svelte reference guides and documentation | | `docs-sveltekit` | Look up CE.SDK SvelteKit reference guides and documentation | | `docs-angular` | Look up CE.SDK Angular reference guides and documentation | | `docs-nextjs` | Look up CE.SDK Next.js reference guides and documentation | | `docs-nuxtjs` | Look up CE.SDK Nuxt.js reference guides and documentation | | `docs-electron` | Look up CE.SDK Electron reference guides and documentation | | `docs-js` | Look up CE.SDK Vanilla JavaScript reference guides and documentation | | `docs-node` | Look up CE.SDK Node.js reference guides and documentation | | `build` | Implement features, write code, and set up CE.SDK Web projects | | `explain` | Explain how CE.SDK Web features work — concepts, architecture, workflows | The plugin also includes a **builder** agent that autonomously scaffolds complete CE.SDK web applications — detecting your framework, applying starter kit templates, and implementing features end-to-end. ## Setup Instructions ### Claude Code Plugin Add the marketplace and install the plugin: ```bash # Add the marketplace (one-time setup) claude plugin marketplace add imgly/agent-skills # Install the plugin claude plugin install cesdk@imgly ``` ### Vercel Skills CLI Install using the [Vercel Skills CLI](https://github.com/vercel-labs/skills): ```bash # Install all skills for Claude Code npx skills add imgly/agent-skills -a claude-code # Install a specific skill only npx skills add imgly/agent-skills --skill docs-react -a claude-code # List available skills first npx skills add imgly/agent-skills --list ``` ### Manual Copy For any skills-compatible agent, copy skill folders directly from the [GitHub repository](https://github.com/imgly/agent-skills): ```bash # Clone the repo git clone https://github.com/imgly/agent-skills.git # Copy a specific skill into your Claude Code project cp -r agent-skills/plugins/cesdk/skills/docs-react .claude/skills/cesdk-docs-react # Or copy the builder agent cp agent-skills/plugins/cesdk/agents/builder.md .claude/agents/cesdk-builder.md ``` ## Usage Once installed, invoke skills with slash commands in your AI coding assistant: ### Look up documentation ``` /cesdk:docs-react configuration /cesdk:docs-vue getting started /cesdk:docs-nextjs server-side rendering ``` ### Build a feature ``` /cesdk:build add text overlays to images /cesdk:build create a photo editor with filters ``` ### Explain a concept ``` /cesdk:explain how the block hierarchy works /cesdk:explain export pipeline and output formats ``` ## How It Works Each documentation skill bundles the complete CE.SDK guides and API references for its framework in a compressed index. Skills read directly from these local files — no external services or MCP servers are required. The build skill includes starter kit templates for common use cases like design editors, video editors, and photo editors. It detects your project's framework and generates code accordingly. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Quickstart" description: "Get started with CE.SDK by choosing a starter kit" platform: angular url: "https://img.ly/docs/cesdk/angular/get-started/angular/quickstart-a7u8i9/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) > [Quickstart Angular](https://img.ly/docs/cesdk/angular/get-started/angular/quickstart-a7u8i9/) --- Get started with CE.SDK. Choose a starter kit below to see it in action, then follow the integration guide. ## Starter Kits Try the live demos below to see each editor in action, then get started with the one that fits your use case. ### Video Editing Create and edit video compositions with timeline editing, captions, animations, and template-based generation. ### Plugins Add powerful custom functionality to the editor in a matter of seconds. ### Custom Built UIs Fully custom UIs built with React using the Engine API. Freely adapt to your use case. ### Customization Configure the editor UI to fit your design—theming, localization, export options, and layout controls. ### Assets Leverage the versatile asset API to add custom asset sources or create new asset types. ### Templating Create templates by defining placeholders, constraints, and premium content libraries. ### Creative Automation Create dynamic templates to auto-generate image and design variations from data sources. ### Extensibility Extend editor functionality with file format imports, content moderation, design validation, and version history. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Build with AI" description: "Give your AI coding assistant context about CE.SDK to generate accurate code and get instant answers." platform: angular url: "https://img.ly/docs/cesdk/angular/get-started/build-with-ai-k7m9p2/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) > [Build with AI](https://img.ly/docs/cesdk/angular/get-started/build-with-ai-k7m9p2/) --- Give your AI coding assistant full context about CE.SDK to generate accurate code and get instant answers. Choose the integration that fits your workflow. ## Choose Your Approach ### Using a Coding Agent? If you're working with an AI coding assistant like Claude Code or OpenAI Codex, install our **Agent Skills** for the best experience. Skills bundle offline documentation, guided code generation and autonomous project scaffolding directly into your agent. [Set Up Agent Skills](https://img.ly/docs/cesdk/angular/get-started/agent-skills-f7g8h9/) ### Using an AI-Powered IDE? Connect your IDE to our **MCP Server** for real-time documentation search. Works with Claude Desktop, Cursor, VS Code Copilot, Windsurf and any MCP-compatible tool. [Connect MCP Server](https://img.ly/docs/cesdk/angular/get-started/mcp-server-fde71c/) ### Need Raw Documentation for AI? Download our **LLMs.txt** files to manually load CE.SDK documentation into any AI tool. Available as a compact index or full documentation bundle. [Download LLMs.txt](https://img.ly/docs/cesdk/angular/llms-txt-eb9cc5/) --- ## Related Pages - [Agent Skills](https://img.ly/docs/cesdk/angular/get-started/agent-skills-f7g8h9/) - Install CE.SDK documentation and code generation skills for AI coding assistants. - [MCP Server](https://img.ly/docs/cesdk/angular/get-started/mcp-server-fde71c/) - Connect AI assistants to CE.SDK documentation using the Model Context Protocol (MCP) server. - [LLMs.txt](https://img.ly/docs/cesdk/angular/llms-txt-eb9cc5/) - Our documentation is available in LLMs.txt format --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "MCP Server" description: "Connect AI assistants to CE.SDK documentation using the Model Context Protocol (MCP) server." platform: angular url: "https://img.ly/docs/cesdk/angular/get-started/mcp-server-fde71c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) > [Build with AI](https://img.ly/docs/cesdk/angular/get-started/build-with-ai-k7m9p2/) > [MCP Server](https://img.ly/docs/cesdk/angular/get-started/mcp-server-fde71c/) --- The CE.SDK MCP server provides a standardized interface that allows any compatible AI assistant to search and access our documentation. This enables AI tools like Claude, Cursor, and VS Code Copilot to provide more accurate, context-aware help when working with CE.SDK. ## What is MCP? The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open standard that enables AI assistants to securely connect to external data sources. By connecting your AI tools to our MCP server, you get: - **Accurate answers**: AI assistants can search and retrieve the latest CE.SDK documentation - **Context-aware help**: Get platform-specific guidance for your development environment - **Up-to-date information**: Always access current documentation without relying on training data ## Available Tools The MCP server exposes two tools: | Tool | Description | | -------- | --------------------------------------------- | | `search` | Search documentation by query string | | `fetch` | Retrieve the full content of a document by ID | ## Server Endpoint | URL | Transport | | ------------------------ | --------------- | | `https://mcp.img.ly/mcp` | Streamable HTTP | No authentication is required. ## Setup Instructions ### Claude Code Add the MCP server with a single command: ```bash claude mcp add --transport http imgly_docs https://mcp.img.ly/mcp ``` ### Claude Desktop 1. Open Claude Desktop and go to **Settings** (click your profile icon) 2. Navigate to **Connectors** in the sidebar 3. Click **Add custom connector** 4. Enter the URL: `https://mcp.img.ly/mcp` 5. Click **Add** to connect ### Cursor Add the following to your Cursor MCP configuration. You can use either: - **Project-specific**: `.cursor/mcp.json` in your project root - **Global**: `~/.cursor/mcp.json` ```json { "mcpServers": { "imgly_docs": { "url": "https://mcp.img.ly/mcp" } } } ``` ### VS Code Add to your workspace configuration at `.vscode/mcp.json`: ```json { "servers": { "imgly_docs": { "type": "http", "url": "https://mcp.img.ly/mcp" } } } ``` ### Windsurf Add the following to your Windsurf MCP configuration at `~/.codeium/windsurf/mcp_config.json`: ```json { "mcpServers": { "imgly_docs": { "serverUrl": "https://mcp.img.ly/mcp" } } } ``` ### Other Clients For other MCP-compatible clients, use the endpoint `https://mcp.img.ly/mcp` with HTTP transport. Refer to your client's documentation for the specific configuration format. ## Usage Once configured, your AI assistant will automatically have access to CE.SDK documentation. You can ask questions like: - "How do I add a text block in CE.SDK?" - "Show me how to export a design as PNG" - "What are the available blend modes?" The AI will search our documentation and provide answers based on the latest CE.SDK guides and API references. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Get Started" description: "Start integrating CE.SDK into your application—from understanding the SDK to running your first editor." platform: angular url: "https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/angular/get-started/overview-e18f40/) --- Everything you need to integrate CE.SDK into your application. Learn what the SDK offers, get up and running with starter kits, explore AI-powered workflows, and understand our licensing model. --- ## Related Pages - [Angular Creative Editor](https://img.ly/docs/cesdk/angular/what-is-cesdk-2e7acd/) - The CreativeEditor SDK offers a robust Angular library designed for crafting and editing rich visual designs directly within the browser. - [Capabilities](https://img.ly/docs/cesdk/angular/capabilities-e1906f/) - Explore the full list of CE.SDK capabilities available for your platform, including design, video, image, text, and more. - [Quickstart](https://img.ly/docs/cesdk/angular/get-started/angular/quickstart-a7u8i9/) - Get started with CE.SDK by choosing a starter kit - [Build with AI](https://img.ly/docs/cesdk/angular/get-started/build-with-ai-k7m9p2/) - Give your AI coding assistant context about CE.SDK to generate accurate code and get instant answers. - [Licensing](https://img.ly/docs/cesdk/angular/licensing-8aa063/) - Understand CE.SDK’s flexible licensing, trial options, and how keys work across dev, staging, and production. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Grid & Rulers" description: "Configure grid overlay, snap-to-grid, and canvas rulers for precise alignment in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/grid-and-rulers-gr1d5r/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). --- Enable and configure grid overlays, snap-to-grid behavior, and canvas rulers so users can position and align elements with precision in your CE.SDK editor. > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-grid-and-rulers-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-grid-and-rulers-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-grid-and-rulers-browser/) CE.SDK provides a configurable grid overlay and canvas rulers to help users align design elements. The grid renders evenly spaced lines across the page, and snap-to-grid constrains element movement to grid intersections. Rulers display along the top and left edges of the canvas showing measurement units. ```typescript file=@cesdk_web_examples/guides-grid-and-rulers-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { AdvancedEditorConfig } from '@cesdk/core-configs-web/advanced-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Grid & Rulers Guide * * Demonstrates how to configure grid overlay, snap-to-grid, * and canvas rulers for precise element alignment. */ 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.addPlugin(new AdvancedEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Show the grid overlay on the canvas engine.editor.setSettingBool('grid/enabled', true); // Enable snapping so elements align to grid lines engine.editor.setSettingBool('grid/snapEnabled', true); // Set horizontal and vertical grid spacing in design units engine.editor.setSettingFloat('grid/spacingX', 20); engine.editor.setSettingFloat('grid/spacingY', 20); // Set a custom grid color with transparency engine.editor.setSettingColor('grid/color', { r: 0.2, g: 0.4, b: 0.8, a: 0.3 }); // Rulers are controlled through the editor's UI store. // The AdvancedEditorConfig plugin enables the 'ly.img.rulers' // feature flag, which makes rulers available in the UI. // Rulers are visible by default when the feature flag is enabled. // Add a sample block so the grid and rulers are visible in context const page = engine.block.findByType('page')[0]; 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, 200); engine.block.setHeight(block, 150); engine.block.setPositionX(block, 100); engine.block.setPositionY(block, 100); engine.block.appendChild(page, block); console.log('Grid & Rulers guide initialized.'); } } export default Example; ``` ## Enable the Grid Toggle the grid overlay using the `grid/enabled` setting. When enabled, the engine draws a grid of lines across each page based on the configured spacing and color. ```typescript highlight=highlight-enable-grid // Show the grid overlay on the canvas engine.editor.setSettingBool('grid/enabled', true); ``` The grid is a visual aid rendered at the engine level. It does not affect the scene content or export output. ## Enable Snap-to-Grid Snap-to-grid constrains element movement so blocks align to grid lines. Enable it with the `grid/snapEnabled` setting. ```typescript highlight=highlight-snap-to-grid // Enable snapping so elements align to grid lines engine.editor.setSettingBool('grid/snapEnabled', true); ``` When snap-to-grid is active, dragging or resizing a block snaps its edges to the nearest grid line. This works independently of the grid overlay visibility, so you can snap to an invisible grid if needed. ## Configure Grid Spacing Set the horizontal and vertical distance between grid lines using `grid/spacingX` and `grid/spacingY`. Values are in design units (the unit configured for the scene). ```typescript highlight=highlight-grid-spacing // Set horizontal and vertical grid spacing in design units engine.editor.setSettingFloat('grid/spacingX', 20); engine.editor.setSettingFloat('grid/spacingY', 20); ``` Smaller spacing values produce a finer grid. The default spacing is 32 design units in both directions. ## Configure Grid Color Change the grid line color using `grid/color`. The color supports an alpha channel, so you can make the grid more or less prominent. ```typescript highlight=highlight-grid-color // Set a custom grid color with transparency engine.editor.setSettingColor('grid/color', { r: 0.2, g: 0.4, b: 0.8, a: 0.3 }); ``` ## Enable Rulers Rulers are managed through the `ly.img.rulers` feature flag and the editor's UI store. The Advanced Editor and Video Editor plugins enable rulers by default. ```typescript highlight=highlight-enable-rulers // Rulers are controlled through the editor's UI store. // The AdvancedEditorConfig plugin enables the 'ly.img.rulers' // feature flag, which makes rulers available in the UI. // Rulers are visible by default when the feature flag is enabled. ``` Rulers display along the top and left edges of the canvas. They show tick marks and labels in the scene's design unit, and they update as the user pans and zooms. ## Editor Plugin Defaults Different editor plugins configure grid and rulers with different defaults: | Plugin | Grid Visible | Snap-to-Grid | Rulers | |--------|-------------|--------------|--------| | Advanced Editor | Yes | Yes | Yes | | Video Editor | Yes | Yes | Yes | | Design Editor | No | No | No | | Photo Editor | No | No | No | To add grid and ruler support to an editor that doesn't enable them by default, set the settings and feature flag manually as shown in the examples above. ## Per-Page Grid Overrides Each page in the scene can override the document-level grid configuration through the `page/guides/*` block properties. Setting `page/guides/source` to `'Custom'` switches that page onto its own values; leaving it at `'Document'` keeps the page on the engine-wide defaults. Ruler visibility remains document-level only — there is no per-page ruler override. Per-page grids are **session-only** — they are not persisted when the scene is saved. Opening the scene again starts every page back on the document-level grid. ```typescript // Opt a specific page into its own grid configuration. engine.block.setEnum(pageId, 'page/guides/source', 'Custom'); engine.block.setBool(pageId, 'page/guides/gridEnabled', true); engine.block.setFloat(pageId, 'page/guides/gridSpacingX', 20); engine.block.setFloat(pageId, 'page/guides/gridSpacingY', 20); engine.block.setColor(pageId, 'page/guides/gridColor', { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.9, a: 0.5 }); engine.block.setBool(pageId, 'page/guides/gridSnapEnabled', true); // Revert the page to the document defaults. engine.block.setEnum(pageId, 'page/guides/source', 'Document'); ``` In the default Advanced Editor UI, grid controls live only in the Page Inspector — selecting a page shows a "Grid" section that writes to that page's `page/guides/*` properties. The Document Inspector exposes only the "Show Rulers" toggle; the global `grid/*` settings are still used as the fallback for pages in `Document` mode, but have no UI of their own. When users add a new page, the editor seeds its grid from the immediately previous page when that page is in `Custom` mode, so the grid they were just working with carries over without re-entry. If the previous page is in `Document` mode, the new page also uses `Document` — new pages never revive older per-page overrides. ## API Reference | API | Type | Default | Description | |-----|------|---------|-------------| | `grid/enabled` | Bool | `false` | Show or hide the grid overlay | | `grid/snapEnabled` | Bool | `false` | Enable snapping to grid lines | | `grid/spacingX` | Float | `32` | Horizontal spacing between grid lines (design units) | | `grid/spacingY` | Float | `32` | Vertical spacing between grid lines (design units) | | `grid/color` | Color | `{ r: 0, g: 0, b: 0, a: 0.12 }` | Grid line color with alpha | | `page/guides/source` | Enum (`'Document'` / `'Custom'`) | `'Document'` | Per-page resolution source; `Document` falls back to the `grid/*` settings | | `page/guides/gridEnabled` | Bool | `false` | Per-page override of `grid/enabled` (applied when source is `Custom`) | | `page/guides/gridSnapEnabled` | Bool | `false` | Per-page override of `grid/snapEnabled` | | `page/guides/gridSpacingX` | Float | `10` | Per-page override of `grid/spacingX` | | `page/guides/gridSpacingY` | Float | `10` | Per-page override of `grid/spacingY` | | `page/guides/gridColor` | Color | neutral gray | Per-page override of `grid/color` | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Guides" description: "Documentation for Guides" platform: angular url: "https://img.ly/docs/cesdk/angular/guides-8d8b00/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) --- --- ## Related Pages - [Configuration](https://img.ly/docs/cesdk/angular/configuration-2c1c3d/) - Learn how to configure CE.SDK to match your application's functional, visual, and performance requirements. - [Actions API](https://img.ly/docs/cesdk/angular/actions-6ch24x/) - Learn how to use the Actions API to register and customize action handlers in CE.SDK - [Settings](https://img.ly/docs/cesdk/angular/settings-970c98/) - Explore all configurable editor settings and learn how to read, update, and observe them via the Settings API. - [Serve Assets](https://img.ly/docs/cesdk/angular/serve-assets-b0827c/) - Configure CE.SDK to load engine and content assets from your own servers instead of the IMG.LY CDN for production deployments. - [Engine Interface](https://img.ly/docs/cesdk/angular/engine-interface-6fb7cf/) - Understand CE.SDK's architecture and learn when to use direct Engine access for automation workflows - [Automate Workflows](https://img.ly/docs/cesdk/angular/automation-715209/) - Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale. - [AI Integration](https://img.ly/docs/cesdk/angular/user-interface/ai-integration-5aa356/) - Integrate external AI services into CE.SDK to enhance creative workflows and power advanced features. - [User Interface](https://img.ly/docs/cesdk/angular/user-interface-5a089a/) - Use CE.SDK’s customizable, production-ready UI or replace it entirely with your own interface. - [Open the Editor](https://img.ly/docs/cesdk/angular/open-the-editor-23a1db/) - Learn how to load and create scenes, set the zoom level, and configure file proxies or URI resolvers. - [Insert Media Into Scenes](https://img.ly/docs/cesdk/angular/insert-media-a217f5/) - Understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code. - [Import Media](https://img.ly/docs/cesdk/angular/import-media-4e3703/) - Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK. - [Export](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) - Explore export options, supported formats, and configuration features for sharing or rendering output. - [Save](https://img.ly/docs/cesdk/angular/export-save-publish/save-c8b124/) - Save design progress locally or to a backend service to allow for later editing or publishing. - [Store Custom Metadata](https://img.ly/docs/cesdk/angular/export-save-publish/store-custom-metadata-337248/) - Attach, retrieve, and manage custom key-value metadata on design blocks in CE.SDK. - [Edit Image](https://img.ly/docs/cesdk/angular/edit-image-c64912/) - Use CE.SDK to crop, transform, annotate, or enhance images with editing tools and programmatic APIs. - [Create Videos](https://img.ly/docs/cesdk/angular/create-video-c41a08/) - Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing. - [Audio](https://img.ly/docs/cesdk/angular/create-audio/audio-2f700b/) - Create audio in videos - [Text](https://img.ly/docs/cesdk/angular/text-8a993a/) - Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools. - [Create and Edit Shapes](https://img.ly/docs/cesdk/angular/shapes-9f1b2c/) - Draw custom vector shapes, combine them with boolean operations, and insert QR codes into your designs. - [Create and Edit Stickers](https://img.ly/docs/cesdk/angular/stickers-3d4e5f/) - Create and customize stickers using image fills for icons, logos, emoji, and multi-color graphics. - [Create Compositions](https://img.ly/docs/cesdk/angular/create-composition-db709c/) - Combine and arrange multiple elements to create complex, multi-page, or layered design compositions. - [Create Templates](https://img.ly/docs/cesdk/angular/create-templates-3aef79/) - Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK. - [Colors](https://img.ly/docs/cesdk/angular/colors-a9b79c/) - Manage color usage in your designs, from applying brand palettes to handling print and screen formats. - [Fills](https://img.ly/docs/cesdk/angular/fills-402ddc/) - Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements. - [Outlines](https://img.ly/docs/cesdk/angular/outlines-b7820c/) - Enhance design elements with strokes, shadows, and glow effects to improve contrast and visual appeal. - [Filters and Effects](https://img.ly/docs/cesdk/angular/filters-and-effects-6f88ac/) - Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying. - [Animation](https://img.ly/docs/cesdk/angular/animation-ce900c/) - Add motion to designs with support for keyframes, timeline editing, and programmatic animation control. - [Rules](https://img.ly/docs/cesdk/angular/rules-1427c0/) - Define and enforce layout, branding, and safety rules to ensure consistent and compliant designs. - [Conversion](https://img.ly/docs/cesdk/angular/conversion-c3fbb3/) - Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools. - [Improve Performance](https://img.ly/docs/cesdk/angular/performance-3c12eb/) - Optimize CE.SDK browser integration with code splitting, source sets for large assets, export workers, and lifecycle best practices. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "For Audio Processing" description: "Learn how to export audio in WAV or MP4 format from any block type in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/guides/export-save-publish/export/audio-68de25/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/angular/export-save-publish/export-82f968/) > [For Audio Processing](https://img.ly/docs/cesdk/angular/guides/export-save-publish/export/audio-68de25/) --- Export audio from pages, video blocks, audio blocks, and tracks to WAV or MP4 format for external processing, transcription, or analysis. ![Audio Export example showing audio export interface in CE.SDK](./assets/browser.hero.webp) > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-audio-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-audio-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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 composition - **Video blocks** - Extract audio tracks from videos - **Audio blocks** - Export standalone audio content - **Track blocks** - Export audio from specific tracks ## Export Audio Export audio from any block using the `exportAudio` API: ```javascript const page = cesdk.engine.scene.getCurrentPage(); const audioBlob = await cesdk.engine.block.exportAudio(page, { mimeType: 'audio/wav', sampleRate: 48000, numberOfChannels: 2 }); ``` ### 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 To find blocks with audio in your scene: ```javascript // Find audio blocks const audioBlocks = cesdk.engine.block.findByType('audio'); // Find video blocks with audio const 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 Videos can contain multiple audio tracks (e.g., different languages). CE.SDK provides APIs to inspect and extract specific tracks. ### Check audio track count ```javascript 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 ```javascript 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 ```javascript // Create audio block from track 0 (first track) const audioBlockId = cesdk.engine.block.createAudioFromVideo(videoFillId, 0); // Export just this track's audio const trackAudioBlob = await cesdk.engine.block.exportAudio(audioBlockId, { mimeType: 'audio/wav' }); ``` ### Extract all tracks ```javascript // Create audio blocks for all tracks const audioBlockIds = cesdk.engine.block.createAudiosFromVideo(videoFillId); // Export each track for (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 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 ```javascript 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 Send the audio to a service that returns SubRip (SRT) format captions: ```javascript 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 Use the built-in API to create caption blocks from the SRT response: ```javascript // Create a file from the SRT text const srtFile = new File([srtContent], 'captions.srt', { type: 'application/x-subrip' }); // Create object URL and import captions const uri = URL.createObjectURL(srtFile); const captions = await cesdk.engine.block.createCaptionsFromURI(uri); URL.revokeObjectURL(uri); // Add captions to page const 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 point cesdk.engine.block.alignHorizontally([captions[0]], 'Center'); cesdk.engine.block.alignVertically([captions[0]], 'Center'); ``` ### 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 Now that you understand audio export, explore related audio and video features: - [Add Captions](https://img.ly/docs/cesdk/angular/edit-video/add-captions-f67565/) - Learn how to create and sync caption blocks with audio content - [Control Audio and Video](https://img.ly/docs/cesdk/angular/create-video/control-daba54/) - Master time offset, duration, and playback controls for audio blocks - [Trim Video Clips](https://img.ly/docs/cesdk/angular/edit-video/trim-4f688b/) - Apply the same trim concepts to isolate audio segments --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Understanding Text Rendering" description: "Learn how CE.SDK renders text internally by visualizing font metrics, baselines, ascenders, descenders, and line height." platform: angular url: "https://img.ly/docs/cesdk/angular/guides/text/rendering-internals-7c5c6a/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/angular/text-8a993a/) > [Understanding Text Rendering](https://img.ly/docs/cesdk/angular/guides/text/rendering-internals-7c5c6a/) --- Understand how CE.SDK positions and renders text by exploring font metrics—ascenders, descenders, baselines, and line height—and see these concepts visualized directly on the canvas. ![Text rendering visualization showing font metrics overlays](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-text-rendering-internals-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-text-rendering-internals-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-rendering-internals-browser/) Every font defines metrics that determine how text is positioned vertically. Understanding these metrics helps you debug text layout issues, align text precisely with other design elements, and comprehend why fonts at the "same size" can appear different heights. ```typescript file=@cesdk_web_examples/guides-text-rendering-internals-browser/browser.ts reference-only import type { CreativeEngine, DesignUnit, EditorPlugin, EditorPluginContext, FontMetrics, RGBAColor, Typeface } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; // Color constants for visualization overlays const COLORS: Record = { ascender: { r: 1.0, g: 0.42, b: 0.42, a: 0.3 }, // Light red descender: { r: 0.31, g: 0.8, b: 0.77, a: 0.3 }, // Light cyan baseline: { r: 1.0, g: 0.84, b: 0.0, a: 0.8 }, // Gold lineGap: { r: 0.59, g: 0.81, b: 0.71, a: 0.4 }, // Light green paragraphSpacing: { r: 1.0, g: 0.6, b: 0.2, a: 0.5 }, // Orange frame: { r: 0.87, g: 0.63, b: 0.87, a: 0.15 } // Light purple }; /** Calculated metrics for a single line of text, in the scene's design unit. */ interface LineMetrics { ascenderHeight: number; // Design units above baseline descenderHeight: number; // Design units below baseline lineHeight: number; // Total line height (ascender + descender) baselineOffset: number; // Distance from line top to baseline (= ascenderHeight) } /** Multiline layout metrics derived from LineMetrics. */ interface MultilineMetrics { lineSpacing: number; // Distance between line tops lineGap: number; // Extra space between lines (when multiplier > 1) totalHeight: number; // Total height for all lines } /** * Unit Conversion Constants * * Font sizes are specified in typographic points (pt). * CE.SDK supports three design unit types, each with different relationships to points: * * - Millimeter: 1 inch = 25.4 mm, so 1 pt = 25.4/72 mm ≈ 0.3528 mm * - Inch: 1 inch = 72 pt, so 1 pt = 1/72 inch ≈ 0.0139 inch * - Pixel: At 72 DPI (CE.SDK default), 1 pt = 1 px * * The conversion factor transforms point-based font measurements to design units. */ const POINTS_PER_INCH = 72; const MM_PER_INCH = 25.4; const CESDK_DEFAULT_DPI = 72; // CE.SDK uses 72 DPI for pixel mode /** Convert typographic points to the specified design unit. */ export function getDesignUnitsPerPoint(designUnit: DesignUnit): number { switch (designUnit) { case 'Millimeter': // 1 point = 25.4/72 mm ≈ 0.3528 mm return MM_PER_INCH / POINTS_PER_INCH; case 'Inch': // 1 point = 1/72 inch ≈ 0.0139 inch return 1 / POINTS_PER_INCH; case 'Pixel': // At 72 DPI: 1 point = 1 pixel return CESDK_DEFAULT_DPI / POINTS_PER_INCH; default: throw new Error(`Unknown design unit: ${designUnit}`); } } /** * Calculate single-line metrics from font metrics and font size. * lineHeight = fontSize × (ascender + |descender|) / unitsPerEm × designUnitsPerPoint */ export function calculateLineMetrics( fontMetrics: FontMetrics, fontSize: number, designUnit: DesignUnit = 'Millimeter' ): LineMetrics { const designUnitsPerPoint = getDesignUnitsPerPoint(designUnit); const totalTypographicUnits = fontMetrics.ascender + Math.abs(fontMetrics.descender); const ascenderRatio = fontMetrics.ascender / totalTypographicUnits; const descenderRatio = Math.abs(fontMetrics.descender) / totalTypographicUnits; const lineHeightInPoints = (fontSize * totalTypographicUnits) / fontMetrics.unitsPerEm; const lineHeight = lineHeightInPoints * designUnitsPerPoint; const ascenderHeight = lineHeight * ascenderRatio; const descenderHeight = lineHeight * descenderRatio; const baselineOffset = ascenderHeight; return { ascenderHeight, descenderHeight, lineHeight, baselineOffset }; } /** * Calculate multiline layout metrics from single-line metrics. * lineSpacing = lineHeight × multiplier; lineGap = lineSpacing - lineHeight */ export function calculateMultilineMetrics( lineMetrics: LineMetrics, lineCount: number, lineHeightMultiplier: number ): MultilineMetrics { const lineSpacing = lineMetrics.lineHeight * lineHeightMultiplier; const lineGap = lineSpacing - lineMetrics.lineHeight; const totalHeight = lineMetrics.lineHeight + (lineCount - 1) * lineSpacing; return { lineSpacing, lineGap, totalHeight }; } interface LineVisualization { ascenderRect: number; descenderRect: number; baselineRect: number; lineGapRect: number; paragraphSpacingRect: number; } interface VisualizationSet { textBlock: number; lineVisualizations: LineVisualization[]; frameRect: number; fontUri: string; } class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; private visualizationBlocks: Map = new Map(); async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 1000, height: 1000, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const fontNames = [ 'Roboto', 'Playfair Display', 'Abril Fatface', 'Caveat', 'Lato' ]; let yOffset = 30; for (const fontName of fontNames) { const result = await engine.asset.findAssets('ly.img.typeface', { query: fontName, page: 0, perPage: 1 }); if (result.assets.length === 0) { console.warn(`Font "${fontName}" not found in asset library`); continue; } const typefaceAsset = result.assets[0]; const typeface = typefaceAsset.payload?.typeface; if (typeface && typeface.fonts?.[0]?.uri) { const fontUri = typeface.fonts[0].uri; const vizSet = await this.createVisualizationSet( engine, page, fontName, fontUri, typeface, yOffset ); this.visualizationBlocks.set(vizSet.textBlock, vizSet); yOffset += 180; } } engine.event.subscribe([], async (events) => { for (const event of events) { if (this.visualizationBlocks.has(event.block)) { await this.updateVisualization(engine, event.block); } } }); const scene = engine.scene.get(); if (scene) { engine.event.subscribe([scene], async () => { for (const vizSet of this.visualizationBlocks.values()) { await this.updateVisualization(engine, vizSet.textBlock); } }); } for (const vizSet of this.visualizationBlocks.values()) { await this.updateVisualization(engine, vizSet.textBlock); } await this.createLegend(engine, page); await engine.scene.zoomToBlock(page, { padding: 40 }); const firstVizSet = this.visualizationBlocks.values().next().value; if (firstVizSet) { engine.block.setSelected(firstVizSet.textBlock, true); } } private async createVisualizationSet( engine: CreativeEngine, page: number, fontName: string, fontUri: string, typeface: Typeface, yPosition: number ): Promise { const frameRect = this.createColoredRect(engine, page, COLORS.frame); const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); engine.block.replaceText( textBlock, `${fontName}\u2028Second Line\nNew Paragraph` ); engine.block.setTextFontSize(textBlock, 36); engine.block.setFont(textBlock, fontUri, typeface); engine.block.setFloat(textBlock, 'text/paragraphSpacing', 0.5); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setPositionX(textBlock, 30); engine.block.setPositionY(textBlock, yPosition); return { textBlock, lineVisualizations: [], frameRect, fontUri }; } private ensureLineVisualizations( engine: CreativeEngine, page: number, vizSet: VisualizationSet, requiredLineCount: number ): void { const previousCount = vizSet.lineVisualizations.length; while (vizSet.lineVisualizations.length < requiredLineCount) { vizSet.lineVisualizations.push({ ascenderRect: this.createColoredRect(engine, page, COLORS.ascender), descenderRect: this.createColoredRect(engine, page, COLORS.descender), baselineRect: this.createColoredRect(engine, page, COLORS.baseline), lineGapRect: this.createColoredRect(engine, page, COLORS.lineGap), paragraphSpacingRect: this.createColoredRect( engine, page, COLORS.paragraphSpacing ) }); } if (vizSet.lineVisualizations.length > previousCount) { engine.block.appendChild(page, vizSet.textBlock); } for (let i = requiredLineCount; i < vizSet.lineVisualizations.length; i++) { this.setLineVizVisibility(engine, vizSet.lineVisualizations[i], false); } } private async createLegend( engine: CreativeEngine, page: number ): Promise { const legendX = 700; const legendY = 30; const swatchSize = 20; const lineHeight = 35; const result = await engine.asset.findAssets('ly.img.typeface', { query: 'Roboto', page: 0, perPage: 1 }); const typeface = result.assets[0]?.payload?.typeface; const fontUri = typeface?.fonts?.[0]?.uri; const legendItems = [ { color: COLORS.ascender, label: 'Ascender' }, { color: COLORS.descender, label: 'Descender' }, { color: COLORS.baseline, label: 'Baseline' }, { color: COLORS.lineGap, label: 'Line Gap' }, { color: COLORS.paragraphSpacing, label: 'Paragraph Gap' }, { color: COLORS.frame, label: 'Text Frame' } ]; const titleBlock = engine.block.create('text'); engine.block.appendChild(page, titleBlock); engine.block.replaceText(titleBlock, 'Legend'); engine.block.setTextFontSize(titleBlock, 24); if (fontUri && typeface) { engine.block.setFont(titleBlock, fontUri, typeface); } engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setPositionX(titleBlock, legendX); engine.block.setPositionY(titleBlock, legendY); for (let i = 0; i < legendItems.length; i++) { const item = legendItems[i]; const itemY = legendY + 40 + i * lineHeight; const swatch = this.createColoredRect(engine, page, { ...item.color, a: item.color.a < 0.5 ? 0.6 : item.color.a // Make swatches more visible }); this.positionRect(engine, swatch, legendX, itemY, swatchSize, swatchSize); const label = engine.block.create('text'); engine.block.appendChild(page, label); engine.block.replaceText(label, item.label); engine.block.setTextFontSize(label, 16); if (fontUri && typeface) { engine.block.setFont(label, fontUri, typeface); } engine.block.setHeightMode(label, 'Auto'); engine.block.setWidthMode(label, 'Auto'); engine.block.setPositionX(label, legendX + swatchSize + 10); engine.block.setPositionY(label, itemY + 2); } } private createColoredRect( engine: CreativeEngine, page: number, color: RGBAColor ): number { const rect = engine.block.create('graphic'); engine.block.appendChild(page, rect); const shape = engine.block.createShape('rect'); engine.block.setShape(rect, shape); const fill = engine.block.createFill('color'); engine.block.setFill(rect, fill); engine.block.setColor(fill, 'fill/color/value', color); return rect; } private positionRect( engine: CreativeEngine, block: number, x: number, y: number, width: number, height: number ): void { engine.block.setPositionX(block, x); engine.block.setPositionY(block, y); engine.block.setWidth(block, width); engine.block.setHeight(block, height); } private setLineVizVisibility( engine: CreativeEngine, lineViz: LineVisualization, visible: boolean ): void { engine.block.setVisible(lineViz.ascenderRect, visible); engine.block.setVisible(lineViz.descenderRect, visible); engine.block.setVisible(lineViz.baselineRect, visible); engine.block.setVisible(lineViz.lineGapRect, visible); engine.block.setVisible(lineViz.paragraphSpacingRect, visible); } /** * Find lines ending with paragraph breaks (\n) vs line separators (\u2028). * Queries the engine's visual line content to handle soft wraps correctly. */ private findParagraphBreakLines( engine: CreativeEngine, textBlock: number, lineCount: number ): Set { const result = new Set(); for (let lineIndex = 0; lineIndex < lineCount; lineIndex++) { const lineContent = engine.block.getTextVisibleLineContent( textBlock, lineIndex ); if (lineContent.endsWith('\n')) { result.add(lineIndex); } } return result; } private async updateVisualization( engine: CreativeEngine, textBlock: number ): Promise { const vizSet = this.visualizationBlocks.get(textBlock); if (!vizSet) return; const page = engine.block.getParent(textBlock); if (!page) return; const fontUri = engine.block.getString(textBlock, 'text/fontFileUri'); if (!fontUri) return; vizSet.fontUri = fontUri; // Returns FontMetrics in font design units, e.g. for Roboto: // { ascender: 1900, descender: -500, unitsPerEm: 2048, lineGap: 0, // capHeight: 1456, xHeight: 1082, underlineOffset: -200, // underlineSize: 100, strikeoutOffset: 528, strikeoutSize: 102 } let metrics: FontMetrics; try { metrics = await engine.editor.getFontMetrics(fontUri); } catch (error) { console.error(`Failed to load font metrics for ${fontUri}:`, error); return; } const frameX = engine.block.getPositionX(textBlock); const frameY = engine.block.getPositionY(textBlock); const frameWidth = engine.block.getFrameWidth(textBlock); const frameHeight = engine.block.getFrameHeight(textBlock); const fontSizePt = engine.block.getTextFontSizes(textBlock)[0] ?? 36; const lineHeightMultiplier = engine.block.getFloat( textBlock, 'text/lineHeight' ); const lineCount = engine.block.getTextVisibleLineCount(textBlock); if (lineCount === 0) return; this.ensureLineVisualizations(engine, page, vizSet, lineCount); const designUnit = engine.scene.getDesignUnit(); const lineMetrics = calculateLineMetrics(metrics, fontSizePt, designUnit); const multilineMetrics = calculateMultilineMetrics( lineMetrics, lineCount, lineHeightMultiplier ); const { ascenderHeight, descenderHeight, lineHeight } = lineMetrics; const { lineSpacing } = multilineMetrics; const paragraphSpacingMultiplier = engine.block.getFloat( textBlock, 'text/paragraphSpacing' ); const paragraphGap = paragraphSpacingMultiplier * lineHeight; const linesEndingWithParagraphBreak = this.findParagraphBreakLines( engine, textBlock, lineCount ); const lineX = frameX; const lineWidth = frameWidth; const regularLineGap = lineSpacing - lineHeight; let cumulativeY = frameY; for (let lineIndex = 0; lineIndex < lineCount; lineIndex++) { const lineViz = vizSet.lineVisualizations[lineIndex]; const lineTopY = cumulativeY; const baselineY = lineTopY + ascenderHeight; const ascenderTop = lineTopY; const descenderBottom = baselineY + descenderHeight; engine.block.setVisible(lineViz.ascenderRect, true); this.positionRect( engine, lineViz.ascenderRect, lineX, ascenderTop, lineWidth, ascenderHeight ); engine.block.setVisible(lineViz.descenderRect, true); this.positionRect( engine, lineViz.descenderRect, lineX, baselineY, lineWidth, descenderHeight ); const baselineThicknessPx = 2; const baselineThickness = baselineThicknessPx * getDesignUnitsPerPoint(designUnit); engine.block.setVisible(lineViz.baselineRect, true); this.positionRect( engine, lineViz.baselineRect, lineX, baselineY - baselineThickness / 2, lineWidth, baselineThickness ); if (lineIndex < lineCount - 1) { const gapTop = descenderBottom; const hasParagraphBreak = linesEndingWithParagraphBreak.has(lineIndex); const extraParagraphGap = hasParagraphBreak ? paragraphGap : 0; if (regularLineGap > 0.5) { engine.block.setVisible(lineViz.lineGapRect, true); this.positionRect( engine, lineViz.lineGapRect, lineX, gapTop, lineWidth, regularLineGap ); } else { engine.block.setVisible(lineViz.lineGapRect, false); } if (hasParagraphBreak && extraParagraphGap > 0.5) { engine.block.setVisible(lineViz.paragraphSpacingRect, true); this.positionRect( engine, lineViz.paragraphSpacingRect, lineX, gapTop + regularLineGap, lineWidth, extraParagraphGap ); } else { engine.block.setVisible(lineViz.paragraphSpacingRect, false); } cumulativeY += lineSpacing + extraParagraphGap; } else { engine.block.setVisible(lineViz.lineGapRect, false); engine.block.setVisible(lineViz.paragraphSpacingRect, false); } } this.positionRect( engine, vizSet.frameRect, frameX, frameY, frameWidth, frameHeight ); } } export default Example; ``` This guide covers how font metrics determine text positioning, how CE.SDK converts font sizes to design units, and how the line height and paragraph spacing properties affect multiline layout. ## Font Metrics Fundamentals Use `getFontMetrics()` to read a font's metrics in its design units: ```typescript highlight-get-metrics // Returns FontMetrics in font design units, e.g. for Roboto: // { ascender: 1900, descender: -500, unitsPerEm: 2048, lineGap: 0, // capHeight: 1456, xHeight: 1082, underlineOffset: -200, // underlineSize: 100, strikeoutOffset: 528, strikeoutSize: 102 } let metrics: FontMetrics; try { metrics = await engine.editor.getFontMetrics(fontUri); } catch (error) { console.error(`Failed to load font metrics for ${fontUri}:`, error); return; } ``` Typography positions text relative to the **baseline**—the invisible line characters sit on. Every font defines these key measurements: - **Ascender**: Distance above the baseline to the top of tall characters (b, d, h, l) - **Descender**: Distance below the baseline where characters like g, p, y extend - **EM Square**: The design space containing all glyphs, typically 1000 or 2048 units - **Line Height**: Total vertical space allocated for a line, calculated from ascender + descender These values are stored in **font units** relative to the EM square. When you set a font size of 36pt, CE.SDK scales these proportionally: ``` lineHeight = fontSize × (ascender + |descender|) / unitsPerEm × designUnitsPerPoint ``` ## Design Units and Point Conversion CE.SDK supports three design unit types. Font sizes are always specified in **typographic points** (72 pt = 1 inch), then converted: | Design Unit | Conversion Factor | Example: 36pt Font | |-------------|-------------------|-------------------| | Millimeter | 25.4 / 72 ≈ 0.3528 mm/pt | ~12.7 mm line height | | Inch | 1 / 72 ≈ 0.0139 in/pt | ~0.5 inch line height | | Pixel | 1.0 (at 72 DPI) | 36 px line height | Use `engine.scene.getDesignUnit()` to retrieve the current design unit for correct positioning. ## Line Height and the lineHeight Multiplier The `text/lineHeight` property is a **multiplier** that controls spacing between lines. A value of 1.0 means lines touch (no gap); 2.0 doubles the spacing. Ascender and descender heights are **constant** for a given font and size. The multiplier only affects the gap between lines—not the glyph regions themselves. At `lineHeight = 1.0`: - Line spacing equals the natural line height - Lines touch with no gap At `lineHeight = 2.0`: - Line spacing doubles - A gap appears between descender of one line and ascender of the next ## Line Breaks vs Paragraph Breaks CE.SDK distinguishes between two types of line breaks, each with different spacing behavior: | Break Type | Key | Character | Triggers Paragraph Spacing | |------------|-----|-----------|---------------------------| | **Paragraph Break** | Enter | `\n` (U+000A) | Yes | | **Line Separator** | Shift+Enter | U+2028 | No | When users press **Enter**, CE.SDK inserts a paragraph break (`\n`). This triggers paragraph spacing—extra vertical space controlled by the `text/paragraphSpacing` property. When users press **Shift+Enter**, CE.SDK inserts a line separator (U+2028). This creates a new line but does **not** add paragraph spacing, keeping lines closer together within the same logical paragraph. ## Paragraph Spacing The `text/paragraphSpacing` property controls extra space added after paragraph breaks. It's a **multiplier** applied to the line height: ``` paragraphGap = paragraphSpacing × lineHeight ``` This gap appears **only** after lines ending with `\n` (paragraph breaks), not after lines ending with U+2028 (line separators). ```typescript highlight-paragraph-spacing const paragraphSpacingMultiplier = engine.block.getFloat( textBlock, 'text/paragraphSpacing' ); const paragraphGap = paragraphSpacingMultiplier * lineHeight; const linesEndingWithParagraphBreak = this.findParagraphBreakLines( engine, textBlock, lineCount ); ``` **Use cases**: - Set `paragraphSpacing = 0` to have paragraph breaks behave like line breaks - Set `paragraphSpacing = 0.5` for subtle paragraph separation - Set `paragraphSpacing = 1.0` for full line spacing between paragraphs ## Why Fonts Look Different at the Same Size Different fonts allocate the EM square differently. A serif font like Playfair Display may have taller ascenders than a sans-serif like Roboto, even at the same point size. Each typeface has unique proportions—this is normal. ## Troubleshooting Text Layout **Text appears cut off**: Check if your text block's frame height is sufficient. Use `getTextVisibleLineCount()` to verify how many lines are rendering. **Fonts look different sizes**: This is expected—fonts have different ascender/descender ratios. Set frames based on measured line heights rather than assumed pixel values. **Text not aligning with other elements**: Different fonts have different baselines. For precise alignment, calculate baseline position using the font's ascender height. **Line gap not appearing**: The gap only shows when `text/lineHeight > 1.0`. At 1.0, lines touch directly. **Paragraph spacing not appearing after Shift+Enter**: Shift+Enter inserts a line separator (U+2028), not a paragraph break (`\n`). Only paragraph breaks trigger `text/paragraphSpacing`. Use Enter for paragraph breaks with extra spacing. **How to insert a line break without paragraph spacing**: Use Shift+Enter to insert a line separator (U+2028). This creates a visual line break but keeps the content within the same paragraph, without triggering paragraph spacing. ## API Reference | Method | Purpose | |--------|---------| | `engine.editor.getFontMetrics(fontUri)` | Get font metrics (ascender, descender, unitsPerEm) in font design units | | `engine.scene.getDesignUnit()` | Get current design unit (Millimeter, Inch, or Pixel) | | `engine.block.getTextFontSizes(id)` | Get current font sizes | | `engine.block.getFloat(id, 'text/lineHeight')` | Get line height multiplier | | `engine.block.getFloat(id, 'text/paragraphSpacing')` | Get paragraph spacing multiplier | | `engine.block.getString(id, 'text/fontFileUri')` | Get current font file URI | | `engine.block.getTextVisibleLineContent(id, lineIndex)` | Get rendered text content for a specific visual line | | `engine.block.getTextVisibleLineCount(id)` | Get number of rendered text lines | | `engine.block.getTextCharacterInkBoxes(id, from, to)` | Get tight ink bounding boxes per grapheme in global scene coordinates | | `engine.block.getPositionX/Y(id)` | Get block position in design units | | `engine.block.getFrameWidth/Height(id)` | Get block frame dimensions | | `engine.asset.findAssets('ly.img.typeface', options)` | Query typeface asset source by name | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Import Media" description: "Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media-4e3703/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/angular/import-media/overview-84bb23/) - Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK. - [Asset Concepts](https://img.ly/docs/cesdk/angular/import-media/concepts-5e6197/) - This guide explains the foundational architecture of the CE.SDK asset system, including what asset sources are, how they organize content, and how they connect to the user interface. - [Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-library-65d6c4/) - Manage how users browse, preview, and insert media assets into their designs with a customizable asset library. - [Import From Local Source](https://img.ly/docs/cesdk/angular/import-media/from-local-source-39b2a9/) - Enable users to upload files from their device for use as design assets in the editor. - [Import From Remote Source](https://img.ly/docs/cesdk/angular/import-media/from-remote-source-b65faf/) - Connect CE.SDK to external sources like servers or third-party platforms to import assets remotely. - [Capture From Camera](https://img.ly/docs/cesdk/angular/import-media/capture-from-camera-92f388/) - Capture photos or videos directly from a connected camera for immediate use in your design. - [Edit or Remove Assets](https://img.ly/docs/cesdk/angular/import-media/edit-or-remove-assets-ce072c/) - Manage assets in local asset sources by updating metadata, removing individual assets, or deleting entire sources in CE.SDK. - [Source Sets](https://img.ly/docs/cesdk/angular/import-media/source-sets-5679c8/) - Provide multiple versions of images and videos at different resolutions for optimal performance and quality across editing and export workflows. - [Using Default Assets](https://img.ly/docs/cesdk/angular/import-media/default-assets-d2763d/) - Load shapes, stickers, images, and other built-in assets from IMG.LY's CDN to populate your CE.SDK editor using the Asset API. - [Retrieve MIME Type](https://img.ly/docs/cesdk/angular/import-media/retrieve-mimetype-ed13bf/) - Detect the MIME type of resources loaded in the engine to determine file formats for processing, export, or display. - [Asset Content JSON Schema](https://img.ly/docs/cesdk/angular/import-media/content-json-schema-a7b3d2/) - Understand the JSON schema structure for defining asset source content including version, metadata, and payload properties for images, videos, fonts, and templates. - [Supported File Formats for Import](https://img.ly/docs/cesdk/angular/import-media/file-format-support-8cdc84/) - Review the supported image, video, audio, and template formats for importing assets into CE.SDK on the web. - [Size Limits](https://img.ly/docs/cesdk/angular/import-media/size-limits-c32275/) - Learn about file size restrictions and how to optimize large assets for use in CE.SDK. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Asset Library" description: "Manage how users browse, preview, and insert media assets into their designs with a customizable asset library." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/asset-library-65d6c4/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-library-65d6c4/) --- --- ## Related Pages - [Basics](https://img.ly/docs/cesdk/angular/import-media/asset-panel/basics-f29078/) - Explore the core functionality of the asset library and how users browse, search, and insert media. - [Customize](https://img.ly/docs/cesdk/angular/import-media/asset-panel/customize-c9a4de/) - Adapt the asset library UI and behavior to suit your application’s structure and user needs. - [Thumbnails](https://img.ly/docs/cesdk/angular/import-media/asset-panel/thumbnails-c23949/) - Configure thumbnail images for assets in CE.SDK's asset library with proper sizing, preview URIs for audio, and customized UI display. - [Refresh Assets](https://img.ly/docs/cesdk/angular/import-media/asset-panel/refresh-assets-382060/) - Trigger asset reloads to ensure the library reflects newly uploaded or updated items. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Basics" description: "Explore the core functionality of the asset library and how users browse, search, and insert media." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/asset-panel/basics-f29078/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-library-65d6c4/) > [Basics](https://img.ly/docs/cesdk/angular/import-media/asset-panel/basics-f29078/) --- CE.SDK treats all insertable content as assets—images, videos, audio, stickers, shapes, templates, and text presets flow through a unified asset system. ![Asset Library Basics example showing the CE.SDK editor with a custom asset library entry in the dock](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-basics-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-asset-library-basics-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-asset-library-basics-browser/) The asset library connects the engine to the user interface through three layers: ``` ┌─────────────────────────────────────────────────────────────┐ │ User Interface │ │ ┌─────────────┐ references ┌──────────────────────┐ │ │ │ Dock Entry │ ───────────────▶ │ Asset Library Entry │ │ │ │ (Button) │ │ (Display Config) │ │ │ └─────────────┘ └──────────┬───────────┘ │ │ │ queries │ ├──────────────────────────────────────────────│──────────────┤ │ Engine ▼ │ │ ┌──────────────────────┐ │ │ │ Asset Source │ │ │ │ (Data Provider) │ │ │ └──────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` The following example demonstrates all three layers working together: ```typescript file=@cesdk_web_examples/guides-import-media-asset-library-basics-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Asset Library Basics Guide * * Demonstrates the asset library architecture: * - Creating a custom asset source (engine layer) * - Creating an asset library entry (UI configuration layer) * - Connecting the entry to the dock (UI interaction layer) */ 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Layer 1: Asset Source - provides assets to the UI cesdk.engine.asset.addSource({ id: 'my-custom-images', findAssets: async () => ({ assets: [ { id: 'sample-1', meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 1920, height: 1280 } }, { id: 'sample-2', meta: { uri: 'https://img.ly/static/ubq_samples/sample_2.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg', width: 1920, height: 1280 } }, { id: 'sample-3', meta: { uri: 'https://img.ly/static/ubq_samples/sample_3.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg', width: 1920, height: 1280 } } ], total: 3, currentPage: 1, nextPage: undefined }), applyAsset: async (assetResult) => cesdk.engine.asset.defaultApplyAsset(assetResult) }); // Layer 2: Asset Library Entry - connects sources to display settings cesdk.ui.addAssetLibraryEntry({ id: 'my-images-entry', sourceIds: ['my-custom-images'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square' }); // Layer 3: Dock - adds button to access the entry cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'my-images-entry', label: 'libraries.my-images-entry.label', entries: ['my-images-entry'] }, ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); cesdk.i18n.setTranslations({ en: { 'libraries.my-images-entry.label': 'My Images' } }); // Query registered entries const allEntries = cesdk.ui.findAllAssetLibraryEntries(); console.log('Registered entries:', allEntries); const myEntry = cesdk.ui.getAssetLibraryEntry('my-images-entry'); console.log('My entry:', myEntry); // Open the panel to show the custom assets immediately cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['my-images-entry'] } }); } } export default Example; ``` This guide covers: - Registering asset sources with the engine - Creating asset library entries to configure display settings - Adding entries to the dock for user access ## Layer 1: Asset Source Asset sources provide data through `findAssets` and handle insertion through `applyAsset`. Register them with `engine.asset.addSource()`. ```typescript highlight=highlight-asset-source // Layer 1: Asset Source - provides assets to the UI cesdk.engine.asset.addSource({ id: 'my-custom-images', findAssets: async () => ({ assets: [ { id: 'sample-1', meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 1920, height: 1280 } }, { id: 'sample-2', meta: { uri: 'https://img.ly/static/ubq_samples/sample_2.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg', width: 1920, height: 1280 } }, { id: 'sample-3', meta: { uri: 'https://img.ly/static/ubq_samples/sample_3.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg', width: 1920, height: 1280 } } ], total: 3, currentPage: 1, nextPage: undefined }), applyAsset: async (assetResult) => cesdk.engine.asset.defaultApplyAsset(assetResult) }); ``` For details on asset source configuration, see the [Asset Sources concept](https://img.ly/docs/cesdk/angular/import-media/concepts-5e6197/). ## Layer 2: Asset Library Entry Entries connect asset sources to display settings. Create them with `cesdk.ui.addAssetLibraryEntry()`. ```typescript highlight=highlight-asset-entry // Layer 2: Asset Library Entry - connects sources to display settings cesdk.ui.addAssetLibraryEntry({ id: 'my-images-entry', sourceIds: ['my-custom-images'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square' }); ``` For display properties like `gridColumns` and `previewLength`, see the [Thumbnails](https://img.ly/docs/cesdk/angular/import-media/asset-panel/thumbnails-c23949/) guide. ## Layer 3: Dock Add entries to the dock with `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)` using the `ly.img.assetLibrary.dock` component type. ```typescript highlight=highlight-dock-entry // Layer 3: Dock - adds button to access the entry cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'my-images-entry', label: 'libraries.my-images-entry.label', entries: ['my-images-entry'] }, ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); cesdk.i18n.setTranslations({ en: { 'libraries.my-images-entry.label': 'My Images' } }); ``` ## Managing Entries Query and inspect registered entries: ```typescript highlight=highlight-list-entries // Query registered entries const allEntries = cesdk.ui.findAllAssetLibraryEntries(); console.log('Registered entries:', allEntries); const myEntry = cesdk.ui.getAssetLibraryEntry('my-images-entry'); console.log('My entry:', myEntry); ``` ## API Reference | Method | Description | |--------|-------------| | `findAllAssetLibraryEntries()` | List all registered entry IDs | | `getAssetLibraryEntry(id)` | Get entry configuration | | `addAssetLibraryEntry(entry)` | Register a new entry | | `removeAssetLibraryEntry(id)` | Remove an entry | ## Next Steps - [Customize](https://img.ly/docs/cesdk/angular/import-media/asset-panel/customize-c9a4de/) — Icons, i18n, replace libraries - [Thumbnails](https://img.ly/docs/cesdk/angular/import-media/asset-panel/thumbnails-c23949/) — Thumbnail URIs, display settings - [Refresh Assets](https://img.ly/docs/cesdk/angular/import-media/asset-panel/refresh-assets-382060/) — Trigger asset reloads - [Asset Sources](https://img.ly/docs/cesdk/angular/import-media/concepts-5e6197/) — Creating asset sources --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Customize" description: "Adapt the asset library UI and behavior to suit your application’s structure and user needs." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/asset-panel/customize-c9a4de/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-library-65d6c4/) > [Customize](https://img.ly/docs/cesdk/angular/import-media/asset-panel/customize-c9a4de/) --- Adapt the asset library to match your application's structure and user needs. ![Customize Asset Library](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-customize-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-asset-library-customize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-asset-library-customize-browser/) The asset library displays assets from registered asset sources. While sources define the data, asset library entries control how that data is presented in the UI. CE.SDK provides default entries for common asset types (images, videos, stickers, etc.), but you can create custom entries or modify existing ones to match your application's needs. ```typescript file=@cesdk_web_examples/guides-import-media-asset-library-customize-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // ===== Section 1: Localizing Entry Labels ===== // Provide translations for custom entries before creating them // Labels appear at different navigation levels: // - Entry label: shown in dock and as panel header (sources overview) // - Source label: shown as section header and when navigating into a source // - Group label: shown when a source contains grouped assets cesdk.i18n.setTranslations({ en: { // Entry-level labels (sources overview) 'libraries.my-custom-assets.label': 'My Assets (Entry Level)', 'libraries.my-replace-assets.label': 'Replace Options', // Source-level labels within entry (overrides default source labels) 'libraries.my-custom-assets.ly.img.image.label': 'Images (Source Level)', 'libraries.my-custom-assets.ly.img.sticker.label': 'Stickers (Source Level)', // Group-level labels within sticker source (all 8 sticker categories) // Format: libraries....label 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.doodle/category/doodle.label': 'Doodle (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.emoji/category/emoji.label': 'Emoji (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.emoticons/category/emoticons.label': 'Emoticons (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.hand/category/hand.label': 'Hands (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.sketches/category/sketches.label': 'Sketches (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.3Dstickers/category/3Dstickers.label': '3D Grain (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.craft/category/craft.label': 'Craft (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.marker/category/marker.label': 'Markers (Group Level)' } }); // ===== Section 2: Creating Custom Entries with Theme-Aware Icons ===== // Create a custom asset library entry with theme-aware icons // Use existing demo sources (ly.img.image, ly.img.sticker) to populate the entry cesdk.ui.addAssetLibraryEntry({ id: 'my-custom-assets', sourceIds: ['ly.img.image', 'ly.img.sticker'], // Preview settings control the overview showing all sources previewLength: 4, previewBackgroundType: 'contain', // Grid settings control the detailed view when navigating into a source // Using 2 columns creates a distinct layout from the preview row gridColumns: 2, gridItemHeight: 'square', gridBackgroundType: 'cover', // Theme-aware icon function receives theme and iconSize parameters icon: ({ theme, iconSize }) => { if (theme === 'dark') { return iconSize === 'large' ? 'https://img.ly/static/cesdk/guides/icon-large-dark.svg' : 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg'; } return iconSize === 'large' ? 'https://img.ly/static/cesdk/guides/icon-large-light.svg' : 'https://img.ly/static/cesdk/guides/icon-normal-light.svg'; } }); // ===== Section 3: Creating Entry for Replace Operations ===== // Create a separate entry for replace operations cesdk.ui.addAssetLibraryEntry({ id: 'my-replace-assets', sourceIds: ['ly.img.image'], previewLength: 3, gridColumns: 2, gridItemHeight: 'square', previewBackgroundType: 'contain', gridBackgroundType: 'contain' }); // ===== Section 4: Modifying Default Entries ===== // Update the default images entry with different grid columns cesdk.ui.updateAssetLibraryEntry('ly.img.image', { gridColumns: 4 }); // ===== Section 5: Extending Source IDs ===== // Use a callback pattern with currentIds to extend sourceIds cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [...currentIds, 'ly.img.upload'] }); // ===== Section 6: Configuring Replace Entries ===== // Configure which entries appear for replace operations based on block type cesdk.ui.setReplaceAssetLibraryEntries( ({ selectedBlocks, defaultEntryIds }) => { // Only show replace options when exactly one block is selected if (selectedBlocks.length !== 1) { return []; } const { fillType } = selectedBlocks[0]; // Show custom replace entry for image fills if (fillType === '//ly.img.ubq/fill/image') { return [...defaultEntryIds, 'my-replace-assets']; } // Return empty array to hide replace button for other fill types return []; } ); // ===== Section 7: Adding Entries to the Dock ===== // Add custom entry to the top of the dock with a separator cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'my-custom-assets', // Dock icons use a static URL string icon: 'https://img.ly/static/cesdk/guides/icon-normal-light.svg', label: 'libraries.my-custom-assets.label', entries: ['my-custom-assets'] }, { id: 'ly.img.separator' }, ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); // Create a design scene to display the editor await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Add explanatory text to the canvas const page = engine.scene.getCurrentPage(); if (page) { // Get page dimensions to constrain text within boundaries const pageWidth = engine.block.getWidth(page); const margin = 20; const textWidth = pageWidth - margin * 2; // Title text const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Customize Asset Library'); engine.block.setFloat(titleBlock, 'text/fontSize', 28); engine.block.setWidth(titleBlock, textWidth); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.setPositionX(titleBlock, margin); engine.block.setPositionY(titleBlock, margin); engine.block.appendChild(page, titleBlock); // Instructions text const instructionsBlock = engine.block.create('text'); engine.block.replaceText( instructionsBlock, '← Click "My Assets (Entry Level)" in the dock.\n\n' + 'Labels show navigation hierarchy:\n' + 'Entry → Source → Group Level' ); engine.block.setFloat(instructionsBlock, 'text/fontSize', 13); engine.block.setWidth(instructionsBlock, textWidth); engine.block.setHeightMode(instructionsBlock, 'Auto'); engine.block.setPositionX(instructionsBlock, margin); engine.block.setPositionY(instructionsBlock, 55); engine.block.appendChild(page, instructionsBlock); } // Open the asset library panel to show the custom entry cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['my-custom-assets'] } }); } } export default Example; ``` This guide covers creating custom entries with themed icons, modifying default entries, configuring context-aware replacement behavior, and adding custom entries to the dock. ## Creating Custom Entries We create custom asset library entries using `cesdk.ui.addAssetLibraryEntry()`. Each entry needs a unique `id`, an array of `sourceIds` referencing registered asset sources, and display configuration options. In this example, we reference the built-in demo sources (`ly.img.image` and `ly.img.sticker`) to populate our custom entry. You can reference any registered source, including custom sources you create. ### Theme-Aware Icons We can provide different icons for light and dark themes using a function for the `icon` property. The function receives `theme` ('light' | 'dark') and `iconSize` ('normal' | 'large') parameters: ```typescript highlight=highlight-custom-entry-themed-icon // Create a custom asset library entry with theme-aware icons // Use existing demo sources (ly.img.image, ly.img.sticker) to populate the entry cesdk.ui.addAssetLibraryEntry({ id: 'my-custom-assets', sourceIds: ['ly.img.image', 'ly.img.sticker'], // Preview settings control the overview showing all sources previewLength: 4, previewBackgroundType: 'contain', // Grid settings control the detailed view when navigating into a source // Using 2 columns creates a distinct layout from the preview row gridColumns: 2, gridItemHeight: 'square', gridBackgroundType: 'cover', // Theme-aware icon function receives theme and iconSize parameters icon: ({ theme, iconSize }) => { if (theme === 'dark') { return iconSize === 'large' ? 'https://img.ly/static/cesdk/guides/icon-large-dark.svg' : 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg'; } return iconSize === 'large' ? 'https://img.ly/static/cesdk/guides/icon-large-light.svg' : 'https://img.ly/static/cesdk/guides/icon-normal-light.svg'; } }); ``` The icon function is called each time the theme changes, ensuring the correct icon is displayed automatically. > **Note:** #### Preview vs Grid ViewWhen an entry has multiple sources, users first see a **preview** showing assets in a horizontal row. The `previewLength` and `previewBackgroundType` settings control this overview. When users click a source header to navigate into it, they see the full **grid view** with all assets arranged according to `gridColumns`, `gridItemHeight`, and `gridBackgroundType`. For example, a preview row transitioning to a 2-column grid creates a distinct visual change. ### Entry for Replace Operations We can create separate entries specifically for replace operations. These entries appear when users click "Replace" on a selected block: ```typescript highlight=highlight-replace-entry // Create a separate entry for replace operations cesdk.ui.addAssetLibraryEntry({ id: 'my-replace-assets', sourceIds: ['ly.img.image'], previewLength: 3, gridColumns: 2, gridItemHeight: 'square', previewBackgroundType: 'contain', gridBackgroundType: 'contain' }); ``` ## Modifying Default Entries We update existing entries using `cesdk.ui.updateAssetLibraryEntry()`. The second parameter can be a partial entry object: ```typescript highlight=highlight-modify-default-entry // Update the default images entry with different grid columns cesdk.ui.updateAssetLibraryEntry('ly.img.image', { gridColumns: 4 }); ``` ### Extending Source IDs To extend `sourceIds` while preserving existing sources, we use a callback pattern with `currentIds`: ```typescript highlight=highlight-extend-source-ids // Use a callback pattern with currentIds to extend sourceIds cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [...currentIds, 'ly.img.upload'] }); ``` The callback receives `currentIds` containing the entry's existing source IDs, allowing us to append additional sources (like `ly.img.upload` for user uploads) without replacing the defaults. ## Configuring Replace Entries We control which asset library entries appear when users click "Replace" on a selected block using `cesdk.ui.setReplaceAssetLibraryEntries()`. The callback receives context with `selectedBlocks` (array of block info including `id`, `blockType`, and `fillType`) and `defaultEntryIds`. ```typescript highlight=highlight-configure-replace-entries // Configure which entries appear for replace operations based on block type cesdk.ui.setReplaceAssetLibraryEntries( ({ selectedBlocks, defaultEntryIds }) => { // Only show replace options when exactly one block is selected if (selectedBlocks.length !== 1) { return []; } const { fillType } = selectedBlocks[0]; // Show custom replace entry for image fills if (fillType === '//ly.img.ubq/fill/image') { return [...defaultEntryIds, 'my-replace-assets']; } // Return empty array to hide replace button for other fill types return []; } ); ``` Return an empty array to hide the replace button for specific block types. This gives you complete control over which assets can replace which blocks. ## Adding Entries to the Dock We add custom entries to the dock using `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)`. Use `cesdk.ui.getComponentOrder({ in: 'ly.img.dock' })` to get the current order and append your entry: ```typescript highlight=highlight-add-to-dock // Add custom entry to the top of the dock with a separator cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'my-custom-assets', // Dock icons use a static URL string icon: 'https://img.ly/static/cesdk/guides/icon-normal-light.svg', label: 'libraries.my-custom-assets.label', entries: ['my-custom-assets'] }, { id: 'ly.img.separator' }, ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); ``` Each dock item uses `id: 'ly.img.assetLibrary.dock'` with a unique `key`, `entries` array, and optional `icon` and `label` properties. The `label` property references a translation key. ## Localizing Entry Labels We provide translations for custom entries using `cesdk.i18n.setTranslations()`. Labels appear at three navigation levels: - `libraries..label` — Entry label shown in the dock and panel header (entry level) - `libraries...label` — Source label within an entry (source level) - `libraries....label` — Group label within a source (group level) ```typescript highlight=highlight-i18n-translations // Provide translations for custom entries before creating them // Labels appear at different navigation levels: // - Entry label: shown in dock and as panel header (sources overview) // - Source label: shown as section header and when navigating into a source // - Group label: shown when a source contains grouped assets cesdk.i18n.setTranslations({ en: { // Entry-level labels (sources overview) 'libraries.my-custom-assets.label': 'My Assets (Entry Level)', 'libraries.my-replace-assets.label': 'Replace Options', // Source-level labels within entry (overrides default source labels) 'libraries.my-custom-assets.ly.img.image.label': 'Images (Source Level)', 'libraries.my-custom-assets.ly.img.sticker.label': 'Stickers (Source Level)', // Group-level labels within sticker source (all 8 sticker categories) // Format: libraries....label 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.doodle/category/doodle.label': 'Doodle (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.emoji/category/emoji.label': 'Emoji (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.emoticons/category/emoticons.label': 'Emoticons (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.hand/category/hand.label': 'Hands (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.sketches/category/sketches.label': 'Sketches (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.3Dstickers/category/3Dstickers.label': '3D Grain (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.craft/category/craft.label': 'Craft (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.marker/category/marker.label': 'Markers (Group Level)' } }); ``` Set translations before adding entries to ensure labels are available when the UI renders. The entry label appears when viewing sources, source labels appear as section headers, and group labels appear when navigating into sources that contain grouped assets (like sticker categories). ## Troubleshooting **Entry not appearing in dock**: Ensure you've added the entry to the dock order using `setComponentOrder()`. Creating an entry with `addAssetLibraryEntry()` only registers it—it won't appear until added to the dock. **Replace button not showing**: Verify your `setReplaceAssetLibraryEntries()` callback returns entry IDs (not an empty array) for the selected block type. Check the `blockType` and `fillType` values in the context. **Icon not changing with theme**: Ensure your `icon` function returns different URLs for different `theme` values. The function is called each time the theme changes. **Missing labels**: Check that translation keys match the pattern `libraries..label`. Use `cesdk.i18n.setTranslations()` before adding entries to ensure labels are available. ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `cesdk.ui.addAssetLibraryEntry()` | UI | Register a new asset library entry | | `cesdk.ui.updateAssetLibraryEntry()` | UI | Modify an existing entry's properties | | `cesdk.ui.removeAssetLibraryEntry()` | UI | Remove an asset library entry | | `cesdk.ui.getAssetLibraryEntry()` | UI | Retrieve an entry's configuration | | `cesdk.ui.findAllAssetLibraryEntries()` | UI | List all registered entry IDs | | `cesdk.ui.setReplaceAssetLibraryEntries()` | UI | Configure context-aware replace entries | | `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)` | UI | Set the dock component order | | `cesdk.ui.getComponentOrder({ in: 'ly.img.dock' })` | UI | Get the current dock component order | | `cesdk.i18n.setTranslations()` | i18n | Add translation strings | ## Next Steps - [Asset Library Basics](https://img.ly/docs/cesdk/angular/import-media/asset-panel/basics-f29078/) — Full reference for entry properties - [Thumbnails](https://img.ly/docs/cesdk/angular/import-media/asset-panel/thumbnails-c23949/) — Configure thumbnail display and grid layout - [Refresh Assets](https://img.ly/docs/cesdk/angular/import-media/asset-panel/refresh-assets-382060/) — Update the library when external changes occur - [Your Server](https://img.ly/docs/cesdk/angular/import-media/from-remote-source/your-server-b91910/) — Create custom asset sources from your own backend --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Refresh Assets" description: "Trigger asset reloads to ensure the library reflects newly uploaded or updated items." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/asset-panel/refresh-assets-382060/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-library-65d6c4/) > [Refresh Assets](https://img.ly/docs/cesdk/angular/import-media/asset-panel/refresh-assets-382060/) --- Learn how to refresh asset sources when external changes occur outside CE.SDK. ![Refresh Assets](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-refresh-assets-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-asset-library-refresh-assets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-asset-library-refresh-assets-browser/) CE.SDK automatically refreshes the asset library for built-in operations like uploads and deletions. However, when assets are modified outside of CE.SDK—through a custom CMS, cloud storage, or third-party upload widget—the asset panel won't reflect these changes automatically. Use `engine.asset.assetSourceContentsChanged()` to notify the engine and trigger a refresh. ```typescript file=@cesdk_web_examples/guides-import-media-asset-library-refresh-assets-browser/browser.ts reference-only import type { AssetsQueryResult, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; // Simulated external data store (represents Cloudinary, S3, or external CMS) const externalAssets = [ { id: 'cloud-1', url: 'https://img.ly/static/ubq_samples/sample_1.jpg', name: 'Mountain Landscape' }, { id: 'cloud-2', url: 'https://img.ly/static/ubq_samples/sample_2.jpg', name: 'Ocean Sunset' } ]; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; // ===== Section 1: Register a Custom Asset Source ===== // Register a custom asset source that fetches from an external system // This source will need manual refresh when external changes occur engine.asset.addSource({ id: 'cloudinary-images', async findAssets(queryData): Promise { // Fetch current assets from external data store const filteredAssets = externalAssets.filter( (asset) => !queryData.query || asset.name.toLowerCase().includes(queryData.query.toLowerCase()) ); return { assets: filteredAssets.map((asset) => ({ id: asset.id, label: asset.name, meta: { uri: asset.url, thumbUri: asset.url, blockType: '//ly.img.ubq/graphic' } })), total: filteredAssets.length, currentPage: queryData.page, nextPage: undefined }; } }); // Add the custom source to the asset library cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ['cloudinary-images'], gridColumns: 2, gridItemHeight: 'square', previewLength: 4 }); // ===== Section 2: Simulate External Upload ===== // Simulate an external upload widget (e.g., Cloudinary upload widget) // In a real application, this would be triggered by the widget's success callback const simulateExternalUpload = () => { // Add a new asset to the external store const newAsset = { id: `cloud-${Date.now()}`, url: 'https://img.ly/static/ubq_samples/sample_3.jpg', name: `Uploaded Image ${externalAssets.length + 1}` }; externalAssets.push(newAsset); // Notify CE.SDK that the source contents have changed engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External upload complete, asset library refreshed'); }; // ===== Section 3: Simulate External Modification ===== // Simulate backend modifications (e.g., CMS updates, API changes) const simulateExternalModification = () => { // Modify assets in the external store if (externalAssets.length > 0) { externalAssets[0] = { ...externalAssets[0], name: `Modified: ${externalAssets[0].name}` }; } // Refresh the asset library to reflect changes engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External modification complete, asset library refreshed'); }; // ===== Section 4: Simulate External Deletion ===== // Simulate asset deletion from external system const simulateExternalDeletion = () => { // Remove the last asset from the external store if (externalAssets.length > 2) { const removed = externalAssets.pop(); console.log(`Removed asset: ${removed?.name}`); // Refresh the asset library to reflect the deletion engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External deletion complete, asset library refreshed'); } }; // Expose functions for demo purposes (window as any).simulateExternalUpload = simulateExternalUpload; (window as any).simulateExternalModification = simulateExternalModification; (window as any).simulateExternalDeletion = simulateExternalDeletion; // Automatically trigger an upload to demonstrate the refresh setTimeout(() => { simulateExternalUpload(); }, 2000); // Open the asset library to show the custom source cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.image'] } }); } } export default Example; ``` This guide covers when manual refresh is needed, how to trigger refreshes programmatically, and integration patterns for external upload widgets. ## When to Use Asset Refresh CE.SDK handles asset refresh automatically for built-in operations. Manual refresh is required when external systems modify asset source content. **Automatic refresh** (no action needed): - Uploads using built-in sources like `ly.img.upload.*` - Deletions through default upload handlers - Modifications made through CE.SDK's asset APIs **Manual refresh required**: - External uploads via third-party widgets (Cloudinary, Dropzone) - Backend modifications through CMS or API updates - Sync with external storage (S3, Azure Blob) - Real-time collaboration when another user adds assets ## Registering a Custom Asset Source Before refreshing assets, you need a custom asset source that fetches from your external system. The `findAssets` method queries your external data store each time the panel needs to display assets. ```typescript highlight-custom-source // Register a custom asset source that fetches from an external system // This source will need manual refresh when external changes occur engine.asset.addSource({ id: 'cloudinary-images', async findAssets(queryData): Promise { // Fetch current assets from external data store const filteredAssets = externalAssets.filter( (asset) => !queryData.query || asset.name.toLowerCase().includes(queryData.query.toLowerCase()) ); return { assets: filteredAssets.map((asset) => ({ id: asset.id, label: asset.name, meta: { uri: asset.url, thumbUri: asset.url, blockType: '//ly.img.ubq/graphic' } })), total: filteredAssets.length, currentPage: queryData.page, nextPage: undefined }; } }); ``` This custom source fetches assets from an external data store (simulating Cloudinary, S3, or a CMS). When the external store changes, the asset panel won't update until you call `assetSourceContentsChanged()`. ## Refreshing After External Uploads When users upload files through a third-party widget, call `assetSourceContentsChanged()` in the success callback. This notifies CE.SDK that the source contents have changed and triggers a re-fetch. ```typescript highlight-external-upload // Simulate an external upload widget (e.g., Cloudinary upload widget) // In a real application, this would be triggered by the widget's success callback const simulateExternalUpload = () => { // Add a new asset to the external store const newAsset = { id: `cloud-${Date.now()}`, url: 'https://img.ly/static/ubq_samples/sample_3.jpg', name: `Uploaded Image ${externalAssets.length + 1}` }; externalAssets.push(newAsset); // Notify CE.SDK that the source contents have changed engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External upload complete, asset library refreshed'); }; ``` The key is calling `assetSourceContentsChanged('cloudinary-images')` after the external upload completes. This tells CE.SDK to call `findAssets()` again, which fetches the updated asset list from your external store. ## Refreshing After External Modifications When your backend modifies asset metadata—renaming files, updating tags, or changing thumbnails—call `assetSourceContentsChanged()` to sync the asset panel. ```typescript highlight-external-modification // Simulate backend modifications (e.g., CMS updates, API changes) const simulateExternalModification = () => { // Modify assets in the external store if (externalAssets.length > 0) { externalAssets[0] = { ...externalAssets[0], name: `Modified: ${externalAssets[0].name}` }; } // Refresh the asset library to reflect changes engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External modification complete, asset library refreshed'); }; ``` Any modification to assets in your external store requires a refresh. Without calling `assetSourceContentsChanged()`, the asset panel displays stale data until the user navigates away and returns. ## Refreshing After External Deletions When assets are deleted from your external system, call `assetSourceContentsChanged()` to remove them from the asset panel. ```typescript highlight-external-deletion // Simulate asset deletion from external system const simulateExternalDeletion = () => { // Remove the last asset from the external store if (externalAssets.length > 2) { const removed = externalAssets.pop(); console.log(`Removed asset: ${removed?.name}`); // Refresh the asset library to reflect the deletion engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External deletion complete, asset library refreshed'); } }; ``` The refresh ensures deleted assets no longer appear in the panel. If you skip this step, users may try to use assets that no longer exist. ## Integration Patterns ### Third-Party Upload Widget Integrate with upload widgets like Cloudinary by calling `assetSourceContentsChanged()` in the success callback: ```typescript const widget = cloudinary.createUploadWidget( { cloudName: 'my-cloud' }, (error, result) => { if (result.event === 'success') { engine.asset.assetSourceContentsChanged('cloudinary-images'); } } ); ``` ### WebSocket Updates For real-time sync with backend changes: ```typescript socket.on('assets:changed', (sourceId) => { engine.asset.assetSourceContentsChanged(sourceId); }); ``` ### Polling for Changes If your backend doesn't support real-time notifications: ```typescript setInterval(() => { engine.asset.assetSourceContentsChanged('my-source'); }, 30000); // Refresh every 30 seconds ``` ## Troubleshooting **Assets not updating**: Verify the source ID passed to `assetSourceContentsChanged()` matches the ID used when registering the source with `addSource()`. Source IDs are case-sensitive. **Refresh not triggering**: Ensure you call `assetSourceContentsChanged()` after the external operation completes. If called before the upload finishes, `findAssets()` may return stale data. **Stale assets displayed**: Check that your `findAssets` implementation fetches fresh data on each call. Avoid caching responses unless you invalidate the cache when calling `assetSourceContentsChanged()`. **Asset panel not visible**: The refresh only affects visible panels. If the asset panel is closed, the refresh queues until the user reopens it. ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `engine.asset.assetSourceContentsChanged(sourceID)` | Asset API | Notify engine that asset source contents changed | | `engine.asset.addSource(source)` | Asset API | Register custom asset source | | `engine.asset.findAssets(sourceID, query)` | Asset API | Query assets from a source | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Thumbnails" description: "Configure thumbnail images for assets in CE.SDK's asset library with proper sizing, preview URIs for audio, and customized UI display." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/asset-panel/thumbnails-c23949/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-library-65d6c4/) > [Thumbnails](https://img.ly/docs/cesdk/angular/import-media/asset-panel/thumbnails-c23949/) --- Learn how to configure thumbnail images for assets in CE.SDK's asset library. ![Asset Library Thumbnails](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-thumbnails-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-asset-library-thumbnails-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/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. ```typescript file=@cesdk_web_examples/guides-import-media-asset-library-thumbnails-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from '@cesdk/core-configs-web/video-editor'; 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.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story', color: { r: 0, g: 0, b: 0, a: 1 } } }); 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/v3/ly.img.audio/audios/dance_harder.m4a', // Full audio file thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/dance_harder.jpg', // Waveform visualization (image, UI-only) previewUri: 'https://cdn.img.ly/assets/demo/v3/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/v3/ly.img.audio/audios/far_from_home.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/audio-wave.png', previewUri: 'https://cdn.img.ly/assets/demo/v3/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/v3/ly.img.audio/audios/elsewhere.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/elsewhere.jpg', previewUri: 'https://cdn.img.ly/assets/demo/v3/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 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 ### 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. ```typescript highlight-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' } }); ``` 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 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. ```typescript highlight-audio-preview-uri // 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/v3/ly.img.audio/audios/dance_harder.m4a', // Full audio file thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/dance_harder.jpg', // Waveform visualization (image, UI-only) previewUri: 'https://cdn.img.ly/assets/demo/v3/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/v3/ly.img.audio/audios/far_from_home.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/audio-wave.png', previewUri: 'https://cdn.img.ly/assets/demo/v3/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/v3/ly.img.audio/audios/elsewhere.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/elsewhere.jpg', previewUri: 'https://cdn.img.ly/assets/demo/v3/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 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. ```typescript highlight-custom-source-thumbnails // 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 }; } }); ``` 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 ### 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 ```typescript highlight-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 }); ``` 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 Configure the number of columns and item aspect ratio in the asset library grid: ```typescript highlight-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 }); ``` 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 Configure the fallback order for card backgrounds when thumbnails are missing. The engine checks preferences in array order and uses the first available value. ```typescript highlight-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 ] }); ``` 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 - **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 **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 | 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 - [Customize Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-panel/customize-c9a4de/) — UI customization options - [Asset Concepts](https://img.ly/docs/cesdk/angular/import-media/concepts-5e6197/) — Asset sources and metadata - [Unsplash Integration](https://img.ly/docs/cesdk/angular/import-media/from-remote-source/unsplash-8f31f0/) — Thumbnail mapping example - [Source Sets](https://img.ly/docs/cesdk/angular/import-media/source-sets-5679c8/) — Responsive asset rendering (not thumbnails) --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Capture From Camera" description: "Capture photos or videos directly from a connected camera for immediate use in your design." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/capture-from-camera-92f388/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Capture From Camera](https://img.ly/docs/cesdk/angular/import-media/capture-from-camera-92f388/) --- --- ## Related Pages - [Record Video](https://img.ly/docs/cesdk/angular/import-media/capture-from-camera/record-video-47819b/) - Display live camera feeds inside CE.SDK using PixelStreamFill for real-time preview with effects. --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Record Video" description: "Display live camera feeds inside CE.SDK using PixelStreamFill for real-time preview with effects." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/capture-from-camera/record-video-47819b/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Capture From Camera](https://img.ly/docs/cesdk/angular/import-media/capture-from-camera-92f388/) > [Record Video](https://img.ly/docs/cesdk/angular/import-media/capture-from-camera/record-video-47819b/) --- Display live camera feeds in CE.SDK scenes using `PixelStreamFill` and apply real-time effects to the video. This guide covers creating a scene with a pixel stream fill, controlling feed orientation, accessing the camera, and updating the fill with video frames. ## Create a Scene with Camera Fill To display a camera feed, create a scene and set up a page with `PixelStreamFill`. The pixel stream fill accepts live pixel data that you provide frame by frame: ```js engine.scene.create(); 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')); ``` We create a scene, add a page to the stack, and assign a `PixelStreamFill` to receive camera data. The `PixelStreamFill` acts as a container that displays whatever pixel data you send to it. You can apply any CE.SDK effect to process the camera feed in real-time. ## Control Feed Orientation The `fill/pixelStream/orientation` property controls how the camera feed is displayed. Use `UpMirrored` to horizontally flip the image, which is common for front-facing cameras to create a natural mirror-like selfie view: ```js // Horizontal mirroring engine.block.setEnum( pixelStreamFill, 'fill/pixelStream/orientation', 'UpMirrored' ); ``` Available orientation values: | Value | Effect | |-------|--------| | `Up` | No rotation (default) | | `Down` | 180° rotation | | `Left` | 90° counter-clockwise | | `Right` | 90° clockwise | | `UpMirrored` | Horizontal flip | | `DownMirrored` | 180° + horizontal flip | | `LeftMirrored` | 90° CCW + horizontal flip | | `RightMirrored` | 90° CW + horizontal flip | These orientations let you rotate or flip the feed without expensive CPU transformations. ## Access Camera with Browser APIs Request camera access using the browser's `navigator.mediaDevices.getUserMedia()` API. Create an HTML video element to receive the MediaStream, then update the page dimensions to match the video: ```js 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); // Continue with frame updates... }); }, (err) => { console.error(err); } ); ``` The `facingMode` option in `getUserMedia()` lets you request the front-facing camera (`'user'`) or rear camera (`'environment'`) on mobile devices. ## Update Fill with Video Frames Use `requestVideoFrameCallback()` to efficiently sync frame updates with the video's frame rate. Call `engine.block.setNativePixelBuffer()` in each callback to send the current video frame to CE.SDK: ```js const onVideoFrame = () => { engine.block.setNativePixelBuffer(pixelStreamFill, video); video.requestVideoFrameCallback(onVideoFrame); }; video.requestVideoFrameCallback(onVideoFrame); ``` The `setNativePixelBuffer()` method accepts either an `HTMLVideoElement` or `HTMLCanvasElement`, providing flexibility for different video processing workflows. Using `requestVideoFrameCallback` instead of `requestAnimationFrame` ensures frame updates are synchronized with the video's actual frame rate. ## Troubleshooting ### Camera Not Appearing Verify camera permissions are granted in the browser. Check that the video element has `autoplay` set to `true`. Ensure the `loadedmetadata` event fires before accessing video dimensions. ### Mirrored or Rotated Incorrectly Check the `fill/pixelStream/orientation` enum value. Front-facing cameras typically need `UpMirrored`. Mobile devices may require rotation adjustments based on device orientation. ### Effects Not Rendering Confirm effects are appended using `engine.block.appendEffect()`. Verify the effect block was created successfully with `engine.block.createEffect()`. ### Performance Issues Ensure `requestVideoFrameCallback` is used instead of `requestAnimationFrame` for better frame synchronization. Check that only one callback loop is running. Consider reducing effect complexity for smoother preview. ## API Reference | Method | Description | | --- | --- | | `engine.scene.create()` | Create a scene for camera preview | | `engine.block.create('page')` | Create a page block to hold the camera fill | | `engine.block.createFill('pixelStream')` | Create a fill that accepts live pixel data | | `engine.block.setFill()` | Assign the pixel stream fill to a block | | `engine.block.setNativePixelBuffer()` | Send video frame data to the fill | | `engine.block.setEnum()` | Set the orientation property for mirroring or rotation | | `engine.block.createEffect()` | Create an effect for real-time processing | | `engine.block.appendEffect()` | Apply an effect to the page | | `engine.block.setWidth()` | Set block width to match video dimensions | | `engine.block.setHeight()` | Set block height to match video dimensions | | `engine.scene.zoomToBlock()` | Fit the camera view in the viewport | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Asset Concepts" description: "This guide explains the foundational architecture of the CE.SDK asset system, including what asset sources are, how they organize content, and how they connect to the user interface." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/concepts-5e6197/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Concepts](https://img.ly/docs/cesdk/angular/import-media/concepts-5e6197/) --- Understand the foundational architecture of CE.SDK's asset system and how asset sources organize content across platforms. Asset sources are CE.SDK's content delivery architecture. Instead of hardcoding asset knowledge into the editor, CE.SDK uses a modular system where any content can be provided through a standardized interface. This decouples what assets are available from how they're discovered and applied. ``` PLATFORM-SPECIFIC UI (Web) ┌─────────────────────────────────────────────────────────────────────────┐ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Dock Button │───▶│ Asset Panel │───▶│ Assets Grid │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ Configured via: Asset Library Entries, Dock config, Panel navigation │ └─────────────────────────────────────────────────────────────────────────┘ │ ▼ CROSS-PLATFORM ENGINE (engine.asset API) ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ findAssets() addSource() addLocalSource() apply() │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ Custom │ │ Local │ │ JSON-Based │ │ │ │ Sources │ │ Sources │ │ Sources │ │ │ ├──────────────┤ ├──────────────┤ ├──────────────┤ │ │ │ Your API │ │ User Uploads │ │ Built-in │ │ │ │ Database │ │ Collections │ │ Asset Packs │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ Identical across Web, iOS, Android │ └─────────────────────────────────────────────────────────────────────────┘ ``` This guide covers the foundational concepts of asset sources. For implementation details, see the linked guides at the end. ## Asset Source Fundamentals An asset source provides content to the editor through a common interface. Every source has a unique identifier (e.g., `ly.img.image`, `ly.img.sticker`) and implements methods for discovering and applying assets. Sources support: - **Query-based discovery** with pagination and filtering - **Optional grouping** (e.g., sticker groups: "emoji", "doodle", "hand") - **Metadata** including credits, licenses, and format information Sources are content-agnostic—images, fonts, templates, and custom content all use the same pattern. ## Content Organized as Asset Sources Asset sources handle virtually all reusable creative content: | Category | Examples | | ---------- | ---------------------------------------- | | Media | Images, videos, audio clips | | Graphics | Stickers, shapes, vectors, icons | | Typography | Fonts, typefaces, text presets | | Colors | Color palettes, spot colors | | Effects | Blur types, filters, LUT effects | | Templates | Design templates, page presets | | Custom | User uploads, remote APIs, your own data | Built-in sources include `ly.img.image`, `ly.img.sticker`, `ly.img.template`, `ly.img.typeface`, `ly.img.filter`, `ly.img.blur`, `ly.img.effect`, and more. ## Types of Asset Sources There are three ways to provide assets to CE.SDK: ### Custom Sources Implement the source interface to connect any backend—database, API, or custom system. Custom sources provide full control over discovery and application logic. Use custom sources when you need to: - Connect to your existing content management system - Implement custom search or filtering logic - Control how assets are applied to the scene ### Local Sources Managed by the engine with dynamic add/remove operations. Local sources are suitable for user uploads or custom collections that change during the editing session. The engine handles storage and retrieval. ### JSON-Based Sources Pre-defined asset collections loaded from JSON files. All built-in asset packs use this approach. JSON sources are ideal for static content that doesn't change frequently. ## Asset Sources and the User Interface Asset sources are backend providers—they don't know about UI. The connection between sources and what users see happens through platform-specific UI configuration. On Web, asset sources connect to the UI through: - **Asset Library Entries** — Group one or more sources for display, configure grid layout and preview - **Dock Buttons** — Sidebar icons that open asset panels - **Panel Navigation** — Entry → Source → Groups → Assets grid This separation means you can: - Show multiple sources in one UI panel - Show the same source in different UI locations - Change UI presentation without changing the source ## Cross-Platform Architecture Asset sources use the `engine.asset` API consistently across all platforms (Web, iOS, Android). All platforms support: - Custom source registration - JSON-based asset loading - Local asset management - Group-based organization - Event subscriptions (source added, removed, updated) Code patterns transfer directly between platforms with only syntax changes. ## Asset Structure Each asset contains: - **ID** — Unique identifier within the source - **Meta** — URI, thumbnail, MIME type, dimensions, block type hints - **Label** — Localized display name - **Tags** — Searchable keywords (localized) - **Groups** — Category membership - **Context** — Source reference for tracking origin The engine uses metadata hints (`blockType`, `fillType`, `shapeType`) to determine what block type to create when applying an asset. ## Discovery and Application Assets are discovered through queries supporting pagination, text search, tag/group filtering, and sorting. When applied, assets either create new blocks or modify existing ones. Sources can customize application behavior or use the engine's default implementation. ## Source Lifecycle Events The engine emits events when sources change: added, removed, or contents updated. Subscribe to these events to keep UI synchronized with available content. ## Troubleshooting Common conceptual misunderstandings: - **Confusing sources with UI** — Asset sources are backend providers; they don't render UI. The UI (dock buttons, panels, grids) is configured separately and connects to sources. - **Expecting sources to filter themselves** — Sources return all matching assets; UI configuration determines what's displayed to users. - **Mixing source types** — Custom sources (your code), local sources (engine-managed), and JSON sources (static files) serve different purposes. Choose based on whether you need dynamic backend connections, runtime asset management, or static asset packs. ## API Reference | Method | Category | Purpose | | ------------------------------------- | ----------------- | ----------------------------------------------------------------- | | `engine.asset.addSource()` | Source Management | Register a custom asset source with discovery and apply callbacks | | `engine.asset.addLocalSource()` | Source Management | Create an engine-managed source for dynamic asset add/remove | | `engine.asset.findAssets()` | Discovery | Query assets with pagination, search, filtering, and sorting | | `engine.asset.apply()` | Application | Apply an asset to the active scene, creating a configured block | | `engine.asset.onAssetSourceAdded()` | Events | Subscribe to source registration events | | `engine.asset.onAssetSourceRemoved()` | Events | Subscribe to source removal events | | `engine.asset.onAssetSourceUpdated()` | Events | Subscribe to source content change events | ## Next Steps - [Your Server](https://img.ly/docs/cesdk/angular/import-media/from-remote-source/your-server-b91910/) — Connect your own backend as an asset source - [Asset Library Basics](https://img.ly/docs/cesdk/angular/import-media/asset-panel/basics-f29078/) — Configure the asset library UI on web - [Customize Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-panel/customize-c9a4de/) — Customize asset library appearance --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Asset Content JSON Schema" description: "Understand the JSON schema structure for defining asset source content including version, metadata, and payload properties for images, videos, fonts, and templates." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/content-json-schema-a7b3d2/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Asset Content JSON Schema](https://img.ly/docs/cesdk/angular/import-media/content-json-schema-a7b3d2/) --- Reference documentation for the JSON schema structure used to define asset source content in CE.SDK. Asset content JSON files define the structure and metadata for assets that CE.SDK loads into asset sources. This schema supports images, videos, audio, fonts, templates, colors, shapes, and effects. ## Manifest Structure Every `content.json` file requires three top-level fields: ```json { "version": "2.0.0", "id": "my.custom.source", "assets": [] } ``` | Field | Type | Required | Description | |-------|------|----------|-------------| | `version` | `string` | Yes | Schema version | | `id` | `string` | Yes | Unique identifier for the asset source | | `assets` | `AssetDefinition[]` | Yes | Array of asset definitions | ## Asset Definition Each asset in the `assets` array follows this structure: | Property | Type | Required | Description | |----------|------|----------|-------------| | `id` | `string` | Yes | Unique identifier within the source | | `label` | `Record` | No | Localized display names for UI and tooltips | | `tags` | `Record` | No | Localized keywords for search and filtering | | `groups` | `string[]` | No | Categories for grouping assets in the UI | | `meta` | `AssetMetaData` | No | Content-specific metadata | | `payload` | `AssetPayload` | No | Structured data for specialized assets | ### Localization Labels and tags use locale codes as keys (e.g., `"en"`, `"de"`, `"fr"`). CE.SDK selects the appropriate translation based on the user's locale. ```json { "id": "mountain-photo", "label": { "en": "Mountain Landscape", "de": "Berglandschaft" }, "tags": { "en": ["nature", "mountain"], "de": ["natur", "berg"] }, "groups": ["landscapes", "nature"] } ``` ## Asset Metadata The `meta` object contains content-specific information for loading and applying assets. ### Content Properties Define URIs and file information for loading the asset content. The `uri` property points to the main asset file, while `thumbUri` and `previewUri` provide optimized versions for UI display. ```json { "meta": { "uri": "{{base_url}}/images/photo.jpg", "thumbUri": "{{base_url}}/thumbnails/photo-thumb.jpg", "previewUri": "{{base_url}}/previews/photo-preview.jpg", "filename": "photo.jpg", "mimeType": "image/jpeg" } } ``` | Property | Type | Description | |----------|------|-------------| | `uri` | `string` | Primary content URI. Supports `{{base_url}}` placeholder | | `thumbUri` | `string` | Thumbnail image URI for previews | | `previewUri` | `string` | Higher-quality preview URI | | `filename` | `string` | Original filename | | `mimeType` | `string` | MIME type (e.g., `"image/jpeg"`, `"video/mp4"`) | ### Dimension Properties Specify the pixel dimensions of the asset. CE.SDK uses these values for layout calculations and aspect ratio preservation when inserting assets into a design. ```json { "meta": { "width": 1920, "height": 1280 } } ``` | Property | Type | Description | |----------|------|-------------| | `width` | `number` | Content width in pixels | | `height` | `number` | Content height in pixels | ### Block Creation Properties Control what design block CE.SDK creates when the asset is applied. These properties determine how the asset integrates into the design structure. ```json { "meta": { "blockType": "//ly.img.ubq/graphic", "fillType": "//ly.img.ubq/fill/image", "shapeType": "//ly.img.ubq/shape/rect", "kind": "image" } } ``` | Property | Type | Description | |----------|------|-------------| | `blockType` | `string` | Design block type to create | | `fillType` | `string` | Fill type for the block | | `shapeType` | `string` | Shape type for stickers/shapes | | `kind` | `string` | Asset category hint (e.g., `"image"`, `"video"`, `"template"`) | **Block Type Values:** | Value | Use Case | |-------|----------| | `//ly.img.ubq/graphic` | Images, stickers, graphics | | `//ly.img.ubq/text` | Text blocks | | `//ly.img.ubq/audio` | Audio clips | | `//ly.img.ubq/page` | Templates, pages | | `//ly.img.ubq/group` | Grouped elements | | `//ly.img.ubq/cutout` | Cutout shapes | **Fill Type Values:** | Value | Use Case | |-------|----------| | `//ly.img.ubq/fill/image` | Image fills | | `//ly.img.ubq/fill/video` | Video fills | | `//ly.img.ubq/fill/color` | Solid color fills | | `//ly.img.ubq/fill/gradient/linear` | Linear gradients | | `//ly.img.ubq/fill/gradient/radial` | Radial gradients | | `//ly.img.ubq/fill/gradient/conical` | Conical gradients | **Shape Type Values:** | Value | Use Case | |-------|----------| | `//ly.img.ubq/shape/rect` | Rectangles | | `//ly.img.ubq/shape/ellipse` | Circles, ovals | | `//ly.img.ubq/shape/polygon` | Polygons | | `//ly.img.ubq/shape/star` | Star shapes | | `//ly.img.ubq/shape/line` | Lines | | `//ly.img.ubq/shape/vector_path` | Custom vector paths | ### Media Properties Configure playback behavior for time-based media like video and audio. Use `duration` to specify length and `looping` to enable repeat playback for background music or ambient video. ```json { "meta": { "duration": "30", "looping": true, "vectorPath": "M10 10 L90 90" } } ``` | Property | Type | Description | |----------|------|-------------| | `duration` | `string` | Duration in seconds as a string (e.g., `"30"`, `"120"`) | | `looping` | `boolean` | Whether media should loop continuously. Use for background music or ambient video | | `vectorPath` | `string` | SVG path data for vector shapes | ### Effect Properties Define visual effects that can be applied to design blocks. Effects include filters, blurs, and color adjustments. ```json { "meta": { "effectType": "//ly.img.ubq/effect/lut_filter", "blurType": "//ly.img.ubq/blur/uniform" } } ``` | Property | Type | Description | |----------|------|-------------| | `effectType` | `string` | Effect type (e.g., `"//ly.img.ubq/effect/lut_filter"`, `"//ly.img.ubq/effect/duotone_filter"`) | | `blurType` | `string` | Blur type: `"//ly.img.ubq/blur/uniform"`, `"//ly.img.ubq/blur/linear"`, `"//ly.img.ubq/blur/mirrored"`, `"//ly.img.ubq/blur/radial"` | ### Responsive Sources The `sourceSet` property defines multiple resolutions for responsive loading. This enables CE.SDK to load an appropriately sized image based on the display context, reducing bandwidth for thumbnails while providing full resolution when needed. ```json { "meta": { "sourceSet": [ { "uri": "{{base_url}}/small.jpg", "width": 640, "height": 480 }, { "uri": "{{base_url}}/medium.jpg", "width": 1280, "height": 960 }, { "uri": "{{base_url}}/large.jpg", "width": 1920, "height": 1440 } ] } } ``` When a user browses assets in the library panel, CE.SDK loads the smallest appropriate resolution. When the asset is added to the canvas and zoomed in, higher resolutions are loaded on demand. This pattern significantly improves initial load times for asset libraries with many items. | Property | Type | Required | Description | |----------|------|----------|-------------| | `uri` | `string` | Yes | Source URI | | `width` | `number` | Yes | Source width in pixels | | `height` | `number` | Yes | Source height in pixels | ## Asset Payload The `payload` object contains structured data for specialized asset types like colors, fonts, and presets. | Property | Type | Description | |----------|------|-------------| | `color` | `AssetColor` | Color definition | | `typeface` | `Typeface` | Font family definition | | `transformPreset` | `AssetTransformPreset` | Page size or aspect ratio preset | | `sourceSet` | `Source[]` | Responsive sources (same as meta.sourceSet) | ### Color Payload Colors support three color spaces: sRGB, CMYK, and Spot Color. Use sRGB for screen-based designs, CMYK for print workflows, and Spot Color for brand-specific colors that require exact color matching. **sRGB Color:** ```json { "payload": { "color": { "colorSpace": "sRGB", "r": 0.2, "g": 0.4, "b": 0.8 } } } ``` sRGB is the standard color space for web and digital displays. Component values range from 0 to 1, where `{ r: 1, g: 0, b: 0 }` represents pure red. | Property | Type | Range | Description | |----------|------|-------|-------------| | `colorSpace` | `"sRGB"` | — | Color space identifier | | `r` | `number` | 0–1 | Red component | | `g` | `number` | 0–1 | Green component | | `b` | `number` | 0–1 | Blue component | **CMYK Color:** ```json { "payload": { "color": { "colorSpace": "CMYK", "c": 0.75, "m": 0.25, "y": 0.0, "k": 0.1 } } } ``` CMYK is used for print production. Component values represent ink percentages from 0 to 1, where higher values mean more ink coverage. | Property | Type | Range | Description | |----------|------|-------|-------------| | `colorSpace` | `"CMYK"` | — | Color space identifier | | `c` | `number` | 0–1 | Cyan component | | `m` | `number` | 0–1 | Magenta component | | `y` | `number` | 0–1 | Yellow component | | `k` | `number` | 0–1 | Black (key) component | **Spot Color:** ```json { "payload": { "color": { "colorSpace": "SpotColor", "name": "Brand-Blue-286", "externalReference": "spot://brand-blue-286", "representation": { "colorSpace": "sRGB", "r": 0.0, "g": 0.22, "b": 0.62 } } } } ``` Spot colors reference named colors from a named-color system (for example, your in-house brand palette or a print vendor's spot-color library). The `representation` provides a screen preview while the actual color is defined by the external reference for accurate print reproduction. | Property | Type | Description | |----------|------|-------------| | `colorSpace` | `"SpotColor"` | Color space identifier | | `name` | `string` | Spot color name | | `externalReference` | `string` | External reference URI | | `representation` | `AssetRGBColor \| AssetCMYKColor` | Screen/print representation | ### Typeface Payload Defines a font family with multiple font files for different weights and styles. This enables CE.SDK to load the correct font file when text formatting changes. ```json { "payload": { "typeface": { "name": "Roboto", "fonts": [ { "uri": "{{base_url}}/Roboto-Regular.ttf", "subFamily": "Regular", "weight": "normal", "style": "normal" }, { "uri": "{{base_url}}/Roboto-Bold.ttf", "subFamily": "Bold", "weight": "bold", "style": "normal" }, { "uri": "{{base_url}}/Roboto-Italic.ttf", "subFamily": "Italic", "weight": "normal", "style": "italic" } ] } } } ``` Each font entry in the `fonts` array represents a single font file. When a user applies bold formatting, CE.SDK automatically selects the font entry with `weight: "bold"`. Include all weight and style combinations you want to support. **Typeface Properties:** | Property | Type | Required | Description | |----------|------|----------|-------------| | `name` | `string` | Yes | Typeface family name | | `fonts` | `Font[]` | Yes | Array of font definitions | **Font Properties:** | Property | Type | Required | Description | |----------|------|----------|-------------| | `uri` | `string` | Yes | Font file URI (.ttf, .otf, .woff, .woff2) | | `subFamily` | `string` | Yes | Font subfamily name (e.g., "Regular", "Bold Italic") | | `weight` | `FontWeight` | No | Font weight | | `style` | `FontStyle` | No | Font style | **Font Weight Values:** `"thin"`, `"extraLight"`, `"light"`, `"normal"`, `"medium"`, `"semiBold"`, `"bold"`, `"extraBold"`, `"heavy"` **Font Style Values:** `"normal"`, `"italic"` ### Transform Preset Payload Defines page size or aspect ratio presets for templates, canvases, and crop tools. Use these to provide users with common format options like social media dimensions or print sizes. **Fixed Size:** ```json { "payload": { "transformPreset": { "type": "FixedSize", "width": 1080, "height": 1920, "designUnit": "Pixel" } } } ``` Fixed size presets lock both width and height to specific values. Use `designUnit` to specify whether dimensions are in pixels (for digital), millimeters, or inches (for print). | Property | Type | Description | |----------|------|-------------| | `type` | `"FixedSize"` | Preset type | | `width` | `number` | Width value | | `height` | `number` | Height value | | `designUnit` | `string` | Unit: `"Pixel"`, `"Millimeter"`, or `"Inch"` | **Fixed Aspect Ratio:** ```json { "payload": { "transformPreset": { "type": "FixedAspectRatio", "width": 16, "height": 9 } } } ``` Fixed aspect ratio presets maintain proportions while allowing flexible sizing. The width and height values represent the ratio components, not pixel dimensions. | Property | Type | Description | |----------|------|-------------| | `type` | `"FixedAspectRatio"` | Preset type | | `width` | `number` | Aspect ratio width component | | `height` | `number` | Aspect ratio height component | **Free Aspect Ratio:** ```json { "payload": { "transformPreset": { "type": "FreeAspectRatio" } } } ``` Free aspect ratio presets allow unrestricted resizing without maintaining proportions. **Content Aspect Ratio:** ```json { "payload": { "transformPreset": { "type": "ContentAspectRatio" } } } ``` Content aspect ratio presets snap the block's frame to the intrinsic aspect ratio of its content, resolved from the fill's `sourceSet` when the preset is applied. Use this to revert a cropped image or video block to its natural proportions. Applying this preset to a block without resolvable content dimensions (e.g. a text block, empty placeholder, or page) returns an error. | Property | Type | Description | |----------|------|-------------| | `type` | `"ContentAspectRatio"` | Preset type | ## Base URL Placeholder The `{{base_url}}` placeholder enables portable asset definitions. CE.SDK replaces this placeholder with the actual base path when loading: - **From URL:** The parent directory of the JSON file becomes the base URL - **From string:** You provide the base URL explicitly when loading ```json { "meta": { "uri": "{{base_url}}/images/photo.jpg", "thumbUri": "{{base_url}}/thumbnails/photo.jpg" } } ``` ## Asset Type Examples ### Image Asset Standard image assets are the most common type, used for photos, illustrations, and background images. They require a `blockType` of graphic with an image fill. ```json { "id": "photo-001", "label": { "en": "Mountain Landscape" }, "tags": { "en": ["nature", "mountain"] }, "meta": { "uri": "{{base_url}}/mountain.jpg", "thumbUri": "{{base_url}}/mountain-thumb.jpg", "mimeType": "image/jpeg", "blockType": "//ly.img.ubq/graphic", "fillType": "//ly.img.ubq/fill/image", "width": 1920, "height": 1280 } } ``` ### Video Asset Video assets include duration information and use a video fill type. Set `looping` to `true` for videos that should repeat continuously. ```json { "id": "video-001", "label": { "en": "Intro Animation" }, "meta": { "uri": "{{base_url}}/intro.mp4", "thumbUri": "{{base_url}}/intro-thumb.jpg", "mimeType": "video/mp4", "blockType": "//ly.img.ubq/graphic", "fillType": "//ly.img.ubq/fill/video", "width": 1920, "height": 1080, "duration": "5", "looping": false } } ``` ### Audio Asset Audio assets use the audio block type and don't require visual dimensions. Set `looping` to `true` for background music that should repeat continuously throughout the design. ```json { "id": "audio-001", "label": { "en": "Background Music" }, "meta": { "uri": "{{base_url}}/music.mp3", "mimeType": "audio/mpeg", "blockType": "//ly.img.ubq/audio", "duration": "120", "looping": true } } ``` ### Sticker Asset Stickers are vector graphics that maintain quality at any size. They use the `vector_path` shape type and typically reference SVG files. ```json { "id": "sticker-001", "label": { "en": "Star Badge" }, "meta": { "uri": "{{base_url}}/star.svg", "thumbUri": "{{base_url}}/star-thumb.png", "mimeType": "image/svg+xml", "blockType": "//ly.img.ubq/graphic", "shapeType": "//ly.img.ubq/shape/vector_path", "width": 200, "height": 200 } } ``` ### Template Asset Templates are complete design scenes that can be loaded as starting points. Use `kind: "template"` to identify them in the UI. ```json { "id": "template-001", "label": { "en": "Social Media Story" }, "meta": { "uri": "{{base_url}}/story-template.scene", "thumbUri": "{{base_url}}/story-thumb.jpg", "kind": "template", "width": 1080, "height": 1920 } } ``` ### Crop Preset Asset Crop presets define aspect ratios for the crop tool. Use `transformPreset` in the payload to specify the ratio without fixed pixel dimensions. ```json { "id": "crop-square", "label": { "en": "Square" }, "groups": ["social"], "payload": { "transformPreset": { "type": "FixedAspectRatio", "width": 1, "height": 1 } } } ``` ### Page Format Preset Asset Page format presets define canvas sizes for new designs. Use `FixedSize` to specify exact dimensions in pixels, millimeters, or inches. ```json { "id": "format-instagram-story", "label": { "en": "Instagram Story" }, "groups": ["social"], "meta": { "thumbUri": "{{base_url}}/instagram-story-thumb.jpg" }, "payload": { "transformPreset": { "type": "FixedSize", "width": 1080, "height": 1920, "designUnit": "Pixel" } } } ``` ## Troubleshooting | Issue | Solution | |-------|----------| | Assets not appearing | Verify `version`, `id`, and `assets` fields exist at the top level | | Invalid asset | Ensure each asset has a unique `id` | | Missing thumbnails | Check `thumbUri` points to accessible image URLs | | Base URL not resolving | Use exact `{{base_url}}` syntax (double curly braces) | | CORS errors | Configure server headers to allow cross-origin requests | | Wrong block created | Verify `meta.blockType` matches the intended design block | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Using Default Assets" description: "Load shapes, stickers, images, and other built-in assets from IMG.LY's CDN to populate your CE.SDK editor using the Asset API." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/default-assets-d2763d/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Using Default Assets](https://img.ly/docs/cesdk/angular/import-media/default-assets-d2763d/) --- ```typescript file=@cesdk_web_examples/guides-import-media-default-assets-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; import packageJson from './package.json'; /** * CE.SDK Plugin: Using Default Assets Guide * * Demonstrates loading all asset sources from IMG.LY's CDN using * addLocalAssetSourceFromJSONURI and creating a scene with * a star shape, sticker, and image. */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk, engine }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Versioned CDN URLs using the SDK package (recommended) // For production, self-host these assets - see the Serve Assets guide const PACKAGE_BASE = `https://cdn.img.ly/packages/imgly/cesdk-js/${cesdk.version}/assets`; const DEFAULT_ASSETS_URL = `${PACKAGE_BASE}/v4/`; const DEMO_ASSETS_URL = `${PACKAGE_BASE}/demo/v3/`; // Load default asset sources (core editor components) await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.sticker/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.vector.shape/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.color.palette/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.filter/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.effect/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.blur/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.typeface/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.crop.presets/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.page.presets/content.json` ); // Load demo asset sources (sample content for testing) await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.image/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.video/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.audio/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.templates/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.text.components/content.json` ); // Update asset library entries to show the loaded sources in the UI cesdk.ui.updateAssetLibraryEntry('ly.img.sticker', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.sticker']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.vector.shape', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.vector.shape']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.color.palette', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.color.palette']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.filter', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.filter']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.effect', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.effect']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.blur', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.blur']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.typeface', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.typeface']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.crop.presets', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.crop.presets']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.page.presets', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.page.presets']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.image']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.video', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.video']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.audio']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.templates', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.templates']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.text.components', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.text.components']) ] }); // Create the design scene await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Get the page to add content to const pages = engine.block.findByType('page'); const page = pages[0]; if (page == null) return; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Define the three assets to add: star shape, sticker, and image const assetsToAdd = [ { sourceId: 'ly.img.vector.shape', assetId: '//ly.img.ubq/shapes/star/filled' }, { sourceId: 'ly.img.sticker', assetId: '//ly.img.cesdk.stickers.emoticons/alien' }, { sourceId: 'ly.img.image', assetId: 'ly.img.cesdk.images.samples/sample.1' } ]; // Calculate layout for 3 centered blocks const blockSize = Math.min(pageWidth, pageHeight) * 0.2; const spacing = blockSize * 0.3; const totalWidth = assetsToAdd.length * blockSize + (assetsToAdd.length - 1) * spacing; const startX = (pageWidth - totalWidth) / 2; const centerY = (pageHeight - blockSize) / 2; // Create and position each block for (let i = 0; i < assetsToAdd.length; i++) { const { sourceId, assetId } = assetsToAdd[i]; const asset = await engine.asset.fetchAsset(sourceId, assetId); if (asset != null) { const block = await engine.asset.apply(sourceId, asset); if (block != null) { engine.block.setWidth(block, blockSize); engine.block.setHeight(block, blockSize); engine.block.setPositionX(block, startX + i * (blockSize + spacing)); engine.block.setPositionY(block, centerY); } } } // Clear selection for cleaner visual for (const block of engine.block.findAllSelected()) { engine.block.setSelected(block, false); } // Open the Elements panel to showcase all loaded asset sources cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.image', 'ly.img.vector.shape', 'ly.img.sticker'] } }); } } export default Example; ``` Load all asset sources from IMG.LY's CDN to populate your CE.SDK editor with shapes, stickers, filters, effects, fonts, images, and other media using the Asset API. ![Using Default Assets example showing the CE.SDK editor with a star shape, sticker, and image centered on the canvas](./assets/browser.hero.webp) > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-default-assets-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-default-assets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-default-assets-browser/) CE.SDK provides built-in asset sources for shapes, stickers, filters, effects, fonts, and sample media. This guide demonstrates loading all available asset sources from IMG.LY's CDN and applying them to create a scene with a star shape, a sticker, and an image. > **Production Deployment:** The IMG.LY CDN is for development and prototyping only. For production, download and self-host assets from your own server. See the [Serve Assets](https://img.ly/docs/cesdk/angular/serve-assets-b0827c/) guide for instructions. ## What Are Default and Demo Assets? IMG.LY provides two categories of asset sources hosted on the IMG.LY CDN for development and prototyping: **Default Assets** are core editor components: | Source ID | Description | |-----------|-------------| | `ly.img.sticker` | Emojis, emoticons, decorations | | `ly.img.vector.shape` | Shapes: stars, arrows, polygons | | `ly.img.color.palette` | Default color palette | | `ly.img.filter` | Color filters (LUT and duotone) | | `ly.img.effect` | Visual effects | | `ly.img.blur` | Blur effects | | `ly.img.typeface` | Font families | | `ly.img.crop.presets` | Crop presets | | `ly.img.page.presets` | Page size presets | **Demo Assets** are sample content for development: | Source ID | Description | |-----------|-------------| | `ly.img.image` | Sample images | | `ly.img.video` | Sample videos | | `ly.img.audio` | Sample audio tracks | | `ly.img.templates` | Design and video templates | | `ly.img.text.components` | Text component presets | ## Loading Assets from URL Use `addLocalAssetSourceFromJSONURI()` to load an asset source directly from a JSON URL: ```typescript const baseURL = `https://cdn.img.ly/packages/imgly/cesdk-js/${cesdk.version}/assets/v4/`; await engine.asset.addLocalAssetSourceFromJSONURI( `${baseURL}ly.img.vector.shape/content.json` ); ``` ## Versioned CDN URLs Use the SDK version to construct versioned CDN URLs. This ensures assets are compatible with your SDK version. For production deployments, see the [Serve Assets](https://img.ly/docs/cesdk/angular/serve-assets-b0827c/) guide to self-host assets. ```typescript highlight-cdn-urls // Versioned CDN URLs using the SDK package (recommended) // For production, self-host these assets - see the Serve Assets guide const PACKAGE_BASE = `https://cdn.img.ly/packages/imgly/cesdk-js/${cesdk.version}/assets`; const DEFAULT_ASSETS_URL = `${PACKAGE_BASE}/v4/`; const DEMO_ASSETS_URL = `${PACKAGE_BASE}/demo/v3/`; ``` ## Loading Default Asset Sources Load a default asset source from the CDN. Repeat this pattern for each source you need: ```typescript highlight-load-default-assets // Load default asset sources (core editor components) await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.sticker/content.json` ); ``` ## Loading Demo Asset Sources Load a demo asset source from the CDN. Repeat this pattern for each source you need: ```typescript highlight-load-demo-assets // Load demo asset sources (sample content for testing) await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.image/content.json` ); ``` ## Updating the Asset Library After loading asset sources, update the asset library entries to display them in the UI. Repeat this pattern for each source: ```typescript highlight-update-library // Update asset library entries to show the loaded sources in the UI cesdk.ui.updateAssetLibraryEntry('ly.img.sticker', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.sticker']) ] }); ``` ## Filtering Assets with Matcher Use the `matcher` option to load only specific assets from a source: ```typescript const baseURL = `https://cdn.img.ly/packages/imgly/cesdk-js/${cesdk.version}/assets/v4/`; // Load only star and arrow shapes await engine.asset.addLocalAssetSourceFromJSONURI( `${baseURL}ly.img.vector.shape/content.json`, { matcher: ['*star*', '*arrow*'] } ); // Load only emoji stickers await engine.asset.addLocalAssetSourceFromJSONURI( `${baseURL}ly.img.sticker/content.json`, { matcher: ['*emoji*'] } ); ``` An asset is included if it matches ANY pattern in the array. Patterns support `*` wildcards. ## API Reference | Method | Description | |--------|-------------| | `engine.asset.addLocalAssetSourceFromJSONURI(contentURI, options?)` | Load an asset source from a JSON URL | **Parameters for `addLocalAssetSourceFromJSONURI`:** | Parameter | Type | Description | |-----------|------|-------------| | `contentURI` | `string` | Full URL to the content.json file | | `options.matcher` | `string[]` | Optional wildcard patterns to filter assets | **Returns:** `Promise` — The asset source ID from the JSON ## Next Steps - [Serve Assets](https://img.ly/docs/cesdk/angular/serve-assets-b0827c/) — Self-host assets for production deployments - [Customize Asset Library](https://img.ly/docs/cesdk/angular/import-media/asset-panel/customize-c9a4de/) — Configure the asset library UI and entries - [Asset Library Basics](https://img.ly/docs/cesdk/angular/import-media/asset-panel/basics-f29078/) — Understand asset library structure and concepts - [Import From Remote Source](https://img.ly/docs/cesdk/angular/import-media/from-remote-source-b65faf/) — Load assets from external URLs --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit or Remove Assets" description: "Manage assets in local asset sources by updating metadata, removing individual assets, or deleting entire sources in CE.SDK." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/edit-or-remove-assets-ce072c/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [Edit or Remove Assets](https://img.ly/docs/cesdk/angular/import-media/edit-or-remove-assets-ce072c/) --- Manage assets in local asset sources by updating metadata, removing individual assets, or deleting entire sources. ![Edit or Remove Assets](./assets/browser.hero.webp) > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-edit-or-remove-assets-browser) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-edit-or-remove-assets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-edit-or-remove-assets-browser/) Assets in local sources can be modified or removed after they have been added. CE.SDK provides two levels of removal: individual assets within a source and entire asset sources. This guide covers how to query, update, and remove assets programmatically, as well as how to notify the UI when changes occur. ```typescript file=@cesdk_web_examples/guides-import-media-edit-or-remove-assets-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ImageColorsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '@cesdk/core-configs-web/design-editor'; 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.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; // ===== Section 1: Create a Local Asset Source ===== // Create a local asset source to manage images engine.asset.addLocalSource('my-uploads'); // Add some sample assets to the source engine.asset.addAssetToSource('my-uploads', { id: 'image-1', label: { en: 'Mountain Landscape' }, tags: { en: ['nature', 'mountain'] }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', blockType: '//ly.img.ubq/graphic' } }); engine.asset.addAssetToSource('my-uploads', { id: 'image-2', label: { en: 'Ocean Waves' }, tags: { en: ['nature', 'water'] }, 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('my-uploads', { id: 'image-3', label: { en: 'Forest Path' }, tags: { en: ['nature', 'forest'] }, 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: Find Assets in a Source ===== // Query assets from the source to find specific assets const result = await engine.asset.findAssets('my-uploads', { query: 'nature', page: 0, perPage: 100 }); console.log('Found assets:', result.assets.length); const assetToModify = result.assets.find((a) => a.id === 'image-1'); console.log('Asset to modify:', assetToModify?.label); // ===== Section 3: Update Asset Metadata ===== // To update an asset's metadata, remove it and add an updated version // This pattern ensures the asset library reflects the latest data engine.asset.removeAssetFromSource('my-uploads', 'image-1'); // Add the updated version with new metadata engine.asset.addAssetToSource('my-uploads', { id: 'image-1', label: { en: 'Updated Mountain Photo' }, // New label tags: { en: ['nature', 'mountain', 'updated'] }, // New tags meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', blockType: '//ly.img.ubq/graphic' } }); // ===== Section 4: Remove an Asset from a Source ===== // Remove a single asset from the source // Blocks already using this asset on the canvas remain unaffected engine.asset.removeAssetFromSource('my-uploads', 'image-2'); console.log('Removed image-2 from my-uploads'); // ===== Section 5: Notify UI of Changes ===== // After modifying assets, notify the UI to refresh // This triggers update events for components like the asset library panel engine.asset.assetSourceContentsChanged('my-uploads'); // ===== Section 6: Create a Second Source for Removal Demo ===== // Create a temporary source to demonstrate source removal engine.asset.addLocalSource('temporary-uploads'); engine.asset.addAssetToSource('temporary-uploads', { id: 'temp-1', label: { en: 'Temporary Image' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_4.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_4.jpg', blockType: '//ly.img.ubq/graphic' } }); // ===== Section 7: Remove an Entire Asset Source ===== // Remove a complete asset source and all its assets // Any UI panels displaying this source will stop showing content engine.asset.removeSource('temporary-uploads'); console.log('Removed temporary-uploads source'); // ===== Section 8: Listen to Asset Source Events ===== // Subscribe to lifecycle events for asset sources const unsubscribeAdded = engine.asset.onAssetSourceAdded((sourceId) => { console.log(`Source added: ${sourceId}`); }); const unsubscribeRemoved = engine.asset.onAssetSourceRemoved((sourceId) => { console.log(`Source removed: ${sourceId}`); }); const unsubscribeUpdated = engine.asset.onAssetSourceUpdated((sourceId) => { console.log(`Source updated: ${sourceId}`); }); // Demonstrate events by creating and removing a source engine.asset.addLocalSource('event-demo-source'); engine.asset.assetSourceContentsChanged('event-demo-source'); engine.asset.removeSource('event-demo-source'); // Clean up subscriptions when no longer needed unsubscribeAdded(); unsubscribeRemoved(); unsubscribeUpdated(); // ===== Configure Asset Library Display ===== // Configure the asset library to show our custom source cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ['my-uploads'], gridBackgroundType: 'cover', previewBackgroundType: 'contain' }); // Open the asset library to show the custom uploads cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.image'] } }); } } export default Example; ``` ## Setup Initialize CE.SDK and create a local asset source with sample assets. The example creates a design scene and populates a local source with images. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ImageColorsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; ``` ## Creating a Local Asset Source Before editing or removing assets, you need a local source with assets. Use `engine.asset.addLocalSource()` to create a source, then `engine.asset.addAssetToSource()` to populate it. ```typescript highlight=highlight-create-source // Create a local asset source to manage images engine.asset.addLocalSource('my-uploads'); // Add some sample assets to the source engine.asset.addAssetToSource('my-uploads', { id: 'image-1', label: { en: 'Mountain Landscape' }, tags: { en: ['nature', 'mountain'] }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', blockType: '//ly.img.ubq/graphic' } }); engine.asset.addAssetToSource('my-uploads', { id: 'image-2', label: { en: 'Ocean Waves' }, tags: { en: ['nature', 'water'] }, 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('my-uploads', { id: 'image-3', label: { en: 'Forest Path' }, tags: { en: ['nature', 'forest'] }, 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' } }); ``` Each asset has a unique `id`, descriptive `label` and `tags` for searchability, and `meta` properties including the `uri` for the asset file. ## Finding Assets in a Source Use `engine.asset.findAssets()` to query assets from a source. You can search by query string to match labels and tags, and paginate results for large sources. ```typescript highlight=highlight-find-assets // Query assets from the source to find specific assets const result = await engine.asset.findAssets('my-uploads', { query: 'nature', page: 0, perPage: 100 }); console.log('Found assets:', result.assets.length); const assetToModify = result.assets.find((a) => a.id === 'image-1'); console.log('Asset to modify:', assetToModify?.label); ``` The `findAssets()` method returns an object containing the `assets` array, `total` count, `currentPage`, and optionally `nextPage` for pagination. ## Updating Asset Metadata CE.SDK does not provide a direct update method for assets. To modify an asset's metadata (labels, tags, URIs), remove the existing asset and add an updated version with the same ID. ```typescript highlight=highlight-update-metadata // To update an asset's metadata, remove it and add an updated version // This pattern ensures the asset library reflects the latest data engine.asset.removeAssetFromSource('my-uploads', 'image-1'); // Add the updated version with new metadata engine.asset.addAssetToSource('my-uploads', { id: 'image-1', label: { en: 'Updated Mountain Photo' }, // New label tags: { en: ['nature', 'mountain', 'updated'] }, // New tags meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', blockType: '//ly.img.ubq/graphic' } }); ``` This pattern ensures the asset library reflects the latest metadata. The asset ID remains the same, so any references to the asset continue to work. ## Removing an Asset from a Source Remove individual assets using `engine.asset.removeAssetFromSource()`. The asset is permanently deleted from the source, but blocks already using that asset on the canvas remain unaffected. ```typescript highlight=highlight-remove-asset // Remove a single asset from the source // Blocks already using this asset on the canvas remain unaffected engine.asset.removeAssetFromSource('my-uploads', 'image-2'); console.log('Removed image-2 from my-uploads'); ``` Removing an asset only affects the asset library—it does not modify or delete any blocks that were created using that asset. ## Notifying the UI of Changes After modifying assets in a source, call `engine.asset.assetSourceContentsChanged()` to notify UI components. This triggers update events for the asset library panel and any other components displaying the source. ```typescript highlight=highlight-notify-ui // After modifying assets, notify the UI to refresh // This triggers update events for components like the asset library panel engine.asset.assetSourceContentsChanged('my-uploads'); ``` Without this notification, UI components may show stale data until the user navigates away and returns. ## Creating a Temporary Source You can create additional sources for temporary or session-specific assets. These sources can be removed entirely when no longer needed. ```typescript highlight=highlight-create-temp-source // Create a temporary source to demonstrate source removal engine.asset.addLocalSource('temporary-uploads'); engine.asset.addAssetToSource('temporary-uploads', { id: 'temp-1', label: { en: 'Temporary Image' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_4.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_4.jpg', blockType: '//ly.img.ubq/graphic' } }); ``` ## Removing an Entire Asset Source Remove a complete asset source and all its assets using `engine.asset.removeSource()`. Any UI panels displaying this source will stop showing content for that source. ```typescript highlight=highlight-remove-source // Remove a complete asset source and all its assets // Any UI panels displaying this source will stop showing content engine.asset.removeSource('temporary-uploads'); console.log('Removed temporary-uploads source'); ``` Use this when cleaning up temporary sources or when a user explicitly deletes an entire category of assets. ## Listening to Asset Source Events Subscribe to lifecycle events to react when sources are added, removed, or updated. These events are useful for analytics, cleanup tasks, or syncing with external systems. ```typescript highlight=highlight-events // Subscribe to lifecycle events for asset sources const unsubscribeAdded = engine.asset.onAssetSourceAdded((sourceId) => { console.log(`Source added: ${sourceId}`); }); const unsubscribeRemoved = engine.asset.onAssetSourceRemoved((sourceId) => { console.log(`Source removed: ${sourceId}`); }); const unsubscribeUpdated = engine.asset.onAssetSourceUpdated((sourceId) => { console.log(`Source updated: ${sourceId}`); }); // Demonstrate events by creating and removing a source engine.asset.addLocalSource('event-demo-source'); engine.asset.assetSourceContentsChanged('event-demo-source'); engine.asset.removeSource('event-demo-source'); // Clean up subscriptions when no longer needed unsubscribeAdded(); unsubscribeRemoved(); unsubscribeUpdated(); ``` Each subscription returns an unsubscribe function. Call it when you no longer need to receive events to prevent memory leaks. ## Best Practices - **Query before modifying**: Use `findAssets()` to verify the asset exists before attempting removal - **Notify UI after changes**: Always call `assetSourceContentsChanged()` after modifying a source - **Clean up subscriptions**: Store unsubscribe functions and call them when the component unmounts or the source is removed - **Handle missing assets gracefully**: Check if `findAssets()` returns the expected asset before operating on it - **Use descriptive IDs**: Choose asset IDs that are unique and meaningful for easier debugging ## Troubleshooting | Issue | Cause | Solution | |-------|-------|----------| | Asset not found | ID mismatch or asset already removed | Use `findAssets()` to list available assets | | UI not updating | Missing notification | Call `assetSourceContentsChanged()` after modifications | | Cannot remove asset | Source is not a local source | Only local sources support `removeAssetFromSource()` | | Events not firing | Subscription not active | Verify the subscription was created before the operation | ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `engine.asset.findAssets()` | Asset Discovery | Query assets from a source with filtering and pagination | | `engine.asset.addAssetToSource()` | Asset Lifecycle | Add or update an asset in a local source | | `engine.asset.removeAssetFromSource()` | Asset Lifecycle | Remove a single asset from a local source | | `engine.asset.removeSource()` | Source Management | Remove an entire asset source and all its assets | | `engine.asset.assetSourceContentsChanged()` | UI Notification | Notify UI that source contents changed | | `engine.asset.onAssetSourceAdded()` | Event Subscriptions | Subscribe to source addition events | | `engine.asset.onAssetSourceRemoved()` | Event Subscriptions | Subscribe to source removal events | | `engine.asset.onAssetSourceUpdated()` | Event Subscriptions | Subscribe to source content change events | --- ## More Resources - **[Angular Documentation Index](https://img.ly/docs/cesdk/angular.md)** - Browse all Angular documentation - **[Complete Documentation](https://img.ly/docs/cesdk/angular/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/angular/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Supported File Formats for Import" description: "Review the supported image, video, audio, and template formats for importing assets into CE.SDK on the web." platform: angular url: "https://img.ly/docs/cesdk/angular/import-media/file-format-support-8cdc84/" --- > This is one page of the CE.SDK Angular documentation. For a complete overview, see the [Angular Documentation Index](https://img.ly/docs/cesdk/angular.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/angular/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/angular/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/angular/import-media-4e3703/) > [File Format Support](https://img.ly/docs/cesdk/angular/import-media/file-format-support-8cdc84/) --- 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 CE.SDK supports importing the following media types directly in the browser: | Category | Supported Formats | | --------------- | --------------------------------------------------------------------------------------- | | **Images** | `.png`, `.apng`, `.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) | > **Note:** 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 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 - **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 - **MP3** (in `.mp3` files or within `.mp4`/`.mov` containers) - **AAC** (in `.m4a`, `.mp4`, or `.mov` containers) > **Warning:** 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 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 | 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. > **Note:** 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 | 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. | > **Note:** 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 ### 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 - 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 - 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 The following SVG elements are not supported: - Animation elements (``) - Foreign object (``) - Text-related elements (``, ``, ``) - Script elements (`