How to create and load templates in CE.SDK?

Part 1: Creating a template

Templates are built through code using the CE.SDK engine API. The process involves creating a blank scene with your desired dimensions, adding text blocks with dynamic variable tokens so content can be swapped at runtime, and setting up image placeholders so users can replace visuals.

CE.SDK uses a Creator/Adopter role system to manage this workflow. The Creator designs the template and defines the constraints that govern what can be edited. The Adopter is the end user who works within those boundaries. You switch between roles using

engine.editor.setRole('Creator') and engine.editor.setRole('Adopter').

Once the template is ready, you can save it in one of two formats:

engine.scene.saveToString() — a lightweight string, best when assets are hosted externally on a CDN.
engine.scene.saveToArchive() — a self-contained .zip that bundles all assets, ideal for offline use or distribution.

For the full step-by-step implementation, see the CE.SDK template creation documentation and the locking and roles guide.

Part 2: Loading a template for users to edit

Once a template is saved, CE.SDK gives you three ways to load it depending on where it lives. You can load from a self-contained .zip archive URL, from a remote .scene file URL, or directly from a serialized string stored in your database. After loading, zoom the viewport to fit the scene so users land in the right view straight away.

// From a .zip archive URL (self-contained, all assets bundled)
await engine.scene.loadFromArchiveURL('https://your-cdn.com/template.zip');

// From a remote .scene file URL (assets hosted externally)
await engine.scene.loadFromURL('https://your-cdn.com/template.scene');

// From a serialized string stored in your database
await engine.scene.loadFromString(templateString);

// Zoom to fit after loading
const scene = engine.scene.get();
await engine.scene.zoomToBlock(scene, { padding: 40 });

For the full reference, see the CE.SDK template import documentation here: https://img.ly/docs/cesdk/js/create-templates/import-e50084

How to create and load templates in CE.SDK?

CE.SDK includes a complete template system that lets you design scenes in advance and present them to users as a starting point for editing. The workflow has two parts: building and saving the template, then loading it into the editor for users to work with.