# Imgly Sveltekit > [Source](https:/img.ly/docs/cesdk/sveltekit/what-is-cesdk-2e7acd) --- # Imgly Sveltekit Documentation Source: https://img.ly/docs/cesdk/sveltekit/llms-full.txt --- [Source](https:/img.ly/docs/cesdk/sveltekit/what-is-cesdk-2e7acd) --- # What is Creative Editor SDK The CreativeEditor SDK delivers a powerful SvelteKit library designed for crafting and editing rich visual designs directly within the browser. ### What is CE.SDK?[#](#what-is-cesdk) This CE.SDK configuration is fully customizable and extendable, offering a comprehensive range of design editing capabilities, including templating, layout management, asset integration, and more, as well as advanced features like background removal. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](sveltekit/get-started/overview-e18f40/) ## Key Features of the SvelteKit Creative Editor SDK[#](#key-features-of-the-sveltekit-creative-editor-sdk) ![Transformations](/docs/cesdk/_astro/Transform.By5kJRew_2acCrV.webp) ### Transformations Execute operations like cropping, rotating, and resizing design components. ![Templating](/docs/cesdk/_astro/Templating.eMNm9_jD_ycnVt.webp) ### Templating Build and apply design templates with placeholders and text variables for dynamic content. ![Placeholders & Lockable Design](/docs/cesdk/_astro/Placeholders.DzG3E33B_bmQxQ.webp) ### Placeholders & Lockable Design Constrain templates to guide your users’ design and ensure brand consistency. ![Asset Handling](/docs/cesdk/_astro/AssetLibraries.Ce9MfYvX_HmsaC.webp) ### Asset Handling Import and manage images, shapes, and other assets for your design projects. ![Design Collages](/docs/cesdk/_astro/VideoCollage.23LDUE8e_1VDFAj.webp) ### Design Collages Arrange multiple elements on a single canvas to create intricate layouts. ![Text Editing](/docs/cesdk/_astro/TextEditing.B8Ra1KOE_2lGC8C.webp) ### Text Editing Incorporate and style text blocks using various fonts, colors, and effects. ![Client-Side Operations](/docs/cesdk/_astro/ClientSide.CECpQO_1_c6mBh.webp) ### Client-Side Operations All design editing tasks are performed directly in the browser, eliminating the need for server dependencies. ![Headless & Automation](/docs/cesdk/_astro/Headless.qEVopH3n_20CWbD.webp) ### Headless & Automation Programmatically edit designs within your React application using the engine API. ![Extendible](/docs/cesdk/_astro/Extendible.CRYmRihj_BmNTE.webp) ### Extendible Easily enhance functionality with plugins and custom scripts. ![Customizable UI](/docs/cesdk/_astro/CustomizableUI.DtHv9rY-_2fNrB2.webp) ### Customizable UI Develop and integrate custom UIs tailored to your application’s design requirements. ![Background Removal](/docs/cesdk/_astro/GreenScreen.CI2APgl0_Z8GtPY.webp) ### Background Removal This plugin simplifies the process of removing backgrounds from images entirely within the browser. ![Print Optimization](/docs/cesdk/_astro/CutoutLines.kN4c7WBK_lB3LB.webp) ### Print Optimization Ideal for web-to-print scenarios, supporting spot colors and cut-outs. ## Browser Support[#](#browser-support) The CE.SDK Design Editor is optimized for use in modern web browsers, ensuring compatibility with the latest versions of Chrome, Firefox, Edge, and Safari. See the full list of [supported browsers here](sveltekit/browser-support-28c1b0/) . ## Supported Formats[#](#supported-formats) CE.SDK supports a wide range of file types to ensure maximum flexibility for developers: ### Importing Media[#](#importing-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ### Exporting Media[#](#exporting-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ### Importing Templates[#](#importing-templates) | Format | Description | | --- | --- | | `.idml` | InDesign | | `.psd` | Photoshop | | `.scene` | CE.SDK Native | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs to generate scenes programmatically. For detailed information, see the [full file format support list](sveltekit/file-format-support-3c4b2a/) . ## Understanding CE.SDK Architecture & API[#](#understanding-cesdk-architecture--api) The following sections provide an overview of the key components of the CE.SDK design editor UI and its API architecture. If you’re ready to start integrating CE.SDK into your Vue.js application, refer to our [Getting Started guide](sveltekit/get-started/overview-e18f40/) or explore the Essential Guides. ### CreativeEditor Design UI[#](#creativeeditor-design-ui) The CE.SDK design UI is designed for intuitive design creation and editing. Key components and customizable elements within the UI include: ![](/docs/cesdk/_astro/CESDK-UI.BD2Iwmum_2gw9UM.webp) * **Canvas:** The main interaction area for design content. * **Dock:** An entry point for interactions not directly related to the selected design block, often used for accessing asset libraries. * **Canvas Menu:** Access block-specific settings like duplication or deletion. * **Inspector Bar:** Manage block-specific functionalities, such as adjusting properties of the selected block. * **Navigation Bar:** Handles global scene actions like undo/redo and zoom. * **Canvas Bar:** Provides tools for managing the overall canvas, such as adding pages or controlling zoom. * **Layer Panel:** Manage the stacking order and visibility of design elements. Learn more about interacting with and manipulating design controls in our design editor UI guide. ### CreativeEngine[#](#creativeengine) The CreativeEngine is the core of CE.SDK, responsible for rendering and manipulating design scenes. It can operate in headless mode or be integrated with the CreativeEditor UI. Key features and APIs provided by CreativeEngine include: * **Scene Management:** Create, load, save, and modify design scenes programmatically. * **Block Manipulation:** Create and manage design elements, such as shapes, text, and images. * **Asset Management:** Load assets like images and SVGs from URLs or local sources. * **Variable Management:** Define and manipulate variables within scenes for dynamic content. * **Event Handling:** Subscribe to events like block creation or updates for dynamic interaction. ## API Overview[#](#api-overview) CE.SDK’s APIs are categorized into several groups, reflecting different aspects of scene management and manipulation. [**Scene API:**](sveltekit/concepts/scenes-e8596d/) \- **Creating and Loading Scenes**: ``` engine.scene.create();engine.scene.loadFromURL(url); ``` * **Zoom Control**: ``` engine.scene.setZoomLevel(1.0);engine.scene.zoomToBlock(blockId); ``` [**Block API:**](sveltekit/concepts/blocks-90241e/) : - **Creating Blocks**: ``` const block = engine.block.create('shapes/rectangle'); ``` * **Setting Properties**: ``` engine.block.setColor(blockId, 'fill/color', { r: 1, g: 0, b: 0, a: 1 });engine.block.setString(blockId, 'text/content', 'Hello World'); ``` * **Querying Properties**: ``` const color = engine.block.getColor(blockId, 'fill/color');const text = engine.block.getString(blockId, 'text/content'); ``` [**Variable API:**](sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) Variables allow dynamic content within scenes, enabling programmatic creation of design variations. * **Managing Variables**: ``` engine.variable.setString('myVariable', 'value');const value = engine.variable.getString('myVariable'); ``` [**Asset API:**](sveltekit/import-media/concepts-5e6197/) : - **Managing Assets**: ``` engine.asset.add('image', 'https://example.com/image.png'); ``` [**Event API:**](sveltekit/concepts/events-353f97/) : - **Subscribing to Events**: ``` // Subscribe to scene changesengine.scene.onActiveChanged(() => { const newActiveScene = engine.scene.get();}); ``` ## Customizing the Vue.js Creative Editor[#](#customizing-the-vuejs-creative-editor) CE.SDK provides extensive customization options to tailor the UI to various use cases. These options range from simple configuration changes to more advanced customizations involving callbacks and custom elements. ### Basic Customizations[#](#basic-customizations) * **Configuration Object:** When initializing the CreativeEditor, pass a configuration object that defines basic settings such as the base URL for assets, language, theme, and license key. ``` const config = { baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`, // license: 'YOUR_CESDK_LICENSE_KEY',}; ``` * **Localization:** Customize the language and labels used in the editor to support different locales. ``` const config = {}; CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set theme using the UI API cesdk.ui.setTheme('light'); // 'dark' | 'system' cesdk.i18n.setLocale('en'); cesdk.i18n.setTranslations({ en: { variables: { my_custom_variable: { label: 'Custom Label', }, }, }, });}); ``` * [Custom Asset Sources](sveltekit/import-media/concepts-5e6197/) : Serve custom image or SVG assets from a remote URL. ### UI Customization Options[#](#ui-customization-options) * **Theme:** Select from predefined themes like ‘dark’, ‘light’, or ‘system’. ``` CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => { // Set theme using the UI API cesdk.ui.setTheme('dark'); // 'light' | 'system'}); ``` * **UI Components:** Enable or disable specific UI components as needed. ``` const config = { ui: { elements: { toolbar: true, inspector: false, }, },}; ``` ## Advanced Customizations[#](#advanced-customizations) Explore more ways to extend editor functionality and customize its UI to your specific needs by consulting our detailed [customization guide](sveltekit/user-interface-5a089a/) . Below is an overview of the available APIs and components. ### Order APIs[#](#order-apis) The Order APIs manage the customization of the web editor’s components and their order within these locations, allowing the addition, removal, or reordering of elements. Each location has its own Order API, such as `setDockOrder`, `setCanvasMenuOrder`, `setInspectorBarOrder`, `setNavigationBarOrder`, and `setCanvasBarOrder`. ### Layout Components[#](#layout-components) CE.SDK offers special components for layout control, such as `ly.img.separator` for separating groups of components and `ly.img.spacer` for adding space between components. ### Registration of New Components[#](#registration-of-new-components) Custom components can be registered and integrated into the web editor using builder components like buttons, dropdowns, and inputs. These components can replace default ones or introduce new functionalities, seamlessly integrating custom logic into the editor. ### Feature API[#](#feature-api) The Feature API allows for the conditional display and functionality of components based on the current context, enabling dynamic customization. For instance, certain buttons can be hidden for specific block types. ## Plugins[#](#plugins) Customizing the CE.SDK web editor during its initialization is possible through the APIs outlined above. For many use cases, this will be sufficient. However, there are situations where encapsulating functionality for reuse is necessary. Plugins come in handy here. Follow our [guide on building your own plugins](sveltekit/user-interface-5a089a/) to learn more or explore some of the plugins we’ve created using this API: * **Background Removal**: Adds a button to the canvas menu to remove image backgrounds. * **Vectorizer**: Adds a button to the canvas menu to quickly vectorize a graphic. ## Ready to get started? With a free trial and pricing that fits your needs, it's easy to find the best solution for your product. [Free Trial](https://img.ly/forms/free-trial) ### 500M+ video and photo creations are powered by IMG.LY every month ![HP logo](/docs/cesdk/_astro/HP.BZ1qDNii_ZpK5Lk.webp) ![Shopify logo](/docs/cesdk/_astro/Shopify.Dmyk4png_ZRKWXF.webp) ![Reuters logo](/docs/cesdk/_astro/Reuters.B8BV2Fek_ZLrHFJ.webp) ![Hootsuite logo](/docs/cesdk/_astro/Hootsuite.C94d5fhs_Zsc4gx.webp) ![Semrush logo](/docs/cesdk/_astro/Semrush.B2YsPaIn_23cDNx.webp) ![Shutterfly logo](/docs/cesdk/_astro/Shutterfly.Cc7Sw48y_Z3TjCs.webp) ![Sprout Social logo](/docs/cesdk/_astro/Sprout-Social.VxlY6_Tc_E0Dzh.webp) ![One.com logo](/docs/cesdk/_astro/Onecom.BQ_oPnlz_Z1btrtu.webp) ![Constant Contact logo](/docs/cesdk/_astro/Constant-Contact.1rh975Q__Z2ob7wU.webp) --- [Source](https:/img.ly/docs/cesdk/sveltekit/user-interface-5a089a) --- # User Interface --- [Source](https:/img.ly/docs/cesdk/sveltekit/to-v1-32-1b6ae8) --- # To v1.32 Version v1.32 introduced powerful new APIs for customizing the CE.SDK web editor. These new APIs render some of the existing configurations obsolete, requiring code migration to leverage the more flexible new options. This guide will help you navigate these changes and explain what you need to do to update your integration. ## Configuring the Dock[#](#configuring-the-dock) Until version 1.32, the dock was configured by two configuration options (although most users only used one of them and kept the others default): * `config.ui.elements.libraries.insert.entries` and * `config.ui.elements.dock` If your configuration adapted one of these two (mostly `config.ui.elements.libraries.insert.entries`), you are affected by this change. For now, it is only deprecated and we will try to do an internal migration for you, but this still might include a breaking change depending on how you used the configuration options before. ### Breaking Change[#](#breaking-change) `config.ui.elements.libraries.insert.entries` was called repeatedly with a context of currently selected blocks. Most users and configurations have not used this behavior and just returned the same static list of entries for every call. In this case, your configuration should work as before, but if you have relied on this fact, you have to migrate your configuration to the new API, listen to selection changes, and update the asset library entries accordingly. ### Migration to new APIs[#](#migration-to-new-apis) Defining the dock is now done by our new APIs in a consistent way to all other customizable locations of the editor. With the [Dock API](sveltekit/user-interface/customization/dock-cb916c/) , you now have much greater control of how and what is displayed in the dock. This does not only include dock buttons to open asset libraries but also arbitrary buttons and other elements. Please take a look at the [Dock API](sveltekit/user-interface/customization/dock-cb916c/) or learn about the general concept [here](sveltekit/user-interface/overview-41101a/) . If you aren’t affected by the breaking change mentioned above, the easiest way to migrate is to first copy your current dock order after the editor has been inialized. This can be done by calling the new `cesdk.ui.getDockOrder()` method. Now you can take this order and set it during the initialization of the editor by using `cesdk.ui.setDockOrder(copiedDockOrder)`. The old configuration (`config.ui.elements.libraries.insert.entries` and `config.ui.elements.dock`) can be removed afterwards. Of course, you could also just remove the old configuration and use the new API to define the dock order from scratch. Please note, that changes to the asset library entries are now done by the [Asset Library Entry API](sveltekit/import-media/asset-panel/basics-f29078/) and the dock order is just referring to these. So if you, for instance, want to add an asset source id to be shown in a library, you have to add this asset source id to the asset library entry and not to the dock order. ``` // Before// ======const config: Configuration = { ui: { elements: { libraries: { insert: { entries: (defaultEntries) => { return [ // Changing some of the default entries ...defaultEntries.map((entry) => { if (entry.id === 'ly.img.image') { entry.sourceIds.push('my-own-image-source'); } return entry; }), // Adding a new entry { id: 'my-own-entry', sourceIds: ['my-own-source'] } ]; } } } } }}; // After// ======cesdk.ui.setDockOrder([ ...cesdk.ui.getDockOrder(), // Add a new button referencing your new entry { id: 'ly.img.assetLibrary.dock', label: 'My Own Entry', icon: [...], entries: ['my-own-entry'] }]); // Adding your custom entrycesdk.ui.addAssetLibraryEntry({ id: 'my-own-entry', sourceIds: ['my-own-source']}); // Updating an existing default entrycesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [...currentIds, 'my-own-image-source']}); ``` ## Configuring the Asset Replacement Panel[#](#configuring-the-asset-replacement-panel) Similar to the definition of the dock, we deprecate the configuration `config.ui.elements.libraries.replace.entries` of the asset library entries for the replacement panel. This method is deprecated but we will try to migrate your configuration internally until it is removed. We recommend you to migrate to the new API as soon as possible. The new API is similar with subtle differences. With `cesdk.ui.setReplaceAssetLibraryEntries` you register a function that is called with the current context (of selected blocks) but only returns ids of entries. ### Breaking Change[#](#breaking-change-1) With the `config.ui.elements.libraries.replace.entries` it was possible to take the default entries and modify them. In theory, you could change the entries and have different “default” entries for insert or replace. Now a change to a default entry provided by the editor via the [Asset Library Entry API](sveltekit/import-media/asset-panel/basics-f29078/) will be reflected in both the insert and replace entries. To solve this you can just copy one entry for replacement, modify it, and return its id instead. ### Migration to new APIs[#](#migration-to-new-apis-1) Take the function from `config.ui.elements.libraries.replace.entries` and use it in `cesdk.ui.setReplaceAssetLibraryEntries` by replacing the entries with their ids. If you have made changes to the default entries or added new custom ones you need to add or change them via the [Asset Library Entry API](sveltekit/import-media/asset-panel/basics-f29078/) on initialization of the editor. --- [Source](https:/img.ly/docs/cesdk/sveltekit/upgrade-4f8715) --- # Upgrade --- [Source](https:/img.ly/docs/cesdk/sveltekit/to-v1-19-55bcad) --- # To v1.19 Version v1.19 of CreativeEngineSDK and CreativeEditorSDK introduces structural changes to many of the current design blocks, making them more composable and more powerful. Along with this update, there are mandatory license changes that require attention. This comes with a number of breaking changes. This document will explain the changes and describe the steps you need to take to adapt them to your setup. ## **License Changes**[#](#license-changes) The `license` parameter is now required for CreativeEngineSDK and CreativeEditorSDK. This means that you will need to update your license parameter in the `CreativeEngine.init` and `CreativeEditorSDK.create` configuration object properties. There is also a new `userId`, an optional unique ID tied to your application’s user. This helps us accurately calculate monthly active users (MAU). Especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they’re counted once. Providing this aids in better data accuracy. ## **Graphic Design Block**[#](#graphic-design-block) A new generic `Graphic` design block with the type id `//ly.img.ubq/graphic` has been introduced, which forms the basis of the new unified block structure. ## **Shapes**[#](#shapes) Similar to how the fill of a block is a separate object which can be attached to and replaced on a design block, we have now introduced a similar concept for the shape of a block. You use the new `createShape`, `getShape` and `setShape` APIs in order to define the shape of a design block. Only the new `//ly.img.ubq/graphic` block allows for its shape to be changed with these APIs. The new available shape types are: * `//ly.img.ubq/shape/rect` * `//ly.img.ubq/shape/line` * `//ly.img.ubq/shape/ellipse` * `//ly.img.ubq/shape/polygon` * `//ly.img.ubq/shape/star` * `//ly.img.ubq/shape/vector_path` The following block types are now removed in favor of using a `Graphic` block with one of the above mentioned shape instances: * `//ly.img.ubq/shapes/rect` * `//ly.img.ubq/shapes/line` * `//ly.img.ubq/shapes/ellipse` * `//ly.img.ubq/shapes/polygon` * `//ly.img.ubq/shapes/star` * `//ly.img.ubq/vector_path` (The removed type ids use the plural “shapes” and the new shape types use the singular “shape”) This structural change means that the shape-specific properties (e.g. the number of sides of a polygon) are not available on the design block any more but on the shape instances instead. You will have to add calls to `getShape` to get the instance id of the shape instance and then pass that to the property getter and setter APIs. Also remember to change property key strings in the getter and setter calls from the plural `shapes/…` to the singular `shape/…` to match the new type identifiers. ## **Image and Sticker**[#](#image-and-sticker) Previously, `//ly.img.ubq/image` and `//ly.img.ubq/sticker` were their own high-level design block types. They do not support the fill APIs nor the effects APIs. Both of these blocks are now removed in favor of using a `Graphic` block with an image fill (`//ly.img.ubq/fill/image`) and using the effects APIs instead of the legacy image block’s numerous effects properties. At its core, the sticker block has always just been an image block that is heavily limited in its capabilities. You can not crop it, nor apply any effects to it. In order to replicate this difference as closely as possible in the new unified structure, more fine-grained scopes have been added. You can now limit the adopter’s ability to crop a block and to edit its appearance. Note that since these scopes only apply to a user of the editor with the “Adopter” role, a “Creator” user will now have all of the same editing options for both images and for blocks that used to be stickers. ## **Scopes**[#](#scopes) The following is the list of changes to the design block scopes: * (Breaking) The permission to crop a block was split from `content/replace` and `design/style` into a separate scope: `layer/crop`. * Deprecated the `design/arrange` scope and renamed `design/arrange/move` → `layer/move` `design/arrange/resize` → `layer/resize` `design/arrange/rotate` → `layer/rotate` `design/arrange/flip` → `layer/flip` * Deprecated the `content/replace` scope. For `//ly.img.ubq/text` blocks, it is replaced with the new `text/edit` scope. For other blocks it is replaced with `fill/change`. * Deprecated the `design/style` scope and replaced it with the following fine-grained scopes: `text/character`, `stroke/change`, `layer/opacity`, `layer/blendMode`, `layer/visibility`, `layer/clipping`, `appearance/adjustments`, `appearance/filter`, `appearance/effect`, `appearance/blur`, `appearance/shadow` * Introduced `fill/change`, `stroke/change`, and `shape/change` scopes that control whether the fill, stroke or shape of a block may be edited by a user with an “Adopter” role. * The deprecated scopes are automatically mapped to their new corresponding scopes by the scope APIs for now until they will be removed completely in a future update. ## **Kind**[#](#kind) While the new unified block structure both simplifies a lot of code and makes design blocks more powerful, it also means that many of the design blocks that used to have unique type ids now all have the same generic `//ly.img.ubq/graphic` type, which means that calls to the `findByType` cannot be used to filter blocks based on their legacy type ids any more. Simultaneously, there are many instances in which different blocks in the scene which might have the same type and underlying technical structure have different semantic roles in the document and should therefore be treated differently by the user interface. To solve both of these problems, we have introduced the concept of a block “kind”. This is a mutable string that can be used to tag different blocks with a semantic label. You can get the kind of a block using the `getKind` API and you can query blocks with a specific kind using the `findByKind` API. CreativeEngine provides the following default kind values: * `image` * `video` * `sticker` * `scene` * `camera` * `stack` * `page` * `audio` * `text` * `shape` * `group` Unlike the immutable design block type id, you can change the kind of a block with the new `setKind` API. It is important to remember that the underlying structure and properties of a design block are not strictly defined by its kind, since the kind, shape, fill and effects of a block can be changed independent of each other. Therefore, a user-interface should not make assumptions about available properties of a block purely based on its kind. **Note** Due to legacy reasons, blocks with the kind “sticker” will continue to not allow their contents to be cropped. This special behavior will be addressed and replaced with a more general-purpose implementation in a future update. ​ ## **Asset Definitions**[#](#asset-definitions) The asset definitions have been updated to reflect the deprecation of legacy block type ids and the introduction of the “kind” property. In addition to the “blockType” meta property, you can now also define the `“shapeType”` ,`“fillType”` and `“kind”` of the block that should be created by the default implementation of the applyAsset function. * `“blockType”` defaults to `“//ly.img.ubq/graphic”` if left unspecified. * `“shapeType”` defaults to `“//ly.img.ubq/shape/rect”` if left unspecified * `“fillType”` defaults to `“//ly.img.ubq/fill/color”` if left unspecified Video block asset definitions used to specify the `“blockType”` as `“//ly.img.ubq/fill/video“`. The `“fillType”` meta asset property should now be used instead for such fill type ids. ## **Automatic Migration**[#](#automatic-migration) CreativeEngine will always continue to support scene files that contain the now removed legacy block types. Those design blocks will be automatically replaced by the equivalent new unified block structure when the scene is loaded, which means that the types of all legacy blocks will change to `“//ly.img.ubq/graphic”`. Note that this can mean that a block gains new capabilities that it did not have before. For example, the line shape block did not have any stroke properties, so the `hasStroke` API used to return `false`. However, after the automatic migration its `Graphic` design block replacement supports both strokes and fills, so the `hasStroke` API now returns `true` . Similarly, the image block did not support fills or effects, but the `Graphic` block does. ## List of all Removed Block Type IDs[#](#list-of-all-removed-block-type-ids) * `//ly.img.ubq/image` * `//ly.img.ubq/sticker` * `//ly.img.ubq/shapes/rect` * `//ly.img.ubq/shapes/line` * `//ly.img.ubq/shapes/ellipse` * `//ly.img.ubq/shapes/polygon` * `//ly.img.ubq/shapes/star` * `//ly.img.ubq/vector_path` ## **UI Configuration**[#](#ui-configuration) The configuration options for the legacy blocks have also been removed under `config.ui.elements.blocks` and a new configuration option for the `ly.img.ubq/graphic` block type have been introduced which will then define which UI controls to enable for graphic blocks (crop, filters, adjustments, effects, blur). This new configuration option follows the same structure as before. Here is a list of the deprecated block configuration options: * `//ly.img.ubq/image` * `//ly.img.ubq/fill/video` * `//ly.img.ubq/shapes/rect` * `//ly.img.ubq/shapes/line` * `//ly.img.ubq/shapes/star` * `//ly.img.ubq/shapes/polygon` * `//ly.img.ubq/shapes/ellipse` * `//ly.img.ubq/vector_path` ## Translations[#](#translations) Some of the translation keys related to Scopes and Placeholder-Settings have been also updated: * Removed the following keys: * `scope.content.replace` * `scope.design.arrange` * `scope.design.style` * Renamed the following keys: * `scope.design.arrange.flip` is now `scope.layer.flip` * `scope.design.arrange.move` is now `scope.layer.move` * `scope.design.arrange.resize` is now `scope.layer.resize` * `scope.design.arrange.rotate` is now `scope.layer.rotate` * Added the following keys: * `component.placeholder.appearance.description` * `component.placeholder.appearance` * `component.placeholder.arrange.description` * `component.placeholder.arrange` * `component.placeholder.disableAll` * `component.placeholder.enableAll` * `component.placeholder.fill.description` * `component.placeholder.fill` * `component.placeholder.general.description` * `component.placeholder.general` * `component.placeholder.shape.description` * `component.placeholder.shape` * `component.placeholder.stroke.description` * `component.placeholder.stroke` * `component.placeholder.text.description` * `component.placeholder.text` * `scope.appearance.adjustments` * `scope.appearance.blur` * `scope.appearance.effect` * `scope.appearance.filter` * `scope.appearance.shadow` * `scope.fill.change` * `scope.layer.blendMode` * `scope.layer.opacity` * `scope.shape.change` * `scope.stroke.change` * `scope.text.character` * `scope.text.edit` ## **Types and API Signatures**[#](#types-and-api-signatures) To improve the type safety of our APIs, we have moved away from using the `DesignBlockType` enum and replaced with a set of types. Those changes have affected the following APIs: * `CESDK.engine.block.create()` * `CESDK.engine.block.createFill()` * `CESDK.engine.block.createEffect()` * `CESDK.engine.block.createBlur()` * `CESDK.engine.block.findByType()` * `CESDK.engine.block.getType()` **Note** The `create`, `findByType`, and `getType` APIs will no longer accept the IDs of the deprecated legacy blocks and will throw an error when those are passed ## **Code Examples**[#](#code-examples) This section will show some code examples of the breaking changes and how it would look like after migrating. ``` /** Block Creation */ // Creating an Image before migrationconst image = cesdk.engine.block.create('image');cesdk.engine.block.setString( image, 'image/imageFileURI', 'https://domain.com/link-to-image.jpg',); // Creating an Image after migrationconst block = cesdk.engine.block.create('graphic');const rectShape = cesdk.engine.block.createShape('rect');const imageFill = cesdk.engine.block.createFill('image');cesdk.engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://domain.com/link-to-image.jpg',);cesdk.engine.block.setShape(block, rectShape);cesdk.engine.block.setFill(block, imageFill);cesdk.engine.block.setKind(block, 'image'); // Creating a star shape before migrationconst star = cesdk.engine.block.create('shapes/star');cesdk.engine.block.setInt(star, 'shapes/star/points', 8); // Creating a star shape after migrationconst block = cesdk.engine.block.create('graphic');const starShape = cesdk.engine.block.createShape('star');const colorFill = cesdk.engine.block.createFill('color');cesdk.engine.block.setInt(starShape, 'shape/star/points', 8);cesdk.engine.block.setShape(block, starShape);cesdk.engine.block.setFill(block, colorFill);cesdk.engine.block.setKind(block, 'shape'); // Creating a sticker before migrationconst sticker = cesdk.engine.block.create('sticker');cesdk.engine.setString( sticker, 'sticker/imageFileURI', 'https://domain.com/link-to-sticker.png',); // Creating a sticker after migrationconst block = cesdk.engine.block.create('graphic');const rectShape = cesdk.engine.block.createShape('rect');const imageFill = cesdk.engine.block.createFill('image');cesdk.engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://domain.com/link-to-sticker.png',);cesdk.engine.block.setShape(block, rectShape);cesdk.engine.block.setFill(block, imageFill);cesdk.engine.block.setKind(block, 'sticker'); /** Block Creation */ ``` ``` /** Block Exploration */ // Query all images in the scene before migrationconst images = cesdk.engine.block.findByType('image'); // Query all images in the scene after migrationconst images = cesdk.engine.block.findByType('graphic').filter(block => { const fill = cesdk.engine.block.getFill(block); return ( cesdk.engine.block.isValid(fill) && cesdk.engine.block.getType(fill) === '//ly.img.ubq/fill/image' );}); // Query all stickers in the scene before migrationconst stickers = cesdk.engine.block.findByType('sticker'); // Query all stickers in the scene after migrationconst stickers = cesdk.engine.block.findByKind('sticker'); // Query all Polygon shapes in the scene before migrationconst polygons = cesdk.engine.block.findByType('shapes/polygon'); // Query all Polygon shapes in the scene after migrationconst polygons = cesdk.engine.block.findByType('graphic').filter(block => { const shape = cesdk.engine.block.getShape(block); return ( cesdk.engine.block.isValid(shape) && cesdk.engine.block.getType(shape) === '//ly.img.ubq/shape/polygon' );}); /** Block Exploration */ ``` --- [Source](https:/img.ly/docs/cesdk/sveltekit/to-v1-13-d1ac5d) --- # To v1.13 In version v1.13, the way the CreativeEngine and CreativeEditor SDK are configured has changed. Several configuration options that were previously passed to `CreativeEngine.init()` or `CreativeEditor SDK.init()` have been removed or replaced. This document will explain the changes and describe the steps you can take to adapt them to your setup. #### CreativeEditorSDK initialization[#](#creativeeditorsdk-initialization) We are also introducing a new way of instantiating the CreativeEditorSDK, that provides more precise control over the initialization. Using `CreativeEditorSDK.create()`, you have the chance to configure the SDK before loading or creating a scene. This was not possible before. When using `CreativeEditorSDK.init()`, the SDK would create the initial scene before giving you the option to perform additional configuration via the API. The `create()` method will not create an initial scene for you. You need to do that yourself, using either the Scene API at `cesdk.editor.scene`, or one of the methods on the CreativeEditorSDK instance itself (`createDesignScene`, `createVideoScene`, `loadFromUrl`, `loadFromString`). ### Rationale[#](#rationale) Over time the number options you could pass into the call to `CreativeEngine.init({...config})` has grown quite a bit. Initially this was the only place where you could configure the behavior and settings of the CreativeEngine, but over the past year we introduced several new APIs. One of those APIs is the EditorAPI, which lets you [adjust](sveltekit/settings-970c98/) many [settings](sveltekit/settings-970c98/) at runtime, not just at the launch of the app. To improve consistency of our APIs, we decided to scale back the options available in the configuration object in favor of changing settings via the EditorAPI. The only options that remain are those that are strictly necessary for the initialization of the CreativeEngine, such as the `baseUrl` and `license`. These changes were performed with the Creative Engine in mind, but since the CreativeEditor SDK shares a lot of the same code, the changes described in this document also apply to the configuration for the CE.SDK. ### Changed configuration options[#](#changed-configuration-options) The following is a list of all configuration options that have been changed or removed, along with instructions on how to migrate the use of these options in your codebase: * `scene` options (`dpi`, `pixelScaleFactor`) have been removed. `scene/dpi` and `scene/pixelScaleFactor` can now be found as [properties on the scene in the BlockAPI](sveltekit/concepts/blocks-90241e/) . * `page` options have been removed. * `page.title.show` has been replaced with `cesdk.engine.editor.setSettingBool('page/title/show', enabled)` * `page.title.fontFileUri` has been replaced with `cesdk.engine.editor.setSettingString('page/title/fontFileUri', uri)` * `page.dimOutOfPageAreas` has been replaced with `cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', dimEnabled)` * `assetSources` have been removed. To add asset sources, use the AssetAPI at `cesdk.engine.asset`. * `preset.colors` has been removed as it was never used, previously. * `presets.colorPalettes` has been removed from CreativeEngine as it was not used. It has been moved to `ui.colorPalette` in the CESDK. * `presets.images` has been removed. To add assets and asset sources, use the AssetAPI at `cesdk.engine.asset`. * `presets.pageFormats` has been removed from the CreativeEngine as it was not used. Is has been moved to `ui.pageFormats` in the CESDK. Previously it was possible to mark a page format as default by setting `meta: {default: true}` in it. In `ui.pageFormats`, this has been simplified, to just `default: true`. * `variables` has been removed. Use the [VariableAPI](sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) instead. * `callbacks.log` has been moved to `logger`. Previously the logger callback would take a `Loglevel` enum as a second parameter. This enum has been removed. Instead you can define the loglevel with plain strings `'Warning' | 'Error' | 'Info'` ### Change initialization code[#](#change-initialization-code) To ensure your users perceive a consistent UI experience, settings that have been moved to api calls should be made immediately after initializing the CreativeEngine. For the Creative Editor SDK, use the `create()` method, instead of `init()` #### CreativeEngine[#](#creativeengine) ``` const engine = await CreativeEngine.init(config);// 1. Configure Engineengine.editor.setSettingEnum('doubleClickSelectionMode', 'Direct');// ... other settings // 2. Create/load sceneconst sceneId = await engine.scene.create(); // 3. Append Engine canvas element to the DOMdocument.getElementById('my-engine-container').append(engine.element); // ... your application code ``` #### CreativeEngine SDK[#](#creativeengine-sdk) ``` const cesdk = await CreativeEditorSDK.create('my-engine-container', config);// 1. Configure SDKcesdk.engine.asset.addSource(myAssetSource);// ... other settings // 2. Create/load sceneconst sceneId = await cesdk.createDesignScene(myPageFormats[pageFormatId]); // ... your application code ``` ### Fallback and warnings[#](#fallback-and-warnings) The CreativeEngine and CreativeEditor SDK still interpret the config object with its previous settings. If removed configuration options are detected during intialization, a warning is printed to the console, with individual instructions on how to migrate them. It is recommended to adjust your configuration as described above for the best compatibility with future developments and to get rid of these warnings. The fallback mechanism is not enabled for the new `CreativeEditorSDK.create()` method! Passing removed configuration options to `create()` will cause that option to be ignored and an error will be printed to the console. ### CreativeEngine Typescript definitions[#](#creativeengine-typescript-definitions) The more complex parts of our configuration (such as the page format definitions) were previously exporting type definitions under the `ConfigTypes` namespace in the CreativeEngine package. This namespace and all the types in it have been removed or moved elsewhere. For now we still export `ConfigTypes`, but have marked it and its members as `@deprecated`. Most of them are not used at all anymore, the rest have been moved elsewhere: * `ConfigTypes.Color` can now be imported directly as `PaletteColor` * `ConfigTypes.TypefaceDefinition` can be imported directly, as `TypefaceDefinition`. * `ConfigTypes.PageFormatDefinition` can be imported directly as `PageFormatDefinition` (CE.SDK only). * `ConfigTypes.Logger` can be imported directly as `Logger` The `LogLevel` enum that was previously used by `Logger` has been replaced with a string union (`'Warning' | 'Error' | 'Info'`). ### CreativeEditorSDK Typescript definitions[#](#creativeeditorsdk-typescript-definitions) The CreativeEditor SDK package still _does_ export a `ConfigTypes` namespace. For use with the new `CreativeEditorSDK.create()`, we are offering a new type `CreateConfiguration`, which is lacking all of the removed keys instead of marking them as deprecated. ### Demo asset sources[#](#demo-asset-sources) When adding demo asset sources using `cesdk.addDemoAssetSources()`, or `engine.addDemoAssetSources()`, make sure to specify the correct scene mode. The installed demo asset sources vary between Design and Video modes. If you don’t specify a scene mode, `addDemoAssetSources()` will try to add the correct sources based on the current scene, and default to `'Design'`. If you call `addDemoAssetSources()` _without_ a scene mode, and _before_ loading or creating a video scene, the audio and video asset sources will not be added. --- [Source](https:/img.ly/docs/cesdk/sveltekit/to-v1-10-1ff469) --- # To v1.10 Version v1.10 introduced major changes to how and where engine and the UI store assets. This guide helps you navigate those changes and explains what you need to do to bring your integration up to speed. ## 1\. Scene Uploads are no longer serialized[#](#1-scene-uploads-are-no-longer-serialized) Image uploads are no longer stored in the scene and will not reappear upon scene load. To offer specific assets in your editor, configure and [add an asset source](sveltekit/serve-assets-b0827c/) containing the desired assets. ## 2\. Deprecating Extensions[#](#2-deprecating-extensions) Starting with `v1.10` we fully embrace [Asset Sources](sveltekit/import-media/from-remote-source/unsplash-8f31f0/) as our standard interface for asset management. We’re deprecating extension packs, previously stored in `/assets/extensions` and indexed via `manifest.json` files. **Fonts are not affected by this deprecation yet, but will receive the same treatment in an upcoming version.** We’ll deprecate the `config.extensions` field for `CreativeEditorSDK`. As part of this deprecation, we’ll **no longer ship** the following packs in the `/assets/extensions` directory in our `npm` packages: * `ly.img.cesdk.images.samples` * `ly.img.cesdk.shapes.default` * `ly.img.cesdk.stickers.doodle` * `ly.img.cesdk.stickers.emoji` * `ly.img.cesdk.stickers.emoticons` * `ly.img.cesdk.stickers.hand` * `ly.img.cesdk.vectorpaths` * `ly.img.cesdk.vectorpaths.abstract` To keep offering the contained assets in your deployment, use our new [convenience functions](#making-use-of-default-and-demo-asset-sources) to instantiate asset sources holding these assets. If you have existing scenes where an asset from an extension pack might be included, you must make sure you’re still serving the corresponding files from your baseURL, so that `/extensions/…` paths still resolve properly. You can acquire a copy of the extension packs shipped in `v1.9.2` [from our CDN](https://cdn.img.ly/packages/imgly/cesdk-engine/1.9.2/assets/extensions.zip). Otherwise your scenes will **render missing asset alerts**. ### 2.1 Making use of Default and Demo Asset Sources[#](#21-making-use-of-default-and-demo-asset-sources) We still want to offer a package, that has all batteries included and quickly gets you up to speed. To do so, we introduced two new convenience functions, that can be used to add a set of predefined asset sources to your integration: #### `addDefaultAssetSources`[#](#adddefaultassetsources) Adds a set of asset sources containing our default assets. These assets may be used in production and [served from your own servers](sveltekit/serve-assets-b0827c/) . The assets are parsed from the IMG.LY CDN at `{{base_url}}//content.json`, where `base_url` defaults to `https://cdn.img.ly/assets/v1`. Each source is created via `addLocalSource` and populated with the parsed assets. You can specify your own `base_url` or exclude certain source IDs. The following sources are added: | ID | Description | | --- | --- | | `'ly.img.sticker'` | Various stickers | | `'ly.img.vectorpath'` | Shapes and arrows | | `'ly.img.filter.lut'` | LUT effects of various kinds. | | `'ly.img.filter.duotone'` | Color effects of various kinds. | #### `addDemoAssetSources`[#](#adddemoassetsources) Registers a set of demo asset sources containing our example assets. These are not to meant to be used in your production code. The assets are parsed from the IMG.LY CDN at `https://cdn.img.ly/assets/demo/v1`. The `sceneMode` and `withUploadAssetSources` parameters control whether audio/video and upload sources are added. The following sources are added: | ID | Description | | --- | --- | | `'ly.img.image'` | Sample images | | `'ly.img.image.upload'` | Demo source to upload image assets | | `'ly.img.audio'` | Sample audios | | `'ly.img.audio.upload'` | Demo source to upload audio assets | | `'ly.img.video'` | Sample audios | | `'ly.img.video.upload'` | Demo source to upload video assets | #### Modifying Default & Demo Sources[#](#modifying-default--demo-sources) After registration you can freely modify the contained assets using the Asset APIs. You can add or remove entire asset sources or individual assets. #### Upload Asset Sources[#](#upload-asset-sources) The upload asset sources and library entries for video and audio were added to the default configuration from `addDefaultAssetSources`. If you have added these sources manually (like mentioned in our video docs) you can remove them now. ## 3\. AssetAPI Changes[#](#3-assetapi-changes) To further streamline interaction, the following breaking changes were made to the AssetAPI: * The `applyAsset` callbacks and `defaultApplyAsset` API now return an optional design block id in their callback if they created a new block. * `thumbUri` and `size` properties in `AssetDefinition` and `AssetResult` are now part of the `meta` property dictionary. * Values of the `blockType` asset meta property must now be design block type ids (e.g. `//ly.img.ubq/image`) ## 4\. A New Way to Add Images[#](#4-a-new-way-to-add-images) Instead of specifying additional images for the `CreativeEditorSDK` in `config.presets.images`, you should make use of `asset.addAsset` and add your images into the `ly.img.image` asset source. ## 5\. General API Changes[#](#5-general-api-changes) The `blockType` `meta` property for assets changed from `ly.img.` to fully qualified block types: E.g. `'ly.img.image'` now needs to be `'//ly.img.ubq/image'`. As we’re starting to apply the ‘fill’ concept to more parts of the interface, we deprecated various fill color related APIs: * Deprecated `hasFillColor`, use `hasFill` and query `block.getEnum(id, 'fill/type')` for `Solid` type instead. * Deprecated `get/setFillColorRGBA`, use `setFillSolidColor`instead.. * Deprecated `isFillColorEnabled`, use `isFillEnabled` instead. * Deprecated `setFillType` and `setFillGradientType`, use `createFill`, e.g., with type ‘color’ and then apply the fill block with `setFill` to the block instead. If the block has a fill, it should be removed with `getFill` and `destroy`. * Deprecated `getFillType` and `getFillGradientType`, query `block.getEnum(id, 'fill/type')` and `block.getEnum(id, 'fill/gradient/type')` instead instead * Deprecated `add/removeFillGradientColorStop` and `get/setFillGradientColorStops`. * Deprecated `get/setFillGradientControlPointX/Y`, use `block.getFloat(fill, keypath)` and `block.setFloat(fill, keypath, value)` with key paths ‘fill/gradient/linear/startPointX/Y’, ‘fill/gradient/radial/centerPointX/Y’, and ‘fill/gradient/conical/centerPointX/Y’ instead. * Deprecated `get/setFillGradientRadius`, use `block.getFloat(fill, 'fill/gradient/radial/radius')` and `block.setFloat(fill, 'fill/gradient/radial/radius', value)` instead.” `camera/clearColor` property was replaced it with a global `clearColor` setting to allow controlling the clear color before loading a scene. Properties affecting playback that existed on both `Audio` and `VideoFill` where moved to a common `playback/` namespace: * `'fill/video/looping'` and `'audio/looping'` are now `'playback/looping'` * `'fill/video/volume'` and `'audio/volume'` are now `'playback/volume'` * `'fill/video/muted'` and `'audio/muted'` are now `'playback/muted'` --- [Source](https:/img.ly/docs/cesdk/sveltekit/text-8a993a) --- # Text --- [Source](https:/img.ly/docs/cesdk/sveltekit/stickers-3d4e5f) --- # Create and Edit Stickers --- [Source](https:/img.ly/docs/cesdk/sveltekit/shapes-9f1b2c) --- # Create and Edit Shapes --- [Source](https:/img.ly/docs/cesdk/sveltekit/serve-assets-b0827c) --- # Serve Assets Configure CE.SDK to load engine and content assets from your own servers instead of the IMG.LY CDN for production deployments. Self-hosting assets is required for production use. The IMG.LY CDN is intended for development and prototyping only—you’ll see a console warning when using the default CDN configuration. Hosting assets yourself gives you control over performance, availability, and compliance requirements. [Download Assets (v1.67.0)](https://cdn.img.ly/packages/imgly/cesdk-js/1.67.0/imgly-assets.zip) This guide covers the asset categories CE.SDK uses, how to configure `baseURL` and asset source paths, and how to automate asset updates during SDK upgrades. ## Quick Start[#](#quick-start) Download and extract the essential assets for your SDK version: Terminal window ``` --- # Download assets for current SDK versioncurl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.67.0/imgly-assets.zip --- # Create versioned directory and extract assetsmkdir -p public/cesdk/1.67.0unzip imgly-assets.zip -d public/cesdk/1.67.0/rm imgly-assets.zip ``` Then configure CE.SDK to use your self-hosted assets: ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { license: 'YOUR_CESDK_LICENSE_KEY', baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`,}; CreativeEditorSDK.create(container, config).then(cesdk => { cesdk.addDefaultAssetSources({ baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`, });}); ``` **Versioned paths recommended**: Using version-specific paths like `/cesdk/${CreativeEditorSDK.version}/` allows you to run multiple SDK versions in parallel, simplifies rollbacks, and ensures clean cache invalidation during upgrades. ## Understanding CE.SDK Assets[#](#understanding-cesdk-assets) CE.SDK assets are distributed in an `imgly-assets.zip` file available for download from the IMG.LY CDN. Understanding what’s in this archive helps you decide which assets to host and how to keep them updated. ### Asset Categories[#](#asset-categories) The ZIP file contains directories organized by function: | Directory | Contents | Version-Locked? | Required? | | --- | --- | --- | --- | | `core/` | WASM engine files (`.wasm`, `.data`, `worker-host.js`) | **Yes** | **Yes** | | `ui/` | UI resources (audio waveform, fonts, stylesheets) | **Yes** | **Yes** | | `emoji/` | Emoji assets | **Yes** | **Yes** | | `fonts/` | System fonts | **Yes** | **Yes** | | `i18n/` | Translations | **Yes** | No (bundled in SDK) | | `ly.img.sticker/` | Stickers | No | If using default assets | | `ly.img.sticker.misc/` | Additional stickers | No | If using default assets | | `ly.img.vectorpath/` | Shapes and arrows | No | If using default assets | | `ly.img.typeface/` | Font definitions | No | If using default assets | | `ly.img.filter.lut/` | LUT filter effects | No | If using default assets | | `ly.img.filter.duotone/` | Duotone effects | No | If using default assets | | `ly.img.effect/` | Visual effects | No | If using default assets | | `ly.img.blur/` | Blur presets | No | If using default assets | | `ly.img.colors.defaultPalette/` | Color palettes | No | If using default assets | | `ly.img.crop.presets/` | Crop aspect ratios | No | If using default assets | | `ly.img.page.presets/` | Page format presets | No | If using default assets | | `ly.img.page.presets.video/` | Video page presets | No | If using default assets | | `ly.img.captionPresets/` | Caption formatting presets | No | If using default assets | | `ly.img.animation/` | Animation presets | No | If using default assets | | `ly.img.animation.text/` | Text animation presets | No | If using default assets | | `ly.img.image/` | Sample images (demo content) | No | No | | `ly.img.video/` | Sample videos (demo content) | No | No | | `ly.img.audio/` | Sample audio (demo content) | No | No | | `ly.img.template/` | Design templates (demo content) | No | No | | `ly.img.video.template/` | Video templates (demo content) | No | No | | `ly.img.textComponents/` | Text components (demo content) | No | No | For most integrations, you need `core/`, `ui/`, `emoji/`, `fonts/`, and the `ly.img.*` asset sources you use. ### Version-Locked vs. Independent Assets[#](#version-locked-vs-independent-assets) **Version-locked assets** (`core/`, `ui/`, `i18n/`) must match your SDK version. Mismatched versions cause load errors—the engine will fail to initialize if core files don’t match. **Independent assets** (`ly.img.*` directories) can be updated separately. Configure these via `addDefaultAssetSources({ baseURL })` and `addDemoAssetSources({ baseURL })`. Check the changelog when upgrading to see if asset versions have changed. ### Default Asset Sources[#](#default-asset-sources) Calling `addDefaultAssetSources()` registers these asset sources: * `ly.img.sticker` - Stickers * `ly.img.sticker.misc` - Additional stickers * `ly.img.vectorpath` - Shapes and arrows * `ly.img.typeface` - Font definitions * `ly.img.colors.defaultPalette` - Color palettes * `ly.img.filter.lut` - LUT effects * `ly.img.filter.duotone` - Duotone effects * `ly.img.effect` - Visual effects * `ly.img.blur` - Blur presets * `ly.img.crop.presets` - Crop aspect ratios * `ly.img.page.presets` - Page format presets * `ly.img.page.presets.video` - Video page presets * `ly.img.captionPresets` - Caption formatting * `ly.img.animation` - Animation presets * `ly.img.animation.text` - Text animation presets ### Demo Asset Sources[#](#demo-asset-sources) Calling `addDemoAssetSources()` registers sample content sources for development: * `ly.img.image` - Sample images * `ly.img.video` - Sample videos * `ly.img.audio` - Sample audio * `ly.img.template` - Design templates * `ly.img.video.template` - Video templates * `ly.img.textComponents` - Text components * `ly.img.image.upload`, `ly.img.video.upload`, `ly.img.audio.upload` - Upload sources These are intended for development and prototyping—replace them with your own content in production. ## Configuration Options[#](#configuration-options) Browser configuration involves three settings: `baseURL`, `core.baseURL`, and the `baseURL` option for asset sources. ### Editor Configuration[#](#editor-configuration) Pass configuration to `CreativeEditorSDK.create()`: ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`, core: { baseURL: 'core/', },}; CreativeEditorSDK.create(container, config).then(cesdk => { // Editor initialized with self-hosted assets}); ``` **`baseURL`** — Base path for all engine assets. Can be an absolute URL or a relative path. Relative paths resolve against `window.location.href`. Defaults to the IMG.LY CDN. **`core.baseURL`** — Path to WASM files. Defaults to `core/` relative to `baseURL`. Usually you don’t need to change this unless hosting WASM files separately. ### Asset Sources Configuration[#](#asset-sources-configuration) Configure asset sources after initializing the editor: ``` CreativeEditorSDK.create(container, config).then(cesdk => { // Point default assets to your server cesdk.addDefaultAssetSources({ baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`, }); // Optional: Add demo assets for development cesdk.addDemoAssetSources({ baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`, });}); ``` The `baseURL` for asset sources must be an absolute URL. The engine looks up asset definitions at `{baseURL}/{sourceId}/content.json` and references files like `{baseURL}/{sourceId}/images/example.png`. ## Excluding Unused Asset Sources[#](#excluding-unused-asset-sources) If you only need a subset of default assets, use `excludeAssetSourceIds` to skip loading sources you don’t use: ``` cesdk.addDefaultAssetSources({ baseURL: `https://cdn.yourdomain.com/cesdk/${CreativeEditorSDK.version}/`, excludeAssetSourceIds: ['ly.img.sticker', 'ly.img.page.presets.video'],}); ``` This reduces initial load time by not fetching unused asset definitions. ## Troubleshooting[#](#troubleshooting) ### WASM Load Errors[#](#wasm-load-errors) If the engine fails to initialize with missing `.wasm` or `.data` errors, verify: 1. The assets ZIP version matches your SDK version 2. The `core.baseURL` points to the correct directory 3. Your server returns correct MIME types for `.wasm` files (`application/wasm`) ### 404 Errors for Assets[#](#404-errors-for-assets) If the console shows 404 errors for `content.json` files: 1. Verify the `baseURL` in `addDefaultAssetSources()` is correct 2. Check that asset directories exist at the expected paths 3. Configure CORS headers if serving assets from a different domain ### CDN Warning in Console[#](#cdn-warning-in-console) The warning “You’re using the IMG.LY CDN” appears when using default configuration. Set `baseURL` in your config to use self-hosted assets and remove the warning. ## API Reference[#](#api-reference) | Method/Config | Purpose | | --- | --- | | `CreativeEditorSDK.create(container, config)` | Initialize editor with configuration | | `config.baseURL` | Base path for all engine assets | | `config.core.baseURL` | Path to WASM/core files (relative to baseURL) | | `cesdk.addDefaultAssetSources(options)` | Register default asset sources | | `cesdk.addDemoAssetSources(options)` | Register demo asset sources | | `CreativeEditorSDK.version` | Get current SDK version string | --- [Source](https:/img.ly/docs/cesdk/sveltekit/settings-970c98) --- # Settings Settings are configuration values that control CE.SDK editor behavior without modifying scene content. They are accessed via key paths (e.g., `page/title/show`) and support multiple types including Bool, Int, Float, String, Color, and Enum. Use settings to customize visual appearance, interaction behavior, resource paths, and feature toggles. ## When to Change Settings[#](#when-to-change-settings) Settings can be changed at any time after engine initialization, but they fall into two categories based on when they should be modified. ### Initialization-Only Settings[#](#initialization-only-settings) Some settings should only be set once during or immediately after engine initialization. Changing them later may have no effect or cause unexpected behavior: * `license` - The license key validates on startup; changing it later has no effect * `basePath` - The base URL for resolving assets; should be set before loading any resources * `defaultFontFileUri` / `defaultEmojiFontFileUri` - Default fonts used when no font is specified; should be set early * `maxImageSize` - Memory limit for images; changing mid-session won’t affect already-loaded images ### Runtime Settings[#](#runtime-settings) Most settings can be changed at any time and take effect immediately: * **Visual appearance**: `highlightColor`, `snappingGuideColor`, `cropOverlayColor`, `page/title/color` * **Interaction behavior**: `doubleClickToCropEnabled`, `doubleClickSelectionMode`, `touch/*`, `mouse/*` * **Control gizmos**: `controlGizmo/showResizeHandles`, `controlGizmo/showRotateHandles` * **Page display**: `page/title/show`, `page/dimOutOfPageAreas`, `page/title/separator` * **Feature toggles**: `blockAnimations/enabled`, `useSystemFontFallback`, `forceSystemEmojis` * **Snapping thresholds**: `positionSnappingThreshold`, `rotationSnappingThreshold` These runtime settings are commonly used to adapt the editor UI to different modes, user preferences, or workflow states. ## Using the Settings API[#](#using-the-settings-api) ### Discover Available Settings[#](#discover-available-settings) Use `findAllSettings()` to get a list of all available settings: ``` const allSettings = engine.editor.findAllSettings(); ``` ### Read and Write Settings[#](#read-and-write-settings) Use `getSetting()` and `setSetting()` to read and write settings. The API automatically handles the correct type based on the setting key: ``` // Boolean settingsengine.editor.setSetting('doubleClickToCropEnabled', true);const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); // Number settingsengine.editor.setSetting('maxImageSize', 4096);engine.editor.setSetting('positionSnappingThreshold', 2.0); // String settingsengine.editor.setSetting('page/title/separator', ' | '); // Color settingsengine.editor.setSetting('highlightColor', { r: 1, g: 0, b: 1, a: 1 }); // Enum settingsengine.editor.setSetting('doubleClickSelectionMode', 'Direct');const enumOptions = engine.editor.getSettingEnumOptions( 'doubleClickSelectionMode',); ``` ### Subscribe to Settings Changes[#](#subscribe-to-settings-changes) React to settings changes using `onSettingsChanged()`: ``` const unsubscribe = engine.editor.onSettingsChanged(() => { console.log('Editor settings have changed');}); // Later, to stop listening:unsubscribe(); ``` ### Role Management[#](#role-management) Roles apply predefined defaults for scopes and settings: ``` // Get current roleconst currentRole = engine.editor.getRole(); // Set role and apply role-dependent defaultsengine.editor.setRole('Adopter'); // React to role changesconst unsubscribe = engine.editor.onRoleChanged(role => { console.log('Role changed to:', role);}); ``` ## Available Settings[#](#available-settings) ## Settings Type[#](#settings-type) Editor Settings This section describes the all available editor settings. | Property | Type | Default | Description | | --- | --- | --- | --- | | `alwaysHighlightPlaceholders` | `Bool` | `false` | Whether placeholder elements should always be highlighted in the scene. | | `basePath` | `String` | `"some-base-path"` | The root directory to be used when resolving relative paths or when accessing `bundle://` URIs on platforms that don’t offer bundles. | | `blockAnimations/enabled` | `Bool` | `true` | Whether animations should be enabled or not. | | `borderOutlineColor` | `Color` | `{"r":0,"g":0,"b":0,"a":1}` | The border outline color. | | `camera/clamping/overshootMode` | `Enum` | `"Reverse"` | Controls what happens when the clamp area is smaller than the viewport. Center: the clamp area is centered in the viewport. Reverse: the clamp area can move inside the viewport until it hits the edges., Possible values: `"Center"`, `"Reverse"` | | `clampThumbnailTextureSizes` | `Bool` | `true` | Whether to clamp thumbnail texture sizes to reduce memory usage. | | `clearColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0}` | The color with which the render target is cleared before scenes get rendered. Only used while renderMode == RenderMode::Preview. | | `colorMaskingSettings/maskColor` | `Color` | `{"r":1,"g":1,"b":1,"a":1}` | The current mask color. Defaults to white, which disabled all masking. | | `colorMaskingSettings/secondPass` | `Bool` | `false` | Whether color masking should render the second pass. | | `controlGizmo/blockScaleDownLimit` | `Float` | `8` | Scale-down limit for blocks in screen pixels when scaling them with the gizmos or with touch gestures. The limit is ensured to be at least 0.1 to prevent scaling to size zero. | | `controlGizmo/showCropHandles` | `Bool` | `true` | Whether or not to show the handles to adjust the crop area during crop mode. | | `controlGizmo/showCropScaleHandles` | `Bool` | `true` | Whether or not to display the outer handles that scale the full image during crop. | | `controlGizmo/showMoveHandles` | `Bool` | `true` | Whether or not to show the move handles. | | `controlGizmo/showResizeHandles` | `Bool` | `true` | Whether or not to display the non-proportional resize handles (edge handles). | | `controlGizmo/showRotateHandles` | `Bool` | `true` | Whether or not to show the rotation handles. | | `controlGizmo/showScaleHandles` | `Bool` | `true` | Whether or not to display the proportional scale handles (corner handles). | | `cropOverlayColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0.39}` | Color of the dimming overlay that’s added in crop mode. | | `defaultEmojiFontFileUri` | `String` | `"https://cdn.img.ly/assets/v4/emoji/NotoColorEmoji.ttf"` | URI of default font file for emojis. | | `defaultFontFileUri` | `String` | `"bundle://ly.img.cesdk/fonts/imgly_font_inter_semibold.otf"` | URI of default font file. This font file is the default everywhere unless overriden in specific settings. | | `doubleClickSelectionMode` | `Enum` | `"Hierarchical"` | The current mode of selection on double-click., Possible values: `"Direct"`, `"Hierarchical"` | | `doubleClickToCropEnabled` | `Bool` | `true` | Whether double clicking on an image element should switch into the crop editing mode. | | `errorStateColor` | `Color` | `{"r":1,"g":1,"b":1,"a":0.7}` | The error state color for design blocks. | | `fallbackFontUri` | `String` | `""` | The URI of the fallback font to use for text that is missing certain characters. | | `forceSystemEmojis` | `Bool` | `true` | Whether the system emojis should be used for text. | | `handleFillColor` | `Color` | `{"r":1,"g":1,"b":1,"a":1}` | The fill color for handles. | | `highlightColor` | `Color` | `{"r":0.2,"g":0.333,"b":1,"a":1}` | Color of the selection, hover, and group frames and for the handle outlines for non-placeholder elements. | | `license` | `String` | `""` | A valid license string in JWT format. | | `maxImageSize` | `Int` | `4096` | The maximum size at which images are loaded into the engine. Images that exceed this size are down-scaled prior to rendering. Reducing this size further reduces the memory footprint. | | `mouse/enableScroll` | `Bool` | `true` | Whether the engine processes mouse scroll events. | | `mouse/enableZoom` | `Bool` | `true` | Whether the engine processes mouse zoom events. | | `page/allowCropInteraction` | `Bool` | `true` | If crop interaction (by handles and gestures) should be possible when the enabled arrangements allow resizing. | | `page/allowMoveInteraction` | `Bool` | `false` | If move interaction (by handles and gestures) should be possible when the enabled arrangements allow moving and if the page layout is not controlled by the scene. | | `page/allowResizeInteraction` | `Bool` | `false` | If a resize interaction (by handles and gestures) should be possible when the enabled arrangements allow resizing. | | `page/allowRotateInteraction` | `Bool` | `false` | If rotation interaction (by handles and gestures) should be possible when the enabled arrangements allow rotation and if the page layout is not controlled by the scene. | | `page/dimOutOfPageAreas` | `Bool` | `true` | Whether the opacity of the region outside of all pages should be reduced. | | `page/innerBorderColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0}` | Color of the inner frame around the page. | | `page/marginFillColor` | `Color` | `{"r":0.79,"g":0.12,"b":0.4,"a":0.1}` | Color filled into the bleed margins of pages. | | `page/marginFrameColor` | `Color` | `{"r":0.79,"g":0.12,"b":0.4,"a":0.15}` | Color of frame around the bleed margin area of the pages. | | `page/moveChildrenWhenCroppingFill` | `Bool` | `false` | Whether the children of the page should be transformed to match their old position relative to the page fill when a page fill is cropped. | | `page/outerBorderColor` | `Color` | `{"r":1,"g":1,"b":1,"a":0}` | Color of the outer frame around the page. | | `page/restrictResizeInteractionToFixedAspectRatio` | `Bool` | `false` | If the resize interaction should be restricted to fixed aspect ratio resizing. | | `page/selectWhenNoBlocksSelected` | `Bool` | `false` | Whether the page should automatically be selected when no blocks are selected. | | `page/title/appendPageName` | `Bool` | `true` | Whether to append the page name to the title if a page name is set even if the name is not specified in the template or the template is not shown. | | `page/title/color` | `Color` | `{"r":1,"g":1,"b":1,"a":1}` | Color of page titles visible in preview mode, can change with different themes. | | `page/title/fontFileUri` | `String` | `"bundle://ly.img.cesdk/fonts/imgly_font_inter_semibold.otf"` | Font of page titles. | | `page/title/separator` | `String` | `"-"` | Title label separator between the page number and the page name. | | `page/title/show` | `Bool` | `true` | Whether to show titles above each page. | | `page/title/showOnSinglePage` | `Bool` | `true` | Whether to hide the the page title when only a single page is given. | | `page/title/showPageTitleTemplate` | `Bool` | `true` | Whether to include the default page title from `page.titleTemplate`. | | `pageHighlightColor` | `Color` | `{"r":0.5,"g":0.5,"b":0.5,"a":0.2}` | Color of the outline of each page. | | `placeholderControls/showButton` | `Bool` | `true` | Show the placeholder button. | | `placeholderControls/showOverlay` | `Bool` | `true` | Show the overlay pattern. | | `placeholderHighlightColor` | `Color` | `{"r":0.77,"g":0.06,"b":0.95,"a":1}` | Color of the selection, hover, and group frames and for the handle outlines for placeholder elements. | | `positionSnappingThreshold` | `Float` | `4` | Position snapping threshold in screen space. | | `progressColor` | `Color` | `{"r":1,"g":1,"b":1,"a":0.7}` | The progress indicator color. | | `renderTextCursorAndSelectionInEngine` | `Bool` | `true` | Whether the engine should render the text cursor and selection highlights during text editing. This can be set to false, if the platform wants to perform this rendering itself. | | `rotationSnappingGuideColor` | `Color` | `{"r":1,"g":0.004,"b":0.361,"a":1}` | Color of the rotation snapping guides. | | `rotationSnappingThreshold` | `Float` | `0.15` | Rotation snapping threshold in radians. | | `showBuildVersion` | `Bool` | `false` | Show the build version on the canvas. | | `snappingGuideColor` | `Color` | `{"r":1,"g":0.004,"b":0.361,"a":1}` | Color of the position snapping guides. | | `textVariableHighlightColor` | `Color` | `{"r":0.7,"g":0,"b":0.7,"a":1}` | Color of the text variable highlighting borders. | | `touch/dragStartCanSelect` | `Bool` | `true` | Whether dragging an element requires selecting it first. When not set, elements can be directly dragged. | | `touch/pinchAction` | `Enum` | `"Scale"` | The action to perform when a pinch gesture is performed., Possible values: `"None"`, `"Zoom"`, `"Scale"` | | `touch/rotateAction` | `Enum` | `"Rotate"` | Whether or not the two finger turn gesture can rotate selected elements., Possible values: `"None"`, `"Rotate"` | | `touch/singlePointPanning` | `Bool` | `true` | Whether or not dragging on the canvas should move the camera (scrolling). When not set, the scroll bars have to be used. | | `upload/supportedMimeTypes` | `String` | `""` | The MIME types supported for file uploads. | | `useSystemFontFallback` | `Bool` | `false` | Whether the IMG.LY hosted font fallback is used for fonts that are missing certain characters, covering most of the unicode range. | | `web/fetchCredentials` | `String` | `"same-origin"` | The credentials mode to use for fetch requests (same-origin, include, or omit). | ### GlobalScopes[#](#globalscopes) | Member | Type | Default | Description | | --- | --- | --- | --- | | text | `Scope` | `Allow` | Scope for text operations. | | fill | `Scope` | `Allow` | Scope for fill operations. | | stroke | `Scope` | `Allow` | Scope for stroke operations. | | shape | `Scope` | `Allow` | Scope for shape operations. | | layer | `Scope` | `Allow` | Scope for layer operations. | | appearance | `Scope` | `Allow` | Scope for appearance operations. | | lifecycle | `Scope` | `Allow` | Scope for lifecycle operations. | | editor | `Scope` | `Allow` | Scope for editor operations. | --- [Source](https:/img.ly/docs/cesdk/sveltekit/security-777bfd) --- # Security This document provides a comprehensive overview of CE.SDK’s security practices, focusing on data handling, privacy, and our commitment to maintaining the highest standards of security for our customers and their end users. ## Key Security Features[#](#key-security-features) * **Client-Side Processing**: All image and design processing occurs directly on the user’s device or your servers, not on our servers * **No Data Transmission**: Your content (e.g. images, designs, templates, videos, audio, etc.) is never uploaded to or processed on IMG.LY servers * **Minimal Data Collection**: We only collect device identifiers and count exports for licensing purposes * **GDPR Compliance**: Our data collection practices adhere to GDPR regulations * **Secure Licensing**: Enterprise licenses are secured with RSA SHA256 encryption ## Data Protection & Access Controls[#](#data-protection--access-controls) ### Data Collection[#](#data-collection) CE.SDK requires minimal data to provide its services. The only potentially personally identifiable information (PII) collected includes device-specific identifiers such as `identifierForVendor` on iOS and `ANDROID_ID` on Android. These identifiers are: * Used solely for tracking monthly active users for our usage-based pricing models * Reset when the user reinstalls the app or resets their device * Collected under GDPR’s legitimate interest provision (no explicit consent required as they are necessary for our licensing system) Additionally, we track export operations for billing purposes in usage-based pricing models. For enterprise customers who prefer more accurate tracking, integrators can provide their own userID. This allows for more precise measurement of usage without requiring additional device identifiers. ### Data Storage & Encryption[#](#data-storage--encryption) **We do not collect or store user data beyond the device identifiers and export counts mentioned above.** Since CE.SDK operates entirely client-side: * All content processing happens on the user’s device * No images, designs, or user content is transmitted to IMG.LY servers * No content data is stored on IMG.LY infrastructure We use standard HTTPS (SSL/TLS) encryption for all communications between CE.SDK instances and our licensing backend. ### Access Controls[#](#access-controls) We are using established industry standard practices to handle sensitive customer data. Therefore access control concerns are minimized. The limited data we do handle is protected as follows: * Billing information is stored in Stripe and accessed only by members of our finance team and C-level executives * API keys and credentials are stored securely in 1Password or GitHub with granular access levels * All employees sign Confidentiality Agreements to protect customer information This refers to data of our direct customers, not their users or customers. ## Licensing System[#](#licensing-system) CE.SDK uses a licensing system that works as follows: 1. During instantiation, an API key is provided to the CE.SDK instance 2. This API key is held in memory (never stored permanently on the device) 3. The SDK validates the key with our licensing backend 4. Upon successful validation, the backend returns a temporary local license 5. This license is periodically refreshed to maintain valid usage For browser implementations, we protect licenses against misuse by pinning them to specific domains. For mobile applications, licenses are pinned to the application identifiers to prevent unauthorized use. For enterprise customers, we offer an alternative model: * A license file is passed directly to the instance * No communication with our licensing service is required * Licenses are secured using RSA SHA256 encryption ### CE.SDK Renderer[#](#cesdk-renderer) CE.SDK Renderer is a specialized variant of CE.SDK that consists of a native Linux binary bundled in a Docker container. It uses GPU acceleration and native code to render scenes and archives to various export formats. Due to bundled third-party codecs (mainly H.264 & H.265) and their associated patent requirements, CE.SDK Renderer implements additional licensing communication beyond the standard licensing handshake: 1. **Initial License Validation**: The tool performs the standard license validation with our licensing backend 2. **Periodic Heartbeats**: After successful validation, it sends periodic heartbeats to our licensing backend to track the number of active instances 3. **Instance Limits**: We limit the maximum number of active instances per license based on the settings in your dashboard 4. **Activation Control**: If the instance limit is exceeded, further activations (launches) of the tool will fail with a descriptive error message This additional communication allows us to ensure compliance with codec licensing requirements while providing transparent usage tracking for your organization. As with all CE.SDK products, no user data (images, videos, designs, or other content) is transmitted to IMG.LY servers - only device identifiers and instance counts are collected for licensing purposes. ## Security Considerations for User Input[#](#security-considerations-for-user-input) As CE.SDK deals primarily with arbitrary user input, we’ve implemented specific security measures to handle data safely: * The CreativeEngine reads files from external resources to fetch images, fonts, structured data, and other sources for designs. These reads are safeguarded by platform-specific default measures. * The engine never loads executable code or attempts to execute any data acquired from dynamic content. It generally relies on provided mime types to decode image data or falls back to byte-level inspection to choose the appropriate decoder. * For data writing operations, we provide a callback that returns a pointer to the to-be-written data. The engine itself never unconditionally writes to an externally defined path. If it writes to files directly, these are part of internal directories and can’t be modified externally. * Generated PDFs may have original image files embedded if the image was not altered via effects or blurs and the `exportPdfWithHighCompatibility` option was **not** enabled. This means a malicious image file could theoretically be included in the exported PDF. * Inline text-editing allows arbitrary input of strings by users. The engine uses platform-specific default inputs and APIs and doesn’t apply additional sanitization. The acquired strings are stored and used exclusively for text rendering - they are neither executed nor used for file operations. ## Security Infrastructure[#](#security-infrastructure) ### Vulnerability Management[#](#vulnerability-management) We take a proactive approach to security vulnerability management: * We use GitHub to track dependency vulnerabilities * We regularly update affected dependencies * We don’t maintain a private network, eliminating network vulnerability concerns in that context * We don’t manually maintain servers or infrastructure, as we don’t have live systems beyond those required for licensing * For storage and licensing, we use virtual instances in Google Cloud which are managed by the cloud provider * All security-related fixes are published in our public changelog at [https://img.ly/docs/cesdk/changelog/](https://img.ly/docs/cesdk/changelog/) ### Security Development Practices[#](#security-development-practices) Our development practices emphasize security: * We rely on established libraries with proven security track records * We don’t directly process sensitive user data in our code * Secrets (auth tokens, passwords, API credentials, certificates) are stored in GitHub or 1Password with granular access levels * We use RSA SHA256 encryption for our enterprise licenses * We rely on platform-standard SSL implementations for HTTPS communications ### API Key Management[#](#api-key-management) API keys for CE.SDK are handled securely: * Keys are passed during instantiation and held in memory only * Keys are never stored permanently on client devices * For web implementation, keys are pinned to specific domains to prevent unauthorized use * Enterprise licenses use a file-based approach that doesn’t require API key validation ## Compliance[#](#compliance) IMG.LY complies with the General Data Protection Regulation (GDPR) in all our operations, including CE.SDK. Our Privacy Policy is publicly available at [https://img.ly/privacy-policy](https://img.ly/privacy-policy). Our client-side approach to content processing significantly reduces privacy and compliance concerns, as user content never leaves their device environment for processing. ## FAQ[#](#faq) ### Does CE.SDK upload my images or designs to IMG.LY servers?[#](#does-cesdk-upload-my-images-or-designs-to-imgly-servers) No. CE.SDK processes all content locally on the user’s device. Your images, designs, and other content are never transmitted to IMG.LY servers. ### What data does IMG.LY collect through CE.SDK?[#](#what-data-does-imgly-collect-through-cesdk) CE.SDK only collects device identifiers (such as identifierForVendor on iOS or ANDROID\_ID on Android) for licensing purposes and export counts. No user content or personal information is collected. ### How does IMG.LY protect API keys?[#](#how-does-imgly-protect-api-keys) API keys are never stored permanently; they are held in memory during SDK operation. For web implementations, keys are pinned to specific domains to prevent unauthorized use. ### Has IMG.LY experienced any security breaches?[#](#has-imgly-experienced-any-security-breaches) No, IMG.LY has not been involved in any cybersecurity breaches in the last 12 months. ### Does IMG.LY conduct security audits?[#](#does-imgly-conduct-security-audits) As we don’t store customer data directly, but rely on third parties to do so, we focus our security efforts on dependency tracking and vulnerability management through GitHub’s security features. We don’t conduct security audits. ## Additional Information[#](#additional-information) For more detailed information about our data collection practices, please refer to our Data Privacy and Retention information below. Should you have any additional questions regarding security practices or require more information, please contact our team at [support@img.ly](mailto:support@img.ly). ## Data Privacy and Retention[#](#data-privacy-and-retention) At IMG.LY, we prioritize your data privacy and ensure that apart from a minimal contractually stipulated set of interactions with our servers all other operations take place on your local device. Below is an overview of our data privacy and retention policies: ### **Data Processing**[#](#data-processing) All data processed by CE.SDK remains strictly on your device. We do not transfer your data to our servers for processing. This means that operations such as rendering, editing, and other in-app functionalities happen entirely locally, ensuring that sensitive project or personal data stays with you. ### **Data Retention**[#](#data-retention) We do not store any project-related data on our servers. Since all data operations occur locally, no information about your edits, images, or video content is retained by CE.SDK. The only data that interacts with our servers is related to license validation and telemetry related to usage tied to your pricing plan. ### **License Validation**[#](#license-validation) CE.SDK performs a license validation check with our servers once upon initialization to validate the software license being used. This interaction is minimal and does not involve the transfer of any personal, project, or media data. ### **Event Tracking**[#](#event-tracking) While CE.SDK does not track user actions other than the exceptions listed below through telemetry or analytics by default, there are specific events tracked to manage customer usage, particularly for API key usage tracking. We gather the following information during these events: * **When the engine loads:** App identifier, platform, engine version, user ID (provided by the client), device ID (mobile only), and session ID. * **When a photo or video is exported:** User ID, device ID, session ID, media type (photo/video), resolution (width and height), FPS (video only), and duration (video only). This tracking is solely for ensuring accurate usage calculation and managing monthly active user billing. Enterprise clients can opt out of this tracking under specific agreements. ### **Personal Identifiable Information (PII)**[#](#personal-identifiable-information-pii) The only PII that is potentially collected includes device-specific identifiers such as `identifierForVendor` on iOS and `ANDROID_ID` on Android. These IDs are used for tracking purposes and are reset when the user reinstalls the app or resets the device. No consent is required for these identifiers because they are crucial for our usage-based pricing models. This is covered by the GDPR as legitimate interest. ### **User Consent**[#](#user-consent) As mentioned above, user consent is not required when solely using the CE.SDK. However, this may change depending on the specific enterprise agreement or additional regulatory requirements. IMG.LY is committed to maintaining compliance with **GDPR** and other applicable data protection laws, ensuring your privacy is respected at all times. For details consult our [privacy policy](https://img.ly/privacy-policy). --- [Source](https:/img.ly/docs/cesdk/sveltekit/rules-1427c0) --- # Rules --- [Source](https:/img.ly/docs/cesdk/sveltekit/prebuilt-solutions-d0ed07) --- # Prebuilt Solutions --- [Source](https:/img.ly/docs/cesdk/sveltekit/plugins-693c48) --- # Plugins Learn how to extend CE.SDK functionality with plugins to add custom features, effects, and integrations. --- [Source](https:/img.ly/docs/cesdk/sveltekit/performance-3c12eb) --- # Improve Performance Optimize CE.SDK integration for faster load times, efficient memory usage, and smooth runtime performance in browser environments. CE.SDK has a large bundle size that can impact initial page load. Optimizing how you load, use, and dispose of the editor improves application performance and user experience. This guide covers code splitting techniques to defer loading, source sets for managing large assets, export optimization with workers and quality settings, and proper lifecycle management. ## Code Splitting[#](#code-splitting) Delay loading the engine module to improve initial page load time. Use dynamic imports to load the engine only when needed. ### Using a Bundler[#](#using-a-bundler) Use dynamic `import()` with bundlers like Webpack, Rollup, or Vite to create separate chunks that load on demand. The bundler automatically handles code splitting when you use dynamic imports. ``` async function loadCreativeEditorSDK(): Promise { const { default: CreativeEditorSDK } = await import('@cesdk/cesdk-js'); return CreativeEditorSDK;} ``` This approach keeps CE.SDK in a separate bundle that loads only when `loadCreativeEditorSDK()` is called. Users who never open the editor avoid downloading the SDK entirely. ### Using CDN[#](#using-cdn) Load CE.SDK directly from CDN using dynamic imports. This works in modern browsers without any build tooling. ``` async function loadCreativeEditorSDK(): Promise { const { default: CreativeEditorSDK } = await import( 'https://cdn.img.ly/packages/imgly/cesdk-js/1.67.0/index.js' ); return CreativeEditorSDK;} ``` CDN loading offloads bandwidth from your servers and leverages global CDN caching for faster delivery. ## Managing Large Assets[#](#managing-large-assets) High-resolution images and videos consume significant memory. Optimize asset loading to reduce memory pressure and improve performance. ### Use Source Sets[#](#use-source-sets) Source sets allow you to provide multiple resolution variants of the same image. The engine automatically selects the most appropriate resolution based on the current display size, loading smaller images for previews and higher resolution assets only when needed for exports. ``` const imageFill = engine.block.createFill('image'); engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg', width: 2048, height: 1366 }]); engine.block.setFill(block, imageFill); ``` This approach reduces initial load times and memory usage during editing while ensuring high-quality exports. See [Source Sets](sveltekit/import-media/source-sets-5679c8/) for more details. ### Additional Optimization Tips[#](#additional-optimization-tips) * Remove unused assets from the scene when no longer needed * Dispose the engine when the editing session ends * Use optimized image formats (WebP, AVIF) for faster loading ## Export Optimization[#](#export-optimization) Optimize export performance through worker configuration and export settings. ### Use Export Workers[#](#use-export-workers) CE.SDK uses Web Workers to offload export rendering to background threads, keeping the main thread responsive during exports. Workers are enabled by default for both image and video exports. For video exports, the `exportWorker` configuration option controls worker usage: ``` const config = { license: 'YOUR_CESDK_LICENSE_KEY', callbacks: { exportWorker: true // Enabled by default }}; const cesdk = await CreativeEditorSDK.create('#cesdk_container', config); ``` ### Optimize Export Settings[#](#optimize-export-settings) Adjust export parameters to balance quality and performance: * **Lower resolution**: Reduce `targetWidth` and `targetHeight` for faster exports on slower devices * **Adjust quality**: Use lower JPEG quality (0.7-0.8) for smaller file sizes and faster encoding * **Choose efficient formats**: WebP typically offers better compression than PNG for images with transparency ``` // Export with optimized settings for performanceconst blob = await engine.block.export(page, 'image/jpeg', { targetWidth: 1920, targetHeight: 1080, jpegQuality: 0.8}); ``` ### Export Size Limits[#](#export-size-limits) Check device export capabilities before attempting large exports using `engine.editor.getMaxExportSize()`. ``` const maxExportSize = engine.editor.getMaxExportSize(); // Verify design fits within limitsconst pageWidth = engine.block.getWidth(page);const pageHeight = engine.block.getHeight(page); if (pageWidth > maxExportSize || pageHeight > maxExportSize) { console.warn('Design exceeds maximum export size - consider reducing dimensions');} ``` This returns the maximum dimension in pixels that the device can reliably export. ## Engine Lifecycle[#](#engine-lifecycle) Follow proper patterns for initializing and disposing the engine to prevent memory leaks and ensure consistent behavior. ### Initialization[#](#initialization) Initialize the engine once and reuse the instance. Pass essential configuration including license key and baseURL. ``` import CreativeEditorSDK from '@cesdk/cesdk-js'; const config = { license: 'YOUR_CESDK_LICENSE_KEY', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.67.0/assets'}; const cesdk = await CreativeEditorSDK.create('#cesdk_container', config);const engine = cesdk.engine; ``` When using the full CE.SDK (not just the engine), the editor creates a managed canvas element accessible via `cesdk.engine`. Avoid creating multiple engine instances simultaneously. ### Disposal[#](#disposal) Call `dispose()` when the editing session ends to free all resources including GPU memory, textures, and native allocations. ``` cesdk.dispose(); ``` After disposal, the engine instance becomes unusable. Create a new instance if the user returns to the editor. ## Asset Loading[#](#asset-loading) For production deployments, host engine assets on your own servers to improve reliability and reduce dependency on external CDNs. Configure `baseURL` to point to your asset location. See [Serve Assets From Your Server](sveltekit/serve-assets-b0827c/) for detailed setup instructions. ## Troubleshooting[#](#troubleshooting) ### Large Initial Load Time[#](#large-initial-load-time) Implement code splitting to defer engine loading until needed. Use dynamic imports with bundlers or CDN loading to keep the main bundle small. ### Slow Export Performance[#](#slow-export-performance) Enable export workers (default) and reduce export resolution or quality settings. For complex scenes, consider exporting at a lower resolution and scaling up if needed. ### Memory Leaks[#](#memory-leaks) Ensure `dispose()` is called when the editor is closed. In SPAs, use cleanup functions in component lifecycle hooks to dispose the engine on unmount. ## API Reference[#](#api-reference) | Method | Description | | --- | --- | | `CreativeEditorSDK.create()` | Initialize a new CE.SDK instance | | `cesdk.dispose()` | Clean up all resources | | `engine.editor.getMaxExportSize()` | Get maximum export dimension in pixels | | `engine.block.export()` | Export a block to image or video | ## Next Steps[#](#next-steps) * [Architecture](sveltekit/concepts/architecture-6ea9b2/) \- Understand CE.SDK structure and components * [Headless Mode](sveltekit/concepts/headless-mode/browser-24ab98/) \- Run the engine without UI for automation * [Export Overview](sveltekit/export-save-publish/export/overview-9ed3a8/) \- Learn about export formats and options --- [Source](https:/img.ly/docs/cesdk/sveltekit/overview-7d12d5) --- # Video Editor SDK Use CreativeEditor SDK (CE.SDK) to build robust video editing experiences directly in your app. CE.SDK supports both video and audio editing — including trimming, joining, adding text, annotating, and more — all performed client-side without requiring a server. Developers can integrate editing functionality using a built-in UI or programmatically via the SDK API. CE.SDK also supports music and sound effects alongside video editing. You can integrate custom or third-party AI models to streamline creative workflows, such as converting image to video or generating clips from text. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](sveltekit/get-started/overview-e18f40/) ## Core Capabilities[#](#core-capabilities) CreativeEditor SDK includes a comprehensive set of video editing tools, accessible through both a UI and programmatic interface. Supported editing actions include: * **Trim, Split, Join, and Arrange**: Modify clips, reorder segments, and stitch together content. * **Transform**: Crop, rotate, resize, scale, and flip. * **Audio Editing**: Add, adjust, and synchronize audio including music and effects. * **Programmatic Editing**: Control all editing features via API. CE.SDK is well-suited for scenarios like short-form content, reels, promotional videos, and other linear video workflows. ## Timeline Editor[#](#timeline-editor) The built-in timeline editor provides a familiar video editing experience for users. It supports: * Layered tracks for video and audio * Drag-and-drop sequencing with snapping * Trim handles, in/out points, and time offsets * Real-time preview updates The timeline is the main control for video editing: ![The editor timeline control.](/docs/cesdk/_astro/video_mode_timeline.BkrXFlTn_2e2pv5.webp) ## AI-Powered Editing[#](#ai-powered-editing) CE.SDK allows you to easily integrate AI tools directly into your video editing workflow. Users can generate images, videos, and audio from simple prompts — all from within the editor’s task bar, without switching tools or uploading external assets. [ Launch AI Editor Demo ](https://img.ly/showcases/cesdk/ai-editor/web) You can bring your own models or third-party APIs with minimal setup. AI tools can be added as standalone plugins, contextual buttons, or task bar actions. ## Supported Input Formats and Codecs[#](#supported-input-formats-and-codecs) CE.SDK supports a wide range of video input formats and encodings, including: | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. CE.SDK supports the most widely adopted video and audio codecs to ensure compatibility across platforms: ### **Video Codecs**[#](#video-codecs) * **H.264 / AVC** (in `.mp4`) * **H.265 / HEVC** (in `.mp4`, may require platform-specific support) ### **Audio Codecs**[#](#audio-codecs) * **MP3** (in `.mp3` or within `.mp4`) * **AAC** (in `.m4a` or within `.mp4` or `.mov`) ## Output and Export Options[#](#output-and-export-options) You can export edited videos in several formats, with control over resolution, encoding, and file size: | Category | Supported Formats | | --- | --- | | **Images** | `.png` (with transparency), `.jpeg`, `.webp`, `.tga` | | **Video** | `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) | | **Print** | `.pdf` (supports underlayer printing and spot colors) | | **Scene** | `.scene` (description of the scene without any assets) | | **Archive** | `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) | Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ## UI-Based vs. Programmatic Editing[#](#ui-based-vs-programmatic-editing) CE.SDK offers a fully interactive editor with intuitive UI tools for creators. At the same time, developers can build workflows entirely programmatically using the SDK API. * Use the UI to let users trim, arrange, and caption videos manually * Use the API to automate the assembly or editing of videos at scale ## Customization[#](#customization) You can tailor the editor to match your product’s design and user needs: * Show or hide tools * Reorder UI elements and dock items * Apply custom themes, colors, or typography * Add additional plugin components ## Performance and File Size Considerations[#](#performance-and-file-size-considerations) All editing operations are performed client-side. While this ensures user privacy and responsiveness, it introduces some limits: | Constraint | Recommendation / Limit | | --- | --- | | **Resolution** | Up to **4K UHD** is supported for **playback** and **export**, depending on the user’s hardware and available GPU resources. For **import**, CE.SDK does not impose artificial limits, but maximum video size is bounded by the **32-bit address space of WebAssembly (wasm32)** and the **browser tab’s memory cap (~2 GB)**. | | **Frame Rate** | 30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration | | **Duration** | Stories and reels of up to **2 minutes** are fully supported. Longer videos are also supported, but we generally found a maximum duration of **10 minutes** to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware. | Performance scales with client hardware. For best results with high-resolution or high-frame-rate video, modern CPUs/GPUs with hardware acceleration are recommended. --- [Source](https:/img.ly/docs/cesdk/sveltekit/overview-491658) --- # Overview In CE.SDK, _inserting media into a scene_ means placing visual or audio elements directly onto the canvas—images, videos, audio clips, shapes, or stickers—so they become part of the design. This differs from _importing assets_, which simply makes media available in the asset library. This guide helps you understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code. By the end, you’ll know how media are represented, modified, saved, and exported. [Launch Web Demo](https://img.ly/showcases/cesdk)[ Get Started ](sveltekit/get-started/overview-e18f40/) ## Inserting Media vs. Importing Assets[#](#inserting-media-vs-importing-assets) Before you can insert media into a scene, it must first be available to CE.SDK—this is where _importing_ comes in. Imported assets are added to the **Asset Library** (from local uploads, remote sources, etc.), where they become available for use. _Inserting_ means placing those assets into the actual scene—either as the fill of a design block (like an image inside a rectangle), or as a standalone visual/audio layer. This process creates scene elements that users can see, move, style, and manipulate. ## How Media Is Handled in Scenes[#](#how-media-is-handled-in-scenes) Internally, inserted media are structured as part of the scene graph. Most are represented as fills or as design blocks: * **Images and Videos** are typically inserted as _fills_ for graphic blocks or as independent blocks for visual layering. * **Audio** is inserted as a timeline-based media block, often invisible but timeline-active. * **Shapes and Stickers** are treated as standalone graphic blocks, with shape or vector fills. Each inserted item is assigned an ID and properties such as position, size, and rotation, and can be queried or modified programmatically. ## Inserting Media[#](#inserting-media) ### Insert via the UI[#](#insert-via-the-ui) You can insert media using the built-in CE.SDK interface. The most common methods are: * Drag-and-drop from the **Asset Library** into the canvas. * Clicking an asset in the panel to place it at the center of the scene. * Using context menus or toolbar buttons (e.g., “Add Image” or “Insert Audio”). You can also configure the UI to show or hide certain media categories, allowing for tailored user experiences. See the **Customize Asset Library** guide for more on controlling visible media types. ### Insert Programmatically[#](#insert-programmatically) Developers can insert media directly via the SDK. Whether you’re building a dynamic editor or triggering insertions via user input, CE.SDK exposes APIs for: * Creating a new design block and applying a media fill (e.g., image, video). * Controlling properties like position, size, rotation, opacity, and z-index. * Embedding logic to sync insertions with UI actions or backend data. ## Referencing Existing Assets[#](#referencing-existing-assets) Once an asset is imported, you can reference it multiple times without re-importing. Reuse is based on: * **URI** (useful for remote assets) When reusing an asset, you can apply different visual properties—each inserted instance can have its own size, position, rotation, or visual effects. ## Media Lifecycle Within a Scene[#](#media-lifecycle-within-a-scene) Inserted media are part of the live scene graph and follow CE.SDK’s scene lifecycle: * **Saving a Scene**: Inserted media references (or embedded content) are included in the saved `.scene` or `.archive`. * **Reloading a Scene**: CE.SDK reconstructs the scene graph and fetches any required media URIs or binary data. * **Exporting**: Media may be embedded directly (e.g., for self-contained exports) or referenced externally (e.g., smaller file sizes, shared assets). Keep in mind that media integrity on reload/export depends on how the asset was inserted—linked URIs must remain available, whereas embedded assets are bundled. ## Embedding vs. Linking Media[#](#embedding-vs-linking-media) CE.SDK supports two strategies for handling inserted media: | Mode | Description | Use Case | | --- | --- | --- | | **Referenced** (Scene Files) | Scene references the media via URI. | Smaller file sizes, shared asset use. | | **Embedded** (Archives) | Media is stored directly in the saved archive. | Offline editing, portable scenes. | **Embedded** media increase file size but ensure portability. **Referenced** media reduce storage needs but require external hosting. You can control this behavior when saving or exporting a scene. --- [Source](https:/img.ly/docs/cesdk/sveltekit/outlines-b7820c) --- # Outlines --- [Source](https:/img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db) --- # Open the Editor --- [Source](https:/img.ly/docs/cesdk/sveltekit/llms-txt-eb9cc5) --- # LLMs.txt You can also connect your AI assistant directly to our documentation using our [MCP Server](sveltekit/get-started/mcp-server-fde71c/) . This enables real-time search and retrieval without downloading large files. Our documentation is now available in LLMs.txt format, optimized for AI reasoning engines. To better support platform-specific development, we’ve created separate documentation files for each platform. For SvelteKit developers, this means you can now access documentation tailored to your specific platform, whether it’s iOS, Android, Web, or any other supported platform. This approach allows for a more focused and efficient use of AI tools in your development workflow. [ Download /sveltekit/llms-full.txt ](https://img.ly/docs/cesdk/sveltekit/llms-full.txt) These documentation files are substantial in size, with token counts exceeding the context windows of many AI models. This guide explains how to download and effectively use these platform-specific documentation files with AI tools to accelerate your development process. ## What are LLMs.txt files?[#](#what-are-llmstxt-files) LLMs.txt is an emerging standard for making documentation AI-friendly. Unlike traditional documentation formats, LLMs.txt: * Presents content in a clean, markdown-based format * Eliminates extraneous HTML, CSS, and JavaScript * Optimizes content for AI context windows * Provides a comprehensive view of documentation in a single file By using our platform-specific LLMs.txt files, you’ll ensure that AI tools have the most relevant and complete context for helping with your development tasks. ## Handling Large Documentation Files[#](#handling-large-documentation-files) Due to the size of our documentation files (upward of 500 000 tokens) most AI tools will face context window limitations. Standard models typically have context windows ranging from 8,000 to 200,000 tokens, making it challenging to process our complete documentation in a single session. ### Recommended AI Model for Full Documentation[#](#recommended-ai-model-for-full-documentation) For working with our complete documentation files, we recommend: * **Gemini 2.5 Flash**: Available via Google AI Studio with a context window of 1-2 million tokens, capable of handling even our largest documentation file --- [Source](https:/img.ly/docs/cesdk/sveltekit/licensing-8aa063) --- # Licensing Thanks for your interest in CreativeEditor SDK (CE.SDK). We offer flexible commercial licensing options to support teams and projects of all sizes. Whether you’re building a new product or scaling an existing one, our goal is to provide the best creative editing experience—backed by a licensing model that aligns with your needs. Get in touch with us through our [contact sales form](https://img.ly/forms/contact-sales). ## Commercial Licensing[#](#commercial-licensing) CE.SDK is offered through a subscription-based commercial model. This allows us to: * Deliver ongoing updates and performance improvements * Ensure compatibility with new browsers and devices * Provide dedicated technical support * Build long-term partnerships with our customers ## How Licensing Works[#](#how-licensing-works) CE.SDK licenses are tied to a single commercial product instance, verified by the hostname for web apps and bundle/app ID for mobile apps. Licensing typically uses remote validation and includes lightweight event tracking. It’s possible to disable tracking or use offline-compatible options. To explore these options, [contact our sales team](https://img.ly/forms/contact-sales). ## Trial License Key[#](#trial-license-key) Trial licenses are available for evaluation and testing and are valid for **30 days**. They provide full access to CE.SDK’s features so you can explore its capabilities in your environment. If you need more time to evaluate, [contact our sales team](https://img.ly/forms/contact-sales). ## Testing and Production[#](#testing-and-production) Paid license keys can be used across development, staging, and production environments. Multiple domains or app identifiers can be added to support this setup. --- [Source](https:/img.ly/docs/cesdk/sveltekit/key-concepts-21a270) --- # Key Concepts CE.SDK is built on two distinct technical layers that work together seamlessly: * **User Interface** — Pre-built editors optimized for different use cases * **Engine Interface** — Core rendering and processing engine ![The different layers CE.SDK is made of, see description below.](/docs/cesdk/_astro/layers._NZlSdtG_Zyol2N.webp) This intentional separation gives you powerful advantages: 1. **Cross-platform consistency** – The engine is cross-compiled to native web, iOS, Android, and Node.js, ensuring identical output everywhere 2. **Custom UI** – Build your own UI for simpler tools and workflows 3. **Headless automation** – Run the engine independently for automations and batch processing, both client-side and server-side ## Creative Engine[#](#creative-engine) The Creative Engine powers all core editing operations. It handles rendering, processing, and manipulation across images, layouts, text, video, audio, and vectors. **What the Engine Does:** * Maintains the scene file (your structured content) * Renders the canvas in real-time * Handles block positioning and resizing * Applies filters and effects to images * Manages text editing and typography * Controls templates with role-based permissions * Displays smart guides and snap lines Every engine capability is exposed through a comprehensive API, letting you build custom UIs, workflows, and automations. ## Headless / Engine only[#](#headless--engine-only) Use the engine without any UI for powerful automation scenarios: **Client-side automation** Perfect for in-browser batch operations and dynamic content generation without server dependencies. **Server-side automation with Node.js** Use the [Node.JS SDK](node/what-is-cesdk-2e7acd/) for following scenarios: * **High-resolution processing** – Edit on the client with preview quality, then render server-side with full-resolution assets * **Bulk generation** – Create a large volume of design variations for variable data printing * **Non-blocking workflows** – Let users continue designing while exports process in the background **Server-side export with the CE.SDK Renderer** When exporting complex graphics and videos, the [CE.SDK Renderer](renderer/cesdk-renderer-overview-7f3e9a/) can make use of GPU acceleration and video codecs on Linux server environments. **Plugin development** When building CE.SDK plugins, you get direct API access to manipulate canvas elements programmatically. ## User Interface Components[#](#user-interface-components) CE.SDK includes pre-built UI configurations optimized for different use cases: * **Photo editing** — Advanced image editing tools and filters * **Video editing** — Timeline-based video editing and effects * **Design editing** — Layout and graphic design tools (similar to Canva) * **2D product design** — Apparel, postcards, and custom product templates More configurations are coming based on customer needs. ## UI Customization[#](#ui-customization) While UI configurations provide a solid foundation, you maintain control over the user experience: * Apply **custom color schemes** and branding to match your product * Add **custom asset libraries** with your own fonts, images, graphics, videos, and audio The plugin architecture lets you add custom buttons and panels throughout the interface, ensuring the editor feels native to your product. --- [Source](https:/img.ly/docs/cesdk/sveltekit/key-capabilities-dbb5b1) --- # Key Capabilities This guide gives you a high-level look at what CreativeEditor SDK (CE.SDK) can do—and how deeply it can integrate into your workflows. Whether you’re building a design editor into your product, enabling automation, or scaling personalized content creation, CE.SDK provides a flexible and future-ready foundation. [Launch Web Demo](https://img.ly/showcases/cesdk) It’s designed for developers, product teams, and technical decision-makers evaluating how CE.SDK fits their use case. * 100% client-side processing * Custom-built rendering engine for consistent cross-platform performance * Flexible enough for both low-code and fully custom implementations ## Design Creation and Editing[#](#design-creation-and-editing) CE.SDK provides comprehensive tools for creating and editing images, videos, and multi-page layouts directly in the browser with full feature parity to desktop applications. ### Core Capabilities[#](#core-capabilities) * Create, edit, compose, and customize visual content * Dual control: Use the built-in editor UI or programmatic API * Rich editing tools: filters, text styling, stickers, layers, and layout controls ### Supported Workflows[#](#supported-workflows) * Social media content creation and user-generated content flows * Marketing tools for creative teams * Branded asset creation (slides, product visuals, templates) * Composition tools for multi-page layouts, collages, and background blending ## Programmatic and UI-based[#](#programmatic-and-ui-based) You get full control over how your users interact with CE.SDK. * Use the built-in UI for manual workflows * Call the same editing and rendering functionality programmatically * Combine both for hybrid use cases (e.g., users edit manually, backend creates variations) Whether you’re serving designers or developers—or both—CE.SDK adapts to your product’s needs. ## Templates and Reusable Layouts[#](#templates-and-reusable-layouts) Define reusable templates to simplify design creation. These templates support: * Role-based editing (lock/unlock elements based on user type) * Smart placeholders (predefined image/text drop zones) * Preset styles for consistent branding * Programmatic or user-driven updates Templates make it easy to scale consistent design output while keeping editing intuitive. ## Automation and Dynamic Content[#](#automation-and-dynamic-content) You can generate visuals automatically by combining templates with structured data. Common use cases include personalized ads, localizations, product catalogs, or A/B testing. The SDK works in headless mode and supports batch workflows, making it easy to automate at scale. ## Multi-modal[#](#multi-modal) CE.SDK supports a wide range of content types and formats: * Input types: images, video, audio, structured data, templates * Output formats: PNG, JPEG, WebP, MP4, PDF, raw data All operations—including export—run client-side, ensuring fast performance and data privacy. ## AI Integration[#](#ai-integration) Instantly bring best-in-class AI-powered image and video editing to your application with just a few lines of code. All tools run directly inside the existing editor interface—so users stay in the flow while benefiting from powerful automation. Examples of what you can enable: * **Text to Image** – Use prompts to generate original visual content directly in the editor * **Text to Graphics** – Create crisp, scalable illustrations from simple text input * **Style Transfer** – Change the mood or style of an image while preserving its structure * **Create Variants** – Generate endless visual variations of a single subject for campaigns or personalization * **Image to Video** – Transform static images into dynamic motion content with a click * **Text to Speech** – Turn written copy into natural-sounding voiceovers, with control over tone and speed * **Smart Text Editing** – Rewrite or refine text using intelligent editing suggestions * **Swap Background** – Remove or replace backgrounds in seconds * **Add / Remove Objects** – Modify images with generative precision—no external tools required These capabilities can be integrated connecting to any third-party AI model or API with minimal setup. ## Customizable UI[#](#customizable-ui) The built-in interface is designed to be fully customizable: * Rearrange or rename tools * Apply theming and branding * Show/hide features based on user role * Add translations for international users It works across desktop and mobile, and can be extended or replaced entirely if needed. ## Extensibility[#](#extensibility) Need to add a custom feature or integrate with your backend? CE.SDK supports extensibility at multiple levels: * Custom UI components (or build a completely custom UI) * Backend data integrations (e.g., asset management systems) * Custom logic or validation rules * Advanced export workflows The SDK’s plugin architecture ensures you can scale your functionality without rebuilding the core editor. ## Content Libraries[#](#content-libraries) CE.SDK ships with a robust system for managing reusable content: * Built-in libraries of stickers, icons, overlays, and fonts * Integration with third-party providers like Getty Images, Unsplash, or Airtable * Programmatic filtering and categorization * Access assets from both code and UI * Organize by brand, user, or use case This makes it easy to deliver a seamless editing experience—no matter how many assets you manage. --- [Source](https:/img.ly/docs/cesdk/sveltekit/insert-media-a217f5) --- # Insert Media Into Scenes --- [Source](https:/img.ly/docs/cesdk/sveltekit/import-media-4e3703) --- # Import Media --- [Source](https:/img.ly/docs/cesdk/sveltekit/guides-8d8b00) --- # Guides --- [Source](https:/img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac) --- # Filters and Effects --- [Source](https:/img.ly/docs/cesdk/sveltekit/fills-402ddc) --- # Fills --- [Source](https:/img.ly/docs/cesdk/sveltekit/file-format-support-3c4b2a) --- # File Format Support CreativeEditor SDK (CE.SDK) supports a wide range of modern file types for importing assets and exporting final content. Whether you’re working with images, videos, audio, documents, or fonts, CE.SDK provides a client-side editing environment with excellent media compatibility and performance—optimized for modern client-side hardware. This guide outlines supported formats, codecs, and known limitations across media types. ## Importing Media[#](#importing-media) | Category | Supported Formats | | --- | --- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ### SVG Limitations[#](#svg-limitations) CE.SDK uses Skia for SVG parsing and rendering. While most SVG files render correctly, there are some important limitations to be aware of: ### Text Elements[#](#text-elements) * SVG text elements are not supported - any text in SVG files will not be rendered. * Convert text to paths in your vector editor before exporting if text is needed. ### Styling Limitations[#](#styling-limitations) * CSS styles included in SVGs are not supported - use presentation attributes instead. * RGBA color syntax is not supported - use `fill-opacity` and `stroke-opacity` attributes. * When exporting SVGs from design tools, choose the “presentation attributes” option. ### Unsupported SVG Elements[#](#unsupported-svg-elements) The following SVG elements are not supported: * Animation elements (``) * Foreign object (``) * Text-related elements (``, ``, ``) * Script elements (`
``` Replace `YOUR_LICENSE_KEY` with your **license key**. CustomEditor.svelte ```
``` Once you’ve initialized CreativeEngine, you can: * Access the scene. * Programmatically create elements. * Update the elements’ properties. ### Understand the Component[#](#understand-the-component) In this example, you do the following: 1. Add a sample image to the scene. 2. Create a button that decreases the image’s opacity. 3. With each click of the button, decrease the image’s opacity by 20%. The `changeOpacity()` function uses the **headless [CE.SDK `block` API](sveltekit/concepts/blocks-90241e/)** to: * Retrieve the image’s current opacity * Adjust it dynamically. Rendering the CE.SDK canvas on the front end is **optional**. You can use the engine entirely for automated processing in the browser—no UI required. For example, you could: 1. Reduce the opacity of an image in memory. 2. Export it **without ever rendering it on screen**. ### Style the Component[#](#style-the-component) Consider styling your custom component with: CustomEditor.svelte ``` ``` Final `CustomEditor.svelte` file [ JavaScript ](#tab-panel-105)[ TypeScript ](#tab-panel-106) CustomEditor.svelte ```
``` CustomEditor.svelte ```
``` ### Optional: Export Component Using the Module System[#](#optional-export-component-using-the-module-system) If you organize your SvelteKit project’s components in a single `src/lib/index.js` file, add the following line to `index.js`: index.js ``` export { default as CustomEditor } from './CustomEditor.svelte'; ``` ## Step 3: Use the Custom Editor Component[#](#step-3-use-the-custom-editor-component) CreativeEngine only operates in the browser. To handle client-side rendering, you need to: 1. Import the component in a route file. 2. Render the component on a page when the app is running in the browser. ### Import the CustomEditor Component[#](#import-the-customeditor-component) Dynamically import and render the `CustomEditor` component as follows: 1. Open the relevant **SSR route file**, which should contain the component (for example, `src/routes/+page.svelte`). 2. Navigate to the ` ``` +page.svelte ``` ``` The `browser` flag in `$app/environment` identifies code that only runs in the browser. For more information, visit [SvelteKit docs](https://svelte.dev/docs/kit/$app-environment#browser). ### Optional: Import Components Using the Module System[#](#optional-import-components-using-the-module-system) If you exported `CustomEditor` from `src/lib/index.js`, you can simplify the dynamic import: +page.svelte ``` import("$lib").then(module => {CustomEditor = module.CustomEditor;}); ``` ### Render the CreativeEditorSDK Component[#](#render-the-creativeeditorsdk-component) Render the component only on the client:: 1. Navigate to the **template section** of your SvelteKit route or component 2. **Wrap** the component like this: +page.svelte ``` // {#if isClient && CustomEditor} {/if} ``` Final `+page.svelte` file [ JavaScript ](#tab-panel-109)[ TypeScript ](#tab-panel-110) +page.svelte ``` {#if isClient && CustomEditor} {/if} ``` +page.svelte ``` {#if isClient && CustomEditor} {/if} ``` Verify the integration works: 1. Navigate to the page containing ``. 2. Check the existence of a sample image on the canvas, along with a “Reduce Opacity” button. 3. Click the button to reduce the image’s opacity by 20% each time. ## Use Cases[#](#use-cases) Congratulations! You’ve laid the groundwork for: * Building **fully customized creative tools** with SvelteKit. * **Automating** the generation of graphics and visual content. * Managing the CE.SDK engine **through code** in browser-based workflows. * Developing **server-side image or video manipulation** features using `@cesdk/node`. ## Troubleshooting & Common Errors[#](#troubleshooting--common-errors) ❌ **Error**: `Error when evaluating SSR module /src/routes/+page.svelte: document is not defined` * Verify that you integrate the `CustomEditor` component using: * Dynamic import in `/src/routes/+page.svelte`. * Client side rendering only. ❌ **Error**: CE.SDK canvas doesn’t render * Make sure you append `engine.element` to an HTML element that already exists in the page. * Double-check that the container element: 1. Exists in the DOM when you call `appendChild`. 2. Renders or mounts before the code initializes the engine. ❌ **Error**: `Internal server error: Failed to resolve import "@cesdk/engine" from "src/lib/CustomEditor.svelte". Does the file exist?` * Confirm that you’ve installed CreativeEngine using the [install command](sveltekit/get-started/new-project-without-ui-we2f7c/#step-1-install-cesdk-engine). ❌ **Error**: `Missing license key in config` * Ensure your `config` object: 1. Includes a **`license` property**. 2. You’ve set the `license` property to your CE.SDK license key. ❌ **Error**: `Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid` * Verify that your **license key is correct**, hasn’t expired, and is properly added to the configuration. ❌ **Issue:** The component doesn’t behave as expected * Double-check your component paths and import statements. * Open the browser console and inspect any runtime errors that might help identify the issue. ## Next Steps[#](#next-steps) This guide has set the stage for: * [Creating a full custom UI with SvelteKit.](sveltekit/user-interface/build-your-own-ui-fe7527/) * [Automating the export of scenes.](sveltekit/export-save-publish/export/overview-9ed3a8/) * [Batch processing graphics or template content.](sveltekit/automation-715209/) --- [Source](https:/img.ly/docs/cesdk/sveltekit/get-started/new-project-w6567c) --- # New SvelteKit Project This guide will walk you through creating a new SvelteKit project and integrating CreativeEditor SDK (CE.SDK) using a custom component. By the end, you’ll have a SvelteKit application with a fully functional CE.SDK component, ready for further customization. This guide shows you how to integrate the CreativeEditor SDK (CE.SDK) into a new SvelteKit project. You’ll create a custom Svelte component and set up a fully functional image and video editor, ready for editing, templating, and further customization. ## What’s CreativeEditor SDK?[#](#whats-creativeeditor-sdk) CreativeEditor SDK (CE.SDK) lets you integrate a customizable image and video editor into your web app. It includes filters, text overlays, and other media editing tools, and adapts easily to your use case. CreativeEditor SDK is a commercial product. To use it, you need a valid license key. If you don’t have one yet, you can get a free trial or purchase a license. [Free Trial](https://img.ly/forms/free-trial)[ Purchase License ](https://img.ly/pricing) ## Who Is This Guide For?[#](#who-is-this-guide-for) This guide is for developers who: * Are familiar with SvelteKit. * Need to set up a new SvelteKit project from scratch. * Want to add a robust image and video editor to a SvelteKit app. ## What You’ll Achieve[#](#what-youll-achieve) * Set up a new SvelteKit project using the **Svelte CLI**. * Install CE.SDK via **npm**. * Create a custom Svelte **component** for CE.SDK with default settings. * Render the CE.SDK component within your app. ## Prerequisites[#](#prerequisites) Before starting, ensure you have the following: * **Node.js v20+** with **npm 10+** installed in your dev environment. [Download the latest LTS version of Node.js and npm](https://nodejs.org/en/download). * A valid **CE.SDK license key**. ## Step 1: Create a New SvelteKit Project[#](#step-1-create-a-new-sveltekit-project) Create a new SvelteKit project named `my-sveltekit-app` using the [Svelte CLI](https://svelte.dev/docs/kit/creating-a-project): Terminal window ``` npx sv create my-sveltekit-app ``` Your terminal will prompt you with a few setup questions. For this guide, opt for minimal settings: * **Template**: SvelteKit minimal. * **Type checking with TypeScript**: No. * **What to add to your project**: Press enter (none). * **Package manager**: npm. Once the project is created, navigate into the project folder: Terminal window ``` cd my-sveltekit-app ``` The SvelteKit project should contain a file structure as below: ``` my-sveltekit-app/│├── src # Source code│ ├── app.html # Main HTML file for the app│ ├── lib # Library assets│ │ │__assets # Images and other static asset│ │ │ └── favicon.svg # Svelte logo asset│ │ └── index.js # Entry point for the lib folder│ └── routes # Application routes│ └── +page.svelte # Svelte page component (default route)│ └── +layout.svelte # Styles│├── static # Static assets│ └── robots.txt # SEO file│├── .gitignore # Git ignore rules├── .npmrc # npm configuration├── jsconfig.json # JavaScript project config├── package-lock.json # npm dependency lock file├── package.json # Project metadata and dependencies├── README.md # Project documentation├── svelte.config.js # Svelte configuration└── vite.config.js # Vite configuration ``` Install the project dependencies with: Terminal window ``` npm install ``` ## Step 2: Install CE.SDK[#](#step-2-install-cesdk) Add CreativeEditor SDK to your project’s dependencies. Installing it via the [`@cesdk/cesdk-js`](https://www.npmjs.com/package/@cesdk/cesdk-js) NPM package: Terminal window ``` npm install @cesdk/cesdk-js ``` ## Step 3: Define the Creative Editor Svelte Component[#](#step-3-define-the-creative-editor-svelte-component) In the `src/lib/` folder of your new SvelteKit project, add a new file named `CreativeEditorSDK.svelte`. Define it as follows: ```
``` This Svelte component loads the CreativeEditor SDK instance within a `
` container element defined in the component’s HTML. When the component is unmounted, the CE.SDK instance is correctly disposed of to release resources. To simplify the import of the `CreativeEditorSDK.svelte` component, export it in the `index.js` file inside the `src/lib/` folder: ``` export { default as CreativeEditorSDK } from './CreativeEditorSDK.svelte'; ``` ## Step 4: Use the Creative Editor Component[#](#step-4-use-the-creative-editor-component) CreativeEditor SDK must be used on the client to work. In your SSR `src/routes/+page.svelte` route file, dynamically import the `CreativeEditorSDK.svelte` component inside the `
{#if isClient && CreativeEditorSDK} {/if}
``` ## Step 5: Serve the SvelteKit Project Locally[#](#step-5-serve-the-sveltekit-project-locally) Run the project locally with the following command: Terminal window ``` npm run dev ``` By default, the SvelteKit app runs with Vite on localhost. Open `http://localhost:5173/` to see your SvelteKit project starter page. ## Step 3: Install CE.SDK[#](#step-3-install-cesdk) Add CreativeEditor SDK to your project’s dependencies via the [`@cesdk/cesdk-js`](https://www.npmjs.com/package/@cesdk/cesdk-js) npm package: Terminal window ``` npm install @cesdk/cesdk-js ``` ## Step 4: Create the Creative Editor Svelte Component[#](#step-4-create-the-creative-editor-svelte-component) 1. Open the `src/lib/` folder of your new SvelteKit project. 2. Create a **new file** named `CreativeEditorSDK.svelte`. 3. Paste the following code into `CreativeEditorSDK.svelte`: Replace `` with a valid CE.SDK license key. CreativeEditorSDK.svelte ```
``` This Svelte component: * Initializes the CreativeEditor SDK inside the component’s `
` container. * Disposes of the SDK instance on unmount to free resources. ### Export the Component[#](#export-the-component) To simplify the import of the `CreativeEditorSDK.svelte` component: 1. Open the `lib/index.js` file 2. Adding the following line: index.js ``` export { default as CreativeEditorSDK } from './CreativeEditorSDK.svelte'; ``` ## Step 5: Use the Creative Editor Component[#](#step-5-use-the-creative-editor-component) Your app needs to use the CreativeEditor SDK **on the client** to work. To handle client-side rendering, dynamically import `CreativeEditorSDK` component as follows: 1. Open the route file: `src/routes/+page.svelte` 2. Add a script section at the top of the file if it doesn’t exist already: +page.svelte ``` ``` 3. Import the component **inside the script** section: +page.svelte ``` import { browser } from '$app/environment'; // True only when the code-block executes in the browser// Use the browser flag to apply client-side rendering to selected blocks. let CreativeEditorSDK;if (browser) { // Dynamically import the CreativeEditorSDK component only in the browser import('$lib').then(module => { CreativeEditorSDK = module.CreativeEditorSDK; });} ``` The `browser` flag from `$app/environment` marks the code that runs in the browser. Learn more from [SvelteKit docs](https://svelte.dev/docs/kit/$app-environment#browser). 4. Add this to the template section (`
`, for example) of `+page.svelte`: [ Default Configs ](#tab-panel-95)[ Custom Configs ](#tab-panel-96) +page.svelte ``` {#if browser && CreativeEditorSDK}{/if} ``` +page.svelte ``` {#if browser && CreativeEditorSDK} {/if} ``` This code conditionally renders the video editor component on the client side only. ### Final `+page.svelte` File[#](#final-pagesvelte-file) Your final `src/routes/+page.svelte` file should contain something like: [ Default Configs ](#tab-panel-97)[ Custom Configs ](#tab-panel-98) +page.svelte ```
{#if browser && CreativeEditorSDK} {/if}
``` +page.svelte ```
{#if browser && CreativeEditorSDK} {/if}
``` ## Step 7: Test the Integration[#](#step-7-test-the-integration) 1. Open `http://localhost:5173/` in your browser. 2. A fully functional CE.SDK editor should load. ## Troubleshooting & Common Errors[#](#troubleshooting--common-errors) **❌ Error**: `Cannot find module '@cesdk/cesdk-js'` * Verify that you’ve correctly installed CE.SDK via `npm install @cesdk/cesdk-js`. **❌ Error**: `The $props rune is only available inside .svelte and .svelte.js/ts files` * Make sure that you’re loading the props of the `CreativeEditorSDK.svelte` component using `$props()` in the top-level `
``` Replace `` with your valid CE.SDK **license key**. CreativeEditorSDK.svelte ```
``` This Svelte component: * Initializes the CreativeEditor SDK inside the component’s `
` container. * Disposes of the SDK instance on unmount to free resources. ### Optional: Export Component Using the Module System[#](#optional-export-component-using-the-module-system) If you organize your SvelteKit project’s components in a single `src/lib/index.js` file, add the following line to `index.js`: index.js ``` export { default as CreativeEditorSDK } from './CreativeEditorSDK.svelte'; ``` ## Step 3: Use the Creative Editor Component[#](#step-3-use-the-creative-editor-component) CreativeEditor SDK only runs on the client. To handle client-side rendering, you have to: 1. Import the component in a route file. 2. Render the component on a page withing your project. ### Import the CreativeEditorSDK Component[#](#import-the-creativeeditorsdk-component) Dynamically import `CreativeEditorSDK` component as follows: 1. Open the relevant **SSR route file**, where you want to embed the component (for example, `src/routes/+page.svelte`). 2. Navigate to the ` {#if isClient && CreativeEditorSDK} {/if} ``` The ’browser’ flag in `$app/environment` identifies code that runs in the browser. For more information, visit [ SvelteKit docs ](https://svelte.dev/docs/kit/$app-environment#browser) . ### Optional: Import Components Using the Module System[#](#optional-import-components-using-the-module-system) If you [exported `CreativeEditorSDK` in `src/lib/index.js`](sveltekit/get-started/existing-project-x7678d/#using-the-module-system-for-exports), you can simplify the dynamic import: +page.svelte ``` import('$lib').then(module => { CreativeEditorSDK = module.CreativeEditorSDK;}); ``` ### Render the CreativeEditorSDK Component[#](#render-the-creativeeditorsdk-component) Now, make sure that your app renders the video editor component only on the client side. Add this to the template section of your SvelteKit route: [ Default Configs ](#tab-panel-86)[ Custom Configs ](#tab-panel-87) +page.svelte ``` {#if isClient && CreativeEditorSDK}{/if} ``` +page.svelte ``` {#if isClient && CreativeEditorSDK} {/if} ``` Your **final `src/routes/+page.svelte` file** should look like this: [ Default Configs ](#tab-panel-88)[ Custom Configs ](#tab-panel-89) +page.svelte ```
{#if isClient && CreativeEditorSDK} {/if}
``` +page.svelte ```
{#if isClient && CreativeEditorSDK} {/if}
``` ## Step 4: Serve the SvelteKit Project Locally[#](#step-4-serve-the-sveltekit-project-locally) Start your SvelteKit project locally with the run command. Basic ones are: [ npm ](#tab-panel-81)[ yarn ](#tab-panel-82)[ pnpm ](#tab-panel-83) `shell npm run dev` `shell yarn dev` `shell pnpm run dev` ## Step 5: Test the Integration[#](#step-5-test-the-integration) By default, Vite serves your app on your localhost. To test the integration: 1. Open `http://localhost:5173/` in your browser. 2. A fully functional CE.SDK editor should load. ## Troubleshooting & Common Errors[#](#troubleshooting--common-errors) **❌ Error**: `Cannot find module '@cesdk/cesdk-js'` * Check that you’ve installed CE.SDK with `npm install @cesdk/cesdk-js`. **❌ Error**: `The $props rune is only available inside .svelte and .svelte.js/ts files` 1. Open `CreativeEditorSDK.svelte`. 2. Check the **top level** of the `