Skip to content

Start With Blank Canvas

In this example, we will show you how to initialize the CreativeEditor SDK from scratch and add a star shape.

We create an empty scene via engine.scene.create() which sets up the default scene block with a camera attached. Afterwards, the scene can be populated by creating additional blocks and appending them to the scene. See Modifying Scenes for more details.

let scene = await engine.scene.create();

We first add a page with create(type: DesignBlockType): number specifying a "page" and set a parent-child relationship between the scene and this page.

let page = engine.block.create('page');
engine.block.appendChild(scene, page);

To this page, we add a graphic block, again with create(type: DesignBlockType): number. To make it more interesting, we set a star shape and a color fill to this block to give it a visual representation. Like for the page, we set the parent-child relationship between the page and the newly added block. From then on, modifications to this block are relative to the page.

let block = engine.block.create('graphic');
engine.block.setShape(block, engine.block.createShape('star'));
engine.block.setFill(block, engine.block.createFill('color'));
engine.block.appendChild(page, block);

This example first appends a page child to the scene as would typically be done but it is not strictly necessary and any child block can be appended directly to a scene.

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 => {
  let scene = await engine.scene.create();


  let page = engine.block.create('page');
  engine.block.appendChild(scene, page);


  let block = engine.block.create('graphic');
  engine.block.setShape(block, engine.block.createShape('star'));
  engine.block.setFill(block, engine.block.createFill('color'));
  engine.block.appendChild(page, block);


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