---
title: "Image Set Generation"
description: "Generate a batch of images from a set of data, for instance team cards."
url: "https://img.ly/demos/batch-image-generation/web/"
type: "demo"
demoId: "batch-image-generation"
starterkit: "starterkit-batch-image-generation"
platforms: ["Web"]
tags: ["automated-generation","web"]
relatedDemos: ["https://img.ly/demos/multi-image-generation/web/","https://img.ly/demos/headless-design/web/","https://img.ly/demos/3d-mockup-editor/web/"]
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/data-merge-d4evnm/"
webGithub: "https://github.com/imgly/starterkit-batch-image-generation-react-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-batch-image-generation-react-web"
---

> This is the markdown version of [Image Set Generation](https://img.ly/demos/batch-image-generation/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/batch-image-generation/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/data-merge-d4evnm.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-batch-image-generation-react-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-batch-image-generation-react-web)

You can build any creative automation use case using the [CE.SDK headless API](https://img.ly/docs/cesdk/engine/).

The starting point is a set of CE.SDK templates for a team card design in two dimensions. It includes a placeholder avatar image and text variables for the name and department.

## Interpolating Data

We can automatically interpolate data from any source into our templates using [CE.SDK headless API](https://img.ly/docs/cesdk/engine/). Taking an array of team member data consisting their profile pictures, names and department, we interpolate the data into the template using the [variable](https://img.ly/docs/cesdk/engine/api/variables/?platform=node#functions) and [placeholder](https://img.ly/docs/cesdk/ui/guides/placeholders/?platform=node#placeholders--constraints) APIs, respectively.

The generated scenes can be individually edited to add corrections and account for per instance differences, for example, the position of the person in the profile picture or the length of the text that was interpolated.

## Propagating Changes

When a user edits and saves one of the master templates the updates are automatically applied to each generated instance. Note that any changes made to individual instances are overwritten by these updates.

---

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