---
schema_version: "1"
id: 9af437de8108e1fd95a57948a06eacdc0ef118ac4335fd4097f3abf296a990c9
title: Define a Top-Level Collection Renderer Override
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-type-systems/lightning-types/guides/lightning-types-custom-collection-renderer.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-types/guide/lightning-types-custom-collection-renderer.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 55df9b96886bdcbef6f9a7f4c01e8f02892fd98c855cac6292869d5b23e9ce26
products:
  - Lightning Types Developer Guide
  - lightning-type-systems
---
# 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`.

```
+--lightningTypes
        +--hotelResponse
            +--schema.json
            +--lightningDesktopGenAi
               +--renderer.json
```

**important:** 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.

**note:** To view a complete, working example of an LWC collection renderer implementation, see [Customize UI for Output](https://developer.salesforce.com/docs/ai/agentforce/guide/lightning-types-example-collection-renderer.html#customize-ui-for-output).

1. [**Create the LWC**](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-introduction.html).<br /><br />This sample code shows the LWC component `hotelDetails`.

   ```js
   import { LightningElement, api } from "lwc";
   export default class HotelDetails extends LightningElement {
     @api value;
   }
   ```

2. **Configure the renderer.json file.**<br /><br />Use the `collection` key to specify that this override applies to lists.<br /><br />Here’s how to reference `hotelDetails` to override the renderer for the `Hotel` output in the `renderer.json` file.

   ```json
   {
     "collection": {
       "renderer": {
         "componentOverrides": {
           "$": {
             "definition": "c/hotelDetails"
           }
         }
       }
     }
   }
   ```

**See Also**

- [_Agentforce Developer Guide_: Custom Lightning Type Examples](https://developer.salesforce.com/docs/ai/agentforce/guide/lightning-types-examples.html)
- [_Salesforce Help_: Custom Lightning Types in the Salesforce Mobile App](https://help.salesforce.com/s/articleView?id=sf.salesforce_app_clt_mobile.htm&type=5)