[Source](https:/img.ly/docs/cesdk/android/what-is-cesdk-2e7acd) # Android Creative Editor The Android Mobile Design Editor SDK offers a robust and customizable solution for creating and editing visual designs directly within your Android applications. ### What is CE.SDK?[#](#what-is-cesdk) **CreativeEditor SDK (CE.SDK)** is a powerful design engine that brings fully customizable image, video, and design editing directly into your iOS app. Whether you’re enabling AI-powered design workflows, template-based creation, dynamic content generation, or full-featured creative editing, CE.SDK offers the flexibility, performance, and developer control you need — all with minimal integration overhead. [ Explore Demos ](https://img.ly/showcases/cesdk/?tags=android)[ Get Started ](android/get-started/overview-e18f40/) Trusted by leading organizations worldwide, CE.SDK powers the creative editors used in best-in-class applications, including those from Shopify, Semrush, HP, Shutterfly, Ticketmaster, and Swiss Post. ## Key Capabilities of the Android Creative Editor SDK[#](#key-capabilities-of-the-android-creative-editor-sdk) ![Transform](/docs/cesdk/_astro/Transform.By5kJRew_2acCrV.webp) ### Transform Perform operations like cropping, rotating, and resizing design elements. ![Templating](/docs/cesdk/_astro/Templating.eMNm9_jD_ycnVt.webp) ### Templating Create 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 Management](/docs/cesdk/_astro/AssetLibraries.Ce9MfYvX_HmsaC.webp) ### Asset Management Import and manage images, shapes, and other assets to build your designs. ![Design Collage](/docs/cesdk/_astro/VideoCollage.23LDUE8e_1VDFAj.webp) ### Design Collage Arrange multiple elements on a single canvas to create complex layouts. ![Text Editing](/docs/cesdk/_astro/TextEditing.B8Ra1KOE_2lGC8C.webp) ### Text Editing Add and style text blocks with various fonts, colors, and effects. ![Client-Side Processing](/docs/cesdk/_astro/ClientSide.CECpQO_1_c6mBh.webp) ### Client-Side Processing All design editing operations are executed directly on the device, with no need for server dependencies. ![Extendible](/docs/cesdk/_astro/Extendible.CRYmRihj_BmNTE.webp) ### Extendible Hook into the engine API and editor events to implement custom features. ![Customizable UI](/docs/cesdk/_astro/CustomizableUI.DtHv9rY-_2fNrB2.webp) ### Customizable UI Build and integrate custom UIs tailored to your application’s design needs. ## File Format Support[#](#file-format-support) 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) | | **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](android/file-format-support-3c4b2a/) . ## Integrations[#](#integrations) CE.SDK supports out-of-the-box integrations with: * **Getty Images** * **Unsplash** * **Pexels** * **Airtable** * **Soundstripe** Want to connect your own asset sources? Register a custom provider using our API. --- [Source](https:/img.ly/docs/cesdk/android/user-interface-5a089a) # User Interface --- [Source](https:/img.ly/docs/cesdk/android/use-templates-a88fd4) # Use Templates --- [Source](https:/img.ly/docs/cesdk/android/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. ## **Initialization**[#](#initialization) The initialization of the `Engine` has changed. Now `start` is a suspending function and it requires a new parameter `license` which is the API key you received from our dashboard. There is also a new optional parameter `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. ``` engine.start(license = "", userId = "") ``` ## **DesignBlockType**[#](#designblocktype) This class is not an enum class anymore, but a sealed class. These are the transformations of all `DesignBlockType` types: Removed: * `DesignBlockType.IMAGE` * `DesignBlockType.VIDEO` * `DesignBlockType.STICKER` * `DesignBlockType.VECTOR_PATH` * `DesignBlockType.RECT_SHAPE` * `DesignBlockType.LINE_SHAPE` * `DesignBlockType.STAR_SHAPE` * `DesignBlockType.POLYGON_SHAPE` * `DesignBlockType.ELLIPSE_SHAPE` * `DesignBlockType.COLOR_FILL` * `DesignBlockType.IMAGE_FILL` * `DesignBlockType.VIDEO_FILL` * `DesignBlockType.LINEAR_GRADIENT_FILL` * `DesignBlockType.RADIAL_GRADIENT_FILL` * `DesignBlockType.CONICAL_GRADIENT_FILL` Renamed: * `DesignBlockType.SCENE` -> `DesignBlockType.Scene` * `DesignBlockType.STACK` -> `DesignBlockType.Stack` * `DesignBlockType.CAMERA` -> `DesignBlockType.Camera` * `DesignBlockType.PAGE` -> `DesignBlockType.Page` * `DesignBlockType.AUDIO` -> `DesignBlockType.Audio` * `DesignBlockType.TEXT` -> `DesignBlockType.Text` * `DesignBlockType.GROUP` -> `DesignBlockType.Group` Added: * `DesignBlockType.Graphic` * `DesignBlockType.Cutout` Note that `DesignBlockType.values()` can be used to get the list of all instances mentioned above. ## **Graphic Design Block**[#](#graphic-design-block) A new generic `DesignBlockType.Graphic` type has been introduced, that 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 `DesignBlockType.Graphic` block allows to change its shape with these APIs. The new available shape types are: * `ShapeType.Rect` * `ShapeType.Line` * `ShapeType.Ellipse` * `ShapeType.Polygon` * `ShapeType.Star` * `ShapeType.VectorPath` Note that `ShapeType.values()` can be used to get the list of all instances mentioned above. The following design block types are now removed in favor of using a `DesignBlockType.Graphic` block with one of the above mentioned shape instances: * `DesignBlockType.RECT_SHAPE` * `DesignBlockType.LINE_SHAPE` * `DesignBlockType.ELLIPSE_SHAPE` * `DesignBlockType.POLYGON_SHAPE` * `DesignBlockType.STAR_SHAPE` * `DesignBlockType.VECTOR_PATH` 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 anymore 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 plural `shapes/…` to singular `shape/…` to match the new type identifiers. ## **Image and Sticker**[#](#image-and-sticker) Previously, `DesignBlockType.IMAGE` and `DesignBlockType.STICKER` were their own high-level design block types. They neither support the fill APIs nor the effects APIs. Both of these blocks are now removed in favor of using a `DesignBlockType.Graphic` block with an image fill (`FillType.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 neither crop it, nor apply any effects to it. In order to replicate the 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 `DesignBlockType.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 `DesignBlockType.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 `DesignBlockType.Graphic.key (“//ly.img.ubq/graphic”)` if left unspecified. * `“shapeType”` defaults to `ShapeType.Rect.key (“//ly.img.ubq/shape/rect”)` if left unspecified * `“fillType”` defaults to `FillType.Color.key (“//ly.img.ubq/fill/color”)` if left unspecified Video block asset definitions used to specify the `“blockType”` as `“//ly.img.ubq/fill/video“ (FillType.Video.key)`. 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 `DesignBlockType.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 `DesignBlockType.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 `DesignBlockType.Graphic` block does. ## **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: * `BlockApi.create()` * `BlockApi.createFill()` * `BlockApi.createEffect()` * `BlockApi.createBlur()` * `BlockApi.findByType()` **Note** All the functions above still support the string overload variants, however, their usage will cause lint warnings in favor of type safe overloads. ## **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 migrationval image = engine.block.create(DesignBlockType.IMAGE)engine.block.setString( block = image, property = "image/imageFileURI", value = "https://domain.com/link-to-image.jpg") // Creating an Image after migrationval block = engine.block.create(DesignBlockType.Graphic)val rectShape = engine.block.createShape(ShapeType.Rect)val imageFill = engine.block.createFill(FillType.Image)engine.block.setString( block = imageFill, property = "fill/image/imageFileURI", value = "https://domain.com/link-to-image.jpg")engine.block.setShape(block, shape = rectShape)engine.block.setFill(block, fill = imageFill)engine.block.setKind(block, kind = "image") // Creating a star shape before migrationval star = engine.block.create(DesignBlockType.STAR_SHAPE)engine.block.setInt(star, property = "shapes/star/points", value = 8) // Creating a star shape after migrationval block = engine.block.create(DesignBlockType.Graphic)val starShape = engine.block.createShape(ShapeType.Star)val colorFill = engine.block.createFill(FillType.Color)engine.block.setInt(block = starShape, property = "shape/star/points", value = 8)engine.block.setShape(block, shape = starShape)engine.block.setFill(block, fill = colorFill)engine.block.setKind(block, kind = "shape") // Creating a sticker before migrationval sticker = engine.block.create(DesignBlockType.STICKER)engine.block.setString( block = sticker, property = "sticker/imageFileURI", value = "https://domain.com/link-to-sticker.png") // Creating a sticker after migrationval block = engine.block.create(DesignBlockType.Graphic)val rectShape = engine.block.createShape(ShapeType.Rect)val imageFill = engine.block.createFill(FillType.Image)engine.block.setString( block = imageFill, property = "fill/image/imageFileURI", value = "https://domain.com/link-to-sticker.png")engine.block.setShape(block, shape = rectShape)engine.block.setFill(block, fill = imageFill)engine.block.setKind(block, kind = "sticker") /** Block Creation */ ``` ``` /** Block Exploration */ // Query all images in the scene before migrationval images = engine.block.findByType(DesignBlockType.IMAGE) // Query all images in the scene after migrationval images = engine.block.findByType(DesignBlockType.Graphic).filter { block -> val fill = engine.block.getFill(block) engine.block.isValid(fill) && engine.block.getType(fill) == FillType.Image.key} // Query all stickers in the scene before migrationval stickers = engine.block.findByType(DesignBlockType.STICKER) // Query all stickers in the scene after migrationval stickers = engine.block.findByKind("sticker") // Query all Polygon shapes in the scene before migrationval polygons = engine.block.findByType(DesignBlockType.POLYGON_SHAPE) // Query all Polygon shapes in the scene after migrationval polygons = engine.block.findByType(DesignBlockType.Graphic).filter { block -> val shape = engine.block.getShape(block) engine.block.isValid(shape) && engine.block.getType(shape) == ShapeType.Polygon.key} /** Block Exploration */ ``` --- [Source](https:/img.ly/docs/cesdk/android/upgrade-4f8715) # Upgrade --- [Source](https:/img.ly/docs/cesdk/android/text-8a993a) # Text --- [Source](https:/img.ly/docs/cesdk/android/stickers-and-shapes-a000fe) # Stickers and Shapes --- [Source](https:/img.ly/docs/cesdk/android/settings-970c98) # Settings All keys listed below can be modified through the Editor API. The nested settings inside `UBQSettings` can be reached via key paths, e.g. `page/title/show`. ## Settings[#](#settings) ### `BlockAnimationSettings`[#](#blockanimationsettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | enabled | `bool` | `true` | Whether animations should be enabled or not. | ### `CameraClampingSettings`[#](#cameraclampingsettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | overshootMode | `CameraClampingOvershootMode` | `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. | ### `CameraSettings`[#](#camerasettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | clamping | `CameraClampingSettings: CameraClampingOvershootMode overshootMode` | `{}` | Clamping settings for the camera. | ### `ControlGizmoSettings`[#](#controlgizmosettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | blockScaleDownLimit | `float` | `8.0` | 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. | | showCropHandles | `bool` | `{true}` | Whether or not to show the handles to adjust the crop area during crop mode. | | showCropScaleHandles | `bool` | `{true}` | Whether or not to display the outer handles that scale the full image during crop. | | showMoveHandles | `bool` | `{true}` | Whether or not to show the move handles. | | showResizeHandles | `bool` | `{true}` | Whether or not to display the non-proportional resize handles (edge handles) | | showRotateHandles | `bool` | `{true}` | Whether or not to show the rotation handles. | | showScaleHandles | `bool` | `{true}` | Whether or not to display the proportional scale handles (corner handles) | ### `DebugFlags`[#](#debugflags) Flags that control debug outputs. | Member | Type | Default | Description | | --- | --- | --- | --- | | enforceScopesInAPIs | `bool` | `false` | Whether APIs calls that perform edits should throw errors if the corresponding scope does not allow the edit. | | showHandlesInteractionArea | `bool` | `{false}` | Display the interaction area around the handles. | | useDebugMipmaps | `bool` | `false` | Enable the use of colored mipmaps to see which mipmap is used. | ### `MouseSettings`[#](#mousesettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | enableScroll | `bool` | `true` | Whether the engine processes mouse scroll events. | | enableZoom | `bool` | `true` | Whether the engine processes mouse zoom events. | ### `PageSettings`[#](#pagesettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | allowCropInteraction | `bool` | `true` | If crop interaction (by handles and gestures) should be possible when the enabled arrangements allow resizing. | | 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, e.g., in a ‘VerticalStack’. | | allowResizeInteraction | `bool` | `false` | If a resize interaction (by handles and gestures) should be possible when the enabled arrangements allow resizing. | | 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, e.g., in a ‘VerticalStack’. | | dimOutOfPageAreas | `bool` | `true` | Whether the opacity of the region outside of all pages should be reduced. | | innerBorderColor | `Color` | `createRGBColor(0.0, 0.0, 0.0, 0.0)` | Color of the inner frame around the page. | | marginFillColor | `Color` | `createRGBColor(0.79, 0.12, 0.40, 0.1)` | Color of frame around the bleed margin area of the pages. | | marginFrameColor | `Color` | `createRGBColor(0.79, 0.12, 0.40, 0.0)` | Color filled into the bleed margins of pages. | | 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. | | outerBorderColor | `Color` | `createRGBColor(1.0, 1.0, 1.0, 0.0)` | Color of the outer frame around the page. | | restrictResizeInteractionToFixedAspectRatio | `bool` | `false` | If the resize interaction should be restricted to fixed aspect ratio resizing. | | title | `PageTitleSettings(bool show, bool showOnSinglePage, bool showPageTitleTemplate, bool appendPageName, string separator, Color color, string fontFileUri)` | “ | Page title settings. | ### `PageTitleSettings`[#](#pagetitlesettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | 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 | | color | `Color` | `createRGBColor(1., 1., 1.)` | Color of page titles visible in preview mode, can change with different themes. | | fontFileUri | `string` | `DEFAULT_FONT` | Font of page titles. | | separator | `string` | `"-"` | Title label separator between the page number and the page name. | | show | `bool` | `true` | Whether to show titles above each page. | | showOnSinglePage | `bool` | `true` | Whether to hide the the page title when only a single page is given. | | showPageTitleTemplate | `bool` | `true` | Whether to include the default page title from `page.titleTemplate` | ### `PlaceholderControlsSettings`[#](#placeholdercontrolssettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | showButton | `bool` | `true` | Show the placeholder button. | | showOverlay | `bool` | `true` | Show the overlay pattern. | ### `Settings`[#](#settings-1) | Member | Type | Default | Description | | --- | --- | --- | --- | | alwaysHighlightPlaceholders | `bool` | `false` | Whether placeholder elements should always be highlighted in the scene. | | basePath | `string` | `""` | The root directory to be used when resolving relative paths or when accessing `bundle://` URIs on platforms that don’t offer bundles. | | blockAnimations | `BlockAnimationSettings: bool enabled` | `{}` | Settings that configure the behavior of block animations. | | borderOutlineColor | `Color` | `createRGBColor(0., 0., 0., 1.0)` | The border outline color, defaults to black. | | camera | `CameraSettings: CameraClampingSettings clamping` | `{}` | Settings that configure the behavior of the camera. | | clearColor | `Color` | `createClear()` | The color with which the render target is cleared before scenes get rendered. Only used while renderMode == Preview, else #00000000 (full transparency) is used. | | colorMaskingSettings | `ColorMaskingSettings(Color maskColor, bool secondPass)` | `{}` | A collection of settings used to perform color masking. | | controlGizmo | `ControlGizmoSettings(bool showCropHandles, bool showCropScaleHandles, bool showMoveHandles, bool showResizeHandles, bool showScaleHandles, bool showRotateHandles, float blockScaleDownLimit)` | `{}` | Settings that configure which touch/click targets for move/scale/rotate/etc. are enabled and displayed. | | cropOverlayColor | `Color` | `createRGBColor(0., 0., 0., 0.39)` | Color of the dimming overlay that’s added in crop mode. | | debug | `DebugFlags(bool useDebugMipmaps, bool showHandlesInteractionArea, bool enforceScopesInAPIs)` | `{}` | ? | | defaultEmojiFontFileUri | `string` | `EMOJI_FONT` | URI of default font file for emojis. | | defaultFontFileUri | `string` | `DEFAULT_FONT` | URI of default font file This font file is the default everywhere unless overriden in specific settings. | | doubleClickSelectionMode | `DoubleClickSelectionMode` | `Hierarchical` | The current mode of selection on double-click. | | doubleClickToCropEnabled | `bool` | `true` | Whether double clicking on an image element should switch into the crop editing mode. | | emscriptenCORSConfigurations | `vector< CORSConfiguration >` | `{}` | CORS Configurations: `` pairs. See `FetchAsyncService-emscripten.cpp` for details. | | errorStateColor | `Color` | `createRGBColor(1., 1., 1., 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. | | globalScopes | `GlobalScopes(Text text, Fill fill, Stroke stroke, Shape shape, Layer layer, Appearance appearance, Lifecycle lifecycle, Editor editor)` | `Allow)` | Global scopes. | | handleFillColor | `Color` | `createWhite()` | The fill color for handles. | | highlightColor | `Color` | `createRGBColor(0.2, 85. / 255., 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, use an empty string or `null` to run in evaluation mode with watermark. | | 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. Defaults to 4096x4096. | | mouse | `MouseSettings(bool enableZoom, bool enableScroll)` | `{}` | Settings that configure the behavior of the mouse. | | page | `PageSettings(PageTitleSettings title, Color marginFillColor, Color marginFrameColor, Color innerBorderColor, Color outerBorderColor, bool dimOutOfPageAreas, bool allowCropInteraction, bool allowResizeInteraction, bool restrictResizeInteractionToFixedAspectRatio, bool allowRotateInteraction, bool allowMoveInteraction, bool moveChildrenWhenCroppingFill)` | `{}` | Page related settings. | | pageHighlightColor | `Color` | `createRGBColor(0.5, 0.5, 0.5, 0.2)` | Color of the outline of each page. | | placeholderControls | `PlaceholderControlsSettings(bool showOverlay, bool showButton)` | `{}` | Supersedes how the blocks’ placeholder controls are applied. | | placeholderHighlightColor | `Color` | `createRGBColor(0.77, 0.06, 0.95)` | 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` | `createRGBColor(1., 1., 1., 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` | `createRGBColor(1., 0.004, 0.361)` | Color of the rotation snapping guides. | | rotationSnappingThreshold | `float` | `0.15` | Rotation snapping threshold in radians. | | ruleOfThirdsLineColor | `Color` | `createRGBColor(0.75, 0.75, 0.75, 0.75)` | Color of the rule-of-thirds lines. | | showBuildVersion | `bool` | `false` | Show the build version on the canvas. | | snappingGuideColor | `Color` | `createRGBColor(1., 0.004, 0.361)` | Color of the position snapping guides. | | textVariableHighlightColor | `Color` | `createRGBColor(0.7, 0., 0.7)` | Color of the text variable highlighting borders. | | touch | `TouchSettings(bool dragStartCanSelect, bool singlePointPanning, PinchGestureAction pinchAction, RotateGestureAction rotateAction)` | `{}` | Settings that configure which touch gestures are enabled and which actions they trigger. | | 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. | ### `TouchSettings`[#](#touchsettings) | Member | Type | Default | Description | | --- | --- | --- | --- | | dragStartCanSelect | `bool` | `true` | Whether dragging an element requires selecting it first. When not set, elements can be directly dragged. | | pinchAction | `PinchGestureAction` | `Scale` | The action to perform when a pinch gesture is performed. | | rotateAction | `RotateGestureAction` | `Rotate` | Whether or not the two finger turn gesture can rotate selected elements. | | 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. This setting might get overwritten with the feature flag `preventScrolling`. | ``` engine.editor.findAllSettings()engine.editor.getSettingType("doubleClickSelectionMode") engine.editor.onSettingsChanged() .onEach { println("Editor settings have changed") } .launchIn(CoroutineScope(Dispatchers.Main)) engine.editor.onRoleChanged() .onEach { role -> println("Role changed to $role") } .launchIn(CoroutineScope(Dispatchers.Main)) engine.editor.setSettingBoolean("doubleClickToCropEnabled", value = true)engine.editor.getSettingBoolean("doubleClickToCropEnabled")try engine.editor.setSettingInt("integerSetting", value: 0)try engine.editor.getSettingInt("integerSetting")engine.editor.setSettingFloat("positionSnappingThreshold", value = 2.0F)engine.editor.getSettingFloat("positionSnappingThreshold")engine.editor.setSettingString("license", value = "invalid")engine.editor.getSettingString("license")engine.editor.setSettingColor("highlightColor", Color.fromRGBA(r = 1F, g = 0F, b = 1F, a = 1F)) // Pinkengine.editor.getSettingColor("highlightColor")engine.editor.setSettingEnum("doubleClickSelectionMode", value = "Direct")engine.editor.getSettingEnum("doubleClickSelectionMode")engine.editor.getSettingEnumOptions("doubleClickSelectionMode")engine.editor.getRole()engine.editor.setRole("Adopter") ``` ## Change Settings[#](#change-settings) In this example, we will show you how to use the [CreativeEditor SDK](https://img.ly/products/creative-sdk)’s CreativeEngine to control with the `editor` API. A list of all available settings can be found above. ### Exploration[#](#exploration) ``` fun findAllSettings(): List ``` Returns a list of all the settings available. * Returns the list of all settings. ``` fun getSettingType(keypath: String): PropertyType ``` Get the type of a setting. * `keypath`: the settings enum keypath, e.g. `doubleClickSelectionMode`. * Returns the type of the setting. ### Functions[#](#functions) ``` fun onSettingsChanged(): Flow ``` Subscribe to changes to the editor settings. * Returns flow of editor settings change events. ``` fun onRoleChanged(): Flow ``` Subscribe to changes to the editor role. * Returns flow of role change events. ``` fun setSettingBoolean( keypath: String, value: Boolean,) ``` Set a boolean setting. * `keypath`: the settings keypath, e.g. `doubleClickToCropEnabled`. * `value`: the value to set. ``` fun getSettingBoolean(keypath: String): Boolean ``` Get a boolean setting. * `keypath`: the settings keypath, e.g. `doubleClickToCropEnabled`. * Returns the current value. ``` fun setSettingInt( keypath: String, value: Int,) ``` Set an integer setting. * `keypath`: the settings keypath. * `value`: the value to set. ``` fun getSettingInt(keypath: String): Int ``` Get an integer setting. * `keypath`: the settings keypath. * Returns the current value. ``` fun setSettingFloat( keypath: String, value: Float,) ``` Set a float setting. * `keypath`: the settings keypath, e.g. `positionSnappingThreshold`. * `value`: the value to set. ``` fun getSettingFloat(keypath: String): Float ``` Get a float setting. * `keypath`: the settings keypath, e.g. `positionSnappingThreshold`. * Returns the current value. ``` fun setSettingString( keypath: String, value: String,) ``` Set a string setting. * `keypath`: the settings keypath, e.g. `license`. * `value`: the value to set. ``` fun getSettingString(keypath: String): String ``` Get a string setting. * `keypath`: the settings keypath, e.g. `license`. * Returns the current value. ``` fun setSettingColor( keypath: String, value: RGBAColor,) ``` Set a color setting. * `keypath`: the settings keypath, e.g. `highlightColor`. * `value`: the value to set. ``` fun getSettingColor(keypath: String): RGBAColor ``` Get a color setting. * `keypath`: the settings keypath, e.g. `highlightColor`. * Returns the current value. ``` fun setSettingEnum( keypath: String, value: String,) ``` Set an enum setting. * `keypath`: the settings keypath, e.g. `doubleClickSelectionMode`. * `value`: the value to set. ``` fun getSettingEnum(keypath: String): String ``` Get an enum setting. * `keypath`: the settings keypath, e.g. `doubleClickSelectionMode`. * Returns the current value. ``` fun getSettingEnumOptions(keypath: String): List ``` Get all the available options of an enum setting. * `keypath`: the settings enum keypath, e.g. `doubleClickSelectionMode`. * Returns the list of enum options. ``` fun getRole(): String ``` Get the current role of the user ``` fun setRole(role: String) ``` Set the role of the user and apply role-dependent defaults for scopes and settings ## Full Code[#](#full-code) Here’s the full code: ``` engine.editor.findAllSettings()engine.editor.getSettingType("doubleClickSelectionMode") engine.editor.onSettingsChanged() .onEach { println("Editor settings have changed") } .launchIn(CoroutineScope(Dispatchers.Main)) engine.editor.onRoleChanged() .onEach { role -> println("Role changed to $role") } .launchIn(CoroutineScope(Dispatchers.Main)) engine.editor.setSettingBoolean("doubleClickToCropEnabled", value = true)engine.editor.getSettingBoolean("doubleClickToCropEnabled")try engine.editor.setSettingInt("integerSetting", value: 0)try engine.editor.getSettingInt("integerSetting")engine.editor.setSettingFloat("positionSnappingThreshold", value = 2.0F)engine.editor.getSettingFloat("positionSnappingThreshold")engine.editor.setSettingString("license", value = "invalid")engine.editor.getSettingString("license")engine.editor.setSettingColor("highlightColor", Color.fromRGBA(r = 1F, g = 0F, b = 1F, a = 1F)) // Pinkengine.editor.getSettingColor("highlightColor")engine.editor.setSettingEnum("doubleClickSelectionMode", value = "Direct")engine.editor.getSettingEnum("doubleClickSelectionMode")engine.editor.getSettingEnumOptions("doubleClickSelectionMode")engine.editor.getRole()engine.editor.setRole("Adopter") ``` --- [Source](https:/img.ly/docs/cesdk/android/serve-assets-b0827c) # Serve Assets From Your Server In this example, we explain how to configure the Creative Engine to use assets hosted on your own servers. While we serve all assets from our own CDN by default, it is highly recommended to serve the assets from your own servers in a production environment. ## 1\. Register IMG.LY’s default assets[#](#1-register-imglys-default-assets) If you want to use our default asset sources in your integration, call `fun Engine.addDefaultAssetSources(baseUri: Uri, exclude: Set)`. Right after initialization: ``` val engine = Engine("ly.img.engine.example")engine.start()engine.addDefaultAssetSources() ``` This call adds IMG.LY’s default asset sources for stickers, vectorpaths and filters to your engine instance. By default, these include the following sources represented by `DefaultAssetSource` enum\`: * `DefaultAssetSource.STICKER` - `ly.img.sticker` - Various stickers. * `DefaultAssetSource.VECTOR_PATH` - `ly.img.vectorpath` - Shapes and arrows. * `DefaultAssetSource.FILTER_LUT` - `ly.img.filter.lut` - LUT effects of various kinds. * `DefaultAssetSource.FILTER_DUO_TONE` - `ly.img.filter.duotone` - Color effects of various kinds. * `DefaultAssetSource.COLORS_DEFAULT_PALETTE` - `ly.img.colors.defaultPalette` - Default color palette. * `DefaultAssetSource.EFFECT` - `ly.img.effect` - Default effects. * `DefaultAssetSource.BLUR` - `ly.img.blur` - Default blurs. * `DefaultAssetSource.TYPEFACE` - `ly.img.typeface` - Default typefaces. If you don’t specify a `baseUri` option, the assets are parsed and served from the IMG.LY CDN. It is highly recommended to serve the assets from your own servers in a production environment, if you decide to use them. To do so, follow the steps below and pass a `baseUri` option to `addDefaultAssetSources`. If you only need a subset of the IDs above, use the `exclude` option to pass a list of ignored `DefaultAssetSource` objects\`. ## 2\. Copy Assets[#](#2-copy-assets) Download the IMG.LY default assets from [our CDN](https://cdn.img.ly/packages/imgly/cesdk-engine/1.65.0/imgly-assets.zip). Copy the extracted folders to your own CDN server or to the android assets folder if you want to use them offline. It can be on the root or any subfolder. ## 3\. Configure the IMGLYEngine to use your self-hosted assets[#](#3-configure-the-imglyengine-to-use-your-self-hosted-assets) Next, we need to configure the SDK to use the copied assets instead of the ones served via IMG.LY CDN. `Engine.addDefaultAssetSources` offers a `baseUri` option, that needs to be set to an absolute Uri, pointing to your newly added assets. In case you have copied to your own cdn path: ``` val baseUri = Uri.parse("https://cdn.your.custom.domain/assets") engine.addDefaultAssetSources(baseUri) ``` In case you have copied to android assets folder: ``` val baseUri = Uri.parse("file:///android_asset/assets") engine.addDefaultAssetSources(baseUri) ``` --- [Source](https:/img.ly/docs/cesdk/android/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/android/rules-1427c0) # Rules --- [Source](https:/img.ly/docs/cesdk/android/prebuilt-solutions-d0ed07) # Prebuilt Solutions --- [Source](https:/img.ly/docs/cesdk/android/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/android/overview-8cc730) # Overview --- [Source](https:/img.ly/docs/cesdk/android/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. [ Explore Demos ](https://img.ly/showcases/cesdk?tags=android)[ Get Started ](android/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/android/outlines-b7820c) # Outlines --- [Source](https:/img.ly/docs/cesdk/android/open-the-editor-23a1db) # Open the Editor --- [Source](https:/img.ly/docs/cesdk/android/llms-txt-eb9cc5) # LLMs.txt Our documentation is now available in LLMs.txt format, optimized for AI reasoning engines. To better support platform-specific development, we’ve created separate documentation files for each platform. For Android 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 /android/llms-full.txt ](https://img.ly/docs/cesdk/android/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/android/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/android/key-concepts-21a270) # Key Concepts CE.SDK is built on two distinct technical layers that work together seamlessly: * **User Interface** — Pre-built editors optimized for different use cases * **Engine Interface** — Core rendering and processing engine ![The different layers CE.SDK is made of, see description below.](/docs/cesdk/_astro/layers._NZlSdtG_Zyol2N.webp) This intentional separation gives you powerful advantages: 1. **Cross-platform consistency** – The engine is cross-compiled to native web, iOS, Android, and Node.js, ensuring identical output everywhere 2. **Custom UI** – Build your own UI for simpler tools and workflows 3. **Headless automation** – Run the engine independently for automations and batch processing, both client-side and server-side ## Creative Engine[#](#creative-engine) The Creative Engine powers all core editing operations. It handles rendering, processing, and manipulation across images, layouts, text, video, audio, and vectors. **What the Engine Does:** * Maintains the scene file (your structured content) * Renders the canvas in real-time * Handles block positioning and resizing * Applies filters and effects to images * Manages text editing and typography * Controls templates with role-based permissions * Displays smart guides and snap lines Every engine capability is exposed through a comprehensive API, letting you build custom UIs, workflows, and automations. ## Headless / Engine only[#](#headless--engine-only) Use the engine without any UI for powerful automation scenarios: **Client-side automation** Perfect for in-browser batch operations and dynamic content generation without server dependencies. **Server-side automation with Node.js** Use the [Node.JS SDK](node/what-is-cesdk-2e7acd/) for following scenarios: * **High-resolution processing** – Edit on the client with preview quality, then render server-side with full-resolution assets * **Bulk generation** – Create a large volume of design variations for variable data printing * **Non-blocking workflows** – Let users continue designing while exports process in the background **Server-side export with the CE.SDK Renderer** When exporting complex graphics and videos, the [CE.SDK Renderer](/linux/what-is-cesdk-2e7acd/) can make use of GPU acceleration and video codecs on Linux server environments. **Plugin development** When building CE.SDK plugins, you get direct API access to manipulate canvas elements programmatically. ## User Interface Components[#](#user-interface-components) CE.SDK includes pre-built UI configurations optimized for different use cases: * **Photo editing** — Advanced image editing tools and filters * **Video editing** — Timeline-based video editing and effects * **Design editing** — Layout and graphic design tools (similar to Canva) * **2D product design** — Apparel, postcards, and custom product templates More configurations are coming based on customer needs. ## UI Customization[#](#ui-customization) While UI configurations provide a solid foundation, you maintain control over the user experience: * Apply **custom color schemes** and branding to match your product * Add **custom asset libraries** with your own fonts, images, graphics, videos, and audio The plugin architecture lets you add custom buttons and panels throughout the interface, ensuring the editor feels native to your product. --- [Source](https:/img.ly/docs/cesdk/android/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. [ Explore Demos ](https://img.ly/showcases/cesdk/?tags=android) It’s designed for developers, product teams, and technical decision-makers evaluating how CE.SDK fits their use case. * 100% client-side processing * Built from the ground up (not based on open-source libraries) * Flexible enough for both low-code and fully custom implementations ## Design Creation and Editing[#](#design-creation-and-editing) CE.SDK provides comprehensive tools for creating and editing images, videos, and multi-page layouts directly in the browser with full feature parity to desktop applications. ### Core Capabilities[#](#core-capabilities) * Create, edit, compose, and customize visual content * Dual control: Use the built-in editor UI or programmatic API * Rich editing tools: filters, text styling, stickers, layers, and layout controls ### Supported Workflows[#](#supported-workflows) * Social media content creation and user-generated content flows * Marketing tools for creative teams * Branded asset creation (slides, product visuals, templates) * Composition tools for multi-page layouts, collages, and background blending ## Programmatic and UI-based[#](#programmatic-and-ui-based) You get full control over how your users interact with CE.SDK. * Use the built-in UI for manual workflows * Call the same editing and rendering functionality programmatically * Combine both for hybrid use cases (e.g., users edit manually, backend creates variations) Whether you’re serving designers or developers—or both—CE.SDK adapts to your product’s needs. ## Templates and Reusable Layouts[#](#templates-and-reusable-layouts) Define reusable templates to simplify design creation. These templates support: * Role-based editing (lock/unlock elements based on user type) * Smart placeholders (predefined image/text drop zones) * Preset styles for consistent branding * Programmatic or user-driven updates Templates make it easy to scale consistent design output while keeping editing intuitive. ## Automation and Dynamic Content[#](#automation-and-dynamic-content) You can generate visuals automatically by combining templates with structured data. Common use cases include personalized ads, localizations, product catalogs, or A/B testing. The SDK works in headless mode and supports batch workflows, making it easy to automate at scale. ## Multi-modal[#](#multi-modal) CE.SDK supports a wide range of content types and formats: * Input types: images, video, audio, structured data, templates * Output formats: PNG, JPEG, WebP, MP4, PDF, raw data All operations—including export—run client-side, ensuring fast performance and data privacy. ## AI Integration[#](#ai-integration) Instantly bring best-in-class AI-powered image and video editing to your application with just a few lines of code. All tools run directly inside the existing editor interface—so users stay in the flow while benefiting from powerful automation. Examples of what you can enable: * **Text to Image** – Use prompts to generate original visual content directly in the editor * **Text to Graphics** – Create crisp, scalable illustrations from simple text input * **Style Transfer** – Change the mood or style of an image while preserving its structure * **Create Variants** – Generate endless visual variations of a single subject for campaigns or personalization * **Image to Video** – Transform static images into dynamic motion content with a click * **Text to Speech** – Turn written copy into natural-sounding voiceovers, with control over tone and speed * **Smart Text Editing** – Rewrite or refine text using intelligent editing suggestions * **Swap Background** – Remove or replace backgrounds in seconds * **Add / Remove Objects** – Modify images with generative precision—no external tools required These capabilities can be integrated connecting to any third-party AI model or API with minimal setup. ## Customizable UI[#](#customizable-ui) The built-in interface is designed to be fully customizable: * Rearrange or rename tools * Apply theming and branding * Show/hide features based on user role * Add translations for international users It works across desktop and mobile, and can be extended or replaced entirely if needed. ## Extensibility[#](#extensibility) Need to add a custom feature or integrate with your backend? CE.SDK supports extensibility at multiple levels: * Custom UI components (or build a completely custom UI) * Backend data integrations (e.g., asset management systems) * Custom logic or validation rules * Advanced export workflows The SDK’s plugin architecture ensures you can scale your functionality without rebuilding the core editor. ## Content Libraries[#](#content-libraries) CE.SDK ships with a robust system for managing reusable content: * Built-in libraries of stickers, icons, overlays, and fonts * Integration with third-party providers like Getty Images, Unsplash, or Airtable * Programmatic filtering and categorization * Access assets from both code and UI * Organize by brand, user, or use case This makes it easy to deliver a seamless editing experience—no matter how many assets you manage. --- [Source](https:/img.ly/docs/cesdk/android/insert-media-a217f5) # Insert Media Into Scenes --- [Source](https:/img.ly/docs/cesdk/android/import-media-4e3703) # Import Media --- [Source](https:/img.ly/docs/cesdk/android/guides-8d8b00) # Guides --- [Source](https:/img.ly/docs/cesdk/android/filters-and-effects-6f88ac) # Filters and Effects --- [Source](https:/img.ly/docs/cesdk/android/fills-402ddc) # Fills --- [Source](https:/img.ly/docs/cesdk/android/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) | | **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 (`