Search Docs
Loading...
Skip to content

Photobook UI

Custom UI for building photo books focusing on theming, page layouts, and managing photo assets.

Photobook UI starter kit showing a multi-page photobook 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 Photobook 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-photobook-ui-react-web.git
cd starterkit-photobook-ui-react-web
git clone https://github.com/imgly/starterkit-photobook-ui-react-web.git
cd starterkit-photobook-ui-react-web

The src/ folder contains the editor code:

src/
├── app/                          # Demo application
├── imgly/
│   ├── index.ts                  # Editor initialization function
│   ├── photobook-layouts.ts
│   ├── photobook-stickers.ts
│   └── utils/
│       ├── UnsplashSource.ts
│       ├── apply-layout.ts
│       ├── engine-utils.ts
│       └── loadAssetSourceFromContentJSON.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 Photobook Editor includes everything needed for photobook creation workflows.

Theme Selector

Theme Selector

Allow users to personalize their photobook based on events or aesthetics with per-page theme support.

Multi-Page Management

Multi-Page Management

Add, remove, and reorder pages with built-in layout templates for professional results.

Placeholder Editing

Placeholder Editing

Built-in placeholders make adding and replacing photos effortless with click-to-upload.

Asset Library

Asset Library

Quickly add embellishments or brand elements using an extendable sticker library.

Mobile-Friendly

Mobile-Friendly

Responsive interface optimized for both desktop and mobile devices.

Export Options

Export Options

Export designs in high-resolution formats suitable for print or digital delivery.


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#