Search Docs
Loading...
Skip to content

Settings

Settings are configuration values that control CE.SDK editor behavior without modifying scene content. They are accessed via key paths (e.g., page/title/show) and support multiple types including Bool, Int, Float, String, Color, and Enum. Use settings to customize visual appearance, interaction behavior, resource paths, and feature toggles.

When to Change Settings#

Settings can be changed at any time after engine initialization, but they fall into two categories based on when they should be modified.

Initialization-Only Settings#

Some settings should only be set once during or immediately after engine initialization. Changing them later may have no effect or cause unexpected behavior:

  • license - The license key validates on startup; changing it later has no effect
  • basePath - The base URL for resolving assets; should be set before loading any resources
  • defaultFontFileUri / defaultEmojiFontFileUri - Default fonts used when no font is specified; should be set early
  • maxImageSize - Memory limit for images; changing mid-session won’t affect already-loaded images

Runtime Settings#

Most settings can be changed at any time and take effect immediately:

  • Visual appearance: highlightColor, snappingGuideColor, cropOverlayColor, page/title/color
  • Interaction behavior: doubleClickToCropEnabled, doubleClickSelectionMode, touch/*, mouse/*
  • Control gizmos: controlGizmo/resizeHandlesVisibility, controlGizmo/rotateHandlesVisibility
  • Page display: page/title/show, page/dimOutOfPageAreas, page/title/separator
  • Feature toggles: blockAnimations/enabled, useSystemFontFallback, forceSystemEmojis
  • Snapping thresholds: positionSnappingThreshold, rotationSnappingThreshold

These runtime settings are commonly used to adapt the editor UI to different modes, user preferences, or workflow states.

Using the Settings API#

Discover Available Settings#

Use findAllSettings() to get a list of all available settings:

const allSettings = engine.editor.findAllSettings();

Read and Write Settings#

Use getSetting() and setSetting() to read and write settings. The API automatically handles the correct type based on the setting key:

// Boolean settings
engine.editor.setSetting('doubleClickToCropEnabled', true);
const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled');
// Number settings
engine.editor.setSetting('maxImageSize', 4096);
engine.editor.setSetting('positionSnappingThreshold', 2.0);
// String settings
engine.editor.setSetting('page/title/separator', ' | ');
// Color settings
engine.editor.setSetting('highlightColor', { r: 1, g: 0, b: 1, a: 1 });
// Enum settings
engine.editor.setSetting('doubleClickSelectionMode', 'Direct');
const enumOptions = engine.editor.getSettingEnumOptions(
'doubleClickSelectionMode'
);

Subscribe to Settings Changes#

React to settings changes using onSettingsChanged():

const unsubscribe = engine.editor.onSettingsChanged(() => {
console.log('Editor settings have changed');
});
// Later, to stop listening:
unsubscribe();

Role Management#

Roles apply predefined defaults for scopes and settings:

// Get current role
const currentRole = engine.editor.getRole();
// Set role and apply role-dependent defaults
engine.editor.setRole('Adopter');
// React to role changes
const unsubscribe = engine.editor.onRoleChanged((role) => {
console.log('Role changed to:', role);
});

Available Settings#

Settings Type#

Editor Settings

This section describes the all available editor settings.

Property Type Default Description
archival/bundleOnlyUsedFontVariants Bool false When enabled, saveSceneToArchive and saveBlocksToArchive bundle only the font variants actually referenced by text blocks. When disabled (default), every variant of each referenced typeface is bundled so the loaded scene can freely switch fonts without re-fetching assets.
basePath String "some-base-path" The root directory for resolving relative paths and bundle:// URIs (on platforms that don’t offer bundles.). Also used as the base URL for loading font fallback files and the default emoji font (when self-hosting assets).
blockAnimations/enabled Bool true Whether animations should be enabled or not.
borderOutlineColor Color {"r":0,"g":0,"b":0,"a":1} The border outline color.
camera/clamping/overshootMode Enum "Reverse" Controls what happens when the clamp area is smaller than the viewport. Center: the clamp area is centered in the viewport. Reverse: the clamp area can move inside the viewport until it hits the edges., Possible values: "Center", "Reverse"
clampThumbnailTextureSizes Bool true Whether to clamp thumbnail texture sizes to reduce memory usage.
clearColor Color {"r":0,"g":0,"b":0,"a":0} The color with which the render target is cleared before scenes get rendered. Only used while renderMode == RenderMode::Preview.
colorMaskingSettings/maskColor Color {"r":1,"g":1,"b":1,"a":1} The current mask color. Defaults to white, which disabled all masking.
controlGizmo/blockScaleDownLimit Float 8 Scale-down limit for blocks in screen pixels when scaling them with the gizmos or with touch gestures. The limit is ensured to be at least 0.1 to prevent scaling to size zero.
controlGizmo/dynamicMoveHandleVisibility Bool true Deprecated: prefer controlGizmo/moveHandleVisibility. Whether the move handle visibility is dynamic based on block size. When enabled (default), the move handle only appears when the block is small enough that resize handles would cover the interaction area. Setting it to false is equivalent to moveHandleVisibility: 'always'.
controlGizmo/moveHandleVisibility Enum "auto" Controls when the standalone move handle is shown for a selected block. 'auto' (default) shows it only when the block is too small for the resize handles to be usable; 'always' shows it regardless of block size and also while the block is in text edit (input) mode, so it can be repositioned while typing; 'never' hides it. 'always' does not apply in crop edit mode, which has its own handles. Supersedes the deprecated controlGizmo/showMoveHandles and controlGizmo/dynamicMoveHandleVisibility booleans., Possible values: "auto", "always", "never"
controlGizmo/resizeHandlesVisibility Enum "auto" Controls when the non-proportional edge (resize) handles are shown. 'auto' (default) shows them in transform edits; 'always' also shows them while the block is in text edit (input) mode; 'never' hides them. 'always' does not apply in crop edit mode, which has its own handles. Supersedes the deprecated controlGizmo/showResizeHandles boolean., Possible values: "auto", "always", "never"
controlGizmo/rotateHandlesVisibility Enum "auto" Controls when the rotation handle is shown. 'auto' (default) shows it in transform edits; 'always' also shows it while the block is in text edit (input) mode; 'never' hides it. 'always' does not apply in crop edit mode, which has its own handles. Supersedes the deprecated controlGizmo/showRotateHandles boolean., Possible values: "auto", "always", "never"
controlGizmo/scaleHandlesVisibility Enum "auto" Controls when the proportional corner (scale) handles are shown. 'auto' (default) shows them in transform edits; 'always' also shows them while the block is in text edit (input) mode; 'never' hides them. 'always' does not apply in crop edit mode, which has its own handles. Supersedes the deprecated controlGizmo/showScaleHandles boolean., Possible values: "auto", "always", "never"
controlGizmo/showCropHandles Bool true Whether or not to show the handles to adjust the crop area during crop mode.
controlGizmo/showCropScaleHandles Bool true Whether or not to display the outer handles that scale the full image during crop.
controlGizmo/showMoveHandles Bool true Deprecated: prefer controlGizmo/moveHandleVisibility. Master on/off switch for the move handle; setting it to false is equivalent to moveHandleVisibility: 'never'.
controlGizmo/showResizeHandles Bool true Deprecated: prefer controlGizmo/resizeHandlesVisibility. Whether or not to display the non-proportional resize handles (edge handles). Setting it to false is equivalent to resizeHandlesVisibility: 'never'.
controlGizmo/showRotateHandles Bool true Deprecated: prefer controlGizmo/rotateHandlesVisibility. Whether or not to show the rotation handle. Setting it to false is equivalent to rotateHandlesVisibility: 'never'.
controlGizmo/showScaleHandles Bool true Deprecated: prefer controlGizmo/scaleHandlesVisibility. Whether or not to display the proportional scale handles (corner handles). Setting it to false is equivalent to scaleHandlesVisibility: 'never'.
cropOverlayColor Color {"r":0,"g":0,"b":0,"a":0.39} Color of the dimming overlay that’s added in crop mode.
defaultEmojiFontFileUri String "" URI of default font file for emojis.
defaultFontFileUri String "bundle://ly.img.cesdk/fonts/imgly_font_inter_semibold.otf" URI of default font file. This font file is the default everywhere unless overriden in specific settings.
doubleClickSelectionMode Enum "Hierarchical" The current mode of selection on double-click., Possible values: "Direct", "Hierarchical"
doubleClickToCropEnabled Bool true Whether double clicking on an image element should switch into the crop editing mode.
errorStateColor Color {"r":1,"g":1,"b":1,"a":0.7} The error state color for design blocks.
fallbackFontUri String "" The URI of the fallback font to use for text that is missing certain characters.
forceSystemEmojis Bool true Whether the system emojis should be used for text.
grid/color Color {"r":0.518,"g":0.518,"b":0.518,"a":0.3} Color of the grid lines.
grid/enabled Bool false Whether the background grid is shown on pages.
grid/snapEnabled Bool false Whether elements should snap to grid lines when dragged.
grid/spacingX Float 10 Horizontal spacing between vertical grid lines in design units.
grid/spacingY Float 10 Vertical spacing between horizontal grid lines in design units.
handleFillColor Color {"r":1,"g":1,"b":1,"a":1} The fill color for handles.
highlightColor Color {"r":0.2,"g":0.333,"b":1,"a":1} Color of the selection, hover, and group frames and for the handle outlines for non-placeholder elements.
license String "" A valid license string in JWT format.
listIndentPerLevel Float 0.75 Width of each list indentation level in EM units.
maxImageSize Int 4096 The maximum size at which images are loaded into the engine. Images that exceed this size are down-scaled prior to rendering. Reducing this size further reduces the memory footprint.
maxPreviewResolution Int -1 The maximum dimension (width or height) in physical pixels for preview rendering. When greater than 0, the scene is rendered at reduced resolution and upscaled for improved performance. Does not affect exports. Set to -1 to disable (default).
mouse/enableScroll Bool true Whether the engine processes mouse scroll events.
mouse/enableZoom Bool true Whether the engine processes mouse zoom events.
page/allowCropInteraction Bool true If crop interaction (by handles and gestures) should be possible when the enabled arrangements allow resizing.
page/allowMoveInteraction Bool false If move interaction (by handles and gestures) should be possible when the enabled arrangements allow moving and if the page layout is not controlled by the scene.
page/allowResizeInteraction Bool false If a resize interaction (by handles and gestures) should be possible when the enabled arrangements allow resizing.
page/allowRotateInteraction Bool false If rotation interaction (by handles and gestures) should be possible when the enabled arrangements allow rotation and if the page layout is not controlled by the scene.
page/allowShapeChange Bool false Whether pages support non-rectangular shapes. When false, supportsShape returns false for pages.
page/dimOutOfPageAreas Bool true Whether the opacity of the region outside of all pages should be reduced.
page/flipDimensionsOn90DegreeCropRotation Bool false Whether rotating the crop by 90 degrees should swap the block’s width and height, causing the page aspect ratio to rotate with the content. Defaults to false.
page/highlightDropTarget Bool false Whether to highlight the page under a dragged element as a drop target.
page/highlightWhenCropping Bool false Whether highlighting should be automatically enabled on the current page when entering crop mode.
page/innerBorderColor Color {"r":0,"g":0,"b":0,"a":0} Color of the inner frame around the page.
page/marginFillColor Color {"r":0.79,"g":0.12,"b":0.4,"a":0.1} Color filled into the bleed margins of pages.
page/marginFrameColor Color {"r":0.79,"g":0.12,"b":0.4,"a":0.15} Color of frame around the bleed margin area of the pages.
page/marqueeSelectOnBodyDrag Bool false When enabled, a click+drag that starts on the page body performs a marquee selection of the blocks inside the page instead of moving the page. The page can still be moved by dragging its title (when visible in free layout) or by holding the command key (macOS) / control key (Windows/Linux) while clicking and dragging on the page body. Has no effect when the page is not movable (see page/allowMoveInteraction and scene layout constraints).
page/moveChildrenWhenCroppingFill Bool false Whether the children of the page should be transformed to match their old position relative to the page fill when a page fill is cropped.
page/outerBorderColor Color {"r":1,"g":1,"b":1,"a":0} Color of the outer frame around the page.
page/reparentBlocksToSceneWhenOutOfPage Bool false Whether blocks should be reparented to the scene when dragged outside all pages, and reparented back to a page when dragged over one.
page/restrictPageSelectionToBorderAndTitle Bool false When enabled, the page can only be selected by clicking on its title (when shown in free layout) or near its border. Clicks inside the page body no longer select the page; the click falls through to whatever block sits underneath. Independent of page/marqueeSelectOnBodyDrag.
page/restrictResizeInteractionToFixedAspectRatio Bool false If the resize interaction should be restricted to fixed aspect ratio resizing.
page/selectWhenNoBlocksSelected Bool false Whether the page should automatically be selected when no blocks are selected.
page/title/appendPageName Bool true Whether to append the page name to the title if a page name is set even if the name is not specified in the template or the template is not shown.
page/title/canEdit Bool false Whether double-clicking a page title enters text edit mode to rename the page.
page/title/color Color {"r":1,"g":1,"b":1,"a":1} Color of page titles visible in preview mode, can change with different themes.
page/title/fontFileUri String "bundle://ly.img.cesdk/fonts/imgly_font_inter_semibold.otf" Font of page titles.
page/title/separator String "-" Title label separator between the page number and the page name.
page/title/show Bool true Whether to show titles above each page.
page/title/showOnSinglePage Bool true Whether to hide the the page title when only a single page is given.
page/title/showPageTitleTemplate Bool true Whether to include the default page title from page.titleTemplate.
pageHighlightColor Color {"r":0.5,"g":0.5,"b":0.5,"a":0.2} Color of the outline of each page.
placeholderControls/showButton Bool true Show the placeholder button.
placeholderControls/showOverlay Bool true Show the overlay pattern.
placeholderHighlightColor Color {"r":0.77,"g":0.06,"b":0.95,"a":1} Color of the selection, hover, and group frames and for the handle outlines for placeholder elements.
playback/showAllBlocks Bool false When enabled, every block stays visible regardless of the current playback time, instead of being culled outside its time offset/duration. No effect on export.
positionSnappingThreshold Float 4 Position snapping threshold in screen space.
progressColor Color {"r":1,"g":1,"b":1,"a":0.7} The progress indicator color.
rotationSnappingGuideColor Color {"r":1,"g":0.004,"b":0.361,"a":1} Color of the rotation snapping guides.
rotationSnappingThreshold Float 0.15 Rotation snapping threshold in radians.
showBuildVersion Bool false Show the build version on the canvas.
snappingGuideColor Color {"r":1,"g":0.004,"b":0.361,"a":1} Color of the position snapping guides.
textVariableHighlightColor Color {"r":0.7,"g":0,"b":0.7,"a":1} Color of the text variable highlighting borders.
touch/dragStartCanSelect Bool true Whether dragging an element requires selecting it first. When not set, elements can be directly dragged.
touch/pinchAction Enum "Scale" The action to perform when a pinch gesture is performed., Possible values: "None", "Zoom", "Scale", "Auto", "Dynamic"
touch/rotateAction Enum "Rotate" Whether or not the two finger turn gesture can rotate selected elements., Possible values: "None", "Rotate"
touch/singlePointPanning Bool true Whether or not dragging on the canvas should move the camera (scrolling). When not set, the scroll bars have to be used.
upload/supportedMimeTypes String "" The MIME types supported for file uploads.
useSystemFontFallback Bool true Whether the IMG.LY hosted font fallback is used for fonts that are missing certain characters, covering most of the unicode range.
web/fetchCredentials String "same-origin" The credentials mode to use for fetch requests (same-origin, include, or omit).

GlobalScopes#

Member Type Default Description
text Scope Allow Scope for text operations.
fill Scope Allow Scope for fill operations.
stroke Scope Allow Scope for stroke operations.
shape Scope Allow Scope for shape operations.
layer Scope Allow Scope for layer operations.
appearance Scope Allow Scope for appearance operations.
lifecycle Scope Allow Scope for lifecycle operations.
editor Scope Allow Scope for editor operations.