# Namespace: UserInterfaceElements

## Type Aliases[#](#type-aliases)

| Type Alias | Description |
| --- | --- |
| [AssetLibraryEntries](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/assetlibraryentries/) | Represents a collection of asset library entries, which can be either a static array or a dynamic function. |
| [CardBackground](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/cardbackground/) | Type representing the background of a card. - `path`: The path to the background resource. - `type`: The type of the background resource, either ‘svgVectorPath’ or ‘image’. |
| [CustomCardBackground](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardbackground/) | Type representing the background of a custom card, which can be either an image or an SVG vector path. |
| [CustomCardImageBackground](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardimagebackground/) | Type representing an image background for a custom card. - `url`: The URL of the image. - `type`: The type of the background, which is ‘image’. |
| [CustomCardSvgVectorPathBackground](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customcardsvgvectorpathbackground/) | Type representing an SVG vector path background for a custom card. - `type`: The type of the background, which is ‘svgVectorPath’. - `viewBox`: The viewBox attribute for the SVG. - `width`: Optional width of the SVG. - `height`: Optional height of the SVG. - `d`: The path data for the SVG. - `stroke`: Optional stroke color for the SVG. - `strokeWidth`: Optional stroke width for the SVG. - `strokeLinecap`: Optional stroke line cap for the SVG. - `strokeLinejoin`: Optional stroke line join for the SVG. - `strokeDasharray`: Optional stroke dash array for the SVG. - `strokeDashoffset`: Optional stroke dash offset for the SVG. - `opacity`: Optional opacity for the SVG. - `clipPath`: Optional clip path for the SVG. - `fill`: Optional fill color for the SVG. - `fillRule`: Optional fill rule for the SVG. - `clipRule`: Optional clip rule for the SVG. |
| [CustomIcon](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/customicon/) | Type representing a custom icon, which can be a string or a function. - If a string, it represents the name of the icon. - If a function, it takes an object with `theme` and `iconSize` properties and returns a string representing the icon. |
| [ExportFormat](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/exportformat/) | Type representing the export format. - `image/png`: PNG image format. - `video/mp4`: MP4 video format. - `application/pdf`: PDF document format. |
| [UserInterfaceCustomActionIconName](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/type-aliases/userinterfacecustomactioniconname/) | Type representing the name of a custom action icon. - `default`: Default icon. - `download`: Download icon. - `upload`: Upload icon. - `save`: Save icon. - Any other string: Custom icon name. |

## Enumerations[#](#enumerations)

| Enumeration | Description |
| --- | --- |
| [NavigationPosition](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/enumerations/navigationposition/) | This enum is used to specify the position of the navigation bar within the user interface. |

## Interfaces[#](#interfaces)

