Search Docs
Loading...
Skip to content

Mobile UI

Easily build custom mobile UIs and provide a seamless design editing experience for your users, on both iOS and Android.

Mobile UI starter kit showing a touch-friendly photo editing 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 Mobile 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-mobile-ui-react-web.git
cd starterkit-mobile-ui-react-web
git clone https://github.com/imgly/starterkit-mobile-ui-react-web.git
cd starterkit-mobile-ui-react-web

The src/ folder contains the editor code:

src/
├── app/                          # Demo application
├── imgly/
│   ├── ColorUtilities.ts
│   ├── CreativeEngineUtils.ts
│   ├── index.ts                  # Editor initialization function
│   ├── upload.ts
│   └── utils.ts                  # Utility functions
└── 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 Mobile Editor includes everything needed for mobile-first photo editing.

Touch-Optimized

Touch-Optimized

Carefully designed touch targets, gestures, and interactions for mobile users.

Photo Editing

Photo Editing

Complete toolkit with filters, adjustments, cropping, and color customization.

Text & Shapes

Text & Shapes

Add styled text with font selection, plus shapes and stickers from the asset library.

Guided Workflow

Guided Workflow

Step-by-step editing process with intuitive navigation between editing modes.

Asset Management

Asset Management

Integrated image library, custom sticker collection, and user upload support.

Export Options

Export Options

Export designs as PNG with configurable quality and resolution settings.


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#