--- title: "Photobook Editor" description: "A photobook editor for print: pick a size and style, auto-fill photos into ready-made layouts, catch print issues as you edit, and export a PDF/X-4 photo book." url: "https://img.ly/demos/photobook-editor/web/" type: "demo" demoId: "photobook-editor" starterkit: "starterkit-photobook-editor" platforms: ["Web"] tags: ["automated-generation","templating","web"] relatedDemos: ["https://img.ly/demos/photobook-ui/","https://img.ly/demos/design-validation/","https://img.ly/demos/layouts/","https://img.ly/demos/export-print-ready-pdf/"] webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/photobook-editor-pbedit/" webGithub: "https://github.com/imgly/starterkit-photobook-editor-react-web" webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-photobook-editor-react-web" --- > This is the markdown version of [Photobook Editor](https://img.ly/demos/photobook-editor/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-editor/web/) - [Documentation](https://img.ly/docs/cesdk/js/starterkits/photobook-editor-pbedit.md) - [Source code on GitHub](https://github.com/imgly/starterkit-photobook-editor-react-web) - [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-photobook-editor-react-web) ## Exploring the Photobook Editor This demo sets up the standard CE.SDK editor as a photobook editor for photo printers, print-on-demand services and web-to-print platforms. It runs in CE.SDK's Adopter role, so customers fill in photos and text, switch layouts, and add or reorder pages, but they can't move or resize the slots a layout defines. ### From a folder of photos to a filled book The start screen asks for a Portrait 22 × 28.6 cm or Square 25 × 25 cm book, a Playful or Chic style, and whether photos go in by Auto-Fill or By Hand. Upload up to 50 JPEG, PNG or WebP photos, or pick Use examples. Auto-fill works through the pages in order and, on each page, matches photos to slots by shape so they crop as little as possible, never using a photo twice. With the example photos, it writes captions too. ### Swap layouts without losing photos Open Layouts in the dock to switch the current page to one of 358 layouts for its format, grouped as Titles and 1 to 9 images. Photos and typed captions move into the new slots in reading order. When a layout has fewer photo slots, the extra photos wait in a stash for that page and come back when a later layout has room. ### Print checks while customers edit A validation sidebar checks the book as customers edit, and selecting an issue jumps to its element. It flags low-resolution images, the same photo used twice, empty image slots, and template text nobody replaced. The list updates as the book changes, so a fixed issue drops off it. The [Design Validation demo](https://img.ly/demos/design-validation.md) is a separate starter kit built around validation alone. ### Preview the spreads, then export PDF/X-4 Hit Preview to see the cover laid flat, then the inside pages as facing spreads. Export as PDF produces a CMYK PDF/X-4 file with a FOGRA39 output intent, crop marks and registration marks, and it renders in the browser by default. For large books, rendering can move to a bundled Node.js export server, but that server ships without TLS or authentication, so treat it as a reference. For PDF/X export by itself, see the [Export Print-Ready PDFs demo](https://img.ly/demos/export-print-ready-pdf.md). ## Use this as a starting point The kit suits teams building photobook software for print businesses, or adding a photo book product to a web-to-print store. The start screen's sizes, styles and photo distribution options are defined in one file. A new style also needs its own scene, and a new page shape needs its own layouts. Tune the validation thresholds before production, since the low-resolution limits shipped here are demo values. For a fully custom React UI on the headless engine, see the [Custom Photobook UI demo](https://img.ly/demos/photobook-ui.md). The [photo book use case](https://img.ly/use-cases/photo-book.md) covers the business case for offering one. --- ## 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.