---
title: "Custom Photobook UI"
description: "Custom UI for building photo books focusing on theming, page layouts, and managing photo assets."
url: "https://img.ly/demos/photobook-ui/web/"
type: "demo"
demoId: "photobook-ui"
starterkit: "starterkit-photobook-ui"
platforms: ["Web"]
tags: ["custom-build-uis","web"]
relatedDemos: ["https://img.ly/demos/post-greeting-cards/web/","https://img.ly/demos/photo-editor-ui/web/","https://img.ly/demos/default-ui/web/"]
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/photobook-ui-m5ob81/"
webGithub: "https://github.com/imgly/starterkit-photobook-ui-react-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-photobook-ui-react-web"
---

> This is the markdown version of [Custom Photobook UI](https://img.ly/demos/photobook-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/photobook-ui/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/photobook-ui-m5ob81.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-photobook-ui-react-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-photobook-ui-react-web)

## Exploring Custom Photobook UI

Create a custom photo book UI using the CE.SDK headless API. This example focuses the UI on a few key editing options to guide the user through customizing their photo book.

At the heart of the toolbar is the option to choose a **theme**. This is where you can tailor the photo book to a specific occasion such as a **wedding, a holiday, or a special event**. The theme color can be changed individually for every page. Once a user has selected a theme, they can choose a layout for their page. The layouts are created by using the [placeholder API](https://img.ly/docs/cesdk/engine/api/block-appearance/#placeholder-content) and locking image elements.

A sticker library integration enables quick embellishments and can be connected to any asset source.

The most essential features for building a photo book are the ability to **add new pages and personal photos to those pages**. As opposed to a toolbar the sidebar in this example shows a preview of pages in the photo book and a prominent button for adding a new page. Similarly adding images to a page is possible by clicking on the placeholder which opens a context menu for uploading and selecting images.

Note that users are not presented with just a blank page. But with a few initial pages with different layouts giving an optimal starting point for making their own customizations.

---

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