Define a Top-Level Collection Renderer Override

Associate a custom LWC for rendering structured lists of data.

For example, you have a custom Lightning type named hotelResponse that returns a list of hotels. You configure renderer.json to render the entire list of hotel data.

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

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 list via the value property.

  1. Create the LWC.

    This sample code shows the LWC component hotelDetails.

  2. Configure the renderer.json file.

    Use the collection key to specify that this override applies to lists.

    Here’s how to reference hotelDetails to override the renderer for the Hotel output in the renderer.json file.

See Also