| Interface | Description |
| --- | --- |
| [AssetEntrySourceIdsContext](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetentrysourceidscontext/) | Context provided to the sourceIds callback function. - `cesdk`: The CreativeEditorSDK instance. - `engine`: The CreativeEngine instance. |
| [AssetLibraryEntryData](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentrydata/) | Interface representing the data configuration for an asset library entry. - `id`: The unique identifier for the asset library entry. - `sourceIds`: An array of source IDs associated with the asset library entry, or a function that returns an array of source IDs. - `sceneMode`: Optional configuration for the scene mode, which can be a `SceneMode`, ‘All’, or a function returning a `SceneMode` or ‘All’. - `excludeGroups`: Optional array of group IDs to exclude from the asset library entry. - `includeGroups`: Optional array of group IDs to include in the asset library entry. - `title`: Optional title for the asset library entry, which can be a string or a function returning a string or undefined. - `canAdd`: Optional boolean or function indicating whether the asset can be added to the source. - `canRemove`: Optional boolean or function indicating whether the asset can be removed from the source. |
| [AssetLibraryEntryView](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/assetlibraryentryview/) | Interface representing the view configuration for an asset library entry. - `showGroupOverview`: Optional boolean indicating whether to show the group overview. - `promptBeforeApply`: Optional configuration for showing a confirmation dialog before applying an asset. - `icon`: Optional custom icon for the asset. - `previewLength`: Optional number determining how many asset results will be shown in an overview or section overview. - `previewBackgroundType`: Optional type determining if the thumbUri is set as a background that will be contained or covered by the card in an overview or section overview. - `gridBackgroundType`: Optional type determining if the thumbUri is set as a background that will be contained or covered by the card in the grid view. - `gridColumns`: Optional number of columns in the grid view. - `gridItemHeight`: Optional height of an item in the grid view, either ‘auto’ or ‘square’. - `cardBackgroundPreferences`: Optional configuration for determining what will be used as the card background from the asset and in which priorities. - `cardBorder`: Optional boolean indicating whether to draw a border around the card. - `cardLabel`: Optional function to overwrite the label of a card for a specific asset result. - `cardStyle`: Optional function to add custom styles to a card for a specific asset result. - `cardLabelStyle`: Optional function to add custom styles to a label for a specific asset result. - `cardLabelPosition`: Optional function to position the label inside or below the card. - `cardLabelTruncateLines`: Optional function to control label truncation to occur at end of first line (‘single’) or at end of second line (‘multi’). - `sortBy`: Optional configuration for sorting the asset results. |
| [~DockGroup~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/dockgroup/) | \- |
| [UserInterfaceAssetLibrary](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceassetlibrary/) | Interface representing the asset library in the user interface. - `position`: Optional position of the asset library. |
| [UserInterfaceCustomAction](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacecustomaction/) | Interface representing a custom action in the user interface. - `callback`: Function to be called when the action is triggered. - `label`: Label for the action. - `iconName`: Name of the icon for the action. |
| [UserInterfaceElement](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelement/) | Interface representing an element in the user interface. - `show`: Optional boolean indicating whether the element should be shown. |
| [UserInterfaceElements](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceelements/) | Defines the configuration for user interface elements, including panels, dock, libraries, blocks, navigation, and inspector bar. |
| [UserInterfaceExportAction](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceexportaction/) | Interface representing an export action in the user interface. - `format`: Optional array of export formats. |
| [UserInterfaceInspector](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspector/) | Interface representing the inspector in the user interface. - `position`: Optional position of the inspector. - `floating`: Optional boolean indicating whether the inspector should be floating. |
| [~UserInterfaceInspectorBlock~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblock/) | Interface representing a block in the user interface inspector. |
| [~UserInterfaceInspectorBlockGraphic~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockgraphic/) | Interface representing a graphic block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. |
| [~UserInterfaceInspectorBlockImage~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockimage/) | Interface representing an image block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. |
| [~UserInterfaceInspectorBlockPage~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockpage/) | Interface representing a page block in the user interface inspector. - `format`: Optional element or boolean indicating whether the format section should be shown. - `manage`: Optional element or boolean indicating whether the manage section should be shown. - `maxDuration`: Optional number controlling the maximum allowed duration of a page, if in video mode. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. |
| [~UserInterfaceInspectorBlockRectShape~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockrectshape/) | Interface representing a rectangular shape block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. |
| [~UserInterfaceInspectorBlocks~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocks/) | Interface representing the blocks in the user interface inspector. - `opacity`: Optional element or boolean indicating whether the opacity block should be shown. - `transform`: Optional element or boolean indicating whether the transform block should be shown. - `trim`: Optional element or boolean indicating whether the trim block should be shown. - `//ly.img.ubq/text`: Optional text block configuration. - `//ly.img.ubq/page`: Optional page block configuration. - `//ly.img.ubq/graphic`: Optional graphic block configuration. |
| [~UserInterfaceInspectorBlockShape~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockshape/) | Interface representing a shape block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. |
| [~UserInterfaceInspectorBlockText~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblocktext/) | Interface representing a text block in the user interface inspector. - `advanced`: Optional element or boolean indicating whether the advanced section should be shown. - `color`: Optional element or boolean indicating whether the color section should be shown. |
| [~UserInterfaceInspectorBlockVideoFill~](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfaceinspectorblockvideofill/) | Interface representing a video fill block in the user interface inspector. - `crop`: Optional element or boolean indicating whether the crop section should be shown. - `filters`: Optional element or boolean indicating whether the filters section should be shown. - `adjustments`: Optional element or boolean indicating whether the adjustments section should be shown. - `effects`: Optional element or boolean indicating whether the effects section should be shown. - `blur`: Optional element or boolean indicating whether the blur section should be shown. |
| [UserInterfaceNavigation](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacenavigation/) | Interface representing the navigation in the user interface. - `position`: Optional position of the navigation. - `title`: Optional title for the navigation. - `action`: Optional object containing actions for the navigation. |
| [UserInterfaceSettings](https://img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/userinterfaceelements/interfaces/userinterfacesettings/) | Interface representing the settings in the user interface. |

---



[Source](https:/img.ly/docs/cesdk/sveltekit/api/cesdk-js/documentation/namespaces/experimentaluserinterfaceapi)