Specifies the configuration for the user interface of the Creative Editor SDK.
The UserInterface interface provides a set of properties that control the appearance
and behavior of the user interface. These options include settings for the base URL,
scale, elements, stylesheets, visibility, small viewport optimization, color palette,
color libraries, typeface libraries, page presets libraries, crop presets libraries,
and page formats.
Properties#
| Property | Type | Description |
|---|---|---|
baseURL? | string | - |
scale? | ScaleConfig | Deprecated The scale property is deprecated. Please use cesdk.ui.setScale() and cesdk.ui.getScale() methods instead for runtime scale management. |
elements? | UserInterfaceElements | - |
stylesheets? | object | - |
stylesheets.disableShadowDOM? | boolean | - |
hide? | boolean | - |
smallViewportOptimization? | boolean | - |
colorPalette? | PaletteColor[] | Deprecated Add a local asset source using cesdk.engine.asset.addLocalSource() and populate it with color assets, then use cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: [...] }) to configure which sources to display. Example // Before (deprecated): const config = { ui: { colorPalette: ['#FF0000', '#00FF00', '#0000FF'] } }; // After (recommended): // Add a local source for custom colors engine.asset.addLocalSource('my.custom.colors'); engine.asset.addAssetToSource('my.custom.colors', { id: 'red', label: { en: 'Red' }, payload: { color: { colorSpace: 'sRGB', r: 1.0, g: 0.0, b: 0.0, a: 1.0 } } }); // ... add more colors // Update the asset library entry to use your custom source cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['ly.img.colors.documentColors', 'my.custom.colors'] }); |
colorLibraries? | string[] | Deprecated Add asset sources using cesdk.engine.asset.addAssetSource() or cesdk.engine.asset.addLocalSource(), then use cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: [...] }) to configure which sources to display. Example // Before (deprecated): const config = { ui: { colorLibraries: ['ly.img.colors.defaultPalette', 'my.custom.colors'] } }; // After (recommended): // Add a local source for custom colors engine.asset.addLocalSource('my.custom.colors'); // Add color assets to the source engine.asset.addAssetToSource('my.custom.colors', { id: 'custom-color-1', payload: { color: { colorSpace: 'sRGB', r: 1.0, g: 0.0, b: 0.0 } } }); // Update the library entry to use your sources cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['ly.img.colors.defaultPalette', 'my.custom.colors'] }); |
typefaceLibraries? | string[] | Deprecated Add asset sources using cesdk.engine.asset.addAssetSource() or cesdk.engine.asset.addLocalSource(), then use cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: [...] }) to configure which sources to display. Example // Before (deprecated): const config = { ui: { typefaceLibraries: ['ly.img.typeface', 'my.custom.fonts'] } }; // After (recommended): // Add a local source for custom typefaces engine.asset.addLocalSource('my.custom.fonts'); // Add typeface assets to the source engine.asset.addAssetToSource('my.custom.fonts', { id: 'custom-font-1', meta: { uri: 'https://example.com/font.ttf' } }); // Update the library entry to use your sources cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ['ly.img.typeface', 'my.custom.fonts'] }); |
pagePresetsLibraries? | string[] | (engine) => string[] |
cropPresetsLibraries? | string[] | (engine) => string[] |
pageFormats? | object | Deprecated Add a local asset source using cesdk.engine.asset.addLocalSource() and populate it with page format assets, then use cesdk.ui.updateAssetLibraryEntry('ly.img.pagePresets', { sourceIds: [...] }) to configure which sources to display. Example // Before (deprecated): const config = { ui: { pageFormats: { 'custom-format': { width: 800, height: 600, unit: 'Pixel' } } } }; // After (recommended): // Add a local source for custom page formats engine.asset.addLocalSource('my.custom.pageFormats'); engine.asset.addAssetToSource('my.custom.pageFormats', { id: 'custom-format', label: { en: 'Custom Format' }, payload: { transformPreset: { type: 'FixedSize', width: 800, height: 600, designUnit: 'Pixel' } } }); // Update the asset library entry to use your custom source cesdk.ui.updateAssetLibraryEntry('ly.img.pagePresets', { sourceIds: ['my.custom.pageFormats'] }); |