# Lightning Type UI Configuration The UI configuration files in a [LightningTypeBundle](/docs/platform/lightning-types/guide/lightning-types-core.md#understand-the-lightningtypebundle-structure) control the visual representation of your custom Lightning type. By organizing these files into channel-specific folders, you can define unique UI experiences. ## Channels The channel identifies the Salesforce application that displays your custom Lightning type. A channel subfolder stores the Saleforce app’s configuration files. This table lists the supported configuration files and override capabilities for each channel. | Channel | Editor Support | Renderer Support | Top-Level Override | Property-Level Override | | ----------------------- | -------------- | ---------------- | ------------------ | ----------------------- | | `lightningDesktopGenAi` | Yes | Yes | Yes | No | | `lightningMobileGenAi` | Yes | Yes | Yes | No | | `experienceBuilder` | Yes | No | Yes | Yes | | `enhancedWebChat` | Yes | Yes | Yes | No | If `enhancedWebChat` isn’t configured, it uses the configuration defined in `lightningDesktopGenAi`. ## Customizing Lightning Type UI: LWCs vs. Widgets You can customize the UI for custom Lightning types by using two approaches: **Lightning Web Components (LWC)** - Code-based customization (`JavaScript`, `HTML`, `CSS`) - Supports both input (`editor.json`) and output (`renderer.json`) - Channel-specific configurations in subfolders (`lightningDesktopGenAi/`, `experienceBuilder/`) - Available for Salesforce applications only **HXL Widgets (Beta)** - JSON-based declarative composition - Output (`renderer.json`) only - Root-level `renderer.json` without channel subfolders - Works across Salesforce applications and across third-party platforms, such as ChatGPT, Claude, and Slackbot, through Model Context Protocol For widget configuration details, see [Build Rich UI Experiences with HXL Widgets](https://developer.salesforce.com/docs/platform/hxl/guide/hxl-rich-ui.md). ## UI Configuration Files To configure the UI behavior, add these JSON files to the channel folder. ### Customize How User Input Is Collected Modify the `editor.json` file to specify which input Lightning web component and layouts to use. This example configures the custom Lightning type `flightFilter`. ``` +--lightningTypes +--flightFilter +--schema.json +--lightningDesktopGenAi <-- Channel-specific folder +--editor.json ``` ### Customize How Data Is Present to Users Modify the `renderer.json` file to specify which output Lightning web component to use to render the type or its individual properties. The renderer is used wherever the type appears as output within the channel. This example configures the renderer for the custom Lightning type `flightFilter`. ``` +--lightningTypes +--flightFilter +--schema.json +--lightningDesktopGenAi <-- Channel-specific folder +--renderer.json ``` **See Also** - [Lightning Types Configuration Files](/docs/platform/lightning-types/guide/lightning-types-core.md#lightning-types-configuration-files) - [Understand the LightningTypeBundle Structure](/docs/platform/lightning-types/guide/lightning-types-core.md#understand-the-lightningtypebundle-structure) - [Configuring Component Overrides](#configuring-a-component-override) ## Lightning Web Component Attribute Mapping Attribute mapping creates a bridge between your data model and your interface. To display or edit data by using a custom Lightning web component (LWC), you map the properties defined in your `schema.json` to the component’s properties. When mapping, these elements are required. - **Source**: The data properties defined in your `schema.json`. - **Connector**: The `attributes` object in your configuration file (editor.json or renderer.json), which uses the `{!$attrs.propertyName}` syntax. - **Destination**: The properties in your LWC, decorated with `@api`. In the `editor.json` and `renderer.json` files, use the `attributes` key in the `componentOverrides` section to map the properties. - **Key**: The name of the property in your LWC (the variable with `@api`). - **Value**: The schema reference that uses the syntax `{!$attrs.propertyName}`. This sample code references `myExistingFilterComponent` to override the editor for the `Filter` input in the `editor.json` file. ```json { "editor": { "componentOverrides": { "$": { "definition": "c/myExistingFilterComponent", "attributes": { "cost": "{!$attrs.price}", "discountPercentage": "{!$attrs.discountPercentage}" } } } } } ``` ## Layout Configuration Use the `layout` section in `editor.json` to control the visual arrangement and hierarchy of schema properties within the editor. By default, the UI renders properties in a simple vertical stack that matches the order defined in your `schema.json` file. Define a custom layout section to achieve complex arrangements, such as: - **Grouping**: Place properties side-by-side by using a horizontal layout. - **Organization**: Group properties into structured containers, such as tabs or accordions. - **Reordering**: Display properties in a sequence different from the schema definition. This sample code shows how to arrange properties horizontally and apply a component override in the `editor.json` file. ```json { "editor": { "componentOverrides": { "lastName": { "definition": "c/customLastNameInput" } }, "layout": { "definition": "lightning/verticalLayout", "children": [ { "definition": "lightning/horizontalLayout", "children": [ { "definition": "lightning/propertyLayout", "attributes": { "property": "firstName" } }, { // This will render the overridden c/customLastNameInput // defined in componentOverrides above. "definition": "lightning/propertyLayout", "attributes": { "property": "lastName" } } ] } ] } } } ``` ## Component Override The `componentOverrides` section in your JSON files controls which components render the data. You can override the UI for the entire type or for specific fields within it. **Top-Level Override** To use a single LWC to render the entire Lightning type, use the `$` symbol as the key. In this configuration, the component receives the full schema payload and is responsible for rendering all properties together, for example, as a summary card or composite UI. This example references `myFilterComponent` to override the editor for the `Filter` input in the `editor.json` file. ```json { "editor": { "componentOverrides": { "$": { "definition": "c/myFilterComponent" } } } } ``` **Property-Level Override** To use a specific LWC to render an individual property within the type, use the property name (such as lastName) as the key in the `componentOverrides` section. In this configuration, the component renders only the specified property, and default editors handle the rest of the type. This example references `customLastNameInput` to override the editor for the `lastName` property in the `editor.json` file. ```json { "editor": { "componentOverrides": { "lastName": { "definition": "c/customLastNameInput" } } } } ``` ## Configuring a Component Override Use these examples to configure UI overrides for your custom Lightning types. For details on each configuration, see these topics. - [Define a Top-Level Editor Override](/docs/platform/lightning-types/guide/lightning-types-custom-editor.md) - [Define a Top-Level Renderer Override](/docs/platform/lightning-types/guide/lightning-types-custom-renderer.md) - [Define a Top-Level Collection Renderer Override](/docs/platform/lightning-types/guide/lightning-types-custom-collection-renderer.md) - [Define a Property-Level Editor Override](/docs/platform/lightning-types/guide/lightning-types-custom-editor-property.md) ## Preview Custom UI for Lightning Types in Your IDE Using Live Preview To quickly iterate on the look and feel of custom editors and renderers built with Lightning web components, use the Salesforce Live Preview extension for Visual Studio Code (VS Code). Live Preview shows real-time component changes in a dedicated panel in VS Code. The preview refreshes automatically when you save local changes, so you can test component design and behavior without leaving your workspace. You can find more details about this extension in [Visual Studio Code Marketplace: Salesforce Live Preview](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-ui-preview). :::tip Consider using Lightning Preview in tandem with [Agentforce Vibes](https://developer.salesforce.com/docs/platform/einstein-for-devs/guide/einstein-overview.md), an AI assistant that can help you write, refactor, and test your code. For fast and easy iteration on your components, Agentforce Vibes can directly open components in the Lightning Preview panel when your local changes are complete. ::: Before you use Live Preview, complete the setup instructions in [Set Up Live Preview](https://developer.salesforce.com/docs/platform/lwc/guide/get-started-test-components.md#set-up-live-preview). To open a component in the Lightning Preview panel, use one of these three methods. **IDE Context Menu** 1. In the VS Code Explorer, go to your Lightning Type bundle. 2. Right-click the `editor.json` file (for input UI) or the `renderer.json` file (for output UI). 3. Select **SFDX: Open in Lightning Preview**. The preview opens in a dedicated panel or browser tab. As you save changes to the associated LWC’s HTML or CSS files, the preview updates automatically. **IDE Command Palette** Open the Command Palette in VS Code, search for `SFDX: Open in Lightning Preview`, and then select **SFDX: Open in Lightning Preview**. When prompted, enter or select the name of the component you want to preview. **Agent Integration** If you’re using Agentforce Vibes, you can instruct the agent to preview a component after it’s finished updating your code. The agent automatically opens the component in the Lightning Preview panel. **See Also** - [*Lightning Web Components Developer Guide*: Run a Live Component Preview](https://developer.salesforce.com/docs/platform/lwc/guide/get-started-test-components.md) - [Visual Studio Code Marketplace: Salesforce Live Preview](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-ui-preview)