[Source](https:/img.ly/docs/cesdk/react-native/what-is-cesdk-2e7acd) # React Native Creative Editor Rich visual design and editing experiences can be created directly within your React Native applications with the help of the React Native Mobile Design Editor SDK. ### What is CE.SDK? **CreativeEditor SDK (CE.SDK)** is a powerful design engine that brings fully customizable image, video, and design editing directly into your React Native 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. [Launch Web Demo](https://img.ly/showcases/cesdk/?tags=android%2Cios) [Get Started](react-native/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 React Native 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 CE.SDK supports a wide range of file types to ensure maximum flexibility for developers: ### 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) 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 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 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](react-native/file-format-support-3c4b2a/). ## 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/react-native/user-interface-5a089a) # User Interface --- [Source](https:/img.ly/docs/cesdk/react-native/use-templates-a88fd4) # Use Templates --- [Source](https:/img.ly/docs/cesdk/react-native/upgrade-4f8715) # Upgrade --- [Source](https:/img.ly/docs/cesdk/react-native/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 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 `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 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](react-native/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](react-native/user-interface/customization/dock-cb916c/) or learn about the general concept here. 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 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 entryconst imageEntry = cesdk.ui.getAssetLibraryEntry('ly.img.image');cesdk.ui.updateAssetLibraryEntry('ly.img.image',{ sourceIds: [...imageEntry.sourceIds, 'my-own-image-source']}) ``` ## 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 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 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 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 on initialization of the editor. --- [Source](https:/img.ly/docs/cesdk/react-native/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 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 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](react-native/settings-970c98/) many [settings](react-native/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 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. * `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 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 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 ``` 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 ``` 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 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 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 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 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/react-native/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 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 containing the desired assets. ## 2\. Deprecating Extensions Starting with `v1.10` we fully embrace Asset Sources 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 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` Adds a set of asset sources containing our default assets. These assets may be used in production and served from your own servers. 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` 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 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 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 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 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 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/react-native/text-8a993a) # Text --- [Source](https:/img.ly/docs/cesdk/react-native/stickers-and-shapes-a000fe) # Stickers and Shapes --- [Source](https:/img.ly/docs/cesdk/react-native/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 ### `BlockAnimationSettings` Member Type Default Description enabled `bool` `true` Whether animations should be enabled or not. ### `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` Member Type Default Description clamping `CameraClampingSettings: CameraClampingOvershootMode overshootMode` `{}` Clamping settings for the camera. ### `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` 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` 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` 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` 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` Member Type Default Description showButton `bool` `true` Show the placeholder button. showOverlay `bool` `true` Show the overlay pattern. ### `Settings` 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. 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. 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` 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`. --- [Source](https:/img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07) # Prebuilt Solutions --- [Source](https:/img.ly/docs/cesdk/react-native/rules-1427c0) # Rules --- [Source](https:/img.ly/docs/cesdk/react-native/overview-8cc730) # Overview --- [Source](https:/img.ly/docs/cesdk/react-native/overview-7d12d5) # React Native 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 voiceover, 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](react-native/get-started/overview-e18f40/) ## 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, voiceovers, 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 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 CE.SDK allows you to easily integrate AI tools directly into your video editing workflow. Users can generate images, videos, audio, and voiceovers 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 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) **Audio** `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) 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** * **H.264 / AVC** (in `.mp4`) * **H.265 / HEVC** (in `.mp4`, may require platform-specific support) ### **Audio Codecs** * **MP3** (in `.mp3` or within `.mp4`) * **AAC** (in `.m4a` or within `.mp4` or `.mov`) ## 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 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 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 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/react-native/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](react-native/get-started/overview-e18f40/) ## 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 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 ### 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 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 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 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 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/react-native/outlines-b7820c) # Outlines --- [Source](https:/img.ly/docs/cesdk/react-native/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 React Native 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 /react-native/llms-full.txt ](https://img.ly/docs/cesdk/react-native/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? 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 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 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/react-native/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 * **Client-Side Processing**: All image and design processing occurs directly on the user’s device, 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 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 **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 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 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 ## 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 ### 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 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 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 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 ### Does CE.SDK upload my images or designs to IMG.LY 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? 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? 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? No, IMG.LY has not been involved in any cybersecurity breaches in the last 12 months. ### Does IMG.LY 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 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 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** 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** 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** 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** 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)** 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** 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/react-native/insert-media-a217f5) # Insert Media Into Scenes --- [Source](https:/img.ly/docs/cesdk/react-native/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 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 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 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 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/react-native/guides-8d8b00) # Guides --- [Source](https:/img.ly/docs/cesdk/react-native/key-capabilities-dbb5b1) # Key Capabilities This guide gives you a high-level look at what CreativeEditor SDK (CE.SDK) can do—and how deeply it can integrate into your workflows. Whether you’re building a design editor into your product, enabling automation, or scaling personalized content creation, CE.SDK provides a flexible and future-ready foundation. [Launch Web Demo](https://img.ly/showcases/cesdk) It’s designed for developers, product teams, and technical decision-makers evaluating how CE.SDK fits their use case. * 100% client-side processing * Built from the ground up (not based on open-source libraries) * Flexible enough for both low-code and fully custom implementations ## Design Creation and Editing Create, edit, compose, and customize designs—including images, video, and multi-page layouts—directly in the browser. Use the built-in editor interface or access the same functionality through code. You can: * Enable social media content creation or UGC flows * Power marketing tools for creative teams * Allow users to build branded assets, slides, or product visuals * Arrange scenes using composition tools like multi-page layouts, collages, and background blending Available features include filters, text editing, stickers, layers, layout tools, and more. ## 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 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 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 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 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 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 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 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/react-native/filters-and-effects-6f88ac) # Filters and Effects --- [Source](https:/img.ly/docs/cesdk/react-native/export-save-publish-47e28a) # Export, Save, and Publish --- [Source](https:/img.ly/docs/cesdk/react-native/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 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) 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 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 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. ## Font Formats Format Description `.ttf` TrueType Font `.otf` OpenType Font `.woff` Web Open Font Format `.woff2` Compressed Web Open Font Format 2 Fonts should be appropriately licensed before being embedded in your application. ## Video & Audio Codecs CE.SDK supports the most widely adopted video and audio codecs to ensure compatibility across platforms: ### **Video Codecs** * **H.264 / AVC** (in `.mp4`) * **H.265 / HEVC** (in `.mp4`, may require platform-specific support) ### **Audio Codecs** * **MP3** (in `.mp3` or within `.mp4`) * **AAC** (in `.m4a` or within `.mp4` or `.mov`) ## Size Limits ### Image Resolution Limits Constraint Recommendation / Limit **Input Resolution** Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. **Output Resolution** There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device’s GPU capabilities and available memory. All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. To ensure consistent results across devices, it’s best to test higher output sizes on your target hardware and set conservative defaults in production. ### Video Resolution & Duration Limits 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/react-native/edit-video-19de01) # Edit Videos --- [Source](https:/img.ly/docs/cesdk/react-native/import-media-4e3703) # Import Media --- [Source](https:/img.ly/docs/cesdk/react-native/edit-image-c64912) # Edit Image --- [Source](https:/img.ly/docs/cesdk/react-native/create-composition-db709c) # Create Compositions --- [Source](https:/img.ly/docs/cesdk/react-native/create-templates-3aef79) # Create Templates --- [Source](https:/img.ly/docs/cesdk/react-native/conversion-c3fbb3) # Conversion --- [Source](https:/img.ly/docs/cesdk/react-native/configuration-2c1c3d) # Configuration ``` import IMGLYEditor, { EditorPreset, EditorSettingsModel} from '@imgly/editor-react-native'; export const basicEditor = async (): Promise => { const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY', sceneBaseUri: 'YOUR_SCENE_BASE_URI', assetBaseUri: 'YOUR_ASSET_BASE_URI', userId: 'YOUR_USER_ID' }); const source = require('MY_CUSTOM_SOURCE'); const preset: EditorPreset = EditorPreset.DESIGN; const metadata = { MY_KEY: 'MY_VALUE' }; const result = await IMGLYEditor?.openEditor( settings, source, preset, metadata );}; ``` In this example, we will show you how to make basic configurations for the mobile editor. The example is based on the [`Design Editor`](https://img.ly/showcases/cesdk/default-ui/ios), however, it is exactly the same for all the other [solutions](react-native/prebuilt-solutions-d0ed07/). ## Configuration The `openEditor` function allows for some further basic configuration of the editor. ### Editor Settings All the basic configuration settings are part of the `EditorConfiguration` which is required to initialize the editor. ``` const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY', sceneBaseUri: 'YOUR_SCENE_BASE_URI', assetBaseUri: 'YOUR_ASSET_BASE_URI', userId: 'YOUR_USER_ID'}); ``` * `license` - the license to activate the [Engine](react-native/get-started/overview-e18f40/) with. ``` license: 'YOUR_LICENSE_KEY', ``` * `sceneBaseUri` - is used to initialize the engine’s [`basePath` setting](react-native/settings-970c98/) before the editor’s `onCreate` callback is run. It is the foundational URL for constructing absolute paths from relative ones. This URL enables the loading of specific scenes or assets using their relative paths. ``` sceneBaseUri: 'YOUR_SCENE_BASE_URI', ``` * `assetBaseUri` - is used to initialize the default assets for the asset library. ``` assetBaseUri: 'YOUR_ASSET_BASE_URI', ``` * `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. The default value is `nil`. ``` userId: 'YOUR_USER_ID' ``` ### Source * `source` - is used to load in a custom source, e.g. a scene, image or video file. ``` const source = require('MY_CUSTOM_SOURCE'); ``` ### EditorPreset * `preset` - is used to determine which predefined editor variant you want to use - if any. ``` const preset: EditorPreset = EditorPreset.DESIGN; ``` ### Metadata * `metadata` - can be used to provide any custom `{ [key: string]: unknown }` to the underlying native plugin which you can use for further custom handling. ``` const metadata = { MY_KEY: 'MY_VALUE'}; ``` ## Full Code ``` import IMGLYEditor, { EditorPreset, EditorSettingsModel,} from '@imgly/editor-react-native'; export const basicEditor = async (): Promise => { const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY', sceneBaseUri: 'YOUR_SCENE_BASE_URI', assetBaseUri: 'YOUR_ASSET_BASE_URI', userId: 'YOUR_USER_ID', }); const source = require('MY_CUSTOM_SOURCE'); const preset: EditorPreset = EditorPreset.DESIGN; const metadata = { MY_KEY: 'MY_VALUE', }; const result = await IMGLYEditor?.openEditor( settings, source, preset, metadata, );}; ``` --- [Source](https:/img.ly/docs/cesdk/react-native/concepts-b9153a) # Concepts --- [Source](https:/img.ly/docs/cesdk/react-native/colors-a9b79c) # Colors --- [Source](https:/img.ly/docs/cesdk/react-native/automation-715209) # Automate Workflows --- [Source](https:/img.ly/docs/cesdk/react-native/animation-ce900c) # Animation --- [Source](https:/img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8) # Customization ``` import IMGLYCameraModule import IMGLYEditorModuleimport SwiftUI func useCustomEditor() { IMGLYEditorModuleSwiftAdapter.shared.builderClosure = { _, metadata in // Make decisions based on your own metadata. if metadata?["use_custom_editor"] as? Bool == true { // Return your custom editor. EditorBuilder.custom { settings, _, _, result in CustomEditor(settings: settings, result: result) } } else { // Return a custom or prebuilt editor. EditorBuilder.design() } }} func configureCamera() { IMGLYCameraModuleSwiftAdapter.shared.cameraBuilderClosure = { metadata in // Make decisions based on your own metadata. if metadata?["use_custom_camera"] as? Bool == true { // Return your custom camera. CameraBuilder.custom { settings, url, metadata, result in CustomCamera(settings: settings, url: url, metadata: metadata, result: result) } } else { // Return a custom or prebuilt camera. CameraBuilder.default() } }} private struct CustomEditor: View { init(settings _: EditorSettings, result _: @escaping EditorBuilder.EditorBuilderResult) {} var body: some View { Text("Custom Editor") }} private struct CustomCamera: View { init( settings _: CameraSettings, url _: URL?, metadata _: [String: Any]?, result _: @escaping CameraBuilder.CameraBuilderResult ) {} var body: some View { Text("Custom Camera") }} ``` ``` @file:Suppress("ktlint:standard:import-ordering") package ly.img.editor.reactnative.showcases.guides import androidx.compose.runtime.Composableimport ly.img.camera.core.CaptureVideoimport ly.img.camera.core.EngineConfigurationimport ly.img.camera.reactnative.module.IMGLYCameraModuleimport ly.img.camera.reactnative.module.model.CameraResultimport ly.img.editor.reactnative.module.IMGLYEditorModuleimport ly.img.editor.reactnative.module.builder.EditorBuilderimport ly.img.editor.reactnative.module.builder.EditorBuilderResultimport ly.img.editor.reactnative.module.model.EditorSettings private fun useCustomEditor() { IMGLYEditorModule.builderClosure = { _, metadata -> if (metadata?.get("custom") == true) { EditorBuilder.custom { CustomEditor(settings, result, onClose) } } else { EditorBuilder.design() } }} private fun customizeCamera() { // Configure the [CaptureVideo.Input]. IMGLYCameraModule.configurationClosure = { metadata -> val engineConfiguration = EngineConfiguration("MY_LICENSE") CaptureVideo.Input(engineConfiguration) } // Modify the [CameraResult]. IMGLYCameraModule.resultClosure = { result -> CameraResult(result?.recording, mapOf("MY_CUSTOM_KEY" to "MY_CUSTOM_VALUE")) }} @Composableprivate fun CustomEditor( settings: EditorSettings, result: EditorBuilderResult, onClose: (Throwable?) -> Unit,) {} ``` The React Native `@imgly/editor-react-native` module is built on top of the native Android and iOS UI implementation and has no dedicated React Native UI. However, you still have access to the same customization options as for iOS and Android. To use them you need to configure them natively for both platforms. ## Native Interfaces In order to allow intuitive and easily accessible native customization of the editors, we provide dedicated interfaces and convenience functions for both iOS and Android. This layer is written in **Swift** and available via the `IMGLYEditorModuleSwiftAdapter.shared` instance. The editor that is opened via the `IMGLYEditorModuleSwiftAdapter.openEditor()` function can be completely customized and exchanged. For this to work you can use the `IMGLYEditorModuleSwiftAdapter.builderClosure` which provides an optional `EditorPreset` and `metadata` with which you can provide any prebuilt or custom editor view. The `metadata` parameter of the `openEditor` function can be utilized to provide customization details from the React Native side of your app to the native side: ### iOS On iOS, we provide fallback functions for our default editors via: * `EditorBuilder.design()` * `EditorBuilder.apparel()` * `EditorBuilder.photo()` * `EditorBuilder.video()` * `EditorBuilder.postcard()` In case you want a completely custom UI, you can use the `EditorBuilder.custom` function that allows you to return a custom `View` based on a given `EditorConfig`, an `EditorPreset`, `metadata` and an `EditorBuilderResult`: #### 1\. Import the dependencies: ``` import IMGLYEditorModuleimport SwiftUI ``` #### 2\. Assign your custom editor: ``` IMGLYEditorModule.builderClosure = { _, metadata -> if (metadata?.get("custom") == true) { EditorBuilder.custom { CustomEditor(settings, result, onClose) } } else { EditorBuilder.design() }} ``` Further, we provide convenience extensions both for the `OnCreate` and `OnExport` callbacks to reduce the amount of code you need to write. For a detailed example, please take a look [at our showcases app](https://github.com/imgly/cesdk-react-native-examples/tree/v1.51.0/showcases/ios/Customizations.swift). ### Android On Android, we provide fallback functions for our default editors via * `EditorBuilder.design()` * `EditorBuilder.apparel()` * `EditorBuilder.photo()` * `EditorBuilder.postcard()` * `EditorBuilder.video()`. In case you want a completely custom UI, you can use the `EditorBuilder.custom` function that allows you to return a custom `@Composable` function based on a given `EditorConfig`, an `EditorPreset`, `metadata` and an `EditorBuilderResult`: #### 1\. Update the `android/app/build.gradle` file and add the following: ``` android { (...) kotlinOptions { jvmTarget = "1.8" } buildFeatures { compose true } composeOptions { kotlinCompilerExtensionVersion = "1.5.10" }} dependencies { implementation "ly.img:editor:1.39.0" implementation(platform("androidx.compose:compose-bom:2023.05.01")) implementation "androidx.activity:activity-compose:1.6.1"} ``` #### 2\. Import the dependencies: ``` import androidx.compose.runtime.Composable ``` ``` import ly.img.editor.reactnative.module.IMGLYEditorModuleimport ly.img.editor.reactnative.module.builder.EditorBuilderimport ly.img.editor.reactnative.module.builder.EditorBuilderResultimport ly.img.editor.reactnative.module.model.EditorSettings ``` #### 3\. Assign your custom editor: ``` IMGLYEditorModule.builderClosure = { _, metadata -> if (metadata?.get("custom") == true) { EditorBuilder.custom { CustomEditor(settings, result, onClose) } } else { EditorBuilder.design() }} ``` Further, we provide a class called `EditorDefaults` which contains convenience methods for both the `OnCreate` and `OnExport` callbacks to reduce the amount of code you need to write. For a detailed example, please take a look [here](https://github.com/imgly/cesdk-react-native-examples/tree/v1.51.0/showcases/android/app/src/main/java/ly/img/editor/reactnative/showcases/MainActivity.kt). --- [Source](https:/img.ly/docs/cesdk/react-native/use-templates/overview-ae74e1) # Overview Templates in CreativeEditor SDK (CE.SDK) are pre-designed layouts that serve as starting points for generating static designs, videos, or print-ready outputs. Templates can be used to produce a wide range of media, including images, PDFs, and videos. Instead of creating a design from scratch, you can use a template to quickly produce content by adapting pre-defined elements like text, images, and layout structures. Using templates offers significant advantages: faster content creation, consistent visual style, and scalable design workflows across many outputs. CE.SDK supports two modes of using templates: * **Fully Programmatic**: Generate content variations automatically by merging external data into templates without user intervention. * **User-Assisted**: Let users load a template, customize editable elements, and export the result manually. Template-based generation can be performed entirely on the client, entirely on a server, or in a hybrid setup where users interact with templates client-side before triggering automated server-side generation. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Ways to Use Templates ### Programmatic Use You can automate the generation of final assets by merging data into templates entirely through code. This is ideal for workflows like mass personalization, product variations, or dynamic marketing content, where the design layout stays consistent, but the content (e.g., names, images, pricing) varies. ### User-Assisted Use Alternatively, templates can be used as editable starting points for users. CE.SDK allows you to define which parts of a template are editable and which are locked. This ensures that users can customize elements such as text or images while maintaining brand or design consistency where needed. This hybrid approach is useful for cases where users need some creative freedom but within structured design constraints. ## Working with Dynamic Content CE.SDK templates support dynamic placeholders for content such as text, images, and custom elements. You can replace dynamic content in several ways: * **Through the UI**: Users can manually edit placeholders directly on the canvas or through a form-based editing interface that lists all editable fields for faster and more structured updates. * **Programmatically**: External data (e.g., from a database, CSV file, or API) can be merged automatically into placeholders without requiring user interaction. This flexibility supports both one-off customizations and large-scale content generation scenarios. ## Exploring the Template Library Templates are stored, organized, and managed through the CE.SDK Template Library. This library acts as a centralized place where templates are categorized and retrieved either programmatically or through the UI. You can work with: * **Default Templates**: Templates that come bundled with the SDK to help you get started quickly. * **Custom Templates**: Templates you create based on your specific use case, offering full flexibility over design, dynamic fields, and editing constraints. * **Premium Templates**: Additional high-quality templates provided by IMG.LY, which can be integrated into your application if licensed. ## Selecting Templates Users can browse and select templates through the Asset Library, which you can customize to match your application’s design and user experience. You have full control over: * The appearance and layout of the template picker. * The filters and categories shown to users. * Whether to display only a subset of templates based on user roles or project types. ## Switching Between Templates Users can switch templates during the editing process. When a new template is applied: * Existing content may be preserved, repositioned, or reset depending on how the templates are configured. * The editor can guide users through the transition to avoid accidental loss of work. You can control how strict or flexible this behavior is, depending on your application’s needs. ## Applying Templates to Existing Scenes It’s possible to apply a template to an existing scene. In these cases: * The template structure can be merged with the current content. * Alternatively, the scene can be reset and rebuilt based on the new template, depending on the chosen integration approach. This enables workflows like refreshing an old design with a new branded layout without starting over. ## Output Formats When Using Templates When generating outputs from templates, CE.SDK supports: 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. Templates are format-aware, allowing you to design once and export to multiple formats seamlessly. For example, a single marketing template could be used to produce a social media graphic, a printable flyer, and a promotional video, all using the same underlying design. --- [Source](https:/img.ly/docs/cesdk/react-native/stickers-and-shapes/overview-ebd6eb) # Overview CreativeEditor SDK (CE.SDK) lets you enrich your designs with **stickers** and **shapes**—two flexible building blocks for visual creativity. * **Stickers** are multi-color, multi-path graphics typically used for icons, emojis, logos, and decorative elements. Stickers cannot be recolored once imported. * **Shapes** are customizable graphical elements—such as rectangles, circles, and polygons—that you can freely recolor and adjust. You can create, edit, and combine stickers and shapes either through the CE.SDK user interface or programmatically using the API. Both elements play essential roles in designing layouts, enhancing branding, and creating marketing graphics. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Stickers vs. Shapes: Key Differences Category Stickers Shapes **Color Editing** Not recolorable after import Fully recolorable **SVG Support** Multi-color, multi-path SVGs supported Single-color, single-path SVGs only **Canvas Behavior** Movable, resizable, rotatable Movable, resizable, rotatable, recolorable **Use Cases** Icons, brand logos, emoji, detailed graphics Graphical elements, backgrounds, visual framing When deciding between the two: * Use a **sticker** when you need detailed, multi-colored artwork that remains fixed in appearance. * Use a **shape** when you want design elements you can recolor, style, and adapt dynamically. ## Built-In Stickers and Shapes CE.SDK offers a library of default assets to help you get started quickly. * **Default Stickers**: Common categories such as emojis, badges, symbols, and decorative graphics. * **Default Shapes**: Predefined types including rectangles, circles, polygons, stars, and custom paths. These assets can be inserted directly through the UI or dynamically via the API. ## Custom Stickers and Custom Shapes You can also import your own vector sticker and shape assets into CE.SDK: * **Custom Stickers**: * Supported file type: SVG. * Stickers can contain multiple paths and colors. * Once imported, stickers behave like regular sticker assets but cannot be recolored. * **Custom Shapes**: * Supported file type: SVG. * Must consist of a **single path** and **single color**. * Shapes can be recolored, resized, and customized after import. Be mindful of these structural differences when preparing your SVG files. ## Editing Stickers and Shapes Once added to a scene, both stickers and shapes are fully interactive on the canvas. * **Editable properties for shapes**: * Fill color * Stroke color and width * Border radius (for certain shapes like rectangles) * Opacity * Rotation * Scaling * **Editable properties for stickers**: * Size * Rotation * Opacity * **Note:** Stickers cannot have their colors changed after import. Both types of elements can be manipulated manually via the UI or programmatically through the CE.SDK API. ## Combining Stickers and Shapes CE.SDK allows you to combine multiple stickers or shapes using boolean operations to create new, complex designs. * **Combine**: Merges all selected elements into a single new shape. * **Subtract**: Removes the top element’s area from the bottom element. * **Intersect**: Keeps only the overlapping area of all selected elements. * **Exclude**: Keeps only the non-overlapping parts, removing the intersections. These operations allow you to: * Create custom compound shapes. * Subtract logos or icons from backgrounds. * Design intricate, multi-part layouts from basic elements. After combining, the resulting object behaves like a standard shape or sticker and can be resized, rotated, or styled according to its type. ## Working with Cutouts **Cutouts**—also called **cutout lines**—define the outline path around an object, often used for printing applications like custom stickers or die-cut designs. In CE.SDK: * You can create cutouts around shapes or stickers. * Cutouts help in generating accurate printable paths or previewing how a sticker would be physically cut. * Cutouts are set in a specific spot color to control advanced print & cutting workflows. Cutouts are an essential tool when preparing designs for production or physical printing workflows. --- [Source](https:/img.ly/docs/cesdk/react-native/stickers-and-shapes/create-cutout-384be3) # Create Cutout --- [Source](https:/img.ly/docs/cesdk/react-native/rules/overview-e27832) # Overview In CreativeEditor SDK (CE.SDK), _rules_—referred to as **scopes** in the API and code—are automated validations that help enforce design and layout standards during editing. You can use scopes to maintain brand guidelines, ensure print readiness, moderate content, and enhance the overall editing experience. Scopes can be applied to both designs and videos, helping you deliver high-quality outputs while reducing the risk of common mistakes. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Understanding Rules in CE.SDK CE.SDK’s Rules system (scopes in code) can enable you to build validation logic to enforce a wide range of design and content requirements automatically. Here are some examples of what can be built on top of the SDK: * **Design constraints:** * Minimum image resolution * No elements placed outside visible canvas bounds * **Brand guidelines:** * Approved fonts, colors, and logo usage * **Print-readiness:** * Safe zones for trimming * Bleed margin requirements * High-resolution assets for print * **Content moderation:** * Flagging potentially inappropriate images or text * **UI-specific constraints:** * Safe zones to prevent critical content from being obscured by app UI elements * **Video editing rules:** * Enforcing required trimming * Protecting key content regions ## How Rules Work Validation with scopes happens continuously and automatically in the background as users edit their designs or videos. When a rule (scope) violation occurs, the SDK immediately notifies the user without requiring manual checks. If the user corrects an issue (for example, by replacing a low-resolution image), the related notification clears automatically without needing a manual refresh or revalidation step. This dynamic, always-on validation keeps the editing workflow smooth and responsive. ## Automatic Notifications When a scope is violated, CE.SDK surfaces a notification directly in the user interface. Notifications provide clear feedback and guide users to correct issues easily. * **Severity indicators:** * **Critical errors** are shown in red (e.g., content outside the printable area) * **Warnings** are shown in yellow (e.g., low-resolution image detected) * **Actionable feedback:** * Clicking a notification brings the user directly to the affected element. * Users can quickly resolve issues without needing technical expertise. This system simplifies workflows, especially for users who are not familiar with technical print requirements or detailed layout standards. ## Benefits of Using Rules Integrating scopes into your CE.SDK experience offers multiple advantages: * **Reduce errors:** Minimize risks of misprints, layout problems, and brand inconsistency. * **Automatic compliance:** Validate designs and videos in real time without disrupting the creative process. * **Professional results:** Help users — including those without technical or print knowledge — achieve polished, production-ready outputs. * **Streamlined workflows:** Speed up editing and reduce manual review by surfacing issues early and clearly. By leveraging scopes, you can ensure a higher standard of quality, consistency, and reliability across all designs created with CE.SDK. --- [Source](https:/img.ly/docs/cesdk/react-native/text/overview-0bd620) # Overview In CreativeEditor SDK (CE.SDK), a _text element_ is an editable, stylable block that you can add to your design. Whether you’re creating marketing graphics, videos, social media posts, or multilingual layouts, text plays a vital role in conveying information and enhancing your visuals. You can fully manipulate text elements using both the user interface and programmatic APIs, giving you maximum flexibility to control how text behaves and appears. Additionally, text can be animated to bring motion to your designs. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Text Capabilities in CE.SDK CE.SDK offers robust text editing capabilities designed for both designers and developers: * **Adding and editing text objects:** Easily insert text into your designs through the UI or dynamically create and update text blocks via the API. * **Resizing and positioning:** Move, align, and resize text objects freely on the canvas to achieve the perfect layout. * **Dynamic editing:** Programmatically update text content, style, or position based on data or user input, enabling powerful automation workflows. * **Inline Editing:** Directly see changes in the context of your design instead of a separate input. ## Text Styling, Formatting, Effects, and Spacing CE.SDK provides a comprehensive set of text styling and formatting options: * **Basic styling options:** * Choose from a range of fonts. * Adjust font size, color, and opacity. * Apply text formatting such as bold, italic, and underline. * **Advanced effects:** * Add shadows for depth. * Outline text for emphasis. * Apply glow effects to make text stand out. * **Spacing controls:** * Fine-tune letter spacing (tracking). * Adjust line height for readability. * Set paragraph spacing for structured layouts. You can apply all styling, formatting, effects, and spacing adjustments both manually through the UI and programmatically via the API, offering flexibility for user-driven design or fully automated generation. ## Text Containers and Auto-Sizing Text in CE.SDK can be configured in frames that adapt to different content scenarios: * **Fixed-size frame:** Keep text confined within a defined width and height. * **Growing frames:** Allow the text block to expand automatically as more text is added in specific directions. Auto-sizing behaviors can be customized to ensure your text either stays within design constraints or flows naturally as content changes. ## Emojis in Text CE.SDK fully supports inserting emojis alongside regular text: * **Emoji insertion:** Add emojis directly within text blocks, just like any other character. * **Styling:** Emojis inherit the styling of surrounding text, ensuring visual consistency. * **Format support:** Unicode-based emojis are supported with robust fallback behavior for consistent display across platforms. * **Customizable:** The font used for drawing Emojis can be configured. ## Fonts, Language, and Script Support Text handling in CE.SDK is built to support a wide range of languages, scripts, and font management needs: * **Custom fonts:** Upload and manage your own font collections to match brand guidelines. * **Font restrictions:** Control which fonts are available to end users for a curated design experience. * **Multi-script handling:** Seamlessly mix different scripts (e.g., Latin, Cyrillic, Kanji) within the same design. * **Fallbacks:** Handles an endless amount of characters by providing a robust fallback system that ensures your text is always readable. --- [Source](https:/img.ly/docs/cesdk/react-native/prebuilt-solutions/t-shirt-designer-02b48f) # T-Shirt Designer in React Native Quickly add a professional-grade t-shirt design editor to your React Native app with CE.SDK. [ Launch Web Demo ](https://img.ly/showcases/cesdk/apparel-editor-ui/)[ View on GitHub ](https://github.com/imgly/cesdk-react-native-examples/tree/main/showcases/guides/editor-guides-solutions-apparel-editor) ## What is the T-Shirt Designer Solution? The T-Shirt Designer is a pre-configured instance of the CreativeEditor SDK (CE.SDK) tailored for apparel design workflows. It enables your users to create high-quality, print-ready t-shirt designs directly in your app—whether for a custom merchandise platform, print-on-demand storefront, or internal design tool. This solution comes with a realistic t-shirt mockup background, precise boundary enforcement, and a simplified UI. You can easily integrate it across web, mobile, or desktop platforms and customize it to match your brand or workflow. ## Key Features * **T-Shirt backdrop with placement guidance** A visually accurate t-shirt background helps users place artwork exactly where it will appear when printed. * **Strict print area enforcement** Elements that extend beyond the defined print region are clipped automatically, ensuring print precision. * **Placeholder-based template editing** Supports templates with editable placeholders, such as swappable images. Define which parts of a design are user-editable by toggling between Creator and Adopter modes. * **Print-ready PDF export** Outputs print-quality PDFs to seamlessly fit into your existing production workflows. * **Fully customizable UI** Adapt the interface and features to suit your brand and user needs using the CE.SDK configuration API. ## Why Use This Solution? * **Accelerated development** Save engineering time with a ready-made editor specifically configured for t-shirt design. * **Better user experience** The focused UI reduces complexity, guiding users through apparel creation with built-in visual feedback and safeguards. * **Seamless print integration** The export format and boundary enforcement make it ideal for print-on-demand systems with no additional post-processing required. * **Flexible and extensible** As with all CE.SDK solutions, the T-Shirt Designer is deeply customizable—extend features, change design constraints, or integrate external data and asset libraries. --- [Source](https:/img.ly/docs/cesdk/react-native/prebuilt-solutions/postcard-editor-61e1f6) # React Native Postcard Editor The Postcard Editor is a prebuilt CreativeEditor SDK (CE.SDK) solution designed for quickly creating and personalizing postcards and greeting cards. It provides an intuitive UI that guides users through selecting a design, editing its contents, and customizing messaging—all without needing design expertise. This ready-to-use editor can be easily added to your React Native app and fully customized to match your brand, making it ideal for direct mail campaigns, seasonal greetings, or personalized customer engagement. [ Launch Web Demo ](https://img.ly/showcases/cesdk/post-greeting-cards/)[ View on GitHub ](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-post-greeting-cards) ## What is the Postcard Editor Solution? The Postcard Editor is a prebuilt CreativeEditor SDK (CE.SDK) solution designed for quickly creating and personalizing postcards and greeting cards. It provides an intuitive UI that guides users through selecting a design, editing its contents, and customizing messaging—all without needing design expertise. With built-in support for style presets, design constraints, and variable-driven personalization, the Postcard Editor enables scalable creation of high-quality, print-ready content for direct mail, seasonal greetings, and personalized campaigns. ## Key Features * **Style presets** Jump-start the design process with a collection of professionally crafted postcard templates. * **Design mode** After selecting a style, users can personalize the design. Depending on the template configuration, they can: * Change accent and background colors * Replace photos from a library or upload their own * Edit headings and body text (fonts, colors, layout) * Add stickers, shapes, or other decorative elements * **Write mode** Users can add a personal message and address the card. Text styling options include font, size, and color customization. * **Dynamic variables** Enable scalable personalization using variables like `{{firstname}}` or `{{address}}`. Templates can be connected to external data sources for automated batch generation. * **Print-ready export** Designs are exported in high-resolution, print-friendly formats, suitable for direct mail or digital delivery. ## Why Use This Solution? * **Accelerate development** Save time with a pre-configured UI that’s production-ready and easily customizable via CE.SDK’s headless API. * **Empower non-designers** Make creative tools accessible to any user by enforcing design constraints and simplifying the editing experience. * **Scale personalization** Integrate with external data to programmatically generate personalized postcards for marketing, e-commerce, or events. * **Cross-platform ready** The Postcard Editor works across web, mobile, and desktop environments, offering a seamless user experience wherever it’s deployed. --- [Source](https:/img.ly/docs/cesdk/react-native/prebuilt-solutions/design-editor-9bf041) # React Native Design Tool & Design Editor Give your users a fast, intuitive way to personalize templates with layout, text, and image editing — no design experience needed. The Design Editor comes ready to use and can be easily added to your React Native app with minimal setup. [ Launch Web Demo ](https://img.ly/showcases/cesdk/default-ui/)[ View on GitHub ](https://github.com/imgly/cesdk-react-native-examples/tree/main/showcases/guides/editor-guides-solutions-design-editor) ## What is the Design Editor Solution? The Design Editor is a pre-built configuration of the CreativeEditor SDK (CE.SDK), tailored for non-professional users to easily adapt and personalize existing templates. It’s optimized for workflows that focus on editing layout elements like text, images, and shapes — all within clearly defined design constraints. Whether you’re building a product customization app, dynamic ad creator, or template-based marketing tool, the Design Editor brings a polished, user-friendly interface to your users — right out of the box. ## Key Features * **Template-based editing** Empower users to customize existing templates while preserving brand integrity and layout rules. * **Smart context menus** Clicking an element opens a simplified editing toolbar, showing only the most relevant actions — like replacing or cropping an image. * **Streamlined user interface** The interface is designed to surface essential tools first. A “More” button reveals the full set of features for deeper editing. * **Role-based permissions** Easily toggle between _Creator_ and _Adopter_ roles to define what elements users can modify, lock, or hide. * **Cross-platform support** Available for Web, iOS, Android, and Desktop — all powered by the same core SDK. ## Why Use This Solution? The Design Editor is the fastest way to offer layout editing with production-ready UX. It reduces the effort of building a complete UI from scratch, while giving you full control over customization and integration. Choose this solution if you want to: * Provide a ready-to-use template editor that feels intuitive to end users * Accelerate your time to market with a polished layout editing experience * Maintain creative control by restricting editable areas with template constraints * Avoid building custom design tooling for every use case --- [Source](https:/img.ly/docs/cesdk/react-native/prebuilt-solutions/photo-editor-42ccb2) # React Native Photo Editor SDK Rich image and editing experiences can be created directly within your React Native applications with the help of the React Native Mobile Image Editor SDK. React Native, with its ability to create cross-platform applications from a single codebase, is a perfect match for IMG.LY’s CreativeEditor SDK. Whether your app targets social media, marketing, or eCommerce, implementing a image editor gives users a creative tool set and improves the whole experience. [Launch Web Demo](https://img.ly/showcases/cesdk/?tags=android%2Cios) [Get Started](react-native/get-started/overview-e18f40/) ## Key Capabilities of the React Native Image Editor SDK ![Transforms](/docs/cesdk/_astro/Transform.By5kJRew_2acCrV.webp) ### Transforms Includes straightening, scaling, rotation, and flip functions. ![Advanced Adjustment Tools](/docs/cesdk/_astro/Templating.eMNm9_jD_ycnVt.webp) ### Advanced Adjustment Tools Includes brightness, saturation, contrast, gamma, clarity, exposure, shadows, highlights, and more. ![Filters](/docs/cesdk/_astro/Filters.D0Iue_r-_Z1VcFlR.webp) ### Filters Provide a wide range of built-in filters and effects or upload your own custom filters. ![Effects & Blur](/docs/cesdk/_astro/Effects.sSLfFAca_d6Uaj.webp) ### Effects & Blur Unique effects such as pixelize, glitch, or mirror. ![Text Editing](/docs/cesdk/_astro/TextEditing.B8Ra1KOE_2lGC8C.webp) ### Text Editing Add and style text blocks with various fonts, colors, and effects. ![Asset Libraries](/docs/cesdk/_astro/AssetLibraries.Ce9MfYvX_HmsaC.webp) ### Asset Libraries Add custom assets for stickers, filters, and shapes. ![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. ![Customizable UI](/docs/cesdk/_astro/CustomizableUI.DtHv9rY-_2fNrB2.webp) ### Customizable UI Tailor the photo editing interface to align with your application’s branding and UX requirements. ## What is the Photo Editor Solution? The Photo Editor is a fully customizable CE.SDK configuration focused on photo-centric use cases. It strips down the editor interface to include only the most relevant features for image adjustments — giving users a focused and responsive experience. Whether your users need to fine-tune selfies, prepare product photos, or create profile images, this solution makes it easy. Get a powerful photo editor into your app with minimal setup. The Photo Editor runs entirely client-side — which helps reduce cloud computing costs and improve privacy. ## Supported Platforms Using a common graphics engine for both iOS and Android, React Native guarantees smooth performance on both of these platforms. This ensures uniform rendering across all platforms, compatible designs, and consistent functionality. ## Prerequisites Make sure your environment satisfies the following requirements * React Native: 0.73+ * iOS: 16+ * Swift: 5.10 (Xcode 15.4) * Android: 7+ Add the `@imgly/editor-react-native` package to your project to get started. ## Supported File Types The SDK supports various image formats for loading, editing, and exporting within your React Native application. ### 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) 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 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 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](react-native/file-format-support-3c4b2a/). ## Understanding CE.SDK Architecture & API The following sections provide an overview of the key components of the CE.SDK photo editor UI and its API architecture. If you’re ready to start integrating CE.SDK into your React Native application, check out our Implementation Guide. ### CreativeEditor SDK Mobile Photo UI The CE.SDK photo editor UI is a streamlined configuration of the CreativeEditor SDK, focusing on essential photo editing features. This configuration is fully customizable, allowing developers to adjust the UI and functionality to suit different use cases. Key components include: * **Canvas:** The primary workspace where users interact with their photo content. * **Inspector Bar:** Offers tools for adjusting properties like size, position, and effects for selected elements. * **Asset Library:** A collection of media resources available for use within the photo editor, including images and stickers. Learn more about interacting with and customizing the photo editor UI in our design editor UI guide. ### CreativeEngine At the heart of CE.SDK is the CreativeEngine, which powers all rendering and photo manipulation tasks. It can be used in headless mode or in combination with the CreativeEditor UI. Key features and APIs provided by CreativeEngine include: * [**Scene Management:**](react-native/open-the-editor/overview-99444b/) Create, load, save, and manipulate photo scenes programmatically. * **Block Management:** Manage images, text, and other elements within the photo editor. * **Asset Management:** Integrate and manage photo and image assets from various sources. * **Variable Management:** Define and manipulate variables for dynamic content within photo scenes. * **Event Handling:** Subscribe to events like image selection changes or editing actions for dynamic interaction. ## Customizing the React Native Mobile Image Editor CE.SDK provides extensive customization options, allowing you to tailor the UI and functionality to meet your specific needs. This can range from basic configuration settings to more advanced customizations involving callbacks and custom elements. ### Basic Customizations Configure the editor by passing a configuration object during initialization: ``` const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY', userId: 'YOUR_USER_ID',}); ``` Explore further customization options by visiting the configuration guide. ## 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/react-native/prebuilt-solutions/camera-editor-5c6d08) # React Native Camera and Editor Bring powerful photo and video capabilities into your app with a few lines of code. The Camera and Editor solution from IMG.LY provides an easy-to-integrate React Native module for capturing, editing, and exporting media—fully optimized for mobile and ready for production. You can embed it directly into your app, giving users the tools they need to create and personalize visual content without leaving your platform. [ View on GitHub ](https://github.com/imgly/camera-react-native) ## What is the Camera and Editor Solution? The Camera and Editor solution combines a customizable React Native camera module with CE.SDK’s creative editing capabilities. It allows you to capture photos and videos directly in your app, then pass them seamlessly into an editor with support for filters, overlays, cropping, adjustments, and more. Powered by the Creative Engine behind CE.SDK, this pre-built solution ensures high-performance media processing, real-time preview, and cross-platform compatibility on iOS and Android—including full Expo support. ## Key Features * **Built-in Camera Module** Capture photos and videos with full control over resolution, aspect ratio, and camera switching. * **Media Editing Tools** Let users apply filters, crop, adjust brightness and contrast, add stickers or text, and more. * **Templating Support** Integrate branded templates or user-generated designs with placeholders for dynamic content. * **Cross-Platform** Works on both iOS and Android, fully compatible with React Native and Expo workflows. * **Optimized for Mobile** Fast and responsive thanks to native rendering and low-overhead architecture. ## Why Use This Solution? If you’re building a social app, e-commerce platform, or any experience where users interact with media, this solution helps you get to market faster with production-ready camera and editor features. Instead of building from scratch, you can rely on a robust, extensible SDK that handles everything from camera preview to creative rendering. It’s ideal for: * React Native developers who want native-like performance with minimal setup * Teams building user-generated content workflows * Mobile apps that need media capture and editing without reinventing the wheel --- [Source](https:/img.ly/docs/cesdk/react-native/prebuilt-solutions/video-editor-9e533a) # React Native Video Editor SDK Rich video and editing experiences can be created directly within your React Native applications with the help of the React Native Mobile Video Editor SDK. React Native, with its ability to create cross-platform applications from a single codebase, is a perfect match for IMG.LY’s CreativeEditor SDK. Whether your app targets social media, marketing, or eCommerce, implementing a video editor gives users a creative tool set and improves the whole experience. [Launch Web Demo](https://img.ly/showcases/cesdk/video-ui/ios) [Get Started](react-native/get-started/overview-e18f40/) ## Key Capabilities of the React Native Mobile Video Editor SDK ![Multi-Format Support](/docs/cesdk/_astro/Transform.By5kJRew_2acCrV.webp) ### Multi-Format Support Create videos in various formats, including story reels and Ultra HD, tailored for different channels like Instagram, TikTok, or custom formats. ![Templating](/docs/cesdk/_astro/Templating.eMNm9_jD_ycnVt.webp) ### Templating Jumpstart your users designs with easily adaptable templates including text variables and placeholders. ![Asset Management](/docs/cesdk/_astro/AssetLibraries.Ce9MfYvX_HmsaC.webp) ### Asset Management Record, upload, or select pre-existing videos, images, and other media from a custom library to enrich video content. ![Advanced Editing Tools](/docs/cesdk/_astro/Empty.BC0Yy-JZ_ZE3B5R.webp) ### Advanced Editing Tools Utilize features such as adjustments, filters, effects, and blur to fine-tune each element or the entire video, delivering a professional finish. ![Timeline Management](/docs/cesdk/_astro/Timeline.DdbXIpJt_ZhJ8vc.webp) ### Timeline Management Arrange multiple video clips, images, text, stickers, and shapes on a timeline for precise control over the final output. ![Audio Integration](/docs/cesdk/_astro/Audio.DQACp-LE_ZxUTVz.webp) ### Audio Integration Enhance videos with audio tracks, either imported or selected from a custom asset library, to add another layer of creativity. ![Customizable UI](/docs/cesdk/_astro/CustomizableUI.DtHv9rY-_2fNrB2.webp) ### Customizable UI Tailor the video editing interface to match your application’s branding and user experience needs, ensuring an intuitive and engaging experience. ![Camera SDK](/docs/cesdk/_astro/Camera.CJ5AVUxa_Z18cCd7.webp) ### Camera SDK Easily integrate with our Camera SDK for dual camera, timers and more ## What is the Video Editor Solution? The Video Editor is a prebuilt solution powered by the CreativeEditor SDK (CE.SDK) that enables fast integration of high-performance video editing into web, mobile, and desktop applications. It’s designed to help your users create professional-grade videos—from short social clips to long-form stories—directly within your app. Skip building a video editor from scratch. This fully client-side solution provides a solid foundation with an extensible UI and a robust engine API to power video editing in any use case. ## Supported Platforms Using a common graphics engine for both iOS and Android, React Native guarantees smooth performance on both of these platforms. This ensures uniform rendering across all platforms, compatible designs, and consistent functionality. ## Prerequisites Make sure your environment satisfies the following requirements * React Native: 0.73+ * iOS: 16+ * Swift: 5.10 (Xcode 15.4) * Android: 7+ Add the `@imgly/editor-react-native` package to your project to get started. ## Supported Media Types [IMG.LY](http://img.ly/)’s Creative Editor SDK enables you to load, edit, and save **MP4 files** directly on the device without server dependencies. ### 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) 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 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 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](react-native/file-format-support-3c4b2a/). ## Understanding CE.SDK Architecture & API The following sections provide an overview of the key components of the CE.SDK video editor UI and its API architecture. If you’re ready to start integrating CE.SDK into your React Native application, check out our [Implementation Guide](react-native/prebuilt-solutions/video-editor-9e533a/). ### CreativeEditor SDK Mobile Video UI The CE.SDK video editor UI is a specific configuration of the CreativeEditor SDK, focusing on essential video editing features. It includes robust tools for video manipulation, customizable to suit different use cases. Key components include: * **Canvas:** The main workspace where users interact with their video content. * **Timeline:** Provides control over the sequence and duration of video clips, images, and audio tracks. * **Tool Bar:** Provides essential editing options like adjustments, filters, effectsi, layer management or adding text or images in order of relevance. * **Context Menu:** Presents relevant editing options for each selected element, simplifying the editing process for users. Learn more about interacting with and customizing the video editor UI in our design editor UI guide. ### CreativeEngine At the core of CE.SDK is the CreativeEngine, which handles all rendering and video manipulation tasks. It can be used in headless mode or alongside the CreativeEditor UI. Key features and APIs provided by CreativeEngine include: * [**Scene Management:**](react-native/open-the-editor/overview-99444b/) Create, load, save, and manipulate video scenes programmatically. * **Block Management:** Manage video clips, images, text, and other elements within the timeline. * **Asset Management:** Integrate and manage video, audio, and image assets from various sources. * **Variable Management:** Define and manipulate variables for dynamic content within video scenes. * **Event Handling:** Subscribe to events like clip selection changes or timeline updates for dynamic interaction. ## Customizing the React Native Mobile Video Editor CE.SDK provides extensive customization options, allowing you to tailor the UI and functionality to meet your specific needs. This can range from basic configuration settings to more advanced customizations involving callbacks and custom elements. ### Basic Customizations Configure the editor by passing a configuration object during initialization: ``` const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY' }); ``` Explore further customization options by visiting the [configuration guide.](react-native/user-interface/customization-72b2f8/) ## Framework Support CreativeEditor SDK’s video editor is compatible with React Native, making it easy to integrate into your application. ## 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/react-native/outlines/overview-dfeb12) # Overview In CreativeEditor SDK (CE.SDK), _outlines_ refer to visual enhancements added around design elements. They include strokes, shadows, and glows, each serving to emphasize, separate, or stylize content. Outlines help improve visibility, create visual contrast, and enhance the overall aesthetic of a design. You can add, edit, and remove outlines both through the CE.SDK user interface and programmatically via the API. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Understanding Outlines * **Stroke (Outline):** A solid line that directly traces the border of an element. Strokes can vary in thickness, color, and style (such as dashed or dotted lines). * **Shadow:** A duplicate of the element rendered with an offset and blur effect, creating the illusion of depth. * **Glow:** A soft, diffused light that radiates outward from the element, typically used to create a luminous or halo effect. We don’t support `glow` directly in our API, however, it can be achieved by using a brightly-colored shadow. Each type of outline offers different visual styles and purposes, allowing you to tailor your design’s look and feel. ## Supported Elements You can apply outlines to a wide range of elements in CE.SDK, including: * Text elements * Shapes * Images * Stickers Some asset types or highly customized components may have limitations on which outline effects they support. Always check element capabilities if outline options appear unavailable. ## UI Editing In the CE.SDK user interface, you can: * **Add outlines** by selecting an element and enabling stroke, shadow, or glow options in the properties panel. * **Edit outline properties** such as color, thickness, opacity, blur radius, and offset directly through the UI controls. * **Remove outlines** by disabling the stroke, shadow, or glow for a selected element. These tools allow designers to quickly apply and adjust outlines without needing to write code. ## Programmatic Editing Developers can also manage outlines programmatically using the CE.SDK API. This includes: * **Accessing and modifying properties** such as stroke color, stroke width, shadow blur, and shadow offset. * **Enabling or disabling outlines** for individual design blocks. * **Removing outlines** programmatically by disabling stroke or shadow effects on a block. Programmatic control enables dynamic styling and automation for design generation workflows. ## Customizing Outline Properties Outlines in CE.SDK offer a variety of customizable properties to fit different design needs: * **Color:** Define the stroke or glow color to match branding or design themes. * **Thickness (Stroke Width):** Adjust how bold or subtle the stroke appears around the element. * **Opacity:** Control the transparency of strokes, shadows, or glows for subtle or strong effects. * **Blur (for Shadows and Glows):** Soften the appearance of shadows or glows by adjusting their blur radius. * **Offset (for Shadows):** Set how far a shadow is displaced from the element to control the sense of depth. --- [Source](https:/img.ly/docs/cesdk/react-native/open-the-editor/overview-99444b) # Overview CreativeEditor SDK (CE.SDK) offers multiple ways to open the editor. Whether you’re starting with a blank canvas or importing complex layered files, CE.SDK gives you the building blocks to launch an editing session tailored to your users’ needs. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Ways to Open the Editor You can initialize CE.SDK in several ways depending on your content pipeline: * **Start with a Blank Canvas** Useful for creating new content from scratch. Define canvas dimensions and scene mode manually or programmatically. * **Load a Scene** Load a saved scene from JSON, archive, or blob to restore a previous editing session or template. * **Create from Media** Initialize the editor with a preloaded image, video. * **Create from Template** Kick off the editor with a predefined template, including placeholders and editing constraints. * **Import a Design** Import external designs from InDesign or Photoshop by running them through an importer and edit the resulting scene or archive in the SDK. ## Using Low-Quality / High-Quality Assets To ensure responsive editing and high-quality exports, CE.SDK allows you to dynamically switch between asset resolutions: * **Edit with Low-Res Assets** Load smaller versions of images or videos during the editing process to reduce memory usage and improve performance. * **Export with High-Res Assets** Swap out low-res placeholders for full-quality assets just before exporting. This can be handled using the Scene or Block APIs by switching asset paths or making use of source sets for fills. This pattern is commonly used in design systems that require high-resolution print or web output while maintaining editing performance. ## Working with Watermarked or Placeholder Media CE.SDK supports licensing-based workflows where full-resolution assets are only available after purchase or user action: * **Use Watermarked or Preview Media on Load** Start with branded, obfuscated, or watermarked assets to limit unauthorized use. * **Swap with Purchased Assets Post-Checkout** Replace asset URIs within the same scene structure using a one-time update, ensuring consistency without disrupting layout or styling. ## Implementing a Custom URI Resolver CE.SDK provides a `setURIResolver()` method to intercept and customize asset loading: * **Why Use a URI Resolver?** Handle dynamic URL rewriting, token-based authentication, asset migration, CDN fallbacks, or redirect requests to internal APIs. * **How It Works** The engine routes every asset URI through your custom resolver function. This function returns the final, resolved URI used for the current fetch operation. * **Recommended Use Cases**: * Add auth headers or query params * Redirect public assets to internal mirrors * Handle signed URLs or token expiration --- [Source](https:/img.ly/docs/cesdk/react-native/import-media/overview-84bb23) # Overview In CE.SDK, assets are the building blocks of your creative workflow—whether they’re images, videos, audio, fonts, or templates. They power everything from basic image edits to dynamic, template-driven design generation. This guide gives you a high-level understanding of how to bring assets into CE.SDK, where they can come from, and how to decide on the right strategy for your application. Whether you’re working with local uploads, remote storage, or third-party sources, this guide will help you navigate your options and build an efficient import pipeline. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## What is an Asset? In CE.SDK, an _asset_ refers to any external media that can be inserted into a design scene. Assets are referenced via URIs, and are not stored or hosted by CE.SDK itself. Supported asset types include: * **Images** – JPEG, PNG, WebP, SVG, etc. * **Video** – MP4, WebM * **Audio / Music** – MP3, AAC * **Fonts** – Custom or system fonts * **Stickers** – SVG or PNG elements * **Templates** – Design presets or prebuilt scenes * **Custom Media** – Any content with a valid URI and supported format Assets are used throughout the editor to fill shapes, provide visual or audio decoration, or serve as core scene content. ## Asset Sources in CE.SDK CE.SDK supports a range of asset sources, allowing developers to import media from: * **Local Sources** Assets directly uploaded by the user (e.g., from their device). * **Remote Sources** Media served via external servers or your own backend (e.g., S3, CDN). * **Third-Party Sources** Create custom integrations with Unsplash, Getty, Airtable, etc. * **Dynamic Sources** Assets created or fetched on demand (e.g., generative AI images). **Note:** When a user opens the editor, CE.SDK downloads any referenced assets to the local environment for use within the editing session. ### When to Use Each Asset Source Use Case Recommended Source Type End-users upload personal media Local Source Use your company’s asset library Remote Source Enable searchable stock assets Third-Party Source Fetch real-time AI-generated content Dynamic Source With **Local Asset Sources**, CE.SDK powers search functionality directly in the browser. For **Remote Asset Sources**, searching and indexing are typically offloaded to the server to ensure scalability and performance. **Performance Tip:** If you’re managing **thousands of assets**, it’s best to offload search and filtering to a **remote backend** to avoid performance bottlenecks in the browser. ## Asset Storage and Management in CE.SDK ### No Built-In Storage Provided CE.SDK does **not** host or store assets. You must handle storage using your infrastructure: * Amazon S3 * Google Cloud Storage * Firebase * Your own custom backend ### How It Works * Assets are referenced via **URIs**—not embedded or stored internally. * You implement a **custom asset source**, which returns references to assets via CE.SDK’s API. * Assets are then made available in the **Asset Library** or loaded programmatically. ### Custom Asset Libraries CE.SDK is fully modular. You define how assets are fetched, filtered, categorized, and presented. This works for all asset types: images, videos, audio, and even uploads. ### Uploading Assets CE.SDK supports upload workflows using your own infrastructure: * Use `onUpload` callbacks to trigger uploads. * Refresh asset lists after uploads with `refetchAssetSources`. ### Best Practices Work with your backend team to: * Define where assets are stored and how they’re indexed. * Ensure secure, performant delivery of media files. * Implement custom asset source logic based on CE.SDK’s source API. ## Using and Customizing the Asset Library The built-in Asset Library gives users a way to browse and insert assets visually. You can: * Add or remove asset categories (images, stickers, audio, etc.). * Customize the layout, filters, and tab order. * Show assets from your own remote sources. * Dynamically refresh asset lists when new files are uploaded. ## Default Assets CE.SDK includes a set of default assets (images, templates, stickers, etc.) for testing or bootstrapping a demo. You can: * Use them in development for fast prototyping. * Customize or remove them entirely for production apps. Use `addDefaultAssetSources()` to populate the default library. By default, CE.SDK references assets from IMG.LY’s CDN (cdn.img.ly). This includes asset sources, but also default fonts and font fallbacks. It is highly recommended to serve the assets from your own servers in a production environment. This will ensure full availability and guarantee that your integration isn’t affected by changes to IMG.LY’s CDN. ## Third-Party Asset Integrations CE.SDK supports integrations with popular content platforms: * **Unsplash** – High-quality free stock images * **Pexels** – Free photos and videos * **Getty Images** – Licensed, premium content * **Airtable** – Structured media from database rows * **Soundstripe** – Music and audio tracks for video scenes You can also integrate any other source using a custom asset source and the standard asset source API. ## File Type Support CreativeEditor SDK (CE.SDK) supports importing high-resolution images, video, and audio content. Category Supported Formats **Images** `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` **Video** `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC) **Audio** `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ## Media Constraints ### Image Resolution Limits Constraint Recommendation / Limit **Input Resolution** Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. **Output Resolution** There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device’s GPU capabilities and available memory. All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. To ensure consistent results across devices, it’s best to test higher output sizes on your target hardware and set conservative defaults in production. ### Video Resolution & Duration Limits 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/react-native/import-media/size-limits-c32275) # Size Limits CreativeEditor SDK (CE.SDK) supports importing high-resolution images, video, and audio, but there are practical limits to consider based on the user’s device capabilities. ## Image Resolution Limits Constraint Recommendation / Limit **Input Resolution** Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. **Output Resolution** There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device’s GPU capabilities and available memory. All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. To ensure consistent results across devices, it’s best to test higher output sizes on your target hardware and set conservative defaults in production. ## Video Resolution & Duration Limits 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/react-native/import-media/capture-from-camera-92f388) # Capture From Camera --- [Source](https:/img.ly/docs/cesdk/react-native/get-started/overview-e18f40) # Get Started Welcome to our documentation! This guide will help you get started with our SDK on your preferred platform. ## Choose Your Platform for Android & iOS [→ New Project](react-native/get-started/ios-and-android/new-project-a1234y/)[→ Existing Project](react-native/get-started/ios-and-android/existing-project-b4312d/)[→ Clone GitHub Project](react-native/get-started/ios-and-android/clone-github-c3432f/) --- [Source](https:/img.ly/docs/cesdk/react-native/export-save-publish/overview-72284a) # Overview This guide helps you understand how to persist and share creative work using the CreativeEditor SDK (CE.SDK). Whether you’re building user-driven editors, automations, or backend publishing flows, CE.SDK gives you flexible tools to export, save, and publish projects. CE.SDK supports **multi-modal output**, allowing you to export creative as: * Static designs * Print-ready PDFs * Videos All exporting and saving operations are handled **entirely on the client**. You don’t need a server to export files or save scenes, although you can easily integrate uploads or publishing workflows if needed. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Export vs. Save: What’s the Difference? **Exporting** creates a media file meant for consumption — like downloading a finalized PNG, uploading a video for YouTube, or printing a poster. Once exported, the file cannot be edited unless you reimport it as a new asset. **Saving** preserves the entire editable scene, including layers, settings, and asset references. Saved scenes can be reloaded, edited, and exported again later. Action Purpose Example **Export** Create final output User downloads a social media asset as PNG **Save** Save editable project state User saves a draft design to continue editing later ## Ways to Export or Save ### Using the UI You can export and save directly through CE.SDK’s built-in UI, such as export buttons, menu items, or publish actions. This behavior is fully customizable — you can modify or extend the UI to fit your app’s specific needs. ### Programmatically You can trigger exports and saves silently through the API, ideal for background processes, automation workflows, or headless scenarios. ### Supported Export Formats Category Supported Formats **Images** `.png` (with transparency), `.jpeg`, `.webp`, `.tga` **Video** `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) **Print** `.pdf` (supports underlayer printing and spot colors) **Scene** `.scene` (description of the scene without any assets) **Archive** `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ## Export Options and Configuration CE.SDK provides rich configuration options when exporting: * **Size and Resolution:** Customize dimensions or use presets for different platforms. * **Format Selection:** Choose from image, video, or document output. * **Compression:** Optimize file size without compromising quality. * **Masks:** Export with color masks if needed. * **Quality Settings:** Fine-tune output quality based on your requirements. You can also programmatically create multiple export outputs for different use cases (e.g., Facebook, Instagram, YouTube) from the same design. ## Partial Export and Selective Export CE.SDK supports exporting parts of a project instead of the full scene: * **Selected Layers/Blocks Export:** Export only selected layers or blocks. This flexibility is useful for scenarios like asset slicing, batch creation, or modular content publishing. ## Pre-Export Validation Before exporting, you can run validation checks to ensure quality and compliance: * **NSFW Detection:** Flag potentially inappropriate content. * **Resolution Checks:** Ensure minimum export dimensions are met. * **Content Bounds Check:** Detect elements that extend beyond the visible canvas (this is not available out-of-the-box, but can be achieved with our APIs). You can hook into the export flow to run your own validation logic before completing an export. ## Saving a Scene for Future Editing When saving an editable scene, your approach may vary depending on your use case — especially when working with templates. In most scenarios, the recommended format is to save the scene as an **Archive**. This bundles the entire scene along with all used assets into a self-contained file that can be loaded without requiring access to external asset URLs. This is ideal when portability or offline availability is important. Alternatively, you can save the scene as a **string**. This format references assets by URL and is only suitable if those asset URLs will be reachable wherever the scene is later used — such as when reloading in a consistent cloud environment. You have several options when storing saved scenes: * **Local Save:** Store in local browser storage or download as a file. * **Backend Save:** Upload the archive or string to your server. * **Cloud Storage Save:** Integrate with services like AWS S3, GCP Storage, etc. Saved scenes preserve: * Layer structure * Applied effects * Asset references * Variable data (e.g., dynamic fields for templates) **Pros and Cons:** Strategy Pros Cons Archive Fully self-contained and portable Larger file size String Smaller file size, easy to inspect Requires externally reachable asset URLs Local Save Fast, no backend needed Risk of loss on browser reset Backend Save Centralized, enables user sessions Requires server integration Cloud Storage Save Scalable, ideal for distributed environments Slightly more complex to set up --- [Source](https:/img.ly/docs/cesdk/react-native/filters-and-effects/support-a666dd) # Supported Filters and Effects The following tables document the currently available effects and their properties. ## Effects ### `effect/adjustments` Member Type Default Description blacks `float` `0.0` Adjustment of only the blacks. brightness `float` `0.0` Adjustment of the brightness. clarity `float` `0.0` Adjustment of the detail. contrast `float` `0.0` Adjustment of the contrast, the difference in color and light between parts. exposure `float` `0.0` Adjustment of the exposure. gamma `float` `0.0` Gamma correction, non-linear. highlights `float` `0.0` Adjustment of only the highlights. saturation `float` `0.0` Adjustment of the saturation. shadows `float` `0.0` Adjustment of only the shadows. sharpness `float` `0.0` Adjustment of the sharpness. temperature `float` `0.0` Adjustment of the color temperature. whites `float` `0.0` Adjustment of only the whites. ### `effect/black_and_white_color_mixer` Member Type Default Description perceivedBrightnessAqua `float` `0.` Increases or decreases the perceived brightness on the aqua colors. perceivedBrightnessBlue `float` `0.` Increases or decreases the perceived brightness on the blue colors. perceivedBrightnessGreen `float` `0.` Increases or decreases the perceived brightness on the green colors. perceivedBrightnessMagenta `float` `0.` Increases or decreases the perceived brightness on the magenta colors. perceivedBrightnessOrange `float` `0.` Increases or decreases the perceived brightness on the orange colors. perceivedBrightnessPurple `float` `0.` Increases or decreases the perceived brightness on the purple colors. perceivedBrightnessRed `float` `0.` Increases or decreases the perceived brightness on the red colors. perceivedBrightnessYellow `float` `0.` Increases or decreases the perceived brightness on the yellow colors. ### `effect/cross_cut` Distorts the image with horizontal slices. Member Type Default Description offset `float` `0.07` Horizontal offset per slice. slices `float` `5.0` Number of horizontal slices. speedV `float` `0.5` Vertical slice position. time `float` `1.0` Randomness input. ### `effect/dot_pattern` Displays image using a dot matrix. Member Type Default Description blur `float` `0.3` Global blur. dots `float` `30.` Number of dots. size `float` `0.5` Size of an individual dot. ### `effect/duotone_filter` Member Type Default Description darkColor `Color` `{}` The darker of the two colors. Negative filter intensities emphasize this color. intensity `float` `0.0` The mixing weight of the two colors in the range \[-1, 1\]. lightColor `Color` `{}` The brighter of the two colors. Positive filter intensities emphasize this color. ### `effect/extrude_blur` Applies radial blur. Member Type Default Description amount `float` `0.2` Blur intensity. time `float` `0.5` Continuous randomness input. ### `effect/glow` Applies artificial glow. Member Type Default Description amount `float` `0.5` Glow brightness. darkness `float` `0.3` Glow darkness. size `float` `4.0` Intensity. ### `effect/green_screen` Replaces a color with transparency. Member Type Default Description colorMatch `float` `0.4` Threshold between the source color and the from color. Below this threshold, the pixel is made transparent. \[0, 1\] fromColor `Color` `createRGBColor(0., 1., 0., 1.)` The color to be replaced. The alpha channel will be ignored. smoothness `float` `0.08` Controls the rate at which the color transition increases when similarity threshold is exceeded. \[0, 1\] spill `float` `0.0` Controls the desaturation of the source color. This turns the green spill on the subject to gray, making it less jarring. \[0, 1\] ### `effect/half_tone` Overlays halftone pattern. Member Type Default Description angle `float` `0.0` Angle of pattern. scale `float` `0.5` Scale of pattern. ### `effect/hsp_selective_adjustments` Member Type Default Description hueAqua `float` `0.0` Selective hue adjustment applied on the aqua colors. hueBlue `float` `0.0` Selective hue adjustment applied on the blue colors. hueGreen `float` `0.0` Selective hue adjustment applied on the green colors. hueMagenta `float` `0.0` Selective hue adjustment applied on the magenta colors. hueOrange `float` `0.0` Selective hue adjustment applied on the orange colors. huePurple `float` `0.0` Selective hue adjustment applied on the purple colors. hueRed `float` `0.0` Selective hue adjustment applied on the red colors. hueYellow `float` `0.0` Selective hue adjustment applied on the yellow colors. perceivedBrightnessAqua `float` `0.0` Selective perceived brightness adjustment applied on the aqua colors. perceivedBrightnessBlue `float` `0.0` Selective perceived brightness adjustment applied on the blue colors. perceivedBrightnessGreen `float` `0.0` Selective perceived brightness adjustment applied on the green colors. perceivedBrightnessMagenta `float` `0.0` Selective perceived brightness adjustment applied on the magenta colors. perceivedBrightnessOrange `float` `0.0` Selective perceived brightness adjustment applied on the yellow colors. perceivedBrightnessPurple `float` `0.0` Selective perceived brightness adjustment applied on the purple colors. perceivedBrightnessRed `float` `0.0` Selective perceived brightness adjustment applied on the red colors. perceivedBrightnessYellow `float` `0.0` Selective perceived brightness adjustment applied on the orange colors. saturationAqua `float` `0.0` Selective saturation adjustment applied on the aqua colors. saturationBlue `float` `0.0` Selective saturation adjustment applied on the blue colors. saturationGreen `float` `0.0` Selective saturation adjustment applied on the green colors. saturationMagenta `float` `0.0` Selective saturation adjustment applied on the magenta colors. saturationOrange `float` `0.0` Selective saturation adjustment applied on the orange colors. saturationPurple `float` `0.0` Selective saturation adjustment applied on the purple colors. saturationRed `float` `0.0` Selective saturation adjustment applied on the red colors. saturationYellow `float` `0.0` Selective saturation adjustment applied on the yellow colors. ### `effect/linocut` Overlays linocut pattern. Member Type Default Description scale `float` `0.5` Scale of pattern. ### `effect/liquid` Applies a liquefy effect. Member Type Default Description amount `float` `0.06` Severity of the applied effect. scale `float` `0.62` Global scale. speed `float` `0.08` Number of changes per time change. time `float` `0.5` Continuous randomness input. ### `effect/lut_filter` Member Type Default Description horizontalTileCount `int` `5` The horizontal number of tiles contained in the LUT image. intensity `float` `1.0` A value in the range of \[0, 1\]. Defaults to 1.0. lutFileURI `string` `""` The URI to a LUT PNG file. verticalTileCount `int` `5` The vertical number of tiles contained in the LUT image. ### `effect/mask_color` Member Type Default Description maskColor `Color` `createWhite()` All pixel that match this color will be treated as mask pixels. maskMultiplier `Color` `createWhite()` Color multiplier for pixels that match the maskColor. notMaskMultiplier `Color` `createWhite()` Color multiplier for pixels that don’t match the maskColor. replaceInsteadMultiply `vec2` `{}` Blend factors between `x: (maskColor * maskMultiplier) <-> (maskMultiplier)` for pixels matching maskColor `y: (pixelColor * notMaskMultiplier) <-> (notMaskMultiplier)` for pixels not matching maskColor ### `effect/mirror` Mirrors image along center. Member Type Default Description side `int` `1` Axis to mirror along. ### `effect/outliner` Highlights outlines. Member Type Default Description amount `float` `0.5` Intensity of edge highlighting. passthrough `float` `0.5` Visibility of input image in non-edge areas. ### `effect/pixelize` Reduces the image to individual pixels. Member Type Default Description horizontalPixelSize `int` `20` The number of pixels on the x-axis. verticalPixelSize `int` `20` The number of pixels on the y-axis. ### `effect/posterize` Displays image in reduced set of color levels. Member Type Default Description levels `float` `3.` Number of levels. ### `effect/radial_pixel` Reduces the image into radial pixel rows. Member Type Default Description radius `float` `0.1` Radius of an individual row of pixels, relative to the image. segments `float` `0.01` Proportional size of a pixel in each row. ### `effect/recolor` Replaces a color with another color. Member Type Default Description brightnessMatch `float` `1.0` Affects the weight of the brightness when calculating the similarity between source color and from color. This can be useful when recoloring to reach pixels of the same hue and saturation but that are much brighter or darker. \[0, 1\] colorMatch `float` `0.4` Threshold between the source color and the from color. Below this threshold, the pixel is recolored. \[0, 1\] fromColor `Color` `createRGBColor(1., 1., 1., 1.)` The color to be replaced. The alpha channel will be ignored. smoothness `float` `0.08` Controls the rate at which the color transition increases when similarity threshold is exceeded. \[0, 1\] toColor `Color` `createRGBColor(0., 0., 1., 1.)` The color to replace with. ### `effect/sharpie` Cartoon-like effect. No block-specific properties. ### `effect/shifter` Shifts individual color channels. Member Type Default Description amount `float` `0.05` Intensity. angle `float` `0.3` Shift direction. ### `effect/tilt_shift` Applies tilt shift effect. Member Type Default Description amount `float` `0.016` Blur intensity. position `float` `0.4` Horizontal position in image. ### `effect/tv_glitch` Mimics TV banding. Member Type Default Description distortion `float` `3.0` Rough horizontal distortion. distortion2 `float` `1.0` Fine horizontal distortion. rollSpeed `float` `1.0` Vertical offset. speed `float` `2.0` Number of changes per time change. time `float` `0.5` Continuous randomness input. ### `effect/vignette` Adds a vignette. Member Type Default Description darkness `float` `1.0` Brightness of vignette. offset `float` `1.` Radial offset. --- [Source](https:/img.ly/docs/cesdk/react-native/filters-and-effects/overview-299b15) # React Native Filters & Effects Library In CreativeEditor SDK (CE.SDK), _filters_ and _effects_ refer to visual modifications that enhance or transform the appearance of design elements. Filters typically adjust an element’s overall color or tone, while effects add specific visual treatments like blur, sharpness, or distortion. You can apply both filters and effects through the user interface or programmatically using the CE.SDK API. They allow you to refine the look of images, videos, and graphic elements in your designs with precision and flexibility. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Understanding Filters vs. Effects * **Filters** are broad transformations that modify the entire appearance of an element. Common examples include: * Color adjustments (e.g., brightness, contrast) * Lookup Table (LUT) filters for advanced color grading * Duotone color schemes * **Effects** apply targeted visual modifications to an element. Typical examples include: * Blurring an area to soften details * Sharpening to enhance clarity * Distorting shapes for creative transformations **Key Differences:** Aspect Filters Effects Scope Alters the entire visual appearance Applies a specific modification Examples LUTs, duotone, adjustments Blur, sharpen, distortion Use Case Color grading, mood setting Stylizing or emphasizing parts Understanding the distinction helps you choose the right tool depending on whether you want broad tonal changes or focused visual alterations. ## Supported Filters and Effects CE.SDK offers a range of built-in filters and effects ready to use out of the box. **Available Filters:** * **Adjustment Filters:** Modify brightness, contrast, saturation, and more. * **LUT (Lookup Table) Filters:** Apply professional-grade color transformations. * **Duotone Filters:** Map the shadows and highlights of an image to two custom colors. **Available Effects:** * **Blur:** Soften an area for background separation or artistic focus. * **Sharpen:** Enhance fine details for a crisper appearance. * **Distortion:** Warp the geometry of an element for creative effects. * **Chroma Key (Green Screen):** Remove a background color, often used for compositing images. **Supported Element Types:** * Images * Videos * Shapes * Graphic blocks Before applying a filter or effect programmatically, you can verify support by checking the element type. ## Custom Filters and LUTs CE.SDK supports creating **custom filters** to meet specific visual requirements. One powerful method of creating a custom filter is by using a **LUT (Lookup Table)**: * A LUT is a preset map that transforms input colors to output colors, allowing for sophisticated color grading. * By importing a custom LUT, you can apply unique color styles across your designs consistently. * LUTs are especially useful for achieving cinematic tones, brand color consistency, or specific visual moods. You can create your own LUT files externally and integrate them into CE.SDK, giving you full control over the look and feel of your projects. --- [Source](https:/img.ly/docs/cesdk/react-native/edit-image/overview-5249ea) # React Native Image Editor SDK The CreativeEditor SDK (CE.SDK) offers powerful image editing capabilities designed for seamless integration into your application. You can give your users full control through an intuitive user interface or implement fully automated workflows via the SDK’s programmatic API. Image editing with CE.SDK is fully client-side, ensuring fast performance, data privacy, and offline compatibility. Whether you’re building a photo editor, design tool, or automation workflow, CE.SDK provides everything you need—plus the flexibility to integrate AI tools for tasks like adding or removing objects, swapping backgrounds, or creating variants. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Core Capabilities CE.SDK includes a wide range of image editing features accessible both through the UI and programmatically. Key capabilities include: * **Transformations**: Crop, rotate, resize, scale, and flip images. * **Adjustments and effects**: Apply filters, control brightness and contrast, add vignettes, pixelization, and more. * **Background removal**: Automatically remove backgrounds from images using plugin integrations. * **Color tools**: Replace colors, apply gradients, adjust palettes, and convert to black and white. * **Vectorization**: Convert raster images into vector format (SVG). * **Programmatic editing**: Make all edits via API—ideal for automation and bulk processing. All operations are optimized for in-app performance and align with real-time editing needs. ## AI-powered Editing CE.SDK allows you to easily integrate AI tools directly into your editing workflow. Users can generate or edit images from simple prompts — all from within the editor’s task bar, without switching tools or uploading external assets. [Launch AI Editor Demo](https://img.ly/showcases/cesdk/ai-editor/web) Typical AI use cases include: * **Text-to-image**: Generate visuals from user prompts. * **Background removal**: Automatically extract subjects from photos. * **Style transfer**: Apply the look of one image to another. * **Variant generation**: Create multiple versions of a design or product image. * **Text-to-graphics**: Render typographic compositions from plain text. * **Object add/remove**: Modify compositions by adding or erasing visual elements. You can bring your own models or third-party APIs with minimal setup. AI tools can be added as standalone plugins, contextual buttons, or task bar actions. ## Supported Input Formats The SDK supports a broad range of image input types: Category Supported Formats **Images** `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` **Video** `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC) **Audio** `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. ## Output and export options Export edited images in the following formats: Category Supported Formats **Images** `.png` (with transparency), `.jpeg`, `.webp`, `.tga` **Video** `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) **Print** `.pdf` (supports underlayer printing and spot colors) **Scene** `.scene` (description of the scene without any assets) **Archive** `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. You can define export resolution, compression level, and file metadata. CE.SDK also supports exporting with transparent backgrounds, underlayers, or color masks. ## UI-Based vs. Programmatic Editing CE.SDK provides two equally powerful ways to perform image edits: * **UI-based editing**: The built-in editor includes a customizable toolbar, side panels, and inspector views. End users can directly manipulate elements through the visual interface. * **Programmatic editing**: Every image transformation, effect, or layout operation can be executed via the SDK’s API. This is ideal for bulk operations, automated design workflows, or serverless rendering. You can freely combine both approaches in a single application. ## Customization The CE.SDK image editor is fully customizable: * **Tool configuration**: Enable, disable, or reorder individual editing tools. * **Panel visibility**: Show or hide interface elements like inspectors, docks, and canvas menus. * **Themes and styling**: Customize the UI appearance with brand colors, fonts, and icons. * **Localization**: Translate all interface text via the internationalization API. You can also add custom buttons, inject quick actions, or build your own interface on top of the engine using the headless mode. --- [Source](https:/img.ly/docs/cesdk/react-native/create-templates/overview-4ebe30) # Overview In CE.SDK, a _template_ is a reusable, structured design that defines editable areas and constraints for end users. Templates can be based on static visuals or video compositions and are used to guide content creation, enable mass personalization, and enforce design consistency. Unlike a regular editable design, a template introduces structure through placeholders and constraints, allowing you to define which elements users can change and how. Templates support both static output formats (like PNG, PDF) and videos (like MP4), and can be created or applied using either the CE.SDK UI or API. Templates are a core part of enabling design automation, personalization, and streamlined workflows in any app that includes creative functionality. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Why Use Templates? Templates are a powerful tool for: * Maintaining **brand consistency** across all user-generated designs. * **Scaling** asset creation for campaigns, catalogs, or print products. * Providing a **guided experience** where users adapt content without starting from scratch. They are ideal for use cases like: * Personalized marketing campaigns * Dynamic social media ads * Product catalogs and e-commerce visuals * Custom print materials and photo books ## Ways to Create Templates You can create templates from scratch or by importing an existing template. **From Scratch:** Start a new project and design a scene with the intent of turning it into a template. You can define variables, placeholders, and constraints directly in the editor. **Import Existing Designs:** If you already have assets created in other tools, you can import them as templates. Format Description `.idml` InDesign `.psd` Photoshop `.scene` CE.SDK Native Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs to generate scenes programmatically. These imported designs can then be adapted into editable, structured templates inside CE.SDK. ## Dynamic Content in Templates Templates support dynamic content to enable data-driven generation of assets. CE.SDK provides several mechanisms: * **Text Variables**: Bind text elements to dynamic values (e.g., user names, product SKUs). * **Image Placeholders**: Reserve space for images to be inserted later. * **Video Placeholders**: Reserve space for videos, enabling dynamic insertion of video clips in a templated layout. This makes it easy to generate hundreds or thousands of personalized variations from a single design. ## Controlling Template Editing Templates in CE.SDK offer powerful tools for controlling the editing experience: * **Editing Constraints**: Lock specific properties such as position, style, or content of elements. * **Locked Templates**: Prevent any edits outside allowed fields to protect design integrity. * **Fully Editable Templates**: Allow unrestricted editing for power users or advanced workflows. * **Form-Based Editing**: Build a custom editing interface for users to fill in variables and placeholders via input forms (a ready-made UI is not currently provided, but can be built using our APIs). These options let you strike a balance between creative freedom and design control. ## Working with Templates Programmatically and Through the UI You can manage templates using both the UI and API: * **UI Integration**: Users can select, apply, and edit templates directly inside the CE.SDK interface. * **Programmatic Access**: Use the SDK’s APIs to create, apply, or modify templates as part of an automated workflow. * **Asset Library Integration**: Templates can appear in the asset library, allowing users to browse and pick templates visually. * The Asset Library’s appearance and behavior can be fully customized to fit your app’s needs. ## Managing Templates Templates are saved and reused just like any other CE.SDK asset: * **Save Templates** to a _Template Library_. * **Edit or Remove** existing templates from your asset library. * Templates are saved as Scene (`.scene`) or Archive (`.zip`) files and can be loaded across all platforms supported by CE.SDK (Web, Mobile, Server, Desktop) ## Default and Premium Templates * **Default Templates**: CE.SDK may include a small number of starter templates depending on your configuration. * **Premium Templates**: IMG.LY offers a growing collection of professionally designed templates available for licensing. * Templates can be imported, customized, and used directly within your app. Check your license or speak with our team for details on accessing premium templates. ## Templates as Assets Templates are treated as **assets** in CE.SDK. That means: * They can be included in local or remote asset libraries. * They can be shared, versioned, and indexed using the same systems as images or videos. * You can apply your own metadata, tags, and search capabilities to them. --- [Source](https:/img.ly/docs/cesdk/react-native/conversion/overview-44dc58) # Overview CreativeEditor SDK (CE.SDK) allows you to export designs into a variety of formats, making it easy to prepare assets for web publishing, printing, storage, and other workflows. You can trigger conversions either programmatically through the SDK’s API or manually using the built-in export options available in the UI. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Supported Input and Output Formats CE.SDK accepts a range of input formats when working with designs, including: Category Supported Formats **Images** `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` **Video** `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC) **Audio** `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) Need to import a format not listed here? CE.SDK allows you to create custom importers for any file type by using our Scene and Block APIs programmatically. When it comes to exporting or converting designs, the SDK supports the following output formats: Category Supported Formats **Images** `.png` (with transparency), `.jpeg`, `.webp`, `.tga` **Video** `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) **Print** `.pdf` (supports underlayer printing and spot colors) **Scene** `.scene` (description of the scene without any assets) **Archive** `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. Each format serves different use cases, giving you the flexibility to adapt designs for your application’s needs. ## Conversion Methods There are two main ways to trigger a conversion: * **Programmatically:** Use CE.SDK’s API methods to perform conversions directly from your code. This gives you full control over the export process, allowing you to customize settings, automate workflows, and integrate with other systems. * **Through the UI:** End users can trigger exports manually through CE.SDK’s built-in export options. The UI provides an intuitive way to export designs without writing code, ideal for non-technical users. Both methods provide access to core conversion features, ensuring you can choose the workflow that fits your project. ## Customization Options When exporting designs, CE.SDK offers several customization options to meet specific output requirements: * **Resolution and DPI Settings:** Adjust the resolution for raster exports like PNG to optimize for screen or print. * **Output Dimensions:** Define custom width and height settings for the exported file, independent of the original design size. * **File Quality:** For formats that support compression (such as PNG or PDF), you can control the quality level to balance file size and visual fidelity. * **Background Transparency:** Choose whether to preserve transparent backgrounds or export with a solid background color. * **Page Selection:** When exporting multi-page documents (e.g., PDFs), you can select specific pages or export all pages at once. * **Video Frame Selection:** When exporting from a video, you can select a specific frame to export as an image, allowing for thumbnail generation or frame captures. These options help ensure that your exported content is optimized for its intended platform, whether it’s a website, a mobile app, or a print-ready document. --- [Source](https:/img.ly/docs/cesdk/react-native/create-composition/overview-5b19c5) # Overview In CreativeEditor SDK (CE.SDK), a _composition_ is an arrangement of multiple design elements—such as images, text, shapes, graphics, and effects—combined into a single, cohesive visual layout. Unlike working with isolated elements, compositions allow you to design complex, multi-element visuals that tell a richer story or support more advanced use cases. All composition processing is handled entirely on the client side, ensuring fast, secure, and efficient editing without requiring server infrastructure. You can use compositions to create a wide variety of projects, including social media posts, marketing materials, collages, and multi-page exports like PDFs. Whether you are building layouts manually through the UI or generating them dynamically with code, compositions give you the flexibility and control to design at scale. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Working with Multiple Pages and Artboards CE.SDK supports working with multiple artboards or canvases within a single document, enabling you to design multi-page layouts or create several design variations within the same project. Typical multi-page use cases include: * Designing multi-page marketing brochures. * Exporting designs as multi-page PDFs. * Building multiple versions of a design for different audiences or platforms. ## Working with Elements You can easily arrange and manage elements within a composition: * **Positioning and Aligning:** Move elements precisely and align them to each other or to the canvas. * **Guides and Snapping:** Use visual guides and automatic snapping to align objects accurately. * **Grouping:** Group elements for easier collective movement and editing. * **Layer Management:** Control the stacking order and organize elements in layers. * **Locking:** Lock elements to prevent accidental changes during editing. ## UI vs. Programmatic Creation ### Using the UI The CE.SDK UI provides drag-and-drop editing, alignment tools, a layer panel, and snapping guides, making it easy to visually build complex compositions. You can group, align, lock, and arrange elements directly through intuitive controls. ### Programmatic Creation You can also build compositions programmatically by using CE.SDK’s APIs. This is especially useful for: * Automatically generating large volumes of designs. * Creating data-driven layouts. * Integrating CE.SDK into a larger automated workflow. ## Exporting Compositions CE.SDK compositions can be exported in several formats: Category Supported Formats **Images** `.png` (with transparency), `.jpeg`, `.webp`, `.tga` **Video** `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) **Print** `.pdf` (supports underlayer printing and spot colors) **Scene** `.scene` (description of the scene without any assets) **Archive** `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. --- [Source](https:/img.ly/docs/cesdk/react-native/concepts/pages-7b6bae) # Pages Although the editor can manage a collection of pages with varying dimensions, our interfaces are presently designed to maintain a consistent dimension across all pages. Consequently, loading scenes with pages of different dimensions may lead to unexpected behavior, and the editor might adjust your scene accordingly. --- [Source](https:/img.ly/docs/cesdk/react-native/concepts/design-units-cc6597) # Design Units The CreativeEditor SDK (CE.SDK) Engine supports three different design units for all layouting values. This includes element positions, sizes and bleed margins. Supported design units are: * Pixels `px` * Millimeters `mm` * Inches `in` ## Font sizes Unlike all other values, font sizes are always defined in points `pt`. ## DPI If a scene uses a unit other than pixel `px`, the `dpi` property of that scene determines all conversions between the unit and pixels whenever necessary. Therefore, the `dpi` controls the export resolution of such a scenes blocks. This `dpi` value is also used in order to convert all font sizes into the design unit of the current scene. If the `dpi` property is changed in a scene with pixel unit, all text block’s font sizes are automatically adjusted so that the text stays visually the same size. --- [Source](https:/img.ly/docs/cesdk/react-native/colors/overview-16a177) # Overview Colors are a fundamental part of design in the CreativeEditor SDK (CE.SDK). Whether you’re designing for digital screens or printed materials, consistent color management ensures your creations look the way you intend. CE.SDK offers flexible tools for working with colors through both the user interface and programmatically, making it easy to manage color workflows at any scale. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## For Print and Screen Designing for screen and designing for print involve different color requirements, and CreativeEditor SDK (CE.SDK) is built to support both. * **Screen workflows** use RGB-based color spaces like sRGB and Display P3. These spaces are optimized for digital displays, ensuring vibrant, consistent colors across different devices. * **Print workflows** typically rely on CMYK and Spot Colors. These spaces reflect how physical inks combine on paper and require more precise color control to match print output. CE.SDK makes it easy to design for both by: * Supporting inputs in multiple color spaces, including sRGB, CMYK, and Spot Colors. * Automatically managing color conversions between spaces. * Providing tooling to ensure that exported files are optimized for either screen (e.g., PNG, WebP) or print (e.g., PDF with Spot Color support). **Note:** CE.SDK allows you to specify colors using CMYK values, but these are always converted to RGB internally. You cannot produce a true CMYK PDF with CE.SDK, and we do not support print-specific PDF variants like PDF/X. However, Spot Colors are fully supported and properly embedded in exported PDFs. ## Color Management Color management is the process of controlling how colors are represented across different devices and outputs—such as screens, printers, and files—to ensure that the colors you see during design match the final result. In CreativeEditor SDK (CE.SDK), color management includes: * Supporting multiple input color spaces (e.g., sRGB, Display P3 for screens, CMYK, Spot Colors for print). * Handling accurate conversions between color spaces (e.g., RGB ↔ CMYK, approximating Spot Colors). * Allowing custom color palettes and color libraries to maintain consistent color choices across a project or brand. * Providing tools to adjust color properties like brightness, contrast, and temperature. * Ensuring consistent color appearance across different export formats and output mediums. Color management ensures that your designs maintain color accuracy and visual integrity whether they are displayed on a screen or printed professionally. ## Color Libraries and Custom Palettes Color libraries in CE.SDK are collections of predefined colors that appear in the color picker, helping users maintain brand or project consistency. Libraries are implemented as asset sources, where each color is represented as an individual asset. Each color library is identified by a unique source ID, allowing you to create, configure, and manage custom palettes tailored to your design needs. This setup makes it easy to offer curated color options to end users, improving both usability and design consistency. ## Supported Color Spaces CreativeEditor SDK supports a wide range of color spaces to meet different design requirements: * **sRGB:** The standard color space for most digital screens. * **Display P3:** A wider gamut color space often used on high-end displays. * **CMYK:** A subtractive color model used primarily for print workflows. * **Spot Colors:** Special premixed inks for print-specific designs requiring precise color matching. Each color space serves different use cases, ensuring that your designs remain accurate whether viewed on a screen or produced in print. ## Applying and Modifying Colors CE.SDK allows you to apply and modify colors both through the UI and programmatically via the API. You can set colors for fills, strokes, outlines, and other properties dynamically, enabling a wide range of creative control. Whether you are adjusting a single design element or programmatically updating entire templates, the SDK provides the flexibility you need. ## Color Adjustments and Properties CreativeEditor SDK provides a range of color adjustments to fine-tune your designs. Commonly used adjustments include: * **Brightness:** Adjust the overall lightness or darkness. * **Contrast:** Adjust the difference between light and dark areas. * **Saturation:** Increase or decrease the intensity of colors. * **Exposure:** Modify the overall exposure level. * **Temperature:** Adjust the color balance between warm and cool tones. * **Sharpness:** Enhance the crispness and clarity of edges. In addition to these, CE.SDK supports many more detailed adjustments. You can also modify specific color-related properties like fill color, stroke color, and opacity. All adjustments and property changes can be applied both through the UI and programmatically. ## Color Conversion CreativeEditor SDK automatically manages color conversions to help ensure consistent visual output across different mediums. The following conversion behaviors are supported: * **RGB and CMYK colors** can be converted between each other using a mathematical approximation. * **Spot colors** can be represented in RGB and CMYK by using a corresponding color approximation. * **RGB and CMYK colors cannot be converted to spot colors.** These automatic conversions help ensure that designs maintain visual consistency whether they are viewed on a digital screen or prepared for professional printing. --- [Source](https:/img.ly/docs/cesdk/react-native/automation/overview-34d971) # Overview Workflow automation with CreativeEditor SDK (CE.SDK) enables you to programmatically generate, manipulate, and export creative assets—at scale. Whether you’re creating thousands of localized ads, preparing platform-specific variants of a campaign, or populating print-ready templates with dynamic data, CE.SDK provides a flexible foundation for automation. You can run automation entirely on the client, integrate it with your backend, or build hybrid “human-in-the-loop” workflows where users interact with partially automated scenes before export. The automation engine supports static pipelines, making it suitable for a wide range of publishing, e-commerce, and marketing applications. Video support will follow soon. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## What Can Be Automated with CE.SDK CE.SDK supports a wide variety of automation use cases, including: * **Design generation at scale**: Create thousands of variants from a single template, such as product cards or regionalized campaigns. * **Data-driven customization**: Merge external data (e.g., CSV, JSON, APIs) into templates to personalize text, images, or layout. * **Responsive output creation**: Automatically resize designs and export assets in different aspect ratios or dimensions for various platforms. * **Pre-export validation**: Detect issues like empty placeholders or low-resolution images before generating final output. * **Multimodal exporting**: Automate delivery to multiple formats including JPG, PNG, PDF, and MP4. ## Automation Contexts ### Headless / Server-Side Automation Server-side automation provides complete control over content generation without rendering a UI. This is ideal for background processing, such as creating assets in response to API requests or batch-generating print files for a mail campaign. ### UI-Integrated Automation (Human-in-the-Loop) For workflows that require user input or final approval, you can embed automation into the CE.SDK UI. Users can review, customize, or finalize designs that were pre-filled with dynamic data—ideal for marketing teams, e-commerce admins, or print professionals. ### Client-Side vs. Backend-Supported Workflows Many automation workflows can run fully in the browser thanks to CE.SDK’s client-side architecture. However, a backend may be required for use cases involving: * Secure access to private assets * Large dataset lookups * Server-side template rendering * Scheduled or event-based triggers ## Customization Capabilities CE.SDK gives you deep control over how your automation pipeline behaves: ### Data Sources Connect to a variety of inputs: * Local or remote JSON * CSV files * REST APIs * CMS or PIM systems ### Template Customization * Define dynamic variables and conditional placeholders * Use reusable templates or generate them on-the-fly * Lock or constrain specific fields to preserve brand integrity ### Design Rules Enforce visual and content constraints: * Brand-compliant colors and fonts * Overflow handling and text auto-resizing * Show/hide conditions and fallback logic ### Output Formats Category Supported Formats **Images** `.png` (with transparency), `.jpeg`, `.webp`, `.tga` **Video** `.mp4` (H.264 or H.265 on supported platforms with limited transparency support) **Print** `.pdf` (supports underlayer printing and spot colors) **Scene** `.scene` (description of the scene without any assets) **Archive** `.zip` (fully self-contained archive that bundles the `.scene` file with all assets) Our custom cross-platform C++ based rendering and layout engine ensures consistent output quality across devices. ## UI Customization for Automation You can extend the CE.SDK UI to trigger and manage automation tasks directly in the interface: * Add buttons or panels to trigger workflows * Dynamically update the scene based on user input or external data * Customize visibility of UI components depending on the stage (e.g., pre-fill vs. review) This makes it easy to integrate human-in-the-loop flows while preserving a tailored editing experience. ## Mapping Your Use Case Use the table below to quickly find the automation guide that matches your workflow: Use Case Relevant Guide Create 500 product images \[Batch Processing\] Merge CSV with template \[Data Merge\] Generate platform-specific variations \[Product Variations\] Use UI to customize before export \[Actions\] If you’re not sure which model fits your workflow, start with a hybrid approach using both automation and manual review. You can always migrate more logic to the backend as you scale. --- [Source](https:/img.ly/docs/cesdk/react-native/animation/overview-6a2ef2) # Overview Animations in CreativeEditor SDK (CE.SDK) bring your designs to life by adding motion to images, text, and design elements. Whether you’re creating a dynamic social media post, a video ad, or an engaging product demo, animations help capture attention and communicate ideas more effectively. With CE.SDK, you can create and edit animations either through the built-in UI timeline or programmatically using the CreativeEngine API. Animated designs can be exported as MP4 videos, allowing you to deliver polished, motion-rich content entirely client-side. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](react-native/get-started/overview-e18f40/) ## Animation Capabilities in CE.SDK CE.SDK enables animation across a variety of design elements, giving you the flexibility to animate: * **Images:** Animate image blocks with movements like fades, zooms, or rotations. * **Text:** Animate text layers to create effects such as typewriter reveals or slide-ins. * **Shapes and Graphics:** Add motion to vector shapes, icons, and graphic blocks to create visually rich layouts. You can animate key properties of these elements, including: * **Position:** Move elements across the canvas. * **Scale:** Zoom in or out dynamically. * **Rotation:** Spin or pivot elements over time. * **Opacity:** Fade elements in and out. ## Supported Animation Types CE.SDK provides a range of animation types designed for common motion effects. Core categories include: * **Fade:** Smooth transitions in or out using opacity changes. * **Slide:** Move elements into or out of the frame from any direction. * **Zoom:** Scale elements up or down to create dynamic emphasis. * **Rotate:** Apply rotational motion for spins or turns. These animations can be used as in, out or loop animations to create complex sequences. ## Timeline and Keyframes Animations in CE.SDK are structured around a **timeline-based editing system**. Each scene has a timeline where elements are placed and animated relative to playback time. Animations can be created entirely through the UI’s timeline editor or managed programmatically by interacting with the CreativeEngine’s animation APIs, offering flexibility for different workflows. --- [Source](https:/img.ly/docs/cesdk/react-native/animation/types-4e5f41) # Supported Animation Types ## Animation Categories There are three different categories of animations: _In_, _Out_ and _Loop_ animations. ### In Animations _In_ animations animate a block for a specified duration after the block first appears in the scene. For example, if a block has a time offset of 4s in the scene and it has an _In_ animation with a duration of 1s, then the appearance of the block will be animated between 4s and 5s with the _In_ animation. ### Out Animations _Out_ animations animate a block for a specified duration before the block disappears from the scene. For example, if a block has a time offset of 4s in the scene and a duration of 5s and it has an _Out_ animation with a duration of 1s, then the appearance of the block will be animated between 8s and 9s with the _Out_ animation. ### Loop Animations _Loop_ animations animate a block for the total duration that the block is visible in the scene. _Loop_ animations also run simultaneously with _In_ and _Out_ animations, if those are present. ## Animation Presets We currently support the following _In_ and _Out_ animation presets: * `'//ly.img.ubq/animation/slide'` * `'//ly.img.ubq/animation/pan'` * `'//ly.img.ubq/animation/fade'` * `'//ly.img.ubq/animation/blur'` * `'//ly.img.ubq/animation/grow'` * `'//ly.img.ubq/animation/zoom'` * `'//ly.img.ubq/animation/pop'` * `'//ly.img.ubq/animation/wipe'` * `'//ly.img.ubq/animation/baseline'` * `'//ly.img.ubq/animation/crop_zoom'` * `'//ly.img.ubq/animation/spin'` * `'//ly.img.ubq/animation/ken_burns'` * `'//ly.img.ubq/animation/typewriter_text'` (text-only) * `'//ly.img.ubq/animation/block_swipe_text'` (text-only) * `'//ly.img.ubq/animation/merge_text'` (text-only) * `'//ly.img.ubq/animation/spread_text'` (text-only) and the following _Loop_ animation types: * `'//ly.img.ubq/animation/spin_loop'` * `'//ly.img.ubq/animation/fade_loop'` * `'//ly.img.ubq/animation/blur_loop'` * `'//ly.img.ubq/animation/pulsating_loop'` * `'//ly.img.ubq/animation/breathing_loop'` * `'//ly.img.ubq/animation/jump_loop'` * `'//ly.img.ubq/animation/squeeze_loop'` * `'//ly.img.ubq/animation/sway_loop'` --- [Source](https:/img.ly/docs/cesdk/react-native/user-interface/appearance/theming-4b0938) # Theming --- [Source](https:/img.ly/docs/cesdk/react-native/user-interface/customization/dock-cb916c) # Dock ### Customization available only in native SDKs Customizing the SDK for React Native is handled exclusively through native code. [Learn more](react-native/user-interface/customization-72b2f8/) See these guides on how to use that functionality in our the native SDKs: * [View iOS documentation on this topic](ios/user-interface/customization/dock-cb916c/) * [View Android documentation on this topic](android/user-interface/customization/dock-cb916c/) --- [Source](https:/img.ly/docs/cesdk/react-native/import-media/capture-from-camera/recordings-c2ca1e) # Access Recordings Learn how to get the recorded videos from the `CameraReactionResult` and `CameraRecordingResult` type of the `openCamera` function. ## Success A `Recording` has a `duration` and contains an array of `Video`s. The array contains either one `Video` (for single camera recordings or a video that was reacted to) or two `Video`s (for dual camera recordings.) Each `Video` has: * A `uri` to the video file that is stored in a temporary location. Make sure to copy the file to a permanent location if you want to access it later. * A `rect` that contains the position of each video as it was shown in the camera preview. For dual camera recordings, you can use these `CGRect`s to arrange the videos as they were laid out in the camera. ### Standard and Dual Camera If the user has recorded videos, the `openCamera` will return a `CameraRecordingResult` which will contain an array of `Recording`s, each representing a segment of the recorded video. ``` result.recordings.forEach(recording => { console.log(recording.duration); recording.videos.forEach(video => { console.log(video.uri); console.log(video.rect); });}); ``` ### Video Reaction If the user has recorded a reaction, the `openCamera` will return a `CameraReactionResult` which will contain the video that was reacted to and an array of `Recording`s, each representing a segment of the recorded video. ``` console.log(result.video.duration);result.video.videos.forEach(video => { console.log(video.uri); console.log(video.rect);}); result.recordings.forEach(recording => { console.log(recording.duration); recording.videos.forEach(video => { console.log(video.uri); console.log(video.rect); });}); ``` ## Cancellation If the user has cancelled the camera session the `openCamera` function will return `null`. ``` if (result === null) { console.log('The editor has been cancelled.'); return;} ``` ## Failure The `openCamera` function will throw if the user has not allowed accessing their camera and/or microphone or any other parsing/argument error occurred. ``` console.log(`Error occurred in the camera session: ${error}.`); ``` ## Full Code Here’s the full code for both files: ### recordings\_camera\_solution.ts ``` import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native'; export const recordings_camera_solution = async (): Promise => { const settings: CameraSettings = { license: 'YOUR_LICENSE_KEY', }; try { const result = await IMGLYCamera.openCamera(settings); if (result === null) { console.log('The editor has been cancelled.'); return; } result.recordings.forEach(recording => { console.log(recording.duration); recording.videos.forEach(video => { console.log(video.uri); console.log(video.rect); }); }); } catch (error) { console.log(`Error occurred in the camera session: ${error}.`); }}; ``` ### recordings\_reaction\_camera\_solution.ts ``` import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native'; export const recordings_reaction_camera_solution = async (): Promise => { const settings: CameraSettings = { license: 'YOUR_LICENSE_KEY', }; try { const result = await IMGLYCamera.openCamera( settings, require('MY_VIDEO_SOURCE'), ); if (result === null) { console.log('The editor has been cancelled.'); return; } console.log(result.video.duration); result.video.videos.forEach(video => { console.log(video.uri); console.log(video.rect); }); result.recordings.forEach(recording => { console.log(recording.duration); recording.videos.forEach(video => { console.log(video.uri); console.log(video.rect); }); }); } catch (error) { console.log(`Error occurred in the camera session: ${error}.`); }}; ``` --- [Source](https:/img.ly/docs/cesdk/react-native/get-started/ios-and-android/existing-project-b4312d) # Existing Project Setup ## Introduction This guide provides step-by-step instructions for integrating the `@imgly/editor-react-native` module into your existing mobile Expo project. By the end of this guide, you will have a powerful creative editor running in your own Expo application. > **Note:** Customizing the CreativeEditor SDK for React Native is handled exclusively through native code (Swift/Kotlin), as outlined in our [configuration overview section](react-native/user-interface/customization-72b2f8/). ## Pre-requisites Before you begin, make sure the following requirements are met: * A properly configured Expo development environment * Platform-specific development setup for your target (Android and/or iOS) * Git CLI installed * A valid IMG.LY license key - [Get one here](https://img.ly/pricing) ## Minimum Requirements * React Native: 0.73 * iOS: 16 * Swift: 5.10 (Xcode 15.4) * Android: 7.0 (Android SDK 24) ## Add Dependency First, install the `@imgly/editor-react-native` module by running the following command: Terminal window ``` npx expo install @imgly/editor-react-native ``` ## Native Setup If your application includes Android as a target platform, some manual configuration is required on the Android side. Please complete the following steps to ensure proper integration. We suggest using the `expo-build-properties` plugin but you can also do all necessary steps manually. First, add the `expo-build-properties` plugin to your application: Terminal window ``` npx expo install expo-build-properties ``` Then, make the following changes in your `app.json` file to properly setup the Android environment for our SDK: * Increase the `minSdk` to at least 24 * Include the IMG.LY maven repository * Increase the Kotlin version to at least `1.9.10` * If needed, adjust the iOS `deploymentTarget` to at least `16.0` ``` "expo-build-properties",[ { "android": { "minSdkVersion": 24, "extraMavenRepos": [ "https://artifactory.img.ly/artifactory/maven" ], "kotlinVersion": "1.9.10" }, "ios": { "deploymentTarget": "16.0" } }] ``` Finally, run the `prebuild` command to generate the needed native code. Terminal window ``` npx expo prebuild ``` ## Using the Creative Editor To finally make use of the editor, call the `IMGLYEditor.openEditor` function with suitable `EditorSettings` and optionally your desired `EditorPreset` passed in: ``` import IMGLYEditor, { EditorPreset, EditorSettingsModel, SourceType,} from '@imgly/editor-react-native'; export const design_editor_solution = async (): Promise => { const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY', userId: 'UNIQUE_USER_ID', }); const result = await IMGLYEditor?.openEditor( settings, { source: 'test_image.png', type: SourceType.IMAGE, }, EditorPreset.DESIGN, );}; ``` Within a new file, define an asynchronous function named `design_editor_solution` where you will initialize the `EditorSettingsModel`. After providing your valid license key and an optional unique user ID, pass the configured settings to `IMGLYEditor.openEditor()`. At this point, you can also specify an optional `EditorPreset` to open one of our predefined editor variants. Optionally provide a `Source` object containing an existing image, video, or scene alongside its corresponding `SourceType` to open the editor with that content; otherwise pass `undefined` and the editor will start blank. Now, you can launch the editor by calling `design_editor_solution()` from wherever you want to open it from. ## Next Steps * Explore the available presets tailored to different editor solutions. * Set up a native interface to customize the editor according to your specific requirements. ## Common Errors #### Dependency not found ``` Couldn't find any versions for "@imgly/editor-react-native" that matches "^x.xx.x" ``` **Solution** -> Ensure you are using an existing version of the IMG.LY editor. --- [Source](https:/img.ly/docs/cesdk/react-native/get-started/ios-and-android/clone-github-c3432f) # Clone GitHub Project ## Introduction This guide provides step-by-step instructions for cloning and running our pre-configured React Native sample project, which includes the IMG.LY editor integration. > **Note:** Customizing the CreativeEditor SDK for React Native is handled exclusively through native code (Swift/Kotlin), as outlined in our [configuration overview section](react-native/user-interface/customization-72b2f8/). ## Pre-requisites Before you begin, make sure the following requirements are met: * A properly configured Expo development environment * Platform-specific development setup for your target (Android and/or iOS) * Git CLI installed * A valid IMG.LY license key - [Get one here](https://img.ly/pricing) ## 1\. Clone the GitHub Repository First, open your terminal application and navigate to your preferred working directory - for example, the `~/Downloads` directory. Terminal window ``` cd ~/Downloads ``` Next, clone the repository of our official React Native sample application: Terminal window ``` git clone https://github.com/imgly/cesdk-react-native-examples.git ``` ## 2\. Run the Project Before running the application, ensure you add your valid IMG.LY license key to the `src/secrets/secrets.ts` file. ``` static license = {YOUR_LICENSE_KEY} ``` Finally, run the project on your target platform (Android and/or iOS). Terminal window ``` npx expo start ``` ## Next Steps * Include the `@imgly/editor-react-native` native module in your existing React Native project * Use our native interfaces to customize the editor to your liking --- [Source](https:/img.ly/docs/cesdk/react-native/import-media/capture-from-camera/integrate-33d863) # Integrate Mobile Camera In this example, we will show you how to initialize the [Camera SDK](https://img.ly/products/camera-sdk)’s mobile editor in your React Native app. We also prepared a dedicated example application which you can checkout on [GitHub](https://github.com/imgly/cesdk-react-native-examples/tree/v1.47.0). ## Requirements For this version, the minimum requirements are: * React Native: 0.73 * iOS: 16 * Swift: 5.10 (Xcode 15.4) * Android: 7 ## Add from npmjs.com Add the `@imgly/camera-react-native` module to your projects via your favorite package manager. ## Android Setup In order to integrate the camera for Android, you will need to make some adjustments to your `app.json` file. First, please add the [`expo-build-properties`](https://www.npmjs.com/package/expo-build-properties) config plugin to your app. Then, add the following options: * Add the IMG.LY maven repository. ``` "extraMavenRepos": ["https://artifactory.img.ly/artifactory/maven"], ``` * Change the `minSdk` to 24 (Android 7) or later. ``` "minSdkVersion": 24, ``` * If needed, change the Kotlin version to `1.9.10` or any other version compatible. ``` "kotlinVersion": "1.9.10" ``` ## iOS Setup In order to integrate the camera for iOS, you will need to make some adjustments to your `app.json` file as well: * Add a camera usage permissions description. ``` "NSCameraUsageDescription": "This app uses the camera for demonstration purposes.", ``` * Add a microphone usage permissions description. ``` "NSMicrophoneUsageDescription": "This app uses the camera for demonstration purposes." ``` ## Usage In this example, we’ll demonstrate the basic usage of the camera. In order to launch the camera, an instance of `CameraSettings` needs to be provided. For this, you only need to provide the `license` key that you received from IMG.LY. Optionally, you can provide a unique ID tied to your application’s user. This helps us accurately calculate monthly active users (MAU) and it is especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they’re counted once. ``` const settings: CameraSettings = { license: 'YOUR_LICENSE_KEY',}; ``` Next, you can open the editor using the `openCamera` method. ``` const result = await IMGLYCamera.openCamera(settings); ``` That is all. For more than basic configuration, check out all the available [configurations](react-native/user-interface/customization-72b2f8/). ## Full Code Here’s the full code for both `app.json` and `camera_react_native.ts`. ### app.json ``` { "expo": { "plugins": [ [ "expo-build-properties", { "android": { "extraMavenRepos": ["https://artifactory.img.ly/artifactory/maven"], "minSdkVersion": 24, "kotlinVersion": "1.9.10" }, "ios": { "deploymentTarget": "16.0" } } ] ], "ios": { "infoPlist": { "NSCameraUsageDescription": "This app uses the camera for demonstration purposes.", "NSMicrophoneUsageDescription": "This app uses the camera for demonstration purposes." } } }} ``` ### camera\_react\_native.ts ``` import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native'; export const camera = async (): Promise => { const settings: CameraSettings = { license: 'YOUR_LICENSE_KEY', }; const result = await IMGLYCamera.openCamera(settings);}; ``` --- [Source](https:/img.ly/docs/cesdk/react-native/get-started/ios-and-android/new-project-a1234y) # New Project Setup ## Introduction This guide provides step-by-step instructions for integrating the `@imgly/editor-react-native` module into a new mobile Expo project. By the end of this guide, you will have a powerful creative editor running in your own Expo application. > **Note:** Customizing the CreativeEditor SDK for React Native is handled exclusively through native code (Swift/Kotlin), as outlined in our [configuration overview section](react-native/user-interface/customization-72b2f8/). ## Pre-requisites Before you begin, make sure the following requirements are met: * A properly configured Expo development environment * Platform-specific development setup for your target (Android and/or iOS) * Git CLI installed * A valid IMG.LY license key - [Get one here](https://img.ly/pricing) ## Minimum Requirements * React Native: 0.73 * iOS: 16 * Swift: 5.10 (Xcode 15.4) * Android: 7.0 (Android SDK 24) ## Create the Project First, create a new Expo project by running the following command: Terminal window ``` npx create-expo-app@latest ``` Then, open the newly created project in your preferred editor. ## Add Dependency Next, install the `@imgly/editor-react-native` module by running the following command: Terminal window ``` npx expo install @imgly/editor-react-native ``` ## Native Setup If your application includes Android as a target platform, some manual configuration is required on the Android side. Please complete the following steps to ensure proper integration. We suggest using the `expo-build-properties` plugin but you can also do all necessary steps manually. First, add the `expo-build-properties` plugin to your application: Terminal window ``` npx expo install expo-build-properties ``` Then, make the following changes in your `app.json` file to properly setup the Android environment for our SDK: * Increase the `minSdk` to at least 24 * Include the IMG.LY maven repository * Increase the Kotlin version to at least `1.9.10` * If needed, adjust the iOS `deploymentTarget` to at least `16.0` ``` "expo-build-properties",[ { "android": { "minSdkVersion": 24, "extraMavenRepos": [ "https://artifactory.img.ly/artifactory/maven" ], "kotlinVersion": "1.9.10" }, "ios": { "deploymentTarget": "16.0" } }] ``` Finally, run the `prebuild` command to generate the needed native code. Terminal window ``` npx expo prebuild ``` ## Using the Creative Editor To finally make use of the editor, call the `IMGLYEditor.openEditor` function with suitable `EditorSettings` and optionally your desired `EditorPreset` passed in: ``` import IMGLYEditor, { EditorPreset, EditorSettingsModel, SourceType,} from '@imgly/editor-react-native'; export const design_editor_solution = async (): Promise => { const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY', userId: 'UNIQUE_USER_ID', }); const result = await IMGLYEditor?.openEditor( settings, { source: 'test_image.png', type: SourceType.IMAGE, }, EditorPreset.DESIGN, );}; ``` Within a new file, define an asynchronous function named `design_editor_solution` where you will initialize the `EditorSettingsModel`. After providing your valid license key and an optional unique user ID, pass the configured settings to `IMGLYEditor.openEditor()`. At this point, you can also specify an optional `EditorPreset` to open one of our predefined editor variants. Optionally provide a `Source` object containing an existing image, video, or scene alongside its corresponding `SourceType` to open the editor with that content; otherwise pass `undefined` and the editor will start blank. Now, you can launch the editor by calling `design_editor_solution()` from wherever you want to open it from. ## Next Steps * Explore the available presets tailored to different editor solutions. * Set up a native interface to customize the editor according to your specific requirements. ## Common Errors #### Dependency not found ``` Couldn't find any versions for "@imgly/editor-react-native" that matches "^x.xx.x" ``` **Solution** -> Ensure you are using an existing version of the IMG.LY editor. --- [Source](https:/img.ly/docs/cesdk/react-native/import-media/capture-from-camera/camera-configuration-46afd0) # Mobile Camera Configuration ``` import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native'; export const recordings_reaction_camera_solution = async (): Promise => { const settings: CameraSettings = { license: 'YOUR_LICENSE_KEY', userId: 'YOUR_USER_ID' }; const result = await IMGLYCamera.openCamera( settings, require('MY_VIDEO_SOURCE') );}; ``` ``` import IMGLYCameraModule import IMGLYEditorModuleimport SwiftUI func useCustomEditor() { IMGLYEditorModuleSwiftAdapter.shared.builderClosure = { _, metadata in // Make decisions based on your own metadata. if metadata?["use_custom_editor"] as? Bool == true { // Return your custom editor. EditorBuilder.custom { settings, _, _, result in CustomEditor(settings: settings, result: result) } } else { // Return a custom or prebuilt editor. EditorBuilder.design() } }} func configureCamera() { IMGLYCameraModuleSwiftAdapter.shared.cameraBuilderClosure = { metadata in // Make decisions based on your own metadata. if metadata?["use_custom_camera"] as? Bool == true { // Return your custom camera. CameraBuilder.custom { settings, url, metadata, result in CustomCamera(settings: settings, url: url, metadata: metadata, result: result) } } else { // Return a custom or prebuilt camera. CameraBuilder.default() } }} private struct CustomEditor: View { init(settings _: EditorSettings, result _: @escaping EditorBuilder.EditorBuilderResult) {} var body: some View { Text("Custom Editor") }} private struct CustomCamera: View { init( settings _: CameraSettings, url _: URL?, metadata _: [String: Any]?, result _: @escaping CameraBuilder.CameraBuilderResult ) {} var body: some View { Text("Custom Camera") }} ``` ``` @file:Suppress("ktlint:standard:import-ordering") package ly.img.editor.reactnative.showcases.guides import androidx.compose.runtime.Composableimport ly.img.camera.core.CaptureVideoimport ly.img.camera.core.EngineConfigurationimport ly.img.camera.reactnative.module.IMGLYCameraModuleimport ly.img.camera.reactnative.module.model.CameraResultimport ly.img.editor.reactnative.module.IMGLYEditorModuleimport ly.img.editor.reactnative.module.builder.EditorBuilderimport ly.img.editor.reactnative.module.builder.EditorBuilderResultimport ly.img.editor.reactnative.module.model.EditorSettings private fun useCustomEditor() { IMGLYEditorModule.builderClosure = { _, metadata -> if (metadata?.get("custom") == true) { EditorBuilder.custom { CustomEditor(settings, result, onClose) } } else { EditorBuilder.design() } }} private fun customizeCamera() { // Configure the [CaptureVideo.Input]. IMGLYCameraModule.configurationClosure = { metadata -> val engineConfiguration = EngineConfiguration("MY_LICENSE") CaptureVideo.Input(engineConfiguration) } // Modify the [CameraResult]. IMGLYCameraModule.resultClosure = { result -> CameraResult(result?.recording, mapOf("MY_CUSTOM_KEY" to "MY_CUSTOM_VALUE")) }} @Composableprivate fun CustomEditor( settings: EditorSettings, result: EditorBuilderResult, onClose: (Throwable?) -> Unit,) {} ``` The `@imgly/camera-react-native` React Native module is built on top of the native Android and iOS UI implementation and has no dedicated React Native UI. However, you still have access to [the same customization options as for iOS](?#platform=ios) and an interface for Android. To use them you need to configure them [natively for both platforms](#native-customization). Further, the most important settings can be set from React Native directly. ## React Native Customization From within React Native directly, you can modify the most important camera behavior settings. ### CameraSettings All the basic configuration settings are part of the `EngineSettings` which are required to initialize the camera. * `license` – the license to activate the [Engine](react-native/get-started/overview-e18f40/) with. * `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. The default value is `nil`. ``` const settings: CameraSettings = { license: 'YOUR_LICENSE_KEY', userId: 'YOUR_USER_ID'}; ``` ### Reactions You can optionally provide a `video` parameter which lets the user react to that video. ``` const result = await IMGLYCamera.openCamera( settings, require('MY_VIDEO_SOURCE')); ``` ## Native Customization In order to fully utilize the natively available customizations, the module comes with native interfaces for both iOS and Android. ### iOS The customization layer for iOS is written in **Swift** and available via the `IMGLYCameraModuleSwiftAdapter.shared` instance. The camera that is opened via the `IMGLYCameraModuleSwiftAdapter.openCamera()` function can be completely customized and exchanged. For this to work you can use the `IMGLYCameraModuleSwiftAdapter.builderClosure` which provides optional `metadata` with which you can provide any prebuilt or custom camera view. The `metadata` parameter of the `openCamera` function can be utilized to provide customization details from the React Native side of your app to the native side: You can either use the `CameraBuilder.default` implementation or in case you want a completely custom UI, you can use the `CameraBuilder.custom` function that allows you to return a custom `View` based on a given `CameraSettings`, `URL`, `metadata` and an `CameraBuilderResult`: ``` IMGLYCameraModuleSwiftAdapter.shared.cameraBuilderClosure = { metadata in // Make decisions based on your own metadata. if metadata?["use_custom_camera"] as? Bool == true { // Return your custom camera. CameraBuilder.custom { settings, url, metadata, result in CustomCamera(settings: settings, url: url, metadata: metadata, result: result) } } else { // Return a custom or prebuilt camera. CameraBuilder.default() }} ``` ### Android On Android, the module comes with two interfaces for modifications: #### CameraInputClosure The `CameraInputClosure` can be used to provide a custom `CaptureVideo.Input` based on given `metadata`. It is accessible via the `IMGLYCameraModule.configurationClosure`. ``` // Configure the [CaptureVideo.Input].IMGLYCameraModule.configurationClosure = { metadata -> val engineConfiguration = EngineConfiguration("MY_LICENSE") CaptureVideo.Input(engineConfiguration)} ``` #### CameraResultClosure The `CameraResultClosure` can be used to return a custom `CameraResult` based on the result returned by the camera. It is accessible via the `IMGLYCameraModule.resultClosure`. ``` // Modify the [CameraResult].IMGLYCameraModule.resultClosure = { result -> CameraResult(result?.recording, mapOf("MY_CUSTOM_KEY" to "MY_CUSTOM_VALUE"))} ``` ## Full Code Here’s the full code for all files. ### configured\_camera\_solution.ts ``` import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native'; export const recordings_reaction_camera_solution = async (): Promise => { const settings: CameraSettings = { license: 'YOUR_LICENSE_KEY', userId: 'YOUR_USER_ID', }; const result = await IMGLYCamera.openCamera( settings, require('MY_VIDEO_SOURCE'), );}; ``` ### ConfigurationGuide.swift ``` IMGLYCameraModuleSwiftAdapter.shared.cameraBuilderClosure = { metadata in // Make decisions based on your own metadata. if metadata?["use_custom_camera"] as? Bool == true { // Return your custom camera. CameraBuilder.custom { settings, url, metadata, result in CustomCamera(settings: settings, url: url, metadata: metadata, result: result) } } else { // Return a custom or prebuilt camera. CameraBuilder.default() }} ``` ### ConfigurationGuide.kt ``` // Configure the [CaptureVideo.Input].IMGLYCameraModule.configurationClosure = { metadata -> val engineConfiguration = EngineConfiguration("MY_LICENSE") CaptureVideo.Input(engineConfiguration)} // Modify the [CameraResult].IMGLYCameraModule.resultClosure = { result -> CameraResult(result?.recording, mapOf("MY_CUSTOM_KEY" to "MY_CUSTOM_VALUE"))} ``` --- [Source](https:/img.ly/docs/cesdk/react-native/export-save-publish/export/size-limits-6f0695) # Size Limits CreativeEditor SDK (CE.SDK) supports exporting high-resolution image, video, and audio content, but there are practical limits to consider based on the user’s device capabilities. ## Image Resolution Limits Constraint Recommendation / Limit **Input Resolution** Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. **Output Resolution** There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device’s GPU capabilities and available memory. All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. To ensure consistent results across devices, it’s best to test higher output sizes on your target hardware and set conservative defaults in production. ## Video Resolution & Duration Limits 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.