# 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 | Default | 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 }
};
```