---
title: "Design Editor UI"
description: "Our easy to use editor variant focused on layout, text, and images is ideal for adapting existing templates."
url: "https://img.ly/demos/default-ui/web/"
type: "demo"
demoId: "default-ui"
starterkit: "starterkit-design-editor"
platforms: ["Web","iOS","Android"]
tags: ["ui-types","web"]
relatedDemos: ["https://img.ly/demos/video-ui/web/","https://img.ly/demos/mobile-ui/web/","https://img.ly/demos/advanced-ui/web/"]
webMobileReady: true
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/design-editor-8unj9u/"
webGithub: "https://github.com/imgly/starterkit-design-editor-ts-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-design-editor-ts-web"
iosUrl: "https://img.ly/demos/default-ui/ios/"
iosDocumentation: "https://img.ly/docs/cesdk/ios/get-started/overview-e18f40/"
iosGithub: "https://github.com/imgly/cesdk-swift-examples/tree/main/starter-kits/starter-kit-design/StarterKit"
iosAppStore: "https://apps.apple.com/us/app/img-ly-design-editor/id1672991141"
iosDeepLink: "https://applink.img.ly/design-ui?scene=template_01_ig_post_1_1"
androidUrl: "https://img.ly/demos/default-ui/android/"
androidDocumentation: "https://img.ly/docs/cesdk/android/get-started/overview-e18f40/"
androidGithub: "https://github.com/imgly/cesdk-android/blob/main/sources/editor/src/main/java/ly/img/editor/DesignEditor.kt"
androidPlayStore: "https://play.google.com/store/apps/details?id=ly.img.cesdk.catalog"
androidDeepLink: "https://applink.img.ly/design-ui?scene=design_ui_instagram_post_template"
---

> This is the markdown version of [Design Editor UI](https://img.ly/demos/default-ui/web/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

## Available platforms

**Web** — [Open the demo](https://img.ly/demos/default-ui/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/design-editor-8unj9u.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-design-editor-ts-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-design-editor-ts-web)
- Mobile-friendly: simulates a phone-sized viewport

**iOS** — [Demo page](https://img.ly/demos/default-ui/ios/)
- [Documentation](https://img.ly/docs/cesdk/ios/get-started/overview-e18f40.md)
- [Source code on GitHub](https://github.com/imgly/cesdk-swift-examples/tree/main/starter-kits/starter-kit-design/StarterKit)
- [Download on the App Store](https://apps.apple.com/us/app/img-ly-design-editor/id1672991141)
- Deep link: `https://applink.img.ly/design-ui?scene=template_01_ig_post_1_1`

**Android** — [Demo page](https://img.ly/demos/default-ui/android/)
- [Documentation](https://img.ly/docs/cesdk/android/get-started/overview-e18f40.md)
- [Source code on GitHub](https://github.com/imgly/cesdk-android/blob/main/sources/editor/src/main/java/ly/img/editor/DesignEditor.kt)
- [Download on Google Play](https://play.google.com/store/apps/details?id=ly.img.cesdk.catalog)
- Deep link: `https://applink.img.ly/design-ui?scene=design_ui_instagram_post_template`

## Exploring Default UI

The Default UI is our easy to use editor variant focused on layout, text, and images and is ideal for adapting existing templates.

This is the most common UI for adapting existing templates, that is editing the elements in ways that are explicitly granted by the template constraints. For instance, clicking on the image shows a context menu to the user allowing replacing and cropping the image.

Clicking any element of the template presents a context menu at the top of the editor highlighting the most relevant editing options for the element. This is essential for ease of use for non-professional user as it reduces the complexity of the editor UI and guides the user towards discovery of the most important features.

Clicking on “More” slides out the side panel with all available features should the desired editing option not be available through the context menu.

Again you can toggle user roles between “Creator” and “Adopter” by clicking “Customize Editor” and explore setting different constraints on placeholder elements as “Creator” and adapting those elements as “Adopter”.

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.