Skip to content

Load a Scene

Loading an existing scene allows resuming work on a previous session or adapting an existing template to your needs.

Load Scenes from a Remote URL

Determine a URL that points to a scene binary string.

const sceneUrl =
  'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene';

We can then pass that string to the engine.scene.loadFromURL(url: string): Promise<number> function. The editor will reset and present the given scene to the user. The function is asynchronous and the returned Promise resolves if the scene load succeeded.

  let scene = await engine.scene
    .loadFromURL(sceneUrl)
    .then(() => {
      console.log('Load succeeded');


      let text = engine.block.findByType('text')[0];
      engine.block.setDropShadowEnabled(text, true);
    })
    .catch((error) => {
      console.error('Load failed', error);
    });

From this point on we can continue to modify our scene. In this example, assuming the scene contains a text element, we add a drop shadow to it. See Modifying Scenes for more details.

let text = engine.block.findByType('text')[0];
engine.block.setDropShadowEnabled(text, true);

Scene loads may be reverted using cesdk.engine.editor.undo().

To later save your scene, see Saving Scenes.

Full Code

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/assets',
};


CreativeEngine.init(config).then(async engine => {
  // Load default assets referenced in the scene
  engine.addDefaultAssetSources();


  const sceneUrl =
    'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene';


  let scene = await engine.scene
    .loadFromURL(sceneUrl)
    .then(() => {
      console.log('Load succeeded');


      let text = engine.block.findByType('text')[0];
      engine.block.setDropShadowEnabled(text, true);
    })
    .catch(error => {
      console.error('Load failed', error);
    });


  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});

Load Scenes from a String

In this example, we fetch a scene from a remote URL and load it as a string. This string could also come from the result of engine.scene.saveToString().

const sceneUrl =
  'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene';
const sceneString = await fetch(sceneUrl).then((response) => {
  return response.text();
});

We can pass that string to the engine.scene.loadFromString(sceneContent: string): Promise<number>) function. The editor will then reset and present the given scene to the user. The function is asynchronous and the returned Promise resolves, if the scene load succeeded.

  let scene = await engine.scene
    .loadFromURL(sceneUrl)
    .then(() => {
      console.log('Load succeeded');


      let text = engine.block.findByType('text')[0];
      engine.block.setDropShadowEnabled(text, true);
    })
    .catch((error) => {
      console.error('Load failed', error);
    });

From this point on we can continue to modify our scene. In this example, assuming the scene contains a text element, we add a drop shadow to it. See Modifying Scenes for more details.

let text = engine.block.findByType('text')[0];
engine.block.setDropShadowEnabled(text, true);

Scene loads may be reverted using cesdk.engine.editor.undo().

To later save your scene, see Saving Scenes.

Full Code

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/assets',
};


CreativeEngine.init(config).then(async engine => {
  // Load default assets referenced in the scene
  engine.addDefaultAssetSources();


  const sceneUrl =
    'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene';
  const sceneString = await fetch(sceneUrl).then(response => {
    return response.text();
  });


  let scene = await engine.scene
    .loadFromString(sceneString)
    .then(() => {
      console.log('Load succeeded');


      let text = engine.block.findByType('text')[0];
      engine.block.setDropShadowEnabled(text, true);
    })
    .catch(error => {
      console.error('Load failed', error);
    });


  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});

Load Scenes From a Blob

In this example, we fetch a scene from a remote URL and load it as sceneBlob.

const sceneUrl =
  'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene';
const sceneBlob = await fetch(sceneUrl).then((response) => {
  return response.blob();
});

To acquire a scene string from sceneBlob, we need to read its contents into a string.

const blobString = await sceneBlob.text();

We can then pass that string to the engine.scene.loadFromString(sceneContent: string): Promise<number> function. The editor will reset and present the given scene to the user. The function is asynchronous and the returned Promise resolves if the scene load succeeded.

  let scene = await engine.scene
    .loadFromURL(sceneUrl)
    .then(() => {
      console.log('Load succeeded');


      let text = engine.block.findByType('text')[0];
      engine.block.setDropShadowEnabled(text, true);
    })
    .catch((error) => {
      console.error('Load failed', error);
    });

From this point on we can continue to modify our scene. In this example, assuming the scene contains a text element, we add a drop shadow to it. See Modifying Scenes for more details.

let text = engine.block.findByType('text')[0];
engine.block.setDropShadowEnabled(text, true);

Scene loads may be reverted using cesdk.engine.editor.undo().

To later save your scene, see Saving Scenes.

Full Code

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/assets',
};


CreativeEngine.init(config).then(async engine => {
  // Load default assets referenced in the scene
  engine.addDefaultAssetSources();


  const sceneUrl =
    'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene';
  const sceneBlob = await fetch(sceneUrl).then(response => {
    return response.blob();
  });


  const blobString = await sceneBlob.text();


  let scene = await engine.scene
    .loadFromString(blobString)
    .then(() => {
      console.log('Load succeeded');


      let text = engine.block.findByType('text')[0];
      engine.block.setDropShadowEnabled(text, true);
    })
    .catch(error => {
      console.error('Load failed', error);
    });


  // Attach engine canvas to DOM
  document.getElementById('cesdk_container').append(engine.element);
});

Loading Scene Archives

Loading a scene archives requires unzipping the archives contents to a location, that’s accessible to the CreativeEngine. One could for example unzip the archive via unzip archive.zip and then serve its contents using $ npx serve. This spins up a local test server, that serves everything contained in the current directory at http://localhost:3000

The archive can then be loaded by calling await engine.scene.loadFromURL('http://localhost:3000/scene.scene'). See loading scenes for more details. All asset paths in the archive are then resolved relative to the location of the scene.scene file. For an image, that would result in 'http://localhost:3000/images/1234.jpeg'. After loading all URLs are fully resolved with the location of the scene.scene file and the scene behaves like any other scene.

Resolving assets from a different source

The engine will use its URI resolver to resolve all asset paths it encounters. This allows you to redirect requests for the assets contained in archive to a different location. To do so, you can add a custom resolver, that redirects requests for assets to a different location. Assuming you store your archived scenes in a scenes/ directory, this would be an example of how to do so:

engine.editor.setURIResolver(uri => {
  const url = new URL(uri);
  if (
    url.hostname === 'localhost' &&
    url.pathname.startsWith('/scenes') &&
    !url.pathname.endsWith('.scene')
  ) {
    // Apply custom logic here, e.g. redirect to a different server
  }


  // Use default behaviour for everything else
  return engine.editor.defaultURIResolver(uri);
});