Skip to main content

Selection & Visibility

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.

Select blocks and change their visibility#

Note on Visibility#

A block can potentially be invisible (in the sense that you can't see it), even though isVisible() returns true. This could be the case when a block has not been added to a parent, the parent itself is not visible, or the block is obscured by another block on top of it.

  • setSelected(id:number, selected:boolean): void sets whether a block is selected or not. Previously selected blocks remain selected.
  • isSelected(id: number): boolean returns true if a block is selected, false otherwise.
  • select(id: number): void Selects a given block and deselect all other blocks.
  • findAllSelected(): number[] returns an array containing the ids of all currently selected blocks.
  • onSelectionChanged(callback: () => void): () => void Subscribe to changes to the selection. Returns a function that can be called to unsubscribe from receiving events.
  • setVisible(id: number, visible: boolean): void sets whether a block is currently visible (the normal case) or not (block is hidden).
  • isVisible(id: number): boolean returns the state of the visibility flag for a block.
  • setClipped(id: number, clipped: boolean): void sets whether a block is currently clipping its contents to its frame or not (block contents are clipped).
  • isClipped(id: number): boolean returns the state of the clipped flag for a block.
engine.block.setSelected(block, true);
const isSelected = engine.block.isSelected(block);;
const selectedIds = engine.block.findAllSelected();
const unsubscribeSelectionChanged = engine.block.onSelectionChanged(() => {
const selectedIds = engine.block.findAllSelected();
console.log('Selection changed: ', selectedIds)
const isVisible = engine.block.isVisible(block);
engine.block.setVisible(block, true);
const isClipped = engine.block.isClipped(page);
engine.block.setClipped(page, true);