<!-- Source: react-native/animation/overview-6a2ef2.md -->

---
title: "Overview"
description: "Add motion to designs with support for keyframes, timeline editing, and programmatic animation control."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/animation/overview-6a2ef2/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/automation-715209.md -->

---
title: "Automate Workflows"
description: "Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/automation-715209/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/react-native/automation-715209/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/automation/overview-34d971/) - Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/automation/overview-34d971.md -->

---
title: "Overview"
description: "Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/automation/overview-34d971/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/react-native/automation-715209/) > [Overview](https://img.ly/docs/cesdk/react-native/automation/overview-34d971/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

### Output Formats


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/colors-a9b79c.md -->

---
title: "Colors"
description: "Manage color usage in your designs, from applying brand palettes to handling print and screen formats."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/colors-a9b79c/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/react-native/colors-a9b79c/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/colors/overview-16a177/) - Manage color usage in your designs, from applying brand palettes to handling print and screen formats.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/colors/overview-16a177.md -->

---
title: "Overview"
description: "Manage color usage in your designs, from applying brand palettes to handling print and screen formats."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/colors/overview-16a177/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/react-native/colors-a9b79c/) > [Overview](https://img.ly/docs/cesdk/react-native/colors/overview-16a177/)

---

Colors are a fundamental part of design in the CreativeEditor SDK (CE.SDK). Whether you're designing for digital screens or printed materials, consistent color management ensures your creations look the way you intend. CE.SDK offers flexible tools for working with colors through both the user interface and programmatically, making it easy to manage color workflows at any scale.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/compatibility-fef719.md -->

---
title: "Compatibility & Security"
description: "Learn about CE.SDK's compatibility and security features."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/compatibility-fef719/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/react-native/compatibility-fef719/)

---

CE.SDK provides robust compatibility and security features across platforms.
Learn about supported browsers, frameworks, file formats, language support,
and how CE.SDK ensures secure operation in your applications.


---

## Related Pages

