Skip to main content
CESDK/Web/Guides/APIs
Language:

Load a Scene

In this example, we will show you how to use the CreativeEditor SDK's Creative Engine to load scenes through the scene API.

Loading an existing scene from a file allows resuming work on a previous creative or adapting an existing template to your needs. This is either done by passing a binary string that describes a scene to the cesdk.engine.scene.loadFromString endpoint or by passing an URL to a scene file to the cesdk.engine.scene.loadFromURL endpoint.

At any time, the engine contains only a single scene. Loading or creating a scene will replace the current one.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Warning#

A CE.SDK file does not include any fonts or images. Only asset references, e.g. unique identifiers or the source URIs of uploaded images, the general layout, and element properties are stored. Make sure to make previously used asset `uri`s available when loading scenes in a new environment.

Setup#

This example uses the headless Creative Engine. See the Setup article for a detailed guide. To get started right away, you can also access the scene API within a running CE.SDK instance via cesdk.engine.scene. Check out the APIs Overview to see that illustrated in more detail.

Loading scenes#

  • loadFromString(sceneContent:string): Promise<number>
    loads the contents of a scene file. It returns the block id of the loaded scene.
  • loadFromURL(url: string): Promise<number>
    loads a scene file directly from a URL. It returns the block id of the loaded scene. The URL has to be reachable and loadable from the context of your app. If you require more complicated requests than a simple GET, load the scene in your application code and then use the loadFromString() method.
  • get(): number
    returns the id of the current scene.
File:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/index.js';
const config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/assets'
};
// Fetch scene file and store it as a string.
const SCENE_CONTENT = await fetch(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
).then((response) => {
return response.text();
});
CreativeEngine.init(config).then(async (engine) => {
// Creating scenes
// highlight-create
let scene = engine.scene.create();
// highlight-create
// highlight-createFromImage
scene = await engine.scene.createFromImage(
'https://img.ly/static/ubq_samples/sample_4.jpg'
);
// highlight-createFromImage
// Export the scene to an image
let imageData = await engine.block.export(scene);
// Loading scenes
scene = engine.scene.loadFromString(SCENE_CONTENT);
scene = await engine.scene.loadFromURL(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
);
imageData = await engine.block.export(scene);
// Save the scene
// highlight-saveToString
scene = await engine.scene.saveToString();
// highlight-saveToArchive
const archive = await engine.scene.saveToArchive();
// Apply a template scene
// highlight-applyTemplateFromString
engine.scene.applyTemplateFromString(SCENE_CONTENT);
// highlight-applyTemplateFromURL
engine.scene.applyTemplateFromURL(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
);
// Get the scene id
scene = engine.scene.get();
// highlight-zoom
engine.scene.setZoomLevel(1.0);
engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel());
await engine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0);
// highlight-zoom
engine.dispose();
});