Lightning Type UI Configuration

The UI configuration files in a LightningTypeBundle control the visual representation of your custom Lightning type. By organizing these files into channel-specific folders, you can define unique UI experiences.

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.

To configure the UI behavior, add these JSON files to the channel folder.

Modify the editor.json file to specify which input Lightning web component and layouts to use.

This example configures the custom Lightning type flightFilter.

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.

See Also

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.

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.

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.

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.

Use these examples to configure UI overrides for your custom Lightning types. For details on each configuration, see these topics.

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.

Consider using Lightning Preview in tandem with Agentforce Vibes, 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. To open a component in the Lightning Preview panel, use one of these three methods.

IDE Context Menu

In the VS Code Explorer, go to your Lightning Type bundle.
Right-click the editor.json file (for input UI) or the renderer.json file (for output UI).
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