Component schema

Description of the component plugin schema

📘

Schema JSON changes in development

Changes saved to the schema.json file are not hot reloaded. The app builder must be refreshed.

Provides a number of attributes that determine the available options in the settings panel and how the component is displayed in the component tree.

Required fields are marked by an asterisk.

Property

Type

Description

name*

string

A unique name for your component.

friendlyName*

string

The name that is displayed in the app builder.

icon*

string

The name of the icon that is shown in the component tree.

A full list of the available icons can be found here. Simply remove any spaces from the names, e.g. DeviceLaptop

settings*

array

The list of additional settings beyond the defaults.

context

array

A list of data bindings that are provided by the component.

styles

array

Shorthand for adding settings for styling.

Includes: "margin", "padding", "size", "background", "border"

hasChildren

boolean

Determines if the component can be a container for other components or not.

showSettingsBar

boolean

Determines if the preview settings bar will float above a selected component.

info

string

An optional info message to display at the bottom of the component settings in the builder.

Settings

The settings array defines which settings are rendered inside the builder for this component. If a settings object contains "section": true then it is expected to be a section with its own array of settings.

Required fields are marked by an asterisk.

Property

Type

Description

type*

string

The type of the setting.

A full list of setting types can be found in the componentMap

key*

string

A unique identifier for the setting

label*

string

The label to show in the builder for this setting

dependsOn

string | object

Specifies another setting which this one depends on. This setting will not be shown unless the other setting exists.

If a string value is provided, a single setting key is expected. If an object, setting and value keys are expected, which will check against a specific value.

defaultValue

any

The default value for this setting for newly created components

options

array

A list of options for settings of type select

min

number

The minimum value of the setting

max

number

The maximum value of the setting

showInBar

boolean

Whether to show this setting in the preview settings bar, if enabled for this component

barStyle

BarStyle

The style of bar component to show for this setting

placeholder

string

The placeholder value to be passed to the rendered settings component

section

boolean

Indicates if a settings section is being defined

Sections cannot be nested within another section

name
[section only]

string

The name of the section

Settings options

If a setting is of type select, then an options array must also be specified to control which options are available for the setting. The options passed in must have the following structure:

Key

Type

Description

label

string

The readable label shown for this option

value

any

The option value

barIcon

string

If showing this setting in the settings bar and using a bar type of buttons, this key defines which spectrum icon to render in the bar

A full list of the available icons can be found here. Simply remove any spaces from the names, e.g. DeviceLaptop

barTitle

string

If showing this setting in the settings bar and using a bar type of buttons, this key defines the title text to be shown when hovering over the icon

Enumerations

A general table of the enumerated values that can be used throughout the component schema. Each enumeration value is comma separated and case sensitive.

NameValues
BarStylebuttons, picker

Did this page help you?