PropertyDefinition

Import it from @grafloria/renderer.

Definition of a single property in a property schema

This is the core interface that defines how a property should be edited in the UI. Each property definition specifies:

What property key it maps to in the NodeModel
How it should be displayed (label, description)
What editor component to use
Validation rules
Conditional visibility
Grouping and ordering

ts
interface PropertyDefinition

Properties

Name	Type	Description
`key`	`string`	Property key in NodeModel (must match the property name)
`label`	`string`	Display label shown in UI
`editor`	`PropertyEditorType`	Editor type to use for this property
`defaultValue?`	`any`	Default value if property is not set
`description?`	`string`	Help text or tooltip description
`validation?`	`PropertyValidation`	Validation rules for this property
`condition?`	`PropertyCondition`	Conditional visibility based on other property values
`group?`	`string`	Group name for organizing properties (optional)
`order?`	`number`	Display order within group (default: definition order)
`display?`	`PropertyDisplayOptions`	Display options and hints for the editor

Example

Basic string property

typescript
const prop: PropertyDefinition = {
  key: 'name',
  label: 'Name',
  editor: 'string',
  validation: { required: true, minLength: 3 }
};

Example

Number property with validation

typescript
const prop: PropertyDefinition = {
  key: 'port',
  label: 'Port',
  editor: 'number',
  validation: { min: 1, max: 65535 },
  defaultValue: 8080
};

Example

Conditional property

typescript
const prop: PropertyDefinition = {
  key: 'customColor',
  label: 'Custom Color',
  editor: 'color',
  condition: { property: 'useCustomColor', operator: '==', value: true }
};

Was this page helpful?