---
title: "Apparel Editor UI"
description: "Apparel Editor for creating print-ready design."
url: "https://img.ly/demos/apparel-editor-ui/web/"
type: "demo"
demoId: "apparel-editor-ui"
starterkit: "starterkit-t-shirt-designer"
platforms: ["Web","iOS","Android"]
tags: ["android","ios","ui-types","web"]
relatedDemos: ["https://img.ly/demos/apparel-ui/web/","https://img.ly/demos/cutout-lines/web/","https://img.ly/demos/default-ui/web/"]
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/t-shirt-designer-jwinqr/"
webGithub: "https://github.com/imgly/starterkit-t-shirt-designer-react-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-t-shirt-designer-react-web"
iosUrl: "https://img.ly/demos/apparel-editor-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-apparel/StarterKit"
iosAppStore: "https://apps.apple.com/us/app/img-ly-design-editor/id1672991141"
iosDeepLink: "https://applink.img.ly/apparel-ui?scene=apparel-ui-b-1"
androidUrl: "https://img.ly/demos/apparel-editor-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/ApparelEditor.kt"
androidPlayStore: "https://play.google.com/store/apps/details?id=ly.img.cesdk.catalog"
androidDeepLink: "https://applink.img.ly/apparel-ui?scene=apparel-ui-b-1"
---

> This is the markdown version of [Apparel Editor UI](https://img.ly/demos/apparel-editor-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/apparel-editor-ui/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/t-shirt-designer-jwinqr.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-t-shirt-designer-react-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-t-shirt-designer-react-web)

**iOS** — [Demo page](https://img.ly/demos/apparel-editor-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-apparel/StarterKit)
- [Download on the App Store](https://apps.apple.com/us/app/img-ly-design-editor/id1672991141)
- Deep link: `https://applink.img.ly/apparel-ui?scene=apparel-ui-b-1`

**Android** — [Demo page](https://img.ly/demos/apparel-editor-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/ApparelEditor.kt)
- [Download on Google Play](https://play.google.com/store/apps/details?id=ly.img.cesdk.catalog)
- Deep link: `https://applink.img.ly/apparel-ui?scene=apparel-ui-b-1`

Configure the editor for apparel design.

This instance of CE.SDK is configured to streamline the process of apparel design, specifically focusing on t-shirts. It features a t-shirt backdrop that serves a dual purpose: it assists users in accurately placing their designs and provides a realistic visualization of the final product. This backdrop is added to the initial scene programmatically using the editor API.

Another notable feature is the rigorous enforcement of page boundaries. Any element that extends beyond the t-shirt template's limits is automatically clipped. This ensures a precise representation of the area that will be printed on.

In order to fit optimally with most print workflows the default export format is set to pdf.

As with other use cases the use of templates can significantly enhance your users’ experience. Here, we are working with a placeholder image as variable part of the template.

Users in “Adopter” mode can easily swap out the image. You can toggle from “Adopter” to “Creator” mode by clicking on “Customize Editor” in order to define the behavior of placeholders, i.e. what a user in the “Adopter” is permitted to change.

---

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