High-Level Guide to Creating Custom Property Types and Editors

After you decide which data validations and property editors you want for the properties in your custom component, it’s time to start building. This step-by-step summary outlines the process.

Creating a custom property type requires you to create a new metadata type, LightningTypeBundle, and a new Lightning web component for each custom property editor. These are the custom elements required for the Custom Article component example.

articleDate requires a standard Lightning type
textAlignment requires a custom property editor
layoutProperties requires a custom property type and a custom property editor

These steps summarize how to build the custom component. To follow along, download the sample components.

Reference a Lightning Type

Refer to the list of Lightning property types. (See Lightning Types Reference in the Lightning Types Developer Guide)
To use a Lightning type in the Custom Article component, reference it by type attribute in the component’s js-meta.xml file. (See Reference a Custom Property Type by Type Attribute.)

Reference a Custom Property Editor

Create a Lightning web component called alignmentCPE to act as the property editor for Text Alignment. (See Create a Custom Property Editor.)
To show the custom property editor in the Custom Article component, reference it by editor attribute in the component’s js-meta.xml file. (See Reference a Custom Property Editor by Editor Attribute.)

Reference a Custom Property Type That Includes a Custom Property Editor

Create a custom property editor for Border Style called borderStyleDropdownCPE. (See Create a Custom Property Editor.)
Create a custom property type called layoutProperty and define its schema.json file. (See Create a LightningTypeBundle.)
Specify the custom property editor and define the layout for the properties for the custom property type.
1. Create an editor.json file in the experienceBuilder folder. (See Lightning Type UI Configuration)
2. In the editor.json file, reference the custom property editor in the componentOverrides object and specify the layout of the properties in the layout object.
To show the custom property type in the Custom Article component, reference it by type attribute in the component’s js-meta.xml file.

See Also

Code samples: custom-property-editor-code-samples
Decide on the Validation for Each Property in the Component
Decide on the Editor for Each Property in the Component
Lightning Types Developer Guide: Lightning Types Reference