Search Docs
Loading...
Skip to content

Photo UI

Photo UI is equipped with advanced photo editing options while remaining easy and intuitive to use. Try the demo and see for yourself.

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

The src/ folder contains the editor code:

src/
├── app/                          # Demo application
├── imgly/
│   ├── engine-utils.ts
│   ├── hooks/
│   │   ├── useSelectedProperty.ts
│   │   └── useSinglePageFocus.ts
│   ├── index.ts                  # Editor initialization function
│   └── upload.ts
└── 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 Photo Editor includes everything needed for professional photo editing.

Professional Filters

Professional Filters

Apply color grading with LUT filters, duotone effects, and customizable presets.

Color Adjustments

Color Adjustments

Fine-tune brightness, contrast, saturation, and more with professional controls.

Cropping & Transform

Cropping & Transform

Crop, rotate, and transform images with precise controls and aspect ratio presets.

Text & Overlays

Text & Overlays

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

Responsive Design

Responsive Design

Interface optimized for both desktop and mobile devices with adaptive layouts.

Export Options

Export Options

Export as PNG or JPEG 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#