Generate From Templates

What You’ll Learn#

• Load and apply templates from string or URL.
• Launch the editor with a template as the initial scene.
• Populate templates with dynamic content using variables and placeholders.
• Create custom template libraries with thumbnails and metadata.
• Adapt templates automatically to target dimensions.

When to Use It#

Use this guide when your app needs to load and apply existing templates to generate new scenes, such as:

• Starting from a brand template.
• Building a “Start from Template” screen.
• Populating designs dynamically with user or product data.

Applying Templates#

A template can replace or populate an existing scene while keeping the current page size and units.

Apply from String#

Use .applyTemplate(from:) with a String when you’ve saved the template using .saveToString() or when your back-end returns the raw string encoding instead of a .scene file or a Blob.

try await engine.scene.applyTemplate(from: "UBQ1ewoiZm9ybWF0Ij...")

Apply from URL#

let url = URL(string: "https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene")!
try await engine.scene.applyTemplate(from: url)

When applying a template to an existing scene, CE.SDK automatically adjusts template content to fit the current scene’s dimensions.

Loading Templates as Scenes#

Instead of applying a template to an existing scene, you can load a template as the active scene when you either:

• Start the engine.
• Launch a prebuilt editor with a template as the active scene.

This is ideal when you want to either:

• Open directly into a predefined layout.
• Start an editing session from a template.

Load from String#

try await engine.scene.load(from: "UBQ1ewoiZm9ybWF0Ij...")

Load from URL#

let url = URL(string: "https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene")!
try await engine.scene.load(from: url)

Load from Archive#

Use .loadArchive(from:) when you’ve saved the template using .saveToArchive() to bundle resources.

let url = URL(string: "https://cdn.img.ly/assets/demo/postcard.archive")!
try await engine.scene.loaArchive(from: url)

The preceding code would typically appear in the .imgly.onCreate modifier when using one of the prebuilt editors.

Comparison#

Template Libraries#

You can present templates in the Asset Library along with other assets via a custom AssetSource. Each entry includes metadata that points to your template file and a preview image.

Dynamic Population (Variables & Placeholders)#

Templates can include variable placeholders like {{name}} or image placeholders. Your app can inject values at runtime.

// Example: Replace an image by setting a new fill URI
try engine.block.setString(block, property: "fill/image/imageFileURI", value: "https://cdn.example.com/images/new_photo.jpg")

// Example: Update a variable-based text field
try engine.variable.set(key: "name", value: "Chris")

Template Adaptation#

When you apply a template, CE.SDK keeps the current scene’s design unit and page size, automatically fitting the template content to match the target dimensions. This makes it easy to reuse templates for multiple aspect ratios.

Troubleshooting#

❌ Wrong size or scaling:

• Ensure the scene is initialized with the correct dimensions before applying the template.

❌ Missing assets:

• Confirm that external URLs or archives are accessible.

❌ Text variables not updating:

• Check that variable keys match the placeholders used.

Next Steps#

Now that you can generate creations from templates, some related topics you may find helpful are:

• Create templates from scratch.
• Apply templates to existing scenes.
• Work with dynamic content to update templates at runtime.