---
title: "Product Editor UI"
description: "Product Editor for customizing any product with print-ready designs."
url: "https://img.ly/demos/product-editor-ui/web/"
type: "demo"
demoId: "product-editor-ui"
starterkit: "starterkit-product-editor"
platforms: ["Web","iOS","Android"]
tags: ["ui-types","web"]
relatedDemos: ["https://img.ly/demos/apparel-editor-ui/web/","https://img.ly/demos/apparel-ui/web/","https://img.ly/demos/default-ui/web/"]
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/product-editor-p7m8k2/"
webGithub: "https://github.com/imgly/starterkit-product-editor-react-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-product-editor-react-web"
iosUrl: "https://img.ly/demos/product-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/product-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 [Product Editor UI](https://img.ly/demos/product-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/product-editor-ui/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/product-editor-p7m8k2.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-product-editor-react-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-product-editor-react-web)

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

Build custom product personalization experiences with CE.SDK's flexible configuration system.

## What It Does

This demo demonstrates a complete product customization editor—the kind you'd find on print-on-demand platforms, promotional merchandise stores, or e-commerce sites offering personalized products.

Users can:

- **Select products** from a catalog (t-shirts, caps, mugs, phone cases, tote bags, signage)
- **Choose colors** from a visual palette that instantly updates the product mockup
- **Switch between printable areas** (e.g., front/back of a t-shirt) with a single click
- **Design freely** while seeing exactly how their artwork will appear on the final product

### Real-Time Product Visualization

Dynamic mockup images update instantly as users switch colors or product areas. The design canvas is precisely positioned over the printable region, giving users an accurate preview of the final result.

### Multi-Area Support

Products with multiple printable surfaces (like front and back of apparel) are handled through a multi-page scene. Users switch between areas via canvas bar controls, with designs persisting independently on each surface.

### Print-Ready Export

Exports are optimized for production workflows:

- **PDF output** for print fulfillment
- **Thumbnails** for order confirmations and cart previews

### Flexible Product Configuration

Each product is defined through a simple configuration object specifying:

- Printable area dimensions (in real-world units like inches)
- Mockup image positioning
- Available colors and sizes
- Optional masking for irregular shapes (like the arrow sign)

## Use This As a Starting Point For

- **Print-on-demand storefronts** (Printful, Printify-style experiences)
- **Corporate merchandise builders** (branded swag customization)
- **E-commerce product personalization** (custom gifts, promotional items)
- **Signage and display design tools**
- **Any application requiring product visualization with user-created artwork**

## Technical Highlights

- Canvas bar UI integration for area switching
- Programmatic mockup management via the engine API
- Design unit support (inches) for print-accurate sizing
- Automatic content clipping to printable boundaries
- Scene metadata for persisting product state

---

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