Automate Design Generation

With IMG.LY, you can use templates to define dynamic elements. The generation process then populates these elements with:

• Real-time data
• User inputs

This guide shows you how to use the CE.SDK for programmatic design generation.

What’s a Design Template#

A design template is a pre-configured layout that includes placeholders for dynamic elements such as:

• Text
• Images
• Icons
• Background graphics
• Vector shapes
• Etc

These placeholders define where and how specific content appears in the final design.

Populate a Template#

The generation process replaces the placeholders with actual data to create a completed output.

Create or Edit Templates#

You can create or edit design templates programmatically in a Node.js app. Learn more in the Create Templates guide .

Dynamic Content Sources#

Populate templates with data from sources such as:

• JSON files: Useful for batch operations where data is pre-prepared.
• External APIs: Ideal for real-time updates and dynamic integrations.
• User Input: Where the user directly provides data through a UI.

For detailed information on using and managing templates, see Use Templates .

Data Merge Workflow#

Below is a diagram illustrating how data is merged into a template to produce a final design:

Example Workflow#

1. Prepare the Template#

Start by designing a template with text variables. This scene example contains:

• A postcard template
• Placeholders for the recipient’s details

2. Load the Template into the Editor#

Initialize the CE.SDK and load your prepared template. The following example loads the sample scene from the IMG.LY CDN:

// Load a template from your server or a CDN
const sceneUrl =
  'https://cdn.img.ly/assets/demo/v2/ly.img.template/templates/cesdk_postcard_2.scene';
await engine.scene.loadFromURL(sceneUrl);

3. Provide Data to Populate the Template#

Populate your template with data from your chosen source:

// Option 1: Prepare your data as a JavaScript object
const data = {
  textVariables: {
    first_name: 'John',
    last_name: 'Doe',
    address: '123 Main St.',
    city: 'Anytown',
  },
};
// Option 2: Fetch from an API
// const data = await fetch('https://api.example.com/design-data').then(res => res.json());
engine.variable.setString('first_name', data.textVariables.first_name);
engine.variable.setString('last_name', data.textVariables.last_name);
engine.variable.setString('address', data.textVariables.address);
engine.variable.setString('city', data.textVariables.city);

The source in the preceding example is a JavaScript object. You could read the same data from JSON to see the same result:

{
  "textVariables": {
    "first_name": "John",
    "last_name": "Doe",
    "address": "123 Main St.",
    "city": "Anytown"
  }
}

4. Export the Final Design#

After populating the template, export the final design in your preferred format:

const output = await engine.block.export(engine.scene.get(), {
  mimeType: 'application/pdf',
});

On success, the output variable contains the generated design as a PDF Blob.. You can now save it or display it in your frontend.

Here’s what your final output should look like:

Need help with exports? Check out the Export Guide for detailed instructions and options.

// Load a template from your server or a CDN
const sceneUrl = 'https://cdn.img.ly/assets/demo/v2/ly.img.template/templates/cesdk_postcard_2.scene';
await engine.scene.loadFromURL(sceneUrl);
// Option 1: Prepare your data as a JavaScript object
const data = {
  textVariables: {
    first_name: 'John',
    last_name: 'Doe',
    address: '123 Main St.',
    city: 'Anytown',
  },
};
// Option 2: Fetch from an API
// const data = await fetch('https://api.example.com/design-data').then(res => res.json());
engine.variable.setString('first_name', data.textVariables.first_name);
engine.variable.setString('last_name', data.textVariables.last_name);
engine.variable.setString('address', data.textVariables.address);
engine.variable.setString('city', data.textVariables.city);

const output = await engine.block.export(engine.scene.get(), {
  mimeType: 'application/pdf',
});
// Success: 'output' contains your generated design as a PDF Blob

Troubleshooting#

If you have issues during the generation process:

• Verify that all your variable names exactly match those in your template.
• Make sure your template is accessible from the URL you provided.
• Check the format for your data values: for text variables, strings are the correct format.
• Look at the console for detailed error messages from the CE.SDK API.