Skip to main content


In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify scenes through the block API.


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

Only blocks that are direct or indirect children of a page block are rendered. Scenes without any page child may not be properly displayed by the CE.SDK editor.


  • create(type: string): number creates a new empty design block of the requested type. By default, the following blocks are available:
    • Page: //ly.img.ubq/page or page
    • Image: //ly.img.ubq/image or image
    • Text: //ly.img.ubq/text or text
    • Sticker: //ly.img.ubq/sticker or sticker
    • RectShape: //ly.img.ubq/shapes/rect or shapes/rect
    • LineShape: //ly.img.ubq/shapes/line or shapes/line
    • StarShape: //ly.img.ubq/shapes/star or shapes/star
    • PolygonShape: //ly.img.ubq/shapes/polygon or shapes/polygon
    • EllipseShape: //ly.img.ubq/shapes/ellipse or shapes/ellipse

To create a scene, use scene.create instead.

  • saveToString(blocks: number[]): Promise<string> saves the given blocks into a string representation, which allows restoring them in a different scene or environment. If given the root of a block hierarchy, e.g. a page with multiple children, the entire hierarchy is saved.
  • loadFromString(content: string): Promise<number[]> loads one or more blocks or block hierarchies from the given string. The UUID of the loaded blocks is replaced with a new one.
  • getType(id: number): string returns the design block type of a given block as a string.
  • setName(id: number, name: string): void assigns a name to a block. Multiple blocks can share the same name.
  • getName(id): string returns a block's name.
  • getUUID(id): string returns a block's UUID.
  • duplicate(id:number): number duplicates a block and its children and returns the id of the duplicated block.
  • destroy(id:number): void destroys a block and its children.
  • isValid(id:number): boolean returns true, if a block is valid. A block becomes invalid once it has been destroyed.
// Create, save and load blocks
const block = engine.block.create('shapes/star');
const savedBlocks = await engine.block.saveToString([block]);
const loadedBlocks = await engine.block.loadFromString(savedBlocks);
// Check a blocks type
const blockType = engine.block.getType(block);
// Alter a blocks name
engine.block.setName(block, 'someName');
const name = engine.block.getName(block);
const uuid = engine.block.getUUID(block);
// You may duplicate or destroy blocks
const duplicate = engine.block.duplicate(block);
engine.block.isValid(duplicate); // false