- [File Format Support](https://img.ly/docs/cesdk/react-native/file-format-support-3c4b2a/) - See which image, video, audio, font, and template formats CE.SDK supports for import and export.
- [Security](https://img.ly/docs/cesdk/react-native/security-777bfd/) - Learn how CE.SDK keeps your data private with client-side processing, secure licensing, and GDPR-compliant practices.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/concepts-c9ff51.md -->

---
title: "Concepts"
description: "Key concepts and principles of CE.SDK"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/concepts-c9ff51/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Concepts](https://img.ly/docs/cesdk/react-native/concepts-c9ff51/)

---

Key Concepts and principles of CE.SDK.


---

## Related Pages

- [Key Concepts](https://img.ly/docs/cesdk/react-native/key-concepts-21a270/) - Explore CE.SDK’s key features—manual editing, automation, templates, AI tools, and full UI and API control.
- [Key Capabilities](https://img.ly/docs/cesdk/react-native/key-capabilities-dbb5b1/) - Explore CE.SDK’s key features—manual editing, automation, templates, AI tools, and full UI and API control.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/configuration-2c1c3d.md -->

---
title: "Configuration"
description: "Learn how to configure CE.SDK to match your application's functional, visual, and performance requirements."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/configuration-2c1c3d/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Configuration](https://img.ly/docs/cesdk/react-native/configuration-2c1c3d/)

---

```typescript file=@cesdk_react_native_examples/editor-guides-configuration-basics/basic_editor_solution.ts reference-only
import IMGLYEditor, {
  EditorPreset,
  EditorSettingsModel
} from '@imgly/editor-react-native';

export const basicEditor = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY', // Get your license from https://img.ly/forms/free-trial, pass null for evaluation mode with watermark
    baseUri: 'YOUR_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](https://img.ly/docs/cesdk/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.

```javascript highlight-configuration
const settings = new EditorSettingsModel({
  license: 'YOUR_LICENSE_KEY', // Get your license from https://img.ly/forms/free-trial, pass null for evaluation mode with watermark
  baseUri: 'YOUR_BASE_URI',
  userId: 'YOUR_USER_ID'
});
```

- `license` - the license to activate the [Engine](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) with.

```javascript highlight-license
license: 'YOUR_LICENSE_KEY', // Get your license from https://img.ly/forms/free-trial, pass null for evaluation mode with watermark
```

- `baseUri` - the base URI used by the engine for built-in assets like emoji and fallback fonts, and by the editor for its default and demo asset sources (stickers, filters, and more). The default value points at the versioned IMG.LY CDN `https://cdn.img.ly/packages/imgly/cesdk-react-native/<version>/assets`. For production use, we recommend [downloading the assets](https://cdn.img.ly/packages/imgly/cesdk-react-native/$UBQ_VERSION$/imgly-assets.zip), hosting them on your own server, and setting `baseUri` to your hosted location.

```javascript highlight-baseUri
baseUri: 'YOUR_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`.

```javascript highlight-userId
userId: 'YOUR_USER_ID'
```

### Source

- `source` - is used to load in a custom source, e.g. a scene, image or video file.

```javascript highlight-source
const source = require('MY_CUSTOM_SOURCE');
```

### EditorPreset

- `preset` - is used to determine which predefined editor variant you want to use - if any.

```javascript highlight-preset
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.

```javascript highlight-metadata
const metadata = {
  MY_KEY: 'MY_VALUE'
};
```

## Full Code

```typescript
import IMGLYEditor, {
  EditorPreset,
  EditorSettingsModel,
} from '@imgly/editor-react-native';

export const basicEditor = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY',
    baseUri: 'YOUR_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,
  );
};
```


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/conversion-c3fbb3.md -->

---
title: "Conversion"
description: "Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/conversion-c3fbb3/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/react-native/conversion-c3fbb3/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/conversion/overview-44dc58/) - Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/conversion/overview-44dc58.md -->

---
title: "Overview"
description: "Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/conversion/overview-44dc58/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/react-native/conversion-c3fbb3/) > [Overview](https://img.ly/docs/cesdk/react-native/conversion/overview-44dc58/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## Supported Input and Output Formats

CE.SDK accepts a range of input formats when working with designs, including:

When it comes to exporting or converting designs, the SDK supports the following output formats:

Each format serves different use cases, giving you the flexibility to adapt designs for your application’s needs.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/create-composition-db709c.md -->

---
title: "Create Compositions"
description: "Combine and arrange multiple elements to create complex, multi-page, or layered design compositions."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/create-composition-db709c/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/react-native/create-composition-db709c/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/create-composition/overview-5b19c5/) - Combine and arrange multiple elements to create complex, multi-page, or layered design compositions.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/create-composition/overview-5b19c5.md -->

---
title: "Overview"
description: "Combine and arrange multiple elements to create complex, multi-page, or layered design compositions."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/create-composition/overview-5b19c5/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/react-native/create-composition-db709c/) > [Overview](https://img.ly/docs/cesdk/react-native/create-composition/overview-5b19c5/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## Exporting Compositions

CE.SDK compositions can be exported in several formats:


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/create-templates-3aef79.md -->

---
title: "Create Templates"
description: "Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/create-templates-3aef79/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/react-native/create-templates-3aef79/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/create-templates/overview-4ebe30/) - Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK.
- [Overview](https://img.ly/docs/cesdk/react-native/use-templates/overview-ae74e1/) - Learn how to browse, apply, and dynamically populate templates in CE.SDK to streamline design workflows.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/create-templates/overview-4ebe30.md -->

---
title: "Overview"
description: "Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/create-templates/overview-4ebe30/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/react-native/create-templates-3aef79/) > [Overview](https://img.ly/docs/cesdk/react-native/create-templates/overview-4ebe30/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

These imported designs can then be adapted into editable, structured templates inside CE.SDK.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/edit-image/transform/move-818dd9.md -->

---
title: "Move Images"
description: "Position images precisely on the canvas using absolute or percentage-based coordinates."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/edit-image/transform/move-818dd9/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---

Image positioning in CreativeEditor SDK (CE.SDK) allows you to precisely control where images appear on the canvas. You can move images using absolute pixel coordinates or percentage-based positioning for responsive layouts, making it essential for creating precise layouts and dynamic compositions.

You can position images both through the built-in user interface and programmatically using the SDK's APIs, providing flexibility for different workflow requirements.

[Launch Web Demo](https://img.ly/showcases/cesdk)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## Positioning Methods

CE.SDK supports several approaches to image positioning:

- **Absolute Positioning**: Use precise pixel coordinates for exact placement
- **Percentage Positioning**: Position relative to parent container for responsive designs
- **UI Drag & Drop**: Interactive positioning through direct manipulation
- **Group Movement**: Move multiple elements together while maintaining alignment

## Applying Positioning

### UI-Based Positioning

You can move images directly in the CE.SDK user interface by dragging them to new positions. Users can drag and drop elements anywhere on the canvas, making it easy to adjust layouts visually and interactively.

### Programmatic Positioning

Developers can position images programmatically, using the SDK's API. This allows for precise coordinate control, animated movements, and integration with layout systems or template constraints.

## Combining with Other Transforms

Image positioning works seamlessly with other transformation operations like rotation, scaling, and cropping. You can chain multiple transformations to create complex layouts while maintaining precise control over element placement.

## Guides


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/edit-video/transform/flip-a603b0.md -->

---
title: "Flip Videos"
description: "Flip videos horizontally or vertically to create mirror effects and symmetrical designs."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/edit-video/transform/flip-a603b0/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---

Video flipping in CreativeEditor SDK (CE.SDK) allows you to mirror video content horizontally or vertically. This transformation is useful for creating symmetrical designs, correcting orientation issues, or achieving specific visual effects in your video projects.

You can flip videos both through the built-in user interface and programmatically using the SDK's APIs, providing flexibility for different workflow requirements.

[Launch Web Demo](https://img.ly/showcases/cesdk)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## Available Flip Operations

CE.SDK supports two types of video flipping:

- **Horizontal Flip**: Mirror the video along its vertical axis, creating a left-right reflection
- **Vertical Flip**: Mirror the video along its horizontal axis, creating a top-bottom reflection

These operations can be applied individually or combined to achieve the desired visual effect.

## Applying Flips

### UI-Based Flipping

You can apply flips directly in the CE.SDK user interface. The editor provides intuitive controls for horizontally and vertically flipping videos, making it easy for users to quickly mirror content without writing code.

### Programmatic Flipping

Developers can also apply flips programmatically, using the SDK's API. This allows for dynamic video adjustments based on application logic, user input, or automated processes.

## Combining with Other Transforms

Video flipping works seamlessly with other transformation operations like rotation, scaling, and cropping. You can chain multiple transformations to create complex visual effects while maintaining video quality.

## Guides


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/edit-video/transform/move-aa9d89.md -->

---
title: "Move Videos"
description: "Position video elements precisely on the canvas using absolute or percentage-based coordinates."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/edit-video/transform/move-aa9d89/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---

Video positioning in CreativeEditor SDK (CE.SDK) allows you to precisely control where video elements appear on the canvas. You can move videos using absolute pixel coordinates or percentage-based positioning for responsive layouts, making it essential for creating precise video layouts and dynamic compositions.

You can position videos both through the built-in user interface and programmatically using the SDK's APIs, providing flexibility for different workflow requirements.

[Launch Web Demo](https://img.ly/showcases/cesdk)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## Positioning Methods

CE.SDK supports several approaches to video positioning:

- **Absolute Positioning**: Use precise pixel coordinates for exact placement
- **Percentage Positioning**: Position relative to parent container for responsive designs
- **UI Drag & Drop**: Interactive positioning through direct manipulation
- **Group Movement**: Move multiple video elements together while maintaining alignment

## Applying Positioning

### UI-Based Positioning

You can move videos directly in the CE.SDK user interface by dragging them to new positions. Users can drag and drop video elements anywhere on the canvas, making it easy to adjust video layouts visually and interactively.

### Programmatic Positioning

Developers can position videos programmatically, using the SDK's API. This allows for precise coordinate control, animated video movements, and integration with layout systems or template constraints.

## Combining with Other Transforms

Video positioning works seamlessly with other transformation operations like rotation, scaling, and cropping. You can chain multiple transformations to create complex video layouts while maintaining precise control over element placement.

## Guides


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/edit-video/transform/resize-b1ce14.md -->

---
title: "Resize Videos"
description: "Change the dimensions of video elements to fit specific layout requirements."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/edit-video/transform/resize-b1ce14/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---

Video resizing in CreativeEditor SDK (CE.SDK) allows you to change the dimensions of video elements to match specific layout requirements. Unlike scaling, resizing allows independent control of width and height dimensions, making it ideal for fitting videos into predefined spaces or responsive layouts.

You can resize videos both through the built-in user interface and programmatically using the SDK's APIs, providing flexibility for different workflow requirements.

[Launch Web Demo](https://img.ly/showcases/cesdk)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## Resize Methods

CE.SDK supports several approaches to video resizing:

- **Absolute Dimensions**: Set specific pixel dimensions for precise control
- **Percentage-based Resizing**: Size relative to parent container for responsive designs
- **UI Resize Handles**: Interactive resize controls in the editor interface
- **Aspect Ratio Constraints**: Maintain or ignore aspect ratios during resize operations

## Applying Resizing

### UI-Based Resizing

You can resize videos directly in the CE.SDK user interface using resize handles. Users can drag edge and corner handles to adjust dimensions independently or proportionally, making it easy to fit videos into specific layouts visually.

### Programmatic Resizing

Developers can apply resizing programmatically, using the SDK's API. This allows for precise dimension control, automated layout adjustments, and integration with responsive design systems or template constraints.

## Combining with Other Transforms

Video resizing works seamlessly with other transformation operations like rotation, cropping, and positioning. You can chain multiple transformations to create complex layouts while maintaining video quality and performance.

## Guides


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/engine-interface-6fb7cf.md -->

---
title: "Engine Interface"
description: "Understand CE.SDK's architecture and learn when to use direct Engine access for automation workflows"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/engine-interface-6fb7cf/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Engine](https://img.ly/docs/cesdk/react-native/engine-interface-6fb7cf/)

---

The Creative Engine is the powerhouse behind CE.SDK's cross-platform capabilities. While the UI components provide ready-to-use editing experiences, the Engine interface gives you direct programmatic control over all creative operations—from simple batch processing to complex automated workflows.

## Client-Side vs Server-Side Processing

Understanding when to use client-side versus server-side processing is crucial for building efficient creative automation workflows. Each approach offers distinct advantages depending on your use case requirements.

### Client-Side Processing (Mobile Device)

Client-side processing runs the Engine directly in the user's device — but importantly, this doesn't mean visible to the user. The Engine operates headlessly in the background, making it perfect for automation tasks that enhance user experience without interrupting their workflow.

**Common Implementation Patterns:**

**Hidden Engine Instances**: Run a second, invisible Engine instance alongside your main UI for background processing. While users edit in the primary interface, the hidden instance can validate designs, generate previews, or prepare export-ready assets.

**Underlying Engine Access**: Access the Engine API directly from prebuilt UI components for custom automation within existing workflows.

**Dedicated Engine Packages**: Use platform-specific Engine packages for specialized client-side automation without any UI overhead.

**Ideal Client-Side Use Cases:**

- **Design Validation**: Check for empty placeholders, low-resolution images, or brand guideline violations in real-time
- **Thumbnail Generation**: Create preview images for design galleries or version history
- **Effect Previews**: Generate quick previews of filters or effects before applying them to the main design
- **Auto-Save Optimization**: Compress and optimize scenes for storage while maintaining editability
- **Real-Time Feedback**: Provide instant visual feedback for design rules or constraints

### Server-Side Processing

Server-side processing moves the Engine to your backend infrastructure, unlocking powerful capabilities for resource-intensive operations and scalable workflows.

**Key Advantages:**

- **Enhanced Resources**: Access to more CPU, memory, and storage than client devices
- **Secure Asset Access**: Process private assets without exposing them to client-side code
- **Background Operations**: Handle long-running tasks without affecting user experience
- **Scheduled Automation**: Trigger design generation based on events, schedules, or external APIs

**Ideal Server-Side Use Cases:**

- **High-Resolution Exports**: Generate print-quality assets that would be too resource-intensive for client devices
- **Bulk Generation**: Create thousands of design variations for marketing campaigns or product catalogs
- **Data Pipeline Integration**: Connect to databases, APIs, or file systems for automated content generation
- **Multi-Format Output**: Export designs in multiple formats and resolutions simultaneously
- **Workflow Orchestration**: Coordinate complex multi-step automation processes

**Hybrid Workflows**: Often, the most effective approach combines both client and server-side processing. Users can design and preview on the client with instant feedback, while heavy processing happens on the server in the background.

## Engine-Powered Use Cases

The Engine interface unlocks [powerful automation scenarios](https://img.ly/docs/cesdk/react-native/automation/overview-34d971/) that can scale creative workflows:

### Batch Processing

Process multiple designs simultaneously with consistent results. Whether you're applying filters to hundreds of images or generating variations of a marketing template, the Engine handles bulk operations efficiently both client-side and server-side.

### Auto-Resize

Automatically adapt designs to different aspect ratios and platforms. The Engine intelligently repositions elements, adjusts text sizes, and maintains visual hierarchy across formats—from Instagram stories to LinkedIn posts.

### Data Merge

Connect external data sources (CSV, JSON, APIs) to templates for personalized content generation. Perfect for creating thousands of product cards, personalized certificates, or location-specific campaigns.

### Product Variations

Generate multiple versions of product designs with different colors, sizes, or configurations. Ideal for e-commerce platforms needing to showcase product options without manual design work.

### Design Generation

Create entirely new designs programmatically based on rules, templates, or AI inputs. The Engine can compose layouts, select appropriate fonts, and arrange elements according to your design guidelines.

### Multiple Image Generation

Efficiently process and export designs in various formats and resolutions. Generate web-optimized previews alongside print-ready high-resolution files in a single workflow.

### Actions

Implement complex multi-step operations as reusable actions. Chain together filters, transformations, and exports to create sophisticated automated workflows that can be triggered programmatically.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/file-format-support-3c4b2a.md -->

---
title: "File Format Support"
description: "See which image, video, audio, font, and template formats CE.SDK supports for import and export."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/file-format-support-3c4b2a/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/react-native/compatibility-fef719/) > [File Format Support](https://img.ly/docs/cesdk/react-native/file-format-support-3c4b2a/)

---

## Importing Media

### SVG Limitations

## Exporting Media

## Importing Templates

## Font Formats

## Video & Audio Codecs

CE.SDK supports the most widely adopted video and audio codecs to ensure compatibility across platforms:

## Size Limits

### Image Resolution Limits

### Video Resolution & Duration Limits


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/filters-and-effects-6f88ac.md -->

---
title: "Filters and Effects"
description: "Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/filters-and-effects-6f88ac/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/react-native/filters-and-effects-6f88ac/)

---


---

## Related Pages

- [React Native Filters & Effects Library](https://img.ly/docs/cesdk/react-native/filters-and-effects/overview-299b15/) - Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/filters-and-effects/overview-299b15.md -->

---
title: "React Native Filters & Effects Library"
description: "Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/filters-and-effects/overview-299b15/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/react-native/filters-and-effects-6f88ac/) > [Overview](https://img.ly/docs/cesdk/react-native/filters-and-effects/overview-299b15/)

---

In CreativeEditor SDK (CE.SDK), *filters* and *effects* refer to visual modifications that enhance or transform the appearance of design elements. Filters typically adjust an element’s overall color or tone, while effects add specific visual treatments like blur, sharpness, or distortion.

You can apply both filters and effects through the user interface or programmatically using the CE.SDK API. They allow you to refine the look of images, videos, and graphic elements in your designs with precision and flexibility.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/get-started/mcp-server-fde71c.md -->

---
title: "MCP Server"
description: "Connect AI assistants to CE.SDK documentation using the Model Context Protocol (MCP) server."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/get-started/mcp-server-fde71c/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [MCP Server](https://img.ly/docs/cesdk/react-native/get-started/mcp-server-fde71c/)

---

The CE.SDK MCP server provides a standardized interface that allows any compatible AI assistant to search and access our documentation. This enables AI tools like Claude, Cursor, and VS Code Copilot to provide more accurate, context-aware help when working with CE.SDK.

## What is MCP?

The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open standard that enables AI assistants to securely connect to external data sources. By connecting your AI tools to our MCP server, you get:

- **Accurate answers**: AI assistants can search and retrieve the latest CE.SDK documentation
- **Context-aware help**: Get platform-specific guidance for your development environment
- **Up-to-date information**: Always access current documentation without relying on training data

## Available Tools

The MCP server exposes two tools:

| Tool | Description |
|------|-------------|
| `search` | Search documentation by query string |
| `fetch` | Retrieve the full content of a document by ID |

## Server Endpoint

| URL | Transport |
|-----|-----------|
| `https://mcp.img.ly/mcp` | Streamable HTTP |

No authentication is required.

## Setup Instructions

### Claude Code

Add the MCP server with a single command:

```bash
claude mcp add --transport http imgly_docs https://mcp.img.ly/mcp
```

### Claude Desktop

1. Open Claude Desktop and go to **Settings** (click your profile icon)
2. Navigate to **Connectors** in the sidebar
3. Click **Add custom connector**
4. Enter the URL: `https://mcp.img.ly/mcp`
5. Click **Add** to connect

### Cursor

Add the following to your Cursor MCP configuration. You can use either:

- **Project-specific**: `.cursor/mcp.json` in your project root
- **Global**: `~/.cursor/mcp.json`

```json
{
  "mcpServers": {
    "imgly_docs": {
      "url": "https://mcp.img.ly/mcp"
    }
  }
}
```

### VS Code

Add to your workspace configuration at `.vscode/mcp.json`:

```json
{
  "servers": {
    "imgly_docs": {
      "type": "http",
      "url": "https://mcp.img.ly/mcp"
    }
  }
}
```

### Windsurf

Add the following to your Windsurf MCP configuration at `~/.codeium/windsurf/mcp_config.json`:

```json
{
  "mcpServers": {
    "imgly_docs": {
      "serverUrl": "https://mcp.img.ly/mcp"
    }
  }
}
```

### Other Clients

For other MCP-compatible clients, use the endpoint `https://mcp.img.ly/mcp` with HTTP transport. Refer to your client's documentation for the specific configuration format.

## Usage

Once configured, your AI assistant will automatically have access to CE.SDK documentation. You can ask questions like:

- "How do I add a text block in CE.SDK?"
- "Show me how to export a design as PNG"
- "What are the available blend modes?"

The AI will search our documentation and provide answers based on the latest CE.SDK guides and API references.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/get-started/overview-e18f40.md -->

---
title: "Get Started"
description: "Start integrating CE.SDK into your application—from understanding the SDK to running your first editor."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

---

Everything you need to integrate CE.SDK into your application. Learn what the
SDK offers, get up and running with starter kits, explore AI-powered
workflows, and understand our licensing model.

## Next Steps

- [What is CE.SDK?](props.paths['2e7acd'])

- [Quickstart](props.paths['r1q2w3e'])

- [Vibecoding](props.paths['c3014f'])

- [Licensing](props.paths['8aa063'])


---

## Related Pages

- [React Native Creative Editor](https://img.ly/docs/cesdk/react-native/what-is-cesdk-2e7acd/) - 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.
- [New Project Setup](https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a1234y/) - Setting up CE.SDK in a new React Native project for both Android and iOS platforms
- [New Project Setup](https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a5678y/) - Setting up CE.SDK in a new React Native CLI project for both Android and iOS platforms
- [MCP Server](https://img.ly/docs/cesdk/react-native/get-started/mcp-server-fde71c/) - Connect AI assistants to CE.SDK documentation using the Model Context Protocol (MCP) server.
- [LLMs.txt](https://img.ly/docs/cesdk/react-native/llms-txt-eb9cc5/) - Our documentation is available in LLMs.txt format
- [Licensing](https://img.ly/docs/cesdk/react-native/licensing-8aa063/) - Understand CE.SDK’s flexible licensing, trial options, and how keys work across dev, staging, and production.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/get-started/react-native/clone-github-c3432f.md -->

---
title: "Clone GitHub Project"
description: "Using CE.SDK with a cloned React Native GitHub project for Android and iOS"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/get-started/react-native/clone-github-c3432f/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [Quickstart Expo](https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a1234y/)

---

This comprehensive guide walks you through cloning and running the CE.SDK
official React Native Expo sample project, which includes complete
CreativeEditor SDK (CE.SDK) integration examples. By the end, you'll have a
fully functional React Native Expo application with multiple editor examples
running on your device.

## Who Is This Guide For?

This guide is for developers who:

- Want to explore working CreativeEditor SDK examples before implementing in their own project
- Need to understand different integration patterns and use cases
- Want to test the CreativeEditor SDK features with minimal setup
- Are looking for reference implementations to learn from
- Want to quickly get started with a pre-configured React Native Expo project
- Prefer using Expo for React Native development

## What You'll Achieve

By following this guide, you will:

- Clone the official IMG.LY React Native examples repository
- Set up the project with your license key
- Run multiple CreativeEditor SDK examples on your device
- Explore different editor presets and configurations
- Understand common integration patterns
- Have a working reference implementation to learn from

[View on GitHub](https://github.com/imgly/cesdk-react-native-examples)

[Explore React Native Demos](https://img.ly/showcases/cesdk/?tags=react-native)

## Prerequisites

Before you begin, ensure you have the following requirements:

### Development Environment

- **Node.js**: 18.0 or later
- **React Native**: 0.73 or later
- **Expo CLI**: Latest version
- **Android Studio** or **VS Code** with React Native extensions
- **Git CLI** for version control

### Platform Requirements

- **iOS**: 16.0+ (Xcode 26.0.1+, Swift 6.2+)
- **Android**: 7.0+ (API level 24+)

### License

- A valid **CE.SDK license key** ([Get a free trial](https://img.ly/forms/free-trial)), pass `null` to run in evaluation mode with watermark.

### Verify Your Setup

Run the following command to verify your React Native installation:

```bash
npx react-native --version
```

This command checks your React Native installation and reports any issues to resolve before proceeding.

> **Note:** Always use native code when customizing the CreativeEditor SDK for React Native (Swift/Kotlin), and refer to the [configuration overview section](https://img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8/).

## Step 1: Clone the GitHub Repository

First, navigate to your preferred working directory:

```bash
# Navigate to your preferred directory
cd ~/Downloads  # or any directory of your choice
```

Clone the official IMG.LY React Native examples repository:

```bash
git clone https://github.com/imgly/cesdk-react-native-examples.git
cd cesdk-react-native-examples
```

### Repository Structure

The cloned repository contains:

```
cesdk-react-native-examples/
├── showcases/           # Main React Native app with multiple examples
├── shared/             # Shared configuration files
├── scripts/            # Build and deployment scripts
├── fastlane/           # CI/CD configuration
├── README.md           # Project documentation
├── package.json        # React Native dependencies
└── app.json            # Expo configuration
```

## Step 2: Configure Your License Key

The examples require a valid CreativeEditor SDK license key to function.

### 2.1 Locate the Secrets File

Navigate to the main React Native app directory:

```bash
cd showcases
```

The license configuration is in `src/secrets/secrets.ts`:

```typescript title="secrets.ts"
export class Secrets {
  // Enter your license here.
  static license = String.fromEnvironment("SHOWCASES_LICENSE_REACT_NATIVE", defaultValue: "");
}
```

### 2.2 Set Your License Key

You have two options for setting your license key:

**Option A: Direct in secrets file (for testing)**
Since this is a cloned repository for testing, you can add your license key directly:

```typescript title="secrets.ts"
export class Secrets {
  // Enter your license here.
  static license = String.fromEnvironment("SHOWCASES_LICENSE_REACT_NATIVE", defaultValue: "your_actual_license_key_here");
}
```

**Option B: Environment variable (recommended)**
Pass the license key as an environment variable when running:

```bash
EXPO_PUBLIC_SHOWCASES_LICENSE_REACT_NATIVE=your_actual_license_key_here npx expo start
```

> **Security Note**: For production projects, always use environment variables or secure key management systems. Direct key placement is only recommended for testing and learning purposes.

## Step 3: Install Dependencies

Install the React Native dependencies:

<Install />

This downloads and installs all required packages, including the CreativeEditor SDK.

## Step 4: Configure Platform-Specific Settings

The repository includes pre-configured platform settings, but you may need to verify them:

### 4.1 Android Configuration

The Android configuration is already set up with:

- Minimum SDK: 24
- Kotlin version: 1.9.10
- IMG.LY Maven repository
- Required permissions

Verify the configuration by running:

```bash
cd android
gradle clean
cd ..
```

### 4.2 iOS Configuration

The iOS configuration is already set up with:

- Deployment target: 16.0
- Framework linkage: dynamic (useFrameworks)
- Required permissions (camera, microphone)
- Swift support

Install iOS dependencies:

```bash
cd ios
pod install
cd ..
```

## Step 5: Run the Examples

Now you can run the React Native examples on your device:

### 5.1 List Available Devices

```bash
npx expo start
```

This command shows available devices and simulators.

### 5.2 Run on Android Device

```bash
# Run with license key
EXPO_PUBLIC_SHOWCASES_LICENSE_REACT_NATIVE=your_actual_license_key_here npx expo start --android

# Or run on specific device
EXPO_PUBLIC_SHOWCASES_LICENSE_REACT_NATIVE=your_actual_license_key_here npx expo start --android -d your_device_id
```

### 5.3 Run on iOS Device

```bash
# Run with license key
EXPO_PUBLIC_SHOWCASES_LICENSE_REACT_NATIVE=your_actual_license_key_here npx expo start --ios

# Or run on specific device
EXPO_PUBLIC_SHOWCASES_LICENSE_REACT_NATIVE=your_actual_license_key_here npx expo start --ios -d your_device_id
```

## Step 6: Explore the Examples

The React Native examples app includes multiple showcases demonstrating different CreativeEditor SDK features:

### 6.1 Available Examples

The app contains examples for:

- **Photo Editing**: Basic photo editing with filters and adjustments
- **Design Creation**: Full-featured design editor for creating graphics
- **Video Editing**: Video processing and editing capabilities
- **Apparel Design**: T-shirt and merchandise design tools
- **Postcard Design**: Greeting cards and postcard creation

### 6.2 Navigation

- Use the app's navigation to explore different examples
- Each example demonstrates specific CreativeEditor SDK features
- Tap on examples to launch the editor with different presets
- Test available editing capabilities and workflows

### 6.3 Learning from Examples

Study the example implementations to understand:

- How to integrate the CreativeEditor SDK
- Different preset configurations
- Result handling patterns
- Error handling approaches
- UI integration patterns

## Step 7: Understand the Code Structure

The examples demonstrate best practices for CreativeEditor SDK integration:

### 7.1 Key Files to Study

```
showcases/
├── App.tsx                 # App entry point
├── src/
│   ├── secrets/
│   │   └── secrets.ts      # License key configuration
│   ├── services/
│   │   └── editorService.ts # Editor integration service
│   ├── screens/
│   │   └── showcases/      # Example screens
│   └── components/         # Reusable UI components
├── app.json                # Expo configuration
└── package.json            # Dependencies
```

### 7.2 Integration Patterns

The examples show different integration approaches:

- **Service-based integration**: Centralized editor service
- **Screen-specific integration**: Direct integration in screens
- **Preset variations**: Different editor configurations
- **Result handling**: Common ways to process editor results

### 7.3 Key Implementation Details

Study these important aspects:

- **License Management**: How license keys are handled securely
- **Error Handling**: Comprehensive error handling patterns
- **State Management**: How app state is managed during editor sessions
- **Platform Configuration**: Expo build properties and native setup
- **UI Integration**: How the editor integrates with React Native UI

## Troubleshooting

### Common Issues and Solutions

#### 1. License Key Errors

**Error:**

```
Invalid license key
```

**Solution:**

1. Ensure you have a valid license key from [IMG.LY](https://img.ly/forms/free-trial) (or pass `null` for evaluation mode with watermark)
2. Verify the license key is correctly set in `src/secrets/secrets.ts`
3. Check that the license key is for the correct platform (React Native)
4. Ensure there are no extra spaces or characters in the license key
5. Make sure you're passing the license key with `EXPO_PUBLIC_SHOWCASES_LICENSE_REACT_NATIVE=your_key`

#### 2. Build Errors

**Error:**

```
Dependencies not found
```

**Solution:**

1. Run `npm install`/`yarn`/`pnpm install` to install dependencies
2. Check your internet connection
3. Verify React Native version compatibility

#### 3. Platform-Specific Issues

**Android Issues:**

```bash
cd android
gradle clean
cd ..
npx expo start --android
```

**iOS Issues:**

```bash
cd ios
pod install
cd ..
npx expo start --ios
```

#### 4. Device Connection Issues

**Error:**

```
No devices found
```

**Solution:**

1. Ensure your device is connected and unlocked
2. Enable USB debugging (Android) or trust the computer (iOS)
3. Run `npx expo start` to verify device detection

#### 5. Expo Build Issues

**Error:**

```
Prebuild failed
```

**Solution:**

1. Clean your project: `npx expo prebuild --clean`
2. Check that all plugins are properly configured in `app.json`
3. Verify your Expo SDK version is compatible

#### 6. TypeScript Errors

**Error:**

```
TypeScript compilation errors
```

**Solution:**

1. Check that all TypeScript dependencies are installed
2. Verify TypeScript version compatibility
3. Run `npx tsc --noEmit` to check for type errors

## Next Steps

Now that you have the examples running, you can:

1. **Study the Code**: Examine the implementation patterns in the examples
2. **Test Features**: Try different editor presets and configurations
3. **Customize Examples**: Modify the examples to test your own use cases
4. **Integrate into Your Project**: Use the examples as reference for your own implementation
5. **Explore Advanced Features**: Test advanced editing capabilities

### Related Guides

- **[New Project Setup](https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a1234y/)**: Create a new React Native project with CreativeEditor SDK
- **[Existing Project Integration](https://img.ly/docs/cesdk/react-native/get-started/react-native/existing-project-b4312d/)**: Add CreativeEditor SDK to your existing React Native app
- **[Configuration Guide](https://img.ly/docs/cesdk/react-native/configuration-2c1c3d/)**: Learn about advanced configuration options

## Additional Resources

- [CreativeEditor SDK Documentation](https://img.ly/docs/cesdk/)
- [React Native Examples Repository](https://github.com/imgly/cesdk-react-native-examples)

## Support

If you encounter any issues or need assistance:

- Check the [troubleshooting section](#troubleshooting) above
- Review the [GitHub repository issues](https://github.com/imgly/cesdk-react-native-examples/issues)
- Contact [IMG.LY support](https://img.ly/support) for technical assistance

Congratulations! You've successfully cloned and are running the official CreativeEditor SDK React Native examples. You now have a comprehensive reference implementation to learn from and test available CreativeEditor SDK features.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/get-started/react-native/existing-project-b4312d.md -->

---
title: "Existing Project Setup"
description: "Integrating CE.SDK into an existing React Native project for Android and iOS"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/get-started/react-native/existing-project-b4312d/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [Quickstart Expo](https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a1234y/)

---

## 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](https://img.ly/docs/cesdk/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 **CE.SDK license key** ([Get a free trial](https://img.ly/forms/free-trial)), pass `null` to run in evaluation mode with watermark.

## Minimum Requirements

- React Native: 0.73
- iOS: 16
- Swift: 6.2 (Xcode 26.0.1)
- Android: 7.0 (Android SDK 24)

## Add Dependency

First, install the `@imgly/editor-react-native` module by running the following command:

```sh
npx expo install @imgly/editor-react-native
```

## Native Setup

If your application includes Android or iOS as a target platform, some manual configuration is required. 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:

```sh
npx expo install expo-build-properties
```

### Android

If your application includes Android as a target platform, make the following changes in your `app.json` file:

- Increase the `minSdk` to at least 24
- Include the IMG.LY maven repository
- Increase the Kotlin version to at least `1.9.10`

```diff
"plugins": [
+  [
+    "expo-build-properties",
+    {
+      "android": {
+        "minSdkVersion": 24,
+        "extraMavenRepos": ["https://artifactory.img.ly/artifactory/maven"],
+        "kotlinVersion": "1.9.10"
+      }
+    }
+  ]
]
```

### iOS

If your application includes iOS as a target platform, you'll need to:

- Adjust the `deploymentTarget` to at least `16.0` if needed
- Enable `useFrameworks` for Swift pod compatibility (use `dynamic` or `static`)
- Optionally: Add photo library permission if you plan to enable full photo library access (by default, CE.SDK uses the system photos picker which doesn't require permissions)

Update the `expo-build-properties` plugin to include iOS deployment target and framework configuration:

```diff
 "plugins": [
   [
     "expo-build-properties",
     {
+      "ios": {
+        "deploymentTarget": "16.0",
+        "useFrameworks": "dynamic"
+      }
     }
   ]
 ]
```

If you want to enable full photo library access (instead of the default photos picker), add the photo library permission to your `app.json` file:

```diff
+"ios": {
+  "infoPlist": {
+    "NSPhotoLibraryUsageDescription": "This app needs photo library access to import images for editing"
+  }
+}
```

Note: This permission is only required if you explicitly enable full photo library access using `PhotoRollAssetSource(engine: engine, mode: .fullLibraryAccess)` in your iOS code.

Finally, run the `prebuild` command to generate the needed native code.

```sh
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:

```typescript
import IMGLYEditor, {
  EditorPreset,
  EditorSettingsModel,
  SourceType,
} from '@imgly/editor-react-native';

export const design_editor_solution = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY', // pass null for evaluation mode with watermark
    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.

#### Unintegrated Swift pods

```
[!] The following Swift pods cannot yet be integrated as static libraries:
The Swift pod `IMGLYEditorModule` depends upon `IMGLYUI`, which does not define modules.
```

**Solution** -> Ensure you have `useFrameworks` set in your `expo-build-properties` iOS configuration. Use `dynamic` (recommended) or `static`:

```json
{
  "ios": {
    "useFrameworks": "dynamic"
  }
}
```

#### Incompatible compose compiler

```
e: This version of the Compose Compiler requires Kotlin version x.x.xx but you appear to be using Kotlin version y.y.yy which is not known to be compatible.  Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).
```

**Solution** -> Ensure you have the proper compose compiler version for your project. Check official mappings [here](https://developer.android.com/jetpack/androidx/releases/compose-kotlin)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/get-started/react-native/existing-project-b9012y.md -->

---
title: "Existing Project Setup"
description: "Setting up CE.SDK in an existing React Native CLI project for both Android and iOS platforms"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/get-started/react-native/existing-project-b9012y/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [Quickstart React Native](https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a5678y/)

---

## Introduction

This guide provides step-by-step instructions for integrating the `@imgly/editor-react-native` module into your existing mobile React Native project. By the end of this guide, you will have a powerful creative editor running in your own React Native application.

> **Note:** Customizing the CreativeEditor SDK for React Native is handled exclusively through native code (Swift/Kotlin), as outlined in our [configuration overview section](https://img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8/).

## Pre-requisites

Before you begin, make sure the following requirements are met:

- A properly configured React Native 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), pass `null` to run in evaluation mode with watermark.

## Minimum Requirements

- React Native: 0.73
- iOS: 16
- Swift: 6.2 (Xcode 26.0.1)
- Android: 7.0 (Android SDK 24)

## Add Dependency

First, install the `@imgly/editor-react-native` module by running the following command:

```sh
npm install @imgly/editor-react-native
```

## iOS Configuration

If your application is targeting iOS, you will need to make the following changes:

#### Minimum iOS version

Ensure that your app is targeting at least iOS 16. You can do this in the `ios/Podfile` file, by editing this line:

```ruby
platform :ios, '16.0'
```

#### Install Dependencies

Run the following commands to navigate to the `ios/` directory and install the CocoaPods dependencies:

#### Run iOS App

To build and install the app, launch/connect your iOS simulator/device and run:

```sh
npm run ios
```

## Android Configuration

If your application is targeting Android, you will need to make the following changes:

#### Minimum Android SDK

Ensure that the minimum android SDK is set to at least 24. You can do this in the `android/build.gradle` file.

```groovy
minSdkVersion = 24
```

#### IMG.LY Maven Coordinates

You will also need to add the maven coordinates for the IMG.LY repo. This can also be done in the same `android/build.gradle` file.

```groovy
allprojects {
    repositories {
        maven {
            name "IMG.LY Artifactory"
            url "https://artifactory.img.ly/artifactory/maven"
            mavenContent {
                includeGroup("ly.img")
            }
        }
    }
}
```

#### Compose Plugin

Finally, if your version of Kotlin is `2.0.0` or above, you will also need to add the compose plugin dependency in the `dependencies` block of the `android/build.gradle` file. The plugin version you use should be the same as the kotlin version.

```groovy
classpath("org.jetbrains.kotlin.plugin.compose:org.jetbrains.kotlin.plugin.compose.gradle.plugin:$kotlinVersion")
```

#### Run Android App

To build and install the app, launch/connect your android emulator/device and run:

```sh
npm run android
```

## 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:

```typescript
import IMGLYEditor, {
  EditorPreset,
  EditorSettingsModel,
  SourceType,
} from '@imgly/editor-react-native';

export const design_editor_solution = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY', // pass null for evaluation mode with watermark
    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.

#### CocoaPods versions not found

```
[!] CocoaPods could not find compatible versions for pod "IMGLYUI":

  In Podfile:

    IMGLYEditorModule (from `../node_modules/@imgly/editor-react-native`) was resolved to 1.51.0, which depends on
```

**Solution**

```
(cd ios && pod repo update)
```

#### Unintegrated swift pods

```
[!] The following Swift pods cannot yet be integrated as static libraries:
The Swift pod `IMGLYEditorModule` depends upon `IMGLYUI`, which does not define modules.
```

**Solution**

```
use_frameworks! :linkage => :static
```


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/get-started/react-native/new-project-a1234y.md -->

---
title: "New Project Setup"
description: "Setting up CE.SDK in a new React Native project for both Android and iOS platforms"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a1234y/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [Quickstart Expo](https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a1234y/)

---

## 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](https://img.ly/docs/cesdk/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 **CE.SDK license key** ([Get a free trial](https://img.ly/forms/free-trial)), pass `null` to run in evaluation mode with watermark.

## Minimum Requirements

- React Native: 0.73
- iOS: 16
- Swift: 6.2 (Xcode 26.0.1)
- Android: 7.0 (Android SDK 24)

## Create the Project

First, create a new Expo project by running the following command:

```sh
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:

```sh
npx expo install @imgly/editor-react-native
```

## Native Setup

If your application includes Android or iOS as a target platform, some manual configuration is required. 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:

```sh
npx expo install expo-build-properties
```

### Android

If your application includes Android as a target platform, make the following changes in your `app.json` file:

- Increase the `minSdk` to at least 24
- Include the IMG.LY maven repository
- Increase the Kotlin version to at least `1.9.10`

```diff
"plugins": [
+  [
+    "expo-build-properties",
+    {
+      "android": {
+        "minSdkVersion": 24,
+        "extraMavenRepos": ["https://artifactory.img.ly/artifactory/maven"],
+        "kotlinVersion": "1.9.10"
+      }
+    }
+  ]
]
```

### iOS

If your application includes iOS as a target platform, you'll need to:

- Adjust the `deploymentTarget` to at least `16.0`
- Enable `useFrameworks` for Swift pod compatibility (use `dynamic` or `static`)
- Optionally: Add photo library permission if you plan to enable full photo library access (by default, CE.SDK uses the system photos picker which doesn't require permissions)

Update the `expo-build-properties` plugin to include iOS deployment target and framework configuration:

```diff
 "plugins": [
+  [
+    "expo-build-properties",
+    {
+      "ios": {
+        "deploymentTarget": "16.0",
+        "useFrameworks": "dynamic"
+      }
+    }
+  ]
 ]
```

If you want to enable full photo library access (instead of the default photos picker), add the photo library permission to your `app.json` file:

```diff
+"ios": {
+  "infoPlist": {
+    "NSPhotoLibraryUsageDescription": "This app needs photo library access to import images for editing"
+  }
+}
```

Note: This permission is only required if you explicitly enable full photo library access using `PhotoRollAssetSource(engine: engine, mode: .fullLibraryAccess)` in your iOS code.

Finally, run the `prebuild` command to generate the needed native code.

```sh
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:

```typescript
import IMGLYEditor, {
  EditorPreset,
  EditorSettingsModel,
  SourceType,
} from '@imgly/editor-react-native';

export const design_editor_solution = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY', // pass null for evaluation mode with watermark
    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.

#### Unintegrated Swift pods

```
[!] The following Swift pods cannot yet be integrated as static libraries:
The Swift pod `IMGLYEditorModule` depends upon `IMGLYUI`, which does not define modules.
```

**Solution** -> Ensure you have `useFrameworks` set in your `expo-build-properties` iOS configuration. Use `dynamic` (recommended) or `static`:

```json
{
  "ios": {
    "useFrameworks": "dynamic"
  }
}
```

#### Incompatible compose compiler

```
e: This version of the Compose Compiler requires Kotlin version x.x.xx but you appear to be using Kotlin version y.y.yy which is not known to be compatible.  Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).
```

**Solution** -> Ensure you have the proper compose compiler version for your project. Check official mappings [here](https://developer.android.com/jetpack/androidx/releases/compose-kotlin)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/get-started/react-native/new-project-a5678y.md -->

---
title: "New Project Setup"
description: "Setting up CE.SDK in a new React Native CLI project for both Android and iOS platforms"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a5678y/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [Quickstart React Native](https://img.ly/docs/cesdk/react-native/get-started/react-native/new-project-a5678y/)

---

## Introduction

This guide provides step-by-step instructions for integrating the `@imgly/editor-react-native` module into a new mobile React Native project. By the end of this guide, you will have a powerful creative editor running in your own React Native application.

> **Note:** Customizing the CreativeEditor SDK for React Native is handled exclusively through native code (Swift/Kotlin), as outlined in our [configuration overview section](https://img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8/).

## Pre-requisites

Before you begin, make sure the following requirements are met:

- A properly configured React Native 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), pass `null` to run in evaluation mode with watermark.

## Minimum Requirements

- React Native: 0.73
- iOS: 16
- Swift: 6.2 (Xcode 26.0.1)
- Android: 7.0 (Android SDK 24)

## Create the Project

First, create a new React Native project by running the following command:

```sh
npx @react-native-community/cli@latest init cesdk_editor
```

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:

```sh
npm install @imgly/editor-react-native
```

## iOS Configuration

If your application is targeting iOS, you will need to make the following changes:

#### Minimum iOS version

Ensure that your app is targeting at least iOS 16. You can do this in the `ios/Podfile` file, by editing this line:

```ruby
platform :ios, '16.0'
```

#### Install Dependencies

Run the following commands in the `ios/` directory in order to install the dependencies

```
cd ios
bundle exec pod install
```

#### Run iOS App

To build and install the app, launch/connect your iOS simulator/device and run:

```sh
npm run ios
```

## Android Configuration

If your application is targeting Android, you will need to make the following changes:

#### Minimum Android SDK

Ensure that the minimum android SDK is set to at least 24. You can do this in the `android/build.gradle` file.

```groovy
minSdkVersion = 24
```

#### IMG.LY Maven Coordinates

You will also need to add the maven coordinates for the IMG.LY repo. This can also be done in the same `android/build.gradle` file.

```groovy
allprojects {
    repositories {
        maven {
            name "IMG.LY Artifactory"
            url "https://artifactory.img.ly/artifactory/maven"
            mavenContent {
                includeGroup("ly.img")
            }
        }
    }
}
```

#### Compose Plugin

Finally, if your version of Kotlin is `2.0.0` or above, you will also need to add the compose plugin dependency in the `dependencies` block of the `android/build.gradle` file. The plugin version you use should be the same as the kotlin version.

```groovy
classpath("org.jetbrains.kotlin.plugin.compose:org.jetbrains.kotlin.plugin.compose.gradle.plugin:$kotlinVersion")
```

#### Run Android App

To build and install the app, launch/connect your android emulator/device and run:

```sh
npm run android
```

## 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:

```typescript
import IMGLYEditor, {
  EditorPreset,
  EditorSettingsModel,
  SourceType,
} from '@imgly/editor-react-native';

export const design_editor_solution = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY', // pass null for evaluation mode with watermark
    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.

#### CocoaPods versions not found

```
[!] CocoaPods could not find compatible versions for pod "IMGLYUI":

  In Podfile:

    IMGLYEditorModule (from `../node_modules/@imgly/editor-react-native`) was resolved to 1.51.0, which depends on
```

**Solution**

```
pod repo update
```

#### Unintegrated swift pods

```
[!] The following Swift pods cannot yet be integrated as static libraries:
The Swift pod `IMGLYEditorModule` depends upon `IMGLYUI`, which does not define modules.
```

**Solution**

```
use_frameworks! :linkage => :static
```

#### Incompatible compose compiler

```
e: This version of the Compose Compiler requires Kotlin version x.x.xx but you appear to be using Kotlin version y.y.yy which is not known to be compatible.  Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).
```

**Solution** -> Ensure you have the proper compose compiler version for your project. Check official mappings [here](https://developer.android.com/jetpack/androidx/releases/compose-kotlin)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/guides-8d8b00.md -->

---
title: "Guides"
description: "Documentation for Guides"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/guides-8d8b00/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/)

---


---

## Related Pages

- [Configuration](https://img.ly/docs/cesdk/react-native/configuration-2c1c3d/) - Learn how to configure CE.SDK to match your application's functional, visual, and performance requirements.
- [Settings](https://img.ly/docs/cesdk/react-native/settings-970c98/) - Explore all configurable editor settings and learn how to read, update, and observe them via the Settings API.
- [Engine Interface](https://img.ly/docs/cesdk/react-native/engine-interface-6fb7cf/) - Understand CE.SDK's architecture and learn when to use direct Engine access for automation workflows
- [Automate Workflows](https://img.ly/docs/cesdk/react-native/automation-715209/) - Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale.
- [User Interface](https://img.ly/docs/cesdk/react-native/user-interface-5a089a/) - Use CE.SDK’s customizable, production-ready UI or replace it entirely with your own interface.
- [Insert Media Into Scenes](https://img.ly/docs/cesdk/react-native/insert-media-a217f5/) - Understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code.
- [Import Media](https://img.ly/docs/cesdk/react-native/import-media-4e3703/) - Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK.
- [Text](https://img.ly/docs/cesdk/react-native/text-8a993a/) - Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools.
- [Create Compositions](https://img.ly/docs/cesdk/react-native/create-composition-db709c/) - Combine and arrange multiple elements to create complex, multi-page, or layered design compositions.
- [Create Templates](https://img.ly/docs/cesdk/react-native/create-templates-3aef79/) - Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK.
- [Colors](https://img.ly/docs/cesdk/react-native/colors-a9b79c/) - Manage color usage in your designs, from applying brand palettes to handling print and screen formats.
- [Outlines](https://img.ly/docs/cesdk/react-native/outlines-b7820c/) - Enhance design elements with strokes, shadows, and glow effects to improve contrast and visual appeal.
- [Filters and Effects](https://img.ly/docs/cesdk/react-native/filters-and-effects-6f88ac/) - Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying.
- [Rules](https://img.ly/docs/cesdk/react-native/rules-1427c0/) - Define and enforce layout, branding, and safety rules to ensure consistent and compliant designs.
- [Conversion](https://img.ly/docs/cesdk/react-native/conversion-c3fbb3/) - Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/guides/export-save-publish/export/audio-68de25.md -->

---
title: "For Audio Processing"
description: "Learn how to export audio in WAV or MP4 format from any block type in CE.SDK for React Native."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/guides/export-save-publish/export/audio-68de25/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---

Export audio from pages, video blocks, audio blocks, and tracks to WAV or MP4 format for external processing, transcription, or analysis.

The `exportAudio` API allows you to extract audio from any block that contains audio content. This is particularly useful when integrating with external audio processing services like speech-to-text transcription, audio enhancement, or music analysis platforms.

Audio can be exported from multiple block types:

- **Page blocks** - Export the complete mixed audio timeline
- **Video blocks** - Extract audio tracks from videos
- **Audio blocks** - Export standalone audio content
- **Track blocks** - Export audio from specific timeline tracks

## Export Audio

Export audio from any block using the `exportAudio` API:

```typescript
const page = engine.scene.getCurrentPage();

const audioBlob = await engine.block.exportAudio(page, {
  mimeType: 'audio/wav',
  sampleRate: 48000,
  numberOfChannels: 2
});

console.log(`Exported ${audioBlob.size} bytes`);
```

### Export Options

Configure your audio export with these options:

- **`mimeType`** - `'audio/wav'` (uncompressed) or `'audio/mp4'` (compressed AAC)
- **`sampleRate`** - Audio quality in Hz (default: 48000)
- **`numberOfChannels`** - 1 for mono or 2 for stereo
- **`timeOffset`** - Start time in seconds (default: 0)
- **`duration`** - Length to export in seconds (0 = entire duration)
- **`onProgress`** - Callback receiving `(rendered, encoded, total)` for progress tracking

## Find Audio Sources

To find blocks with audio in your scene:

```typescript
// Find audio blocks
const audioBlocks = engine.block.findByType('audio');

// Find video blocks with audio
const videoFills = engine.block.findByType('//ly.img.ubq/fill/video');
const videosWithAudio = videoFills.filter(block => {
  try {
    return engine.block.getAudioInfoFromVideo(block).length > 0;
  } catch {
    return false;
  }
});
```

## Working with Multi-Track Video Audio

Videos can contain multiple audio tracks (e.g., different languages). CE.SDK provides APIs to inspect and extract specific tracks.

### Check audio track count

```typescript
const videoFillId = engine.block.findByType('//ly.img.ubq/fill/video')[0];

const trackCount = engine.block.getAudioTrackCountFromVideo(videoFillId);
console.log(`Video has ${trackCount} audio track(s)`);
```

### Get track information

```typescript
const audioTracks = engine.block.getAudioInfoFromVideo(videoFillId);

audioTracks.forEach((track, index) => {
  console.log(`Track ${index}:`, {
    channels: track.channels,
    sampleRate: track.sampleRate,
    language: track.language || 'unknown',
    label: track.label || `Track ${index}`
  });
});
```

### Extract a specific track

```typescript
// Create audio block from track 0 (first track)
const audioBlockId = engine.block.createAudioFromVideo(videoFillId, 0);

// Export just this track's audio
const trackAudioBlob = await engine.block.exportAudio(audioBlockId, {
  mimeType: 'audio/wav'
});
```

### Extract all tracks

```typescript
// Create audio blocks for all tracks
const audioBlockIds = engine.block.createAudiosFromVideo(videoFillId);

// Export each track
for (let i = 0; i < audioBlockIds.length; i++) {
  const trackBlob = await engine.block.exportAudio(audioBlockIds[i]);
  console.log(`Track ${i}: ${trackBlob.size} bytes`);
}
```

## Complete Workflow: Audio to Captions

A common workflow is to export audio, send it to a transcription service, and use the returned captions in your scene.

### Step 1: Export Audio

```typescript
const page = engine.scene.getCurrentPage();

const audioBlob = await engine.block.exportAudio(page, {
  mimeType: 'audio/wav',
  sampleRate: 48000,
  numberOfChannels: 2
});
```

### Step 2: Send to Transcription Service

Send the audio to a service that returns SubRip (SRT) format captions:

```typescript
async function transcribeAudio(audioBlob: Blob): Promise<string> {
  const formData = new FormData();
  formData.append('audio', audioBlob, 'audio.wav');
  formData.append('format', 'srt');

  const response = await fetch('https://api.transcription-service.com/transcribe', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
    },
    body: formData
  });

  // Returns SRT format text
  return await response.text();
}

const srtContent = await transcribeAudio(audioBlob);
```

### Step 3: Import Captions from SRT

Use the built-in API to create caption blocks from the SRT response:

```typescript
// Create a file from the SRT text
const srtFile = new File([srtContent], 'captions.srt', {
  type: 'application/x-subrip'
});

// Create object URL and import captions
const uri = URL.createObjectURL(srtFile);
const captions = await engine.block.createCaptionsFromURI(uri);
URL.revokeObjectURL(uri);

// Add captions to page
const page = engine.scene.getCurrentPage();
const captionTrack = engine.block.create('//ly.img.ubq/captionTrack');

captions.forEach(caption => {
  engine.block.appendChild(captionTrack, caption);
});

engine.block.appendChild(page, captionTrack);

// Center the first caption as a reference point
engine.block.alignHorizontally([captions[0]], 'Center');
engine.block.alignVertically([captions[0]], 'Center');
```

### Other Processing Services

Audio export also supports these workflows:

- **Audio enhancement** - Noise removal, normalization
- **Music analysis** - Tempo, key, beat detection
- **Language detection** - Identify spoken language
- **Speaker diarization** - Identify who spoke when


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/import-media-4e3703.md -->

---
title: "Import Media"
description: "Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/import-media-4e3703/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/react-native/import-media-4e3703/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/import-media/overview-84bb23/) - Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK.
- [Capture From Camera](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera-92f388/) - Capture photos or videos directly from a connected camera for immediate use in your design.
- [File Format Support](https://img.ly/docs/cesdk/react-native/import-media/file-format-support-8cdc84/) - Review the supported image, video, and audio formats for importing assets.
- [Size Limits](https://img.ly/docs/cesdk/react-native/import-media/size-limits-c32275/) - Learn about file size restrictions and how to optimize large assets for use in CE.SDK.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/import-media/capture-from-camera-92f388.md -->

---
title: "Capture From Camera"
description: "Capture photos or videos directly from a connected camera for immediate use in your design."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera-92f388/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/react-native/import-media-4e3703/) > [Capture From Camera](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera-92f388/)

---


---

## Related Pages

- [Integrate Mobile Camera](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/integrate-33d863/) - Enable live camera capture in mobile apps to shoot and insert photos or video.
- [Mobile Camera Configuration](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/camera-configuration-46afd0/) - Set up camera permissions, quality, and behavior when capturing within CE.SDK.
- [Access Recordings](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/recordings-c2ca1e/) - Manage access to recorded videos or reactions for playback or editing.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/import-media/capture-from-camera/camera-configuration-46afd0.md -->

---
title: "Mobile Camera Configuration"
description: "Set up camera permissions, quality, and behavior when capturing within CE.SDK."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/camera-configuration-46afd0/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/react-native/import-media-4e3703/) > [Capture From Camera](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera-92f388/) > [Camera Configuration](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/camera-configuration-46afd0/)

---

```typescript file=@cesdk_react_native_examples/camera-guides-configuration/configured_camera_solution.ts reference-only
import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native';

export const recordings_reaction_camera_solution = async (): Promise<void> => {
  const settings: CameraSettings = {
    license: 'YOUR_LICENSE_KEY', // Get your license from https://img.ly/forms/free-trial, pass null for evaluation mode with watermark
    userId: 'YOUR_USER_ID'
  };

  const result = await IMGLYCamera.openCamera(
    settings,
    require('MY_VIDEO_SOURCE')
  );
};
```

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](https://img.ly/docs/cesdk/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`.

```typescript highlight-settings
const settings: CameraSettings = {
  license: 'YOUR_LICENSE_KEY', // Get your license from https://img.ly/forms/free-trial, pass null for evaluation mode with watermark
  userId: 'YOUR_USER_ID'
};
```

### Reactions

You can optionally provide a `video` parameter which lets the user react to that video.

```typescript highlight-reactions
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`:

```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()
  }
}
```

### 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`.

```kotlin
// 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`.

```kotlin
// 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

```typescript
import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native';

export const recordings_reaction_camera_solution = async (): Promise<void> => {
  const settings: CameraSettings = {
    license: 'YOUR_LICENSE_KEY',
    userId: 'YOUR_USER_ID',
  };

  const result = await IMGLYCamera.openCamera(
    settings,
    require('MY_VIDEO_SOURCE'),
  );
};
```

### ConfigurationGuide.swift

```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

```kotlin
// 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"))
}
```


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/import-media/capture-from-camera/integrate-33d863.md -->

---
title: "Integrate Mobile Camera"
description: "Enable live camera capture in mobile apps to shoot and insert photos or video."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/integrate-33d863/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/react-native/import-media-4e3703/) > [Capture From Camera](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera-92f388/) > [Integrate Mobile Camera](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/integrate-33d863/)

---

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/v$UBQ_VERSION$).

## Requirements

For this version, the minimum requirements are:

- React Native: 0.73
- iOS: 16
- Swift: 6.2 (Xcode 26.0.1)
- 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, make some adjustments to your `app.json` file=

1. Add the [`expo-build-properties`](https://www.npmjs.com/package/expo-build-properties) config plugin to your app.

2. Add the following options:

## iOS Setup

In order to integrate the camera for iOS, make some adjustments to your `app.json` file as well:

## 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.

```typescript
const settings: CameraSettings = {
  license: 'YOUR_LICENSE_KEY',
};
```

Next, you can open the editor using the `openCamera` method.

```typescript
const result = await IMGLYCamera.openCamera(settings);
```

That is all. For more than basic configuration, check out all the available [configurations](https://img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8/).

## Full Code

Here's the full code for both `app.json` and `camera_react_native.ts`.

### app.json

```json title="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",
            "useFrameworks": "dynamic"
          }
        }
      ]
    ],
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "This app uses the camera for demonstration purposes.",
        "NSMicrophoneUsageDescription": "This app uses the camera for demonstration purposes."
      }
    }
  }
}
```

### camera\_react\_native.ts

```typescript title="camera_react_native.ts"
import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native';

export const camera = async (): Promise<void> => {
  const settings: CameraSettings = {
    license: 'YOUR_LICENSE_KEY',
  };
  const result = await IMGLYCamera.openCamera(settings);
};
```


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/import-media/capture-from-camera/recordings-c2ca1e.md -->

---
title: "Access Recordings"
description: "Manage access to recorded videos or reactions for playback or editing."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/recordings-c2ca1e/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/react-native/import-media-4e3703/) > [Capture From Camera](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera-92f388/) > [Access Recordings](https://img.ly/docs/cesdk/react-native/import-media/capture-from-camera/recordings-c2ca1e/)

---

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.

```typescript
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.

```typescript
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`.

```typescript
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.

```typescript
console.log(`Error occurred in the camera session: ${error}.`);
```

## Full Code

Here's the full code for both files:

### recordings\_camera\_solution.ts

```typescript
import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native';

export const recordings_camera_solution = async (): Promise<void> => {
  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

```typescript
import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native';

export const recordings_reaction_camera_solution = async (): Promise<void> => {
  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}.`);
  }
};
```


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/import-media/file-format-support-8cdc84.md -->

---
title: "File Format Support"
description: "Review the supported image, video, and audio formats for importing assets."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/import-media/file-format-support-8cdc84/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/react-native/import-media-4e3703/) > [File Format Support](https://img.ly/docs/cesdk/react-native/import-media/file-format-support-8cdc84/)

---

CreativeEditor SDK (CE.SDK) supports importing high-resolution images, video, and audio content.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/import-media/overview-84bb23.md -->

---
title: "Overview"
description: "Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/import-media/overview-84bb23/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/react-native/import-media-4e3703/) > [Overview](https://img.ly/docs/cesdk/react-native/import-media/overview-84bb23/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## File Type Support

CreativeEditor SDK (CE.SDK) supports importing high-resolution images, video, and audio content.

## Media Constraints

### Image Resolution Limits

### Video Resolution & Duration Limits


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/import-media/size-limits-c32275.md -->

---
title: "Size Limits"
description: "Learn about file size restrictions and how to optimize large assets for use in CE.SDK."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/import-media/size-limits-c32275/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/react-native/import-media-4e3703/) > [Size Limits](https://img.ly/docs/cesdk/react-native/import-media/size-limits-c32275/)

---

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

## Video Resolution & Duration Limits


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/insert-media-a217f5.md -->

---
title: "Insert Media Into Scenes"
description: "Understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/insert-media-a217f5/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Insert Media Assets](https://img.ly/docs/cesdk/react-native/insert-media-a217f5/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/overview-491658/) - Understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/key-capabilities-dbb5b1.md -->

---
title: "Key Capabilities"
description: "Explore CE.SDK’s key features—manual editing, automation, templates, AI tools, and full UI and API control."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/key-capabilities-dbb5b1/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Concepts](https://img.ly/docs/cesdk/react-native/concepts-c9ff51/) > [Key Capabilities](https://img.ly/docs/cesdk/react-native/key-capabilities-dbb5b1/)

---

This guide gives you a high-level look at what CreativeEditor SDK (CE.SDK) can do—and how deeply it can integrate into your workflows. Whether you’re building a design editor into your product, enabling automation, or scaling personalized content creation, CE.SDK provides a flexible and future-ready foundation.

[Explore Demos](https://img.ly/showcases/cesdk/?tags=android%2ios)

It’s designed for developers, product teams, and technical decision-makers evaluating how CE.SDK fits their use case.

- 100% client-side processing
- Custom-built rendering engine for consistent cross-platform performance
- Flexible enough for both low-code and fully custom implementations


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/key-concepts-21a270.md -->

---
title: "Key Concepts"
description: "Explore CE.SDK’s key features—manual editing, automation, templates, AI tools, and full UI and API control."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/key-concepts-21a270/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Concepts](https://img.ly/docs/cesdk/react-native/concepts-c9ff51/) > [Key Concepts](https://img.ly/docs/cesdk/react-native/key-concepts-21a270/)

---

CE.SDK is built on two distinct technical layers that work together seamlessly:

- **User Interface** — Pre-built editors optimized for different use cases
- **Engine Interface** — Core rendering and processing engine

![The different layers CE.SDK is made of, see description below.](layers.png)

This intentional separation gives you powerful advantages:

1. **Cross-platform consistency** – The engine is cross-compiled to native web, iOS, Android, and Node.js, ensuring identical output everywhere
2. **Custom UI** – Build your own UI for simpler tools and workflows
3. **Headless automation** – Run the engine independently for automations and batch processing, both client-side and server-side

## Creative Engine

The Creative Engine powers all core editing operations. It handles rendering, processing, and manipulation across images, layouts, text, video, audio, and vectors.

**What the Engine Does:**

- Maintains the scene file (your structured content)
- Renders the canvas in real-time
- Handles block positioning and resizing
- Applies filters and effects to images
- Manages text editing and typography
- Controls templates with role-based permissions
- Displays smart guides and snap lines

Every engine capability is exposed through a comprehensive API, letting you build custom UIs, workflows, and automations.

## Headless / Engine only

Use the engine without any UI for powerful automation scenarios:

**Client-side automation**
Perfect for in-browser batch operations and dynamic content generation without server dependencies.

**Server-side automation with Node.js**
Use the [Node.JS SDK](https://img.ly/docs/cesdk/react-native/what-is-cesdk-2e7acd/) for following scenarios:

- **High-resolution processing** – Edit on the client with preview quality, then render server-side with full-resolution assets
- **Bulk generation** – Create a large volume of design variations for variable data printing
- **Non-blocking workflows** – Let users continue designing while exports process in the background

**Server-side export with the CE.SDK Renderer**
When exporting complex graphics and videos, the [CE.SDK Renderer](#broken-link-7f3e9a) can make use of GPU acceleration and video codecs on Linux server environments.

**Plugin development**
When building CE.SDK plugins, you get direct API access to manipulate canvas elements programmatically.

## User Interface Components

CE.SDK includes pre-built UI configurations optimized for different use cases:

- **Photo editing** — Advanced image editing tools and filters
- **Video editing** — Timeline-based video editing and effects
- **Design editing** — Layout and graphic design tools (similar to Canva)
- **2D product design** — Apparel, postcards, and custom product templates

More configurations are coming based on customer needs.

## UI Customization

While UI configurations provide a solid foundation, you maintain control over the user experience:

- Apply **custom color schemes** and branding to match your product
- Add **custom asset libraries** with your own fonts, images, graphics, videos, and audio

The plugin architecture lets you add custom buttons and panels throughout the interface, ensuring the editor feels native to your product.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/licensing-8aa063.md -->

---
title: "Licensing"
description: "Understand CE.SDK’s flexible licensing, trial options, and how keys work across dev, staging, and production."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/licensing-8aa063/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [Licensing](https://img.ly/docs/cesdk/react-native/licensing-8aa063/)

---

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.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/llms-txt-eb9cc5.md -->

---
title: "LLMs.txt"
description: "Our documentation is available in LLMs.txt format"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/llms-txt-eb9cc5/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [Vibe Coding](https://img.ly/docs/cesdk/react-native/llms-txt-eb9cc5/)

---

> **Note:** You can also connect your AI assistant directly to our documentation using our [MCP Server](https://img.ly/docs/cesdk/react-native/get-started/mcp-server-fde71c/). This enables real-time search and retrieval without downloading large files.

Our documentation is now available in LLMs.txt format, optimized for AI reasoning engines. To better support platform-specific development, we've created separate documentation files for each platform.

For  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](getFullUrl\(`/$\{props.platform.slug}/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


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/open-the-editor/overview-99444b.md -->

---
title: "Overview"
description: "Learn how to load and create scenes, set the zoom level, and configure file proxies or URI resolvers."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/open-the-editor/overview-99444b/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/outlines-b7820c.md -->

---
title: "Outlines"
description: "Enhance design elements with strokes, shadows, and glow effects to improve contrast and visual appeal."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/outlines-b7820c/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Outlines](https://img.ly/docs/cesdk/react-native/outlines-b7820c/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/outlines/overview-dfeb12/) - Enhance design elements with strokes, shadows, and glow effects to improve contrast and visual appeal.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/outlines/overview-dfeb12.md -->

---
title: "Overview"
description: "Enhance design elements with strokes, shadows, and glow effects to improve contrast and visual appeal."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/outlines/overview-dfeb12/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Outlines](https://img.ly/docs/cesdk/react-native/outlines-b7820c/) > [Overview](https://img.ly/docs/cesdk/react-native/outlines/overview-dfeb12/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/overview-491658.md -->

---
title: "Overview"
description: "Understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/overview-491658/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Insert Media Assets](https://img.ly/docs/cesdk/react-native/insert-media-a217f5/) > [Overview](https://img.ly/docs/cesdk/react-native/overview-491658/)

---

In CE.SDK, *inserting media into a scene* means placing visual or audio elements directly onto the canvas—images, videos, audio clips, shapes, or stickers—so they become part of the design. This differs from *importing assets*, which simply makes media available in the asset library.

This guide helps you understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code. By the end, you'll know how media are represented, modified, saved, and exported.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## Inserting Media


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/prebuilt-solutions-d0ed07.md -->

---
title: "Solutions"
description: "Production-ready editor configurations for CE.SDK"
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Solutions](https://img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07/)

---

Choose a starter kit to get up and running quickly with CE.SDK. Each kit
provides a complete, customizable editor configuration.

## Choosing the Right Starter Kit

Each starter kit is optimized for a specific workflow. Pick the one that matches your use case:

### Photo Editing

Use **Photo Editor** when your users need to edit single images—crop, apply filters, adjust colors, or remove backgrounds. Ideal for profile photo uploads, product image editing, or any workflow where users enhance one image at a time.

### Graphic Design

Use **Design Editor** when your users create graphics with multiple elements—social media posts, marketing materials, or personalized templates. Supports text, images, shapes, and multi-page documents like presentations or brochures.

For power users who need full creative control, **Design Editor (Advanced)** adds a comprehensive toolbar, layer management, and professional design tools.

### Video Production

Use **Video Editor** when your users need to edit video content—trim clips, add effects, overlay text, and export to MP4. Perfect for social media videos, short-form content, or basic video editing workflows.

For professional video production with multi-track timelines, transitions, and audio mixing, choose **Video Editor (Advanced)**.

### Read-Only Display

Use **Design Viewer** or **Video Player** when you need to display content without editing capabilities. These lightweight kits are ideal for approval workflows, content previews, or embedding finished designs in your application.


---

## Related Pages

- [React Native Photo Editor SDK](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/photo-editor-42ccb2/) - 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 Design Tool & Design Editor](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/design-editor-9bf041/) - Embed a ready-to-use design editor that lets users personalize templates while respecting layout constraints.
- [React Native Video Editor SDK](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/video-editor-9e533a/) - 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.
- [T-Shirt Designer in React Native](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/t-shirt-designer-02b48f/) - Embed a t-shirt design editor with print areas, PDF export, and a focused UI for apparel customization.
- [React Native Postcard Editor](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/postcard-editor-61e1f6/) - Let users personalize postcards with templates, style presets, and print-ready exports—no design skills needed.
- [React Native Camera and Editor](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/camera-editor-5c6d08/) - Capture and edit media in your React Native app with a fast, customizable camera and editor powered by CE.SDK.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/prebuilt-solutions/camera-editor-5c6d08.md -->

---
title: "React Native Camera and Editor"
description: "Capture and edit media in your React Native app with a fast, customizable camera and editor powered by CE.SDK."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/prebuilt-solutions/camera-editor-5c6d08/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Solutions](https://img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07/) > [Camera and Editor](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/camera-editor-5c6d08/)

---

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


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/prebuilt-solutions/design-editor-9bf041.md -->

---
title: "React Native Design Tool & Design Editor"
description: "Embed a ready-to-use design editor that lets users personalize templates while respecting layout constraints."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/prebuilt-solutions/design-editor-9bf041/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Solutions](https://img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07/) > [Design Editor](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/design-editor-9bf041/)

---

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.

[Explore Demo](https://img.ly/showcases/cesdk/default-ui/ios)

[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


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/prebuilt-solutions/photo-editor-42ccb2.md -->

---
title: "React Native Photo Editor SDK"
description: "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."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/prebuilt-solutions/photo-editor-42ccb2/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Solutions](https://img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07/) > [Photo Editor](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/photo-editor-42ccb2/)

---

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.

[Explore Demo](https://img.ly/showcases/cesdk/photo-editor-ui/ios)

[View on GitHub](https://github.com/imgly/cesdk-react-native-examples/tree/main/showcases/guides/editor-guides-solutions-photo-editor)

<ImageContainer image="true" />

<br />

## Key Capabilities of the React Native Image Editor SDK

<CapabilityGrid
  features={[
  {
    title: 'Transforms',
    description:
      'Includes straightening, scaling, rotation, and flip functions.',
    imageId: 'transform',
  },
  {
    title: 'Advanced Adjustment Tools',
    description:
      'Includes brightness, saturation, contrast, gamma, clarity, exposure, shadows, highlights, and more.',
    imageId: 'templating',
  },
  {
    title: 'Filters',
    description:
      'Provide a wide range of built-in filters and effects or upload your own custom filters.',
    imageId: 'filters',
  },
  {
    title: 'Effects & Blur',
    description: 'Unique effects such as pixelize, glitch, or mirror.',
    imageId: 'effects',
  },
  {
    title: 'Text Editing',
    description:
      'Add and style text blocks with various fonts, colors, and effects.',
    imageId: 'text-editing',
  },
  {
    title: 'Asset Libraries',
    description: 'Add custom assets for stickers, filters, and shapes.',
    imageId: 'asset-libraries',
  },
  {
    title: 'Client-Side Processing',
    description:
      'All design editing operations are executed directly on the device, with no need for server dependencies.',
    imageId: 'client-side',
  },
  {
    title: 'Customizable UI',
    description:
      'Tailor the photo editing interface to align with your application’s branding and UX requirements.',
    imageId: 'customizable-u-i',
  },
]}
/>

## 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: 6.2 (Xcode 26.0.1)
- 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

### Exporting Media

### Importing Templates

For detailed information, see the [full file format support list](https://img.ly/docs/cesdk/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:** 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](https://img.ly/docs/cesdk/react-native/user-interface-5a089a/), 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:

```typescript
const settings = new EditorSettingsModel({
  license: 'YOUR_LICENSE_KEY',
  userId: 'YOUR_USER_ID',
});
```

Explore further customization options by visiting the [configuration guide.](https://img.ly/docs/cesdk/react-native/configuration-2c1c3d/)

<CallToAction />

<LogoWall />


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/prebuilt-solutions/postcard-editor-61e1f6.md -->

---
title: "React Native Postcard Editor"
description: "Let users personalize postcards with templates, style presets, and print-ready exports—no design skills needed."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/prebuilt-solutions/postcard-editor-61e1f6/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Solutions](https://img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07/) > [Postcard Editor](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/postcard-editor-61e1f6/)

---

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.

[Explore Demo](https://img.ly/showcases/cesdk/post-greeting-cards/ios)

[View on GitHub](https://github.com/imgly/cesdk-react-native-examples/tree/main/showcases/guides/editor-guides-solutions-postcard-editor)

## 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.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/prebuilt-solutions/t-shirt-designer-02b48f.md -->

---
title: "T-Shirt Designer in React Native"
description: "Embed a t-shirt design editor with print areas, PDF export, and a focused UI for apparel customization."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/prebuilt-solutions/t-shirt-designer-02b48f/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Solutions](https://img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07/) > [T-Shirt Designer](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/t-shirt-designer-02b48f/)

---

Quickly add a professional-grade t-shirt design editor to your React Native app with CE.SDK.

[Explore Demo](https://img.ly/showcases/cesdk/apparel-editor-ui/ios)

[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.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/prebuilt-solutions/video-editor-9e533a.md -->

---
title: "React Native Video Editor SDK"
description: "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."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/prebuilt-solutions/video-editor-9e533a/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Solutions](https://img.ly/docs/cesdk/react-native/prebuilt-solutions-d0ed07/) > [Video Editor](https://img.ly/docs/cesdk/react-native/prebuilt-solutions/video-editor-9e533a/)

---

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.

[Explore Demo](https://img.ly/showcases/cesdk/video-ui/ios)

[View on GitHub](https://github.com/imgly/cesdk-react-native-examples/tree/main/showcases/guides/editor-guides-solutions-video-editor)

<ImageContainer image="true" />

<br />

## Key Capabilities of the React Native Mobile Video Editor SDK

<CapabilityGrid
  features={[
  {
    title: 'Multi-Format Support',
    description:
      'Create videos in various formats, including story reels and Ultra HD, tailored for different channels like Instagram, TikTok, or custom formats.',
    imageId: 'transform',
  },
  {
    title: 'Templating',
    description:
      'Jumpstart your users designs with easily adaptable templates including text variables and placeholders.',
    imageId: 'templating',
  },
  {
    title: 'Asset Management',
    description:
      'Record, upload, or select pre-existing videos, images, and other media from a custom library to enrich video content.',
    imageId: 'asset-libraries',
  },
  {
    title: 'Advanced Editing Tools',
    description:
      'Utilize features such as adjustments, filters, effects, and blur to fine-tune each element or the entire video, delivering a professional finish.',
    imageId: 'empty',
  },
  {
    title: 'Timeline Management',
    description:
      'Arrange multiple video clips, images, text, stickers, and shapes on a timeline for precise control over the final output.',
    imageId: 'timeline',
  },
  {
    title: 'Audio Integration',
    description:
      'Enhance videos with audio tracks, either imported or selected from a custom asset library, to add another layer of creativity.',
    imageId: 'audio',
  },
  {
    title: 'Customizable UI',
    description:
      'Tailor the video editing interface to match your application’s branding and user experience needs, ensuring an intuitive and engaging experience.',
    imageId: 'customizable-u-i',
  },
  {
    title: 'Camera SDK',
    description:
      'Easily integrate with our Camera SDK for dual camera, timers and more',
    imageId: 'camera',
  },
]}
/>

## 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: 6.2 (Xcode 26.0.1)
- 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

### Exporting Media

### Importing Templates

For detailed information, see the [full file format support list](https://img.ly/docs/cesdk/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](https://img.ly/docs/cesdk/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:** 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:

```typescript
const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY' });
```

Explore further customization options by visiting the [configuration guide.](https://img.ly/docs/cesdk/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.

<CallToAction />

<LogoWall />


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/rules-1427c0.md -->

---
title: "Rules"
description: "Define and enforce layout, branding, and safety rules to ensure consistent and compliant designs."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/rules-1427c0/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Rules](https://img.ly/docs/cesdk/react-native/rules-1427c0/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/rules/overview-e27832/) - Define and enforce layout, branding, and safety rules to ensure consistent and compliant designs.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/rules/overview-e27832.md -->

---
title: "Overview"
description: "Define and enforce layout, branding, and safety rules to ensure consistent and compliant designs."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/rules/overview-e27832/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Rules](https://img.ly/docs/cesdk/react-native/rules-1427c0/) > [Overview](https://img.ly/docs/cesdk/react-native/rules/overview-e27832/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/security-777bfd.md -->

---
title: "Security"
description: "Learn how CE.SDK keeps your data private with client-side processing, secure licensing, and GDPR-compliant practices."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/security-777bfd/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/react-native/compatibility-fef719/) > [Security](https://img.ly/docs/cesdk/react-native/security-777bfd/)

---

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 or your servers, not on our servers
- **No Data Transmission**: Your content (e.g. images, designs, templates, videos, audio, etc.) is never uploaded to or processed on IMG.LY servers
- **Minimal Data Collection**: We only collect device identifiers and count exports for licensing purposes
- **GDPR Compliance**: Our data collection practices adhere to GDPR regulations
- **Secure Licensing**: Enterprise licenses are secured with RSA SHA256 encryption

## Data Protection & Access Controls

### Data 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

### CE.SDK Renderer

CE.SDK Renderer is a specialized variant of CE.SDK that consists of a native Linux binary bundled in a Docker container. It uses GPU acceleration and native code to render scenes and archives to various export formats.

Due to bundled third-party codecs (mainly H.264 & H.265) and their associated patent requirements, CE.SDK Renderer implements additional licensing communication beyond the standard licensing handshake:

1. **Initial License Validation**: The tool performs the standard license validation with our licensing backend
2. **Periodic Heartbeats**: After successful validation, it sends periodic heartbeats to our licensing backend to track the number of active instances
3. **Instance Limits**: We limit the maximum number of active instances per license based on the settings in your dashboard
4. **Activation Control**: If the instance limit is exceeded, further activations (launches) of the tool will fail with a descriptive error message

This additional communication allows us to ensure compliance with codec licensing requirements while providing transparent usage tracking for your organization. As with all CE.SDK products, no user data (images, videos, designs, or other content) is transmitted to IMG.LY servers - only device identifiers and instance counts are collected for licensing purposes.

## Security Considerations for User Input

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).


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/settings-970c98.md -->

---
title: "Settings"
description: "Explore all configurable editor settings and learn how to read, update, and observe them via the Settings API."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/settings-970c98/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Settings](https://img.ly/docs/cesdk/react-native/settings-970c98/)

---

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: `<origin, value>` 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.                                                                                                                                                                                        |
| pageHighlightColor                   | `Color`                                                                                                                                                                                                                                                                                                                                                             | `createRGBColor(0.5, 0.5, 0.5, 0.2)`     | Color of the outline of each page.                                                                                                                                                                            |
| placeholderControls                  | `PlaceholderControlsSettings(bool showOverlay, bool showButton)`                                                                                                                                                                                                                                                                                                    | `{}`                                     | Supersedes how the blocks' placeholder controls are applied.                                                                                                                                                  |
| placeholderHighlightColor            | `Color`                                                                                                                                                                                                                                                                                                                                                             | `createRGBColor(0.77, 0.06, 0.95)`       | Color of the selection, hover, and group frames and for the handle outlines for placeholder elements.                                                                                                         |
| positionSnappingThreshold            | `float`                                                                                                                                                                                                                                                                                                                                                             | `4.`                                     | Position snapping threshold in screen space.                                                                                                                                                                  |
| progressColor                        | `Color`                                                                                                                                                                                                                                                                                                                                                             | `createRGBColor(1., 1., 1., 0.7)`        | The progress indicator color.                                                                                                                                                                                 |
| renderTextCursorAndSelectionInEngine | `bool`                                                                                                                                                                                                                                                                                                                                                              | `true`                                   | Whether the engine should render the text cursor and selection highlights during text editing. This can be set to false, if the platform wants to perform this rendering itself.                              |
| rotationSnappingGuideColor           | `Color`                                                                                                                                                                                                                                                                                                                                                             | `createRGBColor(1., 0.004, 0.361)`       | Color of the rotation snapping guides.                                                                                                                                                                        |
| rotationSnappingThreshold            | `float`                                                                                                                                                                                                                                                                                                                                                             | `0.15`                                   | Rotation snapping threshold in radians.                                                                                                                                                                       |
| ruleOfThirdsLineColor                | `Color`                                                                                                                                                                                                                                                                                                                                                             | `createRGBColor(0.75, 0.75, 0.75, 0.75)` | Color of the rule-of-thirds lines.                                                                                                                                                                            |
| showBuildVersion                     | `bool`                                                                                                                                                                                                                                                                                                                                                              | `false`                                  | Show the build version on the canvas.                                                                                                                                                                         |
| snappingGuideColor                   | `Color`                                                                                                                                                                                                                                                                                                                                                             | `createRGBColor(1., 0.004, 0.361)`       | Color of the position snapping guides.                                                                                                                                                                        |
| textVariableHighlightColor           | `Color`                                                                                                                                                                                                                                                                                                                                                             | `createRGBColor(0.7, 0., 0.7)`           | Color of the text variable highlighting borders.                                                                                                                                                              |
| touch                                | `TouchSettings(bool dragStartCanSelect, bool singlePointPanning, PinchGestureAction pinchAction, RotateGestureAction rotateAction)`                                                                                                                                                                                                                                 | `{}`                                     | Settings that configure which touch gestures are enabled and which actions they trigger.                                                                                                                      |
| useSystemFontFallback                | `bool`                                                                                                                                                                                                                                                                                                                                                              | `false`                                  | Whether the IMG.LY hosted font fallback is used for fonts that are missing certain characters, covering most of the unicode range.                                                                            |

### `TouchSettings`

| 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`. |


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/starterkits/advanced-editor-87riel.md -->

---
title: "Design Editor (Advanced)"
description: "Add a comprehensive design editor to your web app in minutes. Professional tools for graphics, templates, and multi-page documents—all client-side."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/starterkits/advanced-editor-87riel/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/starterkits/advanced-video-editor-2a68z2.md -->

---
title: "Video Editor (Advanced)"
description: "Add a comprehensive video editor to your web app in minutes. Professional tools for timeline editing, effects, and MP4 export—all client-side."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/starterkits/advanced-video-editor-2a68z2/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/starterkits/player-6sjm1w.md -->

---
title: "Video Player"
description: "Add video playback to your web app in minutes. Play, pause, and navigate video content—all client-side."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/starterkits/player-6sjm1w/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/starterkits/viewer-zgs556.md -->

---
title: "Design Viewer"
description: "Add design viewing to your web app in minutes. Pan, zoom, and navigate multi-page designs—all client-side."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/starterkits/viewer-zgs556/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

---


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/text-8a993a.md -->

---
title: "Text"
description: "Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/text-8a993a/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/react-native/text-8a993a/)

---


---

## Related Pages

- [Overview](https://img.ly/docs/cesdk/react-native/text/overview-0bd620/) - Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools.
- [Text Designs](https://img.ly/docs/cesdk/react-native/text/text-designs-a1b2c3/) - Create and customize text component libraries using predefined text designs that appear in your asset library.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/text/overview-0bd620.md -->

---
title: "Overview"
description: "Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/text/overview-0bd620/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/react-native/text-8a993a/) > [Overview](https://img.ly/docs/cesdk/react-native/text/overview-0bd620/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/text/text-designs-a1b2c3.md -->

---
title: "Text Designs"
description: "Create and customize text component libraries using predefined text designs that appear in your asset library."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/text/text-designs-a1b2c3/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/react-native/text-8a993a/) > [Text Designs](https://img.ly/docs/cesdk/react-native/text/text-designs-a1b2c3/)

---

Text Designs (also known as Text Components) are pre-designed text layouts that appear in your asset library. Users can click on these components to automatically insert them into their designs. This guide explains how to prepare and customize the `content.json` file that defines these components.

## What are Text Designs?

Text Designs are serialized text blocks or groups of text blocks configured with specific styling, layout constraints, and behavior. They provide users with professionally designed text layouts that are easy to customize while maintaining their visual integrity.

When users browse the asset library, they see thumbnails of these text components. Clicking on a component automatically loads and inserts it into their current scene.

## Default Components

CE.SDK ships with over 20 pre-built text designs including:

- **Box** - Text with decorative border elements
- **Breaking** - Bold, attention-grabbing headlines
- **Cinematic** - Movie poster-style text effects
- **Glow** - Text with luminous glow effects
- **Greetings** - Welcoming message layouts
- **Promo** - Promotional and sale-focused designs
- **Quote** - Quote bubble and callout styles
- **Speech** - Dialog and conversation layouts
- **Valentine** - Romantic and heart-themed designs
- **Handwriting** - Script and handwritten font styles
- And many more...

## Content.json Structure

Text designs are defined in a `content.json` file with the following structure:

```json
{
  "version": "3.0.0",
  "id": "ly.img.textComponents",
  "assets": [
    {
      "id": "ly.img.textComponents.box",
      "label": {
        "en": "Box"
      },
      "meta": {
        "uri": "{{base_url}}/ly.img.textComponents/data/box/blocks.blocks",
        "thumbUri": "{{base_url}}/ly.img.textComponents/thumbnails/box.png",
        "mimeType": "application/ubq-blocks-string"
      }
    }
  ],
  "blocks": []
}
```

### Key Properties

- **version**: Content format version (currently "3.0.0")
- **id**: Unique identifier for the asset source ("ly.img.textComponents")
- **assets**: Array of component definitions

### Asset Properties

Each component in the assets array has:

- **id**: Unique identifier following the pattern `ly.img.textComponents.[name]`
- **label**: Display name object with language codes (e.g., `{"en": "Box"}`)
- **meta**:
  - **uri**: Path to the `.blocks` file containing the serialized component
  - **thumbUri**: Path to the thumbnail image (400x320px PNG recommended)
  - **mimeType**: Always `"application/ubq-blocks-string"` for text components

The `{{base_url}}` placeholder gets replaced with your configured base URL.

## Creating Custom Components

### 1. Design Your Component

Follow these best practices when designing text components:

#### Text Settings

- Use **variable text** with a range of 0-1000 characters
- Set **fixed frame** with **clipping enabled**
- Avoid growing or shrinking frames to prevent scaling issues

#### Constraints Setup

- **Parent Group**: Give the parent group all available constraint options for maximum flexibility
- **Child Elements**: Set constraints relative to the parent group to maintain proper relationships during resizing

#### Design Considerations

- Use **scopes** and **auto font-size** features to enable easy editing
- Test components by dropping them into new files to verify constraint behavior
- Ensure components work as cohesive units that are easy to edit but difficult to accidentally break

### 2. Export Your Component

Once your design is ready:

1. Select the complete text component (parent group with all children)
2. Use the BlockAPI (not the SceneAPI) to serialize it to an archive:

```javascript
// Save the component to a blocks archive file
const blocksArchive = await engine.block.saveToArchive([componentBlockId]);
```

#### Resource Management

Text components often reference external resources like fonts and images. When using `saveToArchive()`, these resources can be stored. If you later serve all the resources together with the blocks file, the component can be used in other editors.

Using `saveToArchive()` ensures that:

- Font references remain valid across different environments
- Components can be safely used in any scene
- Serialized scenes maintain all resource references

**Best Practices:**

1. **Ensure resource availability**: Make sure all resources used in your components are served
2. **Test in isolation**: Always test components in fresh editor instances to verify resource loading
3. **Validate references**: Check that all asset URIs are accessible from your target environments

### 3. Create Component Files

#### Save the Blocks Archive File

Save the component archive and extract it:

- Use descriptive names matching your component ID (e.g., `customBox`)
- Extract the zip file and store it in your `/data/customBox` directory structure
- All files should be included in the same file structure as in the archive

Example with only a blocks file:

```
/data/customBox/blocks.blocks
```

Example with images and fonts:

```
/data/customBox/blocks.blocks
/data/customBox/fonts/59251598.ttf
/data/customBox/fonts/355809377.ttf
/data/customBox/images/3255389386.jpeg
/data/customBox/images/3302885400.jpeg
```

#### Create Thumbnails

Generate 400x320px PNG thumbnails:

1. Remove page background color from your design
2. Export as PNG using the block export API:

```javascript
// Export component as 400x320px thumbnail
const thumbnailBlob = await engine.block.export(componentBlockId, {
  mimeType: 'image/png',
  targetWidth: 400,
  targetHeight: 320,
});

// Save thumbnail to file
const thumbnailBuffer = await thumbnailBlob.arrayBuffer();
// Save thumbnailBuffer to your thumbnail file (e.g., customBox.png)
```

### 4. Update content.json

Add your new component to the assets array:

```json
{
  "id": "ly.img.textComponents.customBox",
  "label": {
    "en": "Custom Box",
    "de": "Eigene Box"
  },
  "meta": {
    "uri": "{{base_url}}/ly.img.textComponents/data/customBox/blocks.blocks",
    "thumbUri": "{{base_url}}/ly.img.textComponents/thumbnails/customBox.png",
    "mimeType": "application/ubq-blocks-string"
  }
}
```

## Hosting Custom Components

### Backend Setup

1. **Host your files**: Upload your modified `content.json`, `.blocks` files, and thumbnails to your web server
2. **Maintain structure**: Keep the same directory structure:
   ```
   /ly.img.textComponents/
   ├── content.json
   ├── data/
   │   ├── box/blocks.blocks
   │   ├── customBox/blocks.blocks
   │   ├── customBox/fonts/59251598.ttf
   │   ├── customBox/fonts/355809377.ttf
   │   ├── customBox/images/3255389386.jpeg
   │   ├── customBox/images/3302885400.jpeg
   │   └── ...
   └── thumbnails/
       ├── box.png
       ├── customBox.png
       └── ...
   ```

### Configuration

Your custom text designs will now appear in the text components section of the asset library.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/upgrade-4f8715.md -->

---
title: "Upgrade"
description: "Learn how to upgrade CE.SDK and apply required changes when migrating between major SDK versions."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/upgrade-4f8715/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Upgrading](https://img.ly/docs/cesdk/react-native/upgrade-4f8715/)

---


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/use-templates/overview-ae74e1.md -->

---
title: "Overview"
description: "Learn how to browse, apply, and dynamically populate templates in CE.SDK to streamline design workflows."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/use-templates/overview-ae74e1/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/react-native/create-templates-3aef79/) > [Use Templates Overview](https://img.ly/docs/cesdk/react-native/use-templates/overview-ae74e1/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/)

## Output Formats When Using Templates

When generating outputs from templates, CE.SDK supports:

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.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/user-interface-5a089a.md -->

---
title: "User Interface"
description: "Use CE.SDK’s customizable, production-ready UI or replace it entirely with your own interface."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/user-interface-5a089a/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/react-native/user-interface-5a089a/)

---


---

## Related Pages

- [Customization](https://img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8/) - Control which features are available and how UI components behave, appear, or are arranged in the editor.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/user-interface/customization-72b2f8.md -->

---
title: "Customization"
description: "Control which features are available and how UI components behave, appear, or are arranged in the editor."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/react-native/user-interface-5a089a/) > [Customization](https://img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8/)

---

```swift file=@cesdk_react_native_examples/../ios/Guides/ConfigurationGuide.swift reference-only
import IMGLYCameraModule

import IMGLYEditorModule
import 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")
  }
}
```

```kotlin file=@cesdk_react_native_examples/../android/app/src/main/java/ly/img/editor/reactnative/showcases/guides/ConfigurationGuide.kt reference-only
@file:Suppress("ktlint:standard:import-ordering")

package ly.img.editor.reactnative.showcases.guides

import androidx.compose.runtime.Composable
import ly.img.camera.core.CaptureVideo
import ly.img.camera.core.EngineConfiguration
import ly.img.camera.reactnative.module.IMGLYCameraModule
import ly.img.camera.reactnative.module.model.CameraResult
import ly.img.editor.reactnative.module.IMGLYEditorModule
import ly.img.editor.reactnative.module.builder.EditorBuilder
import ly.img.editor.reactnative.module.builder.EditorBuilderResult
import 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"))
    }
}

@Composable
private 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:

```swift highlight-import-swift
import IMGLYEditorModule
import SwiftUI
```

#### 2. Assign your custom editor:

```swift highlight-closure-swift
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()
  }
}
```

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.

### 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:

```diff
android {
    (...)
+    kotlinOptions {
+        jvmTarget = "1.8"
+    }

+    buildFeatures {
+      compose true
+    }

+    composeOptions {
+      kotlinCompilerExtensionVersion = "1.5.10"
+    }
}

dependencies {
+  implementation "ly.img:editor:$UBQ_VERSION$"
+  implementation(platform("androidx.compose:compose-bom:2023.05.01"))
+  implementation "androidx.activity:activity-compose:1.6.1"
}
```

#### 2. Import the dependencies:

```kotlin highlight-import-compose
import androidx.compose.runtime.Composable
```

```kotlin highlight-import-editor
import ly.img.editor.reactnative.module.IMGLYEditorModule
import ly.img.editor.reactnative.module.builder.EditorBuilder
import ly.img.editor.reactnative.module.builder.EditorBuilderResult
import ly.img.editor.reactnative.module.model.EditorSettings
```

#### 3. Assign your custom editor:

```kotlin highlight-closure-kotlin
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.


---

## Related Pages

- [Dock](https://img.ly/docs/cesdk/react-native/user-interface/customization/dock-cb916c/) - Configure the dock area to show or hide tools, panels, or quick access actions.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/user-interface/customization/dock-cb916c.md -->

---
title: "Dock"
description: "Configure the dock area to show or hide tools, panels, or quick access actions."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/user-interface/customization/dock-cb916c/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Guides](https://img.ly/docs/cesdk/react-native/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/react-native/user-interface-5a089a/) > [Customization](https://img.ly/docs/cesdk/react-native/user-interface/customization-72b2f8/) > [Dock](https://img.ly/docs/cesdk/react-native/user-interface/customization/dock-cb916c/)

---

<NativeOnlyFeatureInfo {...props} />


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support


---

<!-- Source: react-native/what-is-cesdk-2e7acd.md -->

---
title: "React Native Creative Editor"
description: "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."
platform: react-native
url: "https://img.ly/docs/cesdk/react-native/what-is-cesdk-2e7acd/"
---

> This is one page of the CE.SDK React Native documentation. For a complete overview, see the [React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/react-native/llms-full.txt).

**Navigation:** [Get Started](https://img.ly/docs/cesdk/react-native/get-started/overview-e18f40/) > [What is CE.SDK?](https://img.ly/docs/cesdk/react-native/what-is-cesdk-2e7acd/)

---

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.

[Explore Demos](https://img.ly/showcases/cesdk/?tags=android%2Cios)

[Get Started](https://img.ly/docs/cesdk/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

<CapabilityGrid
  features={[
  {
    title: 'Transform',
    description:
      'Perform operations like cropping, rotating, and resizing design elements.',
    imageId: 'transform',
  },
  {
    title: 'Templating',
    description:
      'Create and apply design templates with placeholders and text variables for dynamic content.',
    imageId: 'templating',
  },
  {
    title: 'Placeholders & Lockable Design',
    description:
      'Constrain templates to guide your users’ design and ensure brand consistency.',
    imageId: 'placeholders',
  },
  {
    title: 'Asset Management',
    description:
      'Import and manage images, shapes, and other assets to build your designs.',
    imageId: 'asset-libraries',
  },
  {
    title: 'Design Collage',
    description:
      'Arrange multiple elements on a single canvas to create complex layouts.',
    imageId: 'video-collage',
  },
  {
    title: 'Text Editing',
    description:
      'Add and style text blocks with various fonts, colors, and effects.',
    imageId: 'text-editing',
  },
  {
    title: 'Client-Side Processing',
    description:
      'All design editing operations are executed directly on the device, with no need for server dependencies.',
    imageId: 'client-side',
  },
  {
    title: 'Extendible',
    description:
      'Hook into the engine API and editor events to implement custom features.',
    imageId: 'extendible',
  },
  {
    title: 'Customizable UI',
    description:
      'Build and integrate custom UIs tailored to your application’s design needs.',
    imageId: 'customizable-u-i',
  },
]}
/>

## File Format Support

CE.SDK supports a wide range of file types to ensure maximum flexibility for developers:

### Importing Media

### Exporting Media

### Importing Templates

For detailed information, see the [full file format support list](https://img.ly/docs/cesdk/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.


---

## More Resources

- **[React Native Documentation Index](https://img.ly/docs/cesdk/react-native.md)** - Browse all React Native documentation
- **[Complete Documentation](https://img.ly/docs/cesdk/react-native/llms-full.txt)** - Full documentation in one file (for LLMs)
- **[Web Documentation](https://img.ly/docs/cesdk/react-native/)** - Interactive documentation with examples
- **[Support](mailto:support@img.ly)** - Contact IMG.LY support