Skip to main content

Change Settings

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to control with the editor API. A list of all available settings can be found on the Settings page.


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.


  • onSettingsChanged(callback: () => void): () => void
    Subscribe to changes to the settings. Returns a function that can be called to unsubscribe from receiving events.
  • setSettingBool(keypath: string, value: boolean): void sets a boolean setting.
  • getSettingBool(keypath: string): boolean gets a boolean setting.
  • setSettingFloat(keypath: string, value: number): void sets a float setting.
  • getSettingFloat(keypath: string): number gets a float setting.
  • setSettingString(keypath: string, value: string): void sets a string setting.
  • getSettingString(keypath: string): string gets a string setting.
  • setSettingColorRGBA(keypath: string, r: number, g: number, b: number, a: number): void sets the red, green, blue, and alpha components of a color setting. The range for each channel is 0 to 1.
  • getSettingColorRGBA(keypath: string): RGBA gets a color setting.

RGBA is a tuple of four numbers representing the color channels red, green, and blue and an alpha channel for transparency. The range for these numbers is 0 to 1.

  • setSettingEnum(keypath: string, value: string): void sets an enum setting.
  • getSettingEnum(keypath: string): string gets an enum setting.
const unsubscribeSettings = engine.editor.onSettingsChanged(() => console.log('Editor settings have changed'));
engine.editor.setSettingBool('doubleClickToCropEnabled', true);
engine.editor.setSettingFloat('positionSnappingThreshold', 2.0);
engine.editor.setSettingString('license', 'invalid');
engine.block.setSettingColorRGBA('highlightColor', 1, 0, 1, 1); // Pink
engine.block.setSettingEnum('role', 'Presenter');