Define a Property-Level Editor Override

You can define a specific editor for an individual property within your custom Lightning type in the editor.json file. This editor applies only to the specified property, while default editors continue to handle the remaining properties.

For example, you have a custom Lightning type named contactType with two properties: firstName and lastName. You want to use a custom input component to handle the lastName property (perhaps to add specific validation or styling), while the default text editor handles the firstName.

Here’s an example of what the editor.json file organization looks like for the custom Lightning type contactType.

Example: Configuration Using Property Names

This example shows you how to configure a component to handle a specific property. The component receives only the value for that property via an @api value property.

1. Define the schema.json file.
   
   This schema defines the data structure. It defines a firstName and lastName property, but you override only the lastName.

2. Create the LWC Bundle.
   
   Create a custom Lightning Web Component (such as c/customLastNameInput) to handle the specific property.
   
   The customLastNameInput.html template binds the standard input component to your custom logic.

   The customLastNameInput.js file handles the data flow. The component exposes public properties—such as value, label, and required—to receive data. To capture the user's input, the component dispatches a valuechange event whenever the value updates.

   The customLastNameInput.js-meta.xml file exposes the component to the editor.

3. Configure the editor.json file.
   
   Use the property name lastName as the key in the componentOverrides section.
   
   Here’s how to reference customLastNameInput to override the editor in the editor.json file.

Example: Layout Configuration

If you're reusing an existing component and decide to use layouts, you can combine the layout and componentOverrides sections in the editor.json file. With this approach, you control the visual arrangement of properties while simultaneously assigning a specific custom component to handle the behavior of an individual property.

In this scenario, you arrange the firstName and lastName properties horizontally by using a layout, while specifically overriding the lastName property to use a reused custom component (c/customLastNameInput).

1. Define the schema.json file.
   
   This schema defines the data structure. It defines a firstName and lastName property, but you override only the lastName.

2. Create the LWC Bundle.
   
   Create a custom Lightning Web Component (such as c/customLastNameInput) to handle the specific property.
   
   The customLastNameInput.html template binds the standard input component to your custom logic.

   The customLastNameInput.js file handles the data flow. The component exposes public properties—such as value, label, and required—to receive data. To capture the user's input, the component dispatches a valuechange event whenever the value updates.

   The customLastNameInput.js-meta.xml file exposes the component to the editor.

3. Configure the editor.json file.
   
   Use the property name lastName as the key in the componentOverrides section.
   
   Here’s how to reference customLastNameInput to override the editor in the editor.json file.

   When you use lightning/propertyLayout to place a property, the editor checks for a corresponding componentOverrides definition. If an override exists (such as in the lastName example), the custom component renders. Otherwise, the default input renders.