---
title: "Layouts"
description: "Allow users to select different layouts without changing page content."
url: "https://img.ly/demos/layouts/web/"
type: "demo"
demoId: "layouts"
starterkit: "starterkit-layouts-asset-source"
platforms: ["Web"]
tags: ["assets","web"]
relatedDemos: ["https://img.ly/demos/photobook-ui/web/","https://img.ly/demos/unsplash-image-assets/web/","https://img.ly/demos/page-sizes/web/"]
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/layouts-editor-layot1/"
webGithub: "https://github.com/imgly/starterkit-layouts-asset-source-ts-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-layouts-asset-source-ts-web"
---

> This is the markdown version of [Layouts](https://img.ly/demos/layouts/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/layouts/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/layouts-editor-layot1.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-layouts-asset-source-ts-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-layouts-asset-source-ts-web)

Define “Layouts” as [custom asset type](https://img.ly/docs/cesdk/engine/api/assets/#finding-and-applying-assets) to allow users to choose from a library of ready-made layouts while keeping their current edits unchanged.

Ideal for photo book, collage, or postcard editing use cases.

## Layout Templates

Layout templates feature any number of image, text, and shape placeholders. The essential constraining function of a layout template consists of the fixed position and dimension of the images in the layout. Hence image placeholders can only be replaced and cropped, that is repositioned within the specified image dimensions.

## Applying Different Templates

When a new template is selected current edits are mapped onto the new layout allowing users to explore different layouts. This feature takes advantage of the CE.SDK’s headless API which enables [programmatic manipulation of editor](https://img.ly/docs/cesdk/engine/guides/blocks/) scenes such as appending and modifying blocks.

Programmatic scene updates allow for other advanced collage features such as generating dynamic layouts based on text and a collection of images.

---

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