Skip to main content


In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify the hierarchy of blocks 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.

Manipulate the hierarchy of blocks#

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.

  • getParent(id): number|null returns the parent id of a block or null if the block does not have a parent.
  • getChildren(id): number[] returns an array containing the ids of the block's children. Children are sorted in their rendering order: Last child is rendered in front of other children.
  • insertChild(parentId: number, childId: number, position: number): void inserts a block as a child of another block. The position parameter indicates at which position in the list of children it should be inserted, 0 being the head of the list.
  • appendChild(parentId: number, childId: number): void inserts a block as a child of another block. This is similar to insertChild, but always appends the child as the last element in the list of children.

When adding a block to a new parent, it is automatically removed from its previous parent.

engine.block.insertChild(page, block, 0);
const parent = engine.block.getParent(block);
const childIds = engine.block.getChildren(block);
engine.block.appendChild(parent, block);