---
title: "Custom Apparel UI"
description: "Custom, mobile apparel UI for creating print-ready design."
url: "https://img.ly/demos/apparel-ui/web/"
type: "demo"
demoId: "apparel-ui"
starterkit: "starterkit-apparel-ui"
platforms: ["Web","iOS","Android"]
tags: ["android","custom-build-uis","ios","web"]
relatedDemos: ["https://img.ly/demos/apparel-editor-ui/web/","https://img.ly/demos/photobook-ui/web/","https://img.ly/demos/default-ui/web/","https://img.ly/demos/product-editor-ui/web/"]
webMobileReady: true
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/apparel-ui-ec0cfb/"
webGithub: "https://github.com/imgly/starterkit-apparel-ui-react-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-apparel-ui-react-web"
iosUrl: "https://img.ly/demos/apparel-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-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 [Custom Apparel UI](https://img.ly/demos/apparel-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-ui/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/apparel-ui-ec0cfb.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-apparel-ui-react-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-apparel-ui-react-web)
- Mobile-friendly: simulates a phone-sized viewport

**iOS** — [Demo page](https://img.ly/demos/apparel-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-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`

Create a custom, mobile-optimized apparel editor UI using the CE.SDK headless API. This example focuses the UI on a few key editing options to guide the user through customizing their t-shirt design.

## Edit & Preview Mode

The editable page is overlaid on a t-shirt mockup to give users an idea of where to position elements. Toggling from edit to preview mode allows reviewing the design in the context of the entire t-shirt.

## Toolbar

A custom toolbar at the bottom of the editor features only the most essential editing option in order of relevance allowing users to overlay text, add images, shapes, and stickers and upload new image assets.

## Context Menu

Selecting an element shows a context menu in place of the toolbar listing again the most important editing features. Upon selecting a text element, for instance, users can easily change font, color, and alignment, whereas selecting a shape highlights the ability to choose from a range of predefined colors.

This example is easily extendible or modifiable, you could for instance add select filters to the image context menu or remove the ability to add stickers and shapes altogether.

---

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