f:I[36257,["6870","static/chunks/6870-762df273f6f3d7f4.js","9963","static/chunks/9963-c86be93a245ac055.js","5953","static/chunks/5953-d21dc7a68f080374.js","385","static/chunks/app/%5BshowcaseId%5D/%5Bplatform%5D/standalone/page-bfc9717a714bd2d6.js"],"ShowcaseFullscreenLayout"] 11:I[55237,["6870","static/chunks/6870-762df273f6f3d7f4.js","9963","static/chunks/9963-c86be93a245ac055.js","5953","static/chunks/5953-d21dc7a68f080374.js","385","static/chunks/app/%5BshowcaseId%5D/%5Bplatform%5D/standalone/page-bfc9717a714bd2d6.js"],"ShowcaseContent"] 10:T5de,

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 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 customiza