Search Docs
Loading...
Skip to content

Apparel UI

Custom, mobile apparel UI for creating print-ready design.

Apparel UI starter kit showing a t-shirt customization interface

10 mins
estimated time
Download
GitHub

Pre-requisites#

This guide assumes basic familiarity with React and TypeScript.

  • Node.js v20+ with npm – Download
  • Supported browsers – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
    See Browser Support for the full list

Get Started#

Start fresh with a standalone Apparel Editor project. This creates a complete, ready-to-run application with a custom React-based interface.

Step 1: Clone the Repository#

Terminal
git clone https://github.com/imgly/starterkit-apparel-ui-react-web.git
cd starterkit-apparel-ui-react-web
git clone https://github.com/imgly/starterkit-apparel-ui-react-web.git
cd starterkit-apparel-ui-react-web

The src/ folder contains the editor code:

src/
├── app/                          # Demo application
├── imgly/
│   ├── ColorUtilities.ts
│   ├── CreativeEngineUtils.ts
│   ├── UnsplashSource.ts
│   ├── UseEditMode.ts
│   ├── UseHistory.ts
│   ├── UseImageUpload.ts
│   ├── UseSelectedProperty.ts
│   └── index.ts                  # Editor initialization function
└── index.tsx                 # Application entry point

Step 2: Install Dependencies#

Install the required packages:

Terminal
npm install
npm install

Step 3: Run the Development Server#

Terminal
npm run dev
npm run dev

Open http://localhost:5173 in your browser.

Key Capabilities#

The Apparel Editor includes everything needed for apparel design workflows.

Apparel Workflow

Apparel Workflow

Two-step process (Edit → Preview) designed specifically for apparel design with automatic positioning.

Image Upload

Image Upload

Upload and position images with integrated Unsplash search and user upload support.

Text & Typography

Text & Typography

Add styled text with font selection, sizing, and color customization.

Shapes & Stickers

Shapes & Stickers

Complete toolkit with shape tools, sticker library, and color customization.

Mobile-First

Mobile-First

Responsive interface optimized for both desktop and mobile with touch-friendly controls.

Export Options

Export Options

Export designs as PNG with configurable quality and resolution for print-on-demand.


Troubleshooting#

Editor doesn’t load#

  • Check console errors: Look for CORS or network errors in browser developer tools
  • Verify dependencies: Ensure all npm packages are installed correctly

Assets don’t appear#

  • Check network requests: Open DevTools Network tab and look for failed requests
  • Verify baseURL: Ensure the asset URL is accessible

Watermark appears in production#

  • Add your license key: Set the license property in your configuration
  • Sign up for a trial: Get a free trial license at img.ly/forms/free-trial

Next Steps#