Define a Top-Level Renderer Override

You can define a single renderer for your entire custom Lightning type. The renderer applies whenever an instance of the type is returned as output.

For example, you have a custom Lightning type named taskCard that corresponds to an Apex class TaskRecord with four properties: cardName, cardId, createdDate, and lastUpdate. You want to display the data by using a custom task board card that visually highlights recently updated items.

Here’s an example of what the renderer.json file can look like for the custom Lightning type taskCard.

This example uses lightningDesktopGenAi to configure the custom Lightning type. Only specific channels support output overrides (renderer.json). Verify that your channel supports this feature before configuring the file.

Example: Basic Configuration Using the value Property

This example shows you how to configure a component to handle the entire object via a single @api value property. The component receives the full object in one property.

To view a complete, working example of an LWC renderer implementation, see Customize UI for Output.

Create the LWC.

This sample code shows the LWC component myCardRenderer.
Update the js-meta.xml file.

Include the lightning__AgentforceOutput target.

This sample code shows the contents of the myCardRenderer.js-meta.xml file.
Configure the renderer.json file.

Use the $ keyword to map the type to the component.

Here’s how to reference myCardRenderer to override the renderer for the taskCard custom Lightning type in the renderer.json file.

Example: Attribute Mapping

If you’re reusing an existing component and the property names don't match your schema (for example, the component uses title instead of cardName), you must map the properties.

Create the LWC.

This sample code shows myExistingCardRenderer.
Update the js-meta.xml file.

Expose the properties in targetConfigs to register them as valid input properties for the lightning__AgentforceOutput target.

This sample code shows the contents of themyExistingCardRenderer.js-meta.xml file.
Configure the renderer.json file with attribute mapping.

Use the attributes object to link schema fields to component properties.

This sample code shows how to reference myExistingCardRenderer to override the renderer for the taskCard custom Lightning type in the renderer.json file.

You must map the component’s properties to the corresponding properties in the Apex class, even if they have the same name. However, if the component receives the entire Apex class object through a single value attribute, you don’t need to map the individual attributes.

The expression "title": "{!$attrs.cardName}" links the cardName property of the TaskRecord Apex class to the title property of the LWC component myExistingCardRenderer (and vice versa).

Here’s what each element represents.

title: Property in the LWC component myExtistingCardRenderer
{!$attrs}: Pointer to the TaskRecord class
cardName: Property in the TaskRecord class
{!$attrs.cardName}: Evaluates to the specific value of the cardName property so it can be dynamically passed to the component

See Also