diff --git a/src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts b/src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts
new file mode 100644
index 0000000000..60a77a4250
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts
@@ -0,0 +1,30 @@
+import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+
+/**
+ * Extends Array to add utility functions for accessing data type properties
+ * by alias, returning either the value or the complete DataTypePropertyPresentationModel object
+ */
+export class UmbDataTypePropertyCollection extends Array<DataTypePropertyPresentationModel> {
+	constructor(args: Array<DataTypePropertyPresentationModel> = []) {
+		super(...args);
+	}
+
+	private _getByAlias(alias: string) {
+		return this.find((x) => x.alias === alias);
+	}
+
+	getValueByAlias<T>(alias: string): T | undefined {
+		const property = this._getByAlias(alias);
+
+		if (property?.value === undefined || property?.value === null) {
+			return;
+		}
+
+		return property.value as T;
+	}
+
+	getByAlias(alias: string): DataTypePropertyPresentationModel | undefined {
+		const property = this._getByAlias(alias);
+		return property;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/data-type/index.ts b/src/Umbraco.Web.UI.Client/libs/data-type/index.ts
new file mode 100644
index 0000000000..5073b18ef1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/data-type/index.ts
@@ -0,0 +1 @@
+export * from './data-type-property-collection.class';
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/property-editor-ui-extension-element.interface.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/property-editor-ui-extension-element.interface.ts
index 44a9bd1e3b..5624f6f5f2 100644
--- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/property-editor-ui-extension-element.interface.ts
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/property-editor-ui-extension-element.interface.ts
@@ -1,6 +1,6 @@
-import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 export interface UmbPropertyEditorExtensionElement extends HTMLElement {
 	value: unknown;
-	config: DataTypePropertyPresentationModel[];
+	config: UmbDataTypePropertyCollection;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/property-type-based-property/property-type-based-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/property-type-based-property/property-type-based-property.element.ts
index 5712375742..8c757514d1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/property-type-based-property/property-type-based-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/property-type-based-property/property-type-based-property.element.ts
@@ -2,12 +2,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, property, state } from 'lit/decorators.js';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 import { UmbDataTypeRepository } from '../../../settings/data-types/repository/data-type.repository';
 import { UmbVariantId } from '../../variants/variant-id.class';
 import { UmbDocumentWorkspaceContext } from '../../../documents/documents/workspace/document-workspace.context';
 import type {
-	DataTypeResponseModel,
-	DataTypePropertyPresentationModel,
+	DataTypeResponseModel,	
 	PropertyTypeResponseModelBaseModel,
 } from '@umbraco-cms/backoffice/backend-api';
 import '../workspace-property/workspace-property.element';
@@ -16,8 +16,7 @@ import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-api';
 
 @customElement('umb-property-type-based-property')
-export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
-	
+export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {	
 
 	@property({ type: Object, attribute: false })
 	public get property(): PropertyTypeResponseModelBaseModel | undefined {
@@ -37,7 +36,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 	private _propertyEditorUiAlias?: string;
 
 	@state()
-	private _dataTypeData: DataTypePropertyPresentationModel[] = [];
+	private _dataTypeData = new UmbDataTypePropertyCollection();
 
 	private _dataTypeRepository: UmbDataTypeRepository = new UmbDataTypeRepository(this);
 	private _dataTypeObserver?: UmbObserverController<DataTypeResponseModel | undefined>;
@@ -96,7 +95,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 			this._dataTypeObserver = this.observe(
 				await this._dataTypeRepository.byId(dataTypeId),
 				(dataType) => {
-					this._dataTypeData = dataType?.values || [];
+					this._dataTypeData = new UmbDataTypePropertyCollection(dataType?.values || []);
 					this._propertyEditorUiAlias = dataType?.propertyEditorUiAlias || undefined;
 				},
 				'observeDataType'
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/workspace-property/workspace-property.element.ts
index e65ed465b0..5a1c84a87e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/workspace-property/workspace-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/workspace-property/workspace-property.element.ts
@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 import { UmbVariantId } from '../../variants/variant-id.class';
 import { UmbWorkspacePropertyContext } from './workspace-property.context';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
@@ -90,7 +91,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
 	 * @default ''
 	 */
 	@property({ type: Object, attribute: false })
-	public set config(value: DataTypePropertyPresentationModel[]) {
+	public set config(value: UmbDataTypePropertyCollection) {
 		this._propertyContext.setConfig(value);
 	}
 
@@ -201,7 +202,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
 						this._propertyContext.config,
 						(config) => {
 							if (this._element && config) {
-								this._element.config = config;
+								this._element.config = new UmbDataTypePropertyCollection(config);
 							}
 						},
 						'_observePropertyConfig'
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
index 8668375a0b..bfa32a2831 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 import { UmbVariantId } from '../../../variants/variant-id.class';
 import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../../../components/workspace/workspace-variant/workspace-variant.context';
 import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../components/workspace-property/workspace-property.context';
@@ -20,7 +21,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	@state()
 	private _routes: UmbRoute[] = [];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
index 29491255de..6658fadd35 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-block-list</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
index 5b6ec0a179..daaffb0389 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
@@ -5,6 +5,7 @@ import { UmbInputCheckboxListElement } from '../../../components/input-checkbox-
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-checkbox-list
@@ -23,7 +24,7 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem
 	}
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const listData = config.find((x) => x.alias === 'items');
 
 		if (!listData) return;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
index 354b032f7c..f08a302641 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
@@ -6,6 +6,7 @@ import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/exten
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-color-picker
@@ -22,7 +23,7 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 	private _swatches: UmbSwatchDetails[] = [];
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const useLabel = config.find((x) => x.alias === 'useLabel');
 		if (useLabel) this._showLabels = useLabel.value;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
index 5a5fda058f..0817101e37 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
@@ -5,6 +5,7 @@ import { InputType } from '@umbraco-ui/uui';
 import { UmbPropertyValueChangeEvent } from '../..';
 import { UmbPropertyEditorExtensionElement , PropertyEditorConfigDefaultData } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-date-picker
@@ -48,7 +49,7 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 	private _offsetTime?: boolean;
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<PropertyEditorConfigDefaultData>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const oldVal = this._inputType;
 
 		// Format string prevalue/config
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
index 4d7638d61c..5ffee69b9e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 
 import type { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element';
 import './property-editor-ui-date-picker.element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 export default {
 	title: 'Property Editor UIs/Date Picker',
@@ -30,30 +31,30 @@ WithDateValue.args = {
 
 export const WithFormat = Template.bind({});
 WithFormat.args = {
-	config: [
+	config: new UmbDataTypePropertyCollection([
 		{
 			alias: 'format',
 			value: 'dd/MM/yyyy HH:mm:ss',
 		},
-	],
+	]),
 };
 
 export const TimeOnly = Template.bind({});
 TimeOnly.args = {
-	config: [
+	config: new UmbDataTypePropertyCollection([
 		{
 			alias: 'format',
 			value: 'HH:mm:ss',
 		},
-	],
+	]),
 };
 
 export const DateOnly = Template.bind({});
 DateOnly.args = {
-	config: [
+	config: new UmbDataTypePropertyCollection([
 		{
 			alias: 'format',
 			value: 'dd/MM/yyyy',
 		},
-	],
+	]),
 };
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts
index 11a4002b8f..5a1b038e4e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts
@@ -2,6 +2,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 import { UUIInputElement } from '@umbraco-ui/uui';
 import { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element';
 import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 describe('UmbPropertyEditorUIDatePickerElement', () => {
 	let element: UmbPropertyEditorUIDatePickerElement;
@@ -25,13 +26,13 @@ describe('UmbPropertyEditorUIDatePickerElement', () => {
 	});
 
 	it('should show a type=date field if the format only contains a date', async () => {
-		element.config = [{ alias: 'format', value: 'YYYY-MM-dd' }];
+		element.config = new UmbDataTypePropertyCollection([{ alias: 'format', value: 'YYYY-MM-dd' }]);
 		await element.updateComplete;
 		expect(inputElement.type).to.equal('date');
 	});
 
 	it('should show a type=time field if the format only contains a time', async () => {
-		element.config = [{ alias: 'format', value: 'HH:mm' }];
+		element.config = new UmbDataTypePropertyCollection([{ alias: 'format', value: 'HH:mm' }]);
 		await element.updateComplete;
 		expect(inputElement.type).to.equal('time');
 	});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
index a9cbe55149..91aeb5f19e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-dropdown
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-dropdown</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
index 99f55f01f3..7aaba0e84a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
@@ -5,6 +5,7 @@ import { UUIColorPickerChangeEvent } from '@umbraco-ui/uui';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-eye-dropper
@@ -23,7 +24,7 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen
 	private _swatches: string[] = [];
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const showAlpha = config.find((x) => x.alias === 'showAlpha');
 		if (showAlpha) this._opacity = showAlpha.value;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
index a737fd7816..17e59e2243 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-icon-picker
@@ -16,7 +17,7 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implemen
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	private _modalContext?: UmbModalContext;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
index e6561e8ffc..97084bfae0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-image-cropper
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement implem
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config =	new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-image-cropper</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
index 2e07e6f3fa..0fff4c71e7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-image-crops-configuration
@@ -18,7 +19,7 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-image-crops-configuration</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts
index fcb662aaa5..10e097e478 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-label
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-label</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
index 3c58d3d278..3cce84bd3a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-markdown-editor
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-markdown-editor</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
index 1e02b68ff6..098cadbee8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
@@ -4,6 +4,7 @@ import { UmbInputMediaPickerElement } from '../../../../media/media/components/i
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-media-picker
@@ -21,7 +22,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme
 	}
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const validationLimit = config.find((x) => x.alias === 'validationLimit');
 		if (!validationLimit) return;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
index 88a034b12c..4c33e2316e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-member-group-picker
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-member-group-picker</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
index 84f1750cc1..72fe9c36d3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-member-picker
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-member-picker</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index b17bab751f..56dcffb40e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -2,11 +2,11 @@ import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import type { UUIModalSidebarSize } from '@umbraco-ui/uui';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 import { UmbInputMultiUrlPickerElement } from '../../../components/input-multi-url-picker/input-multi-url-picker.element';
 import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../components/workspace-property/workspace-property.context';
 import { UmbLinkPickerLink } from '@umbraco-cms/backoffice/modal';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
-import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
@@ -21,22 +21,14 @@ export class UmbPropertyEditorUIMultiUrlPickerElement
 	value: UmbLinkPickerLink[] = [];
 
 	@property({ type: Array, attribute: false })
-	public set config(config: DataTypePropertyPresentationModel[]) {
-		const overlaySize = config.find((x) => x.alias === 'overlaySize');
-		if (overlaySize) this._overlaySize = overlaySize.value;
-
-		const hideAnchor = config.find((x) => x.alias === 'hideAnchor');
-		if (hideAnchor) this._hideAnchor = hideAnchor.value;
-
-		const ignoreUserStartNodes = config.find((x) => x.alias === 'ignoreUserStartNodes');
-		if (ignoreUserStartNodes) this._ignoreUserStartNodes = ignoreUserStartNodes.value;
-
-		const maxNumber = config.find((x) => x.alias === 'maxNumber');
-		if (maxNumber) this._maxNumber = maxNumber.value;
-
-		const minNumber = config.find((x) => x.alias === 'minNumber');
-		if (minNumber) this._minNumber = minNumber.value;
+	public set config(config: UmbDataTypePropertyCollection) {
+		this._overlaySize = config.getValueByAlias('overlaySize');
+		this._hideAnchor = config.getValueByAlias('hideAnchor');
+		this._ignoreUserStartNodes = config.getValueByAlias('ignoreUserStartNodes');
+		this._minNumber = config.getValueByAlias('minNumber');
+		this._maxNumber = config.getValueByAlias('maxNumber');
 	}
+
 	@state()
 	private _overlaySize?: UUIModalSidebarSize;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
index c5a6594000..d665b25526 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
@@ -8,6 +8,7 @@ import UmbInputMultipleTextStringElement, {
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 export type MultipleTextStringConfigData = Array<{
 	alias: 'minNumber' | 'maxNumber';
@@ -26,7 +27,7 @@ export class UmbPropertyEditorUIMultipleTextStringElement
 	public value: MultipleTextStringValue = [];
 
 	@property({ type: Array, attribute: false })
-	public set config(config: MultipleTextStringConfigData) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		this._limitMin = config.find((x) => x.alias === 'minNumber')?.value;
 		this._limitMax = config.find((x) => x.alias === 'maxNumber')?.value;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
index d1ef1839a9..81dc2a2cde 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
@@ -5,6 +5,7 @@ import type { UmbInputNumberRangeElement } from '../../../components/input-numbe
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import '../../../components/input-number-range/input-number-range.element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 type ValueType = {
 	min?: number;
@@ -28,7 +29,7 @@ export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement impleme
 	}
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	private _onChange(event: CustomEvent) {
 		this.value = {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts
index b6c60c6897..28f3c328b1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 @customElement('umb-property-editor-ui-number')
 export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
@@ -12,7 +13,7 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	private onInput(e: InputEvent) {
 		this.value = (e.target as HTMLInputElement).value;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
index 8ee8c90107..8b00a9ceb2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-order-direction
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement impl
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-order-direction</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
index cb540b42e2..fb1f0b295b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-overlay-size
@@ -15,8 +16,8 @@ export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement impleme
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
-
+	public config = new UmbDataTypePropertyCollection();
+	
 	render() {
 		return html`<div>umb-property-editor-ui-overlay-size</div>`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
index dea337da8e..a89c723288 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
@@ -6,6 +6,7 @@ import type { UmbInputRadioButtonListElement } from '../../../components/input-r
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-radio-button-list
@@ -24,7 +25,7 @@ export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement imp
 	}
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const listData = config.find((x) => x.alias === 'items');
 
 		if (!listData) return;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/slider/property-editor-ui-slider.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/slider/property-editor-ui-slider.element.ts
index 9df7f09588..51a0839aa7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/slider/property-editor-ui-slider.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/slider/property-editor-ui-slider.element.ts
@@ -5,6 +5,7 @@ import UmbInputSliderElement from '../../../components/input-slider/input-slider
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-slider
@@ -36,7 +37,7 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
 	_max?: number;
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const enableRange = config.find((x) => x.alias === 'enableRange');
 		if (enableRange) this._enableRange = enableRange.value as boolean;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tags/property-editor-ui-tags.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tags/property-editor-ui-tags.element.ts
index 935121c1f3..95e58a518f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tags/property-editor-ui-tags.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tags/property-editor-ui-tags.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-tags
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-tags</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
index 6b90143ecd..d990941964 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 @customElement('umb-property-editor-ui-text-box')
 export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
@@ -12,7 +13,7 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	private onInput(e: InputEvent) {
 		this.value = (e.target as HTMLInputElement).value;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
index e4d52b1f6a..1470dc3539 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
@@ -8,6 +8,7 @@ import {
 } from '../../../components/workspace-property/workspace-property.context';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 @customElement('umb-property-editor-ui-textarea')
 export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	config = [];
+	config = new UmbDataTypePropertyCollection();
 
 	private propertyContext?: UmbWorkspacePropertyContext<string>;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
index 8ddcd9f1a2..d2630836a7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-tiny-mce
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-tiny-mce</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
index bbcbf4bee0..a9ba70e80f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
@@ -5,6 +5,7 @@ import { UmbInputToggleElement } from '../../../components/input-toggle/input-to
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-toggle
@@ -26,7 +27,7 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
 	_showLabels?: boolean;
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const defaultValue = config.find((x) => x.alias === 'default');
 		if (defaultValue) this.value = defaultValue.value as boolean;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index f17ee0500e..f1ffb5be3d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-tree-picker
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-tree-picker</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
index 7d88a22bde..a6b1ad7c82 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
@@ -5,6 +5,7 @@ import { UmbInputUploadFieldElement } from '../../../components/input-upload-fie
 import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-upload-field
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement impleme
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const fileExtensions = config.find((x) => x.alias === 'fileExtensions');
 		if (fileExtensions) this._fileExtensions = fileExtensions.value;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
index a836743822..00622340c3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-user-picker
@@ -13,7 +14,7 @@ export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implemen
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	// TODO: implement config
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
index df2b219321..5139a1803a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-value-type
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implement
 	value = '';
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public config = new UmbDataTypePropertyCollection();
 
 	render() {
 		return html`<div>umb-property-editor-ui-value-type</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
index 6015028fd2..9f809a7530 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
@@ -4,6 +4,7 @@ import type { UmbInputDocumentPickerElement } from '../../components/input-docum
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 @customElement('umb-property-editor-ui-document-picker')
 export class UmbPropertyEditorUIContentPickerElement
@@ -21,7 +22,7 @@ export class UmbPropertyEditorUIContentPickerElement
 	}
 
 	@property({ type: Array, attribute: false })
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
+	public set config(config: UmbDataTypePropertyCollection) {
 		const validationLimit = config.find((x) => x.alias === 'validationLimit');
 
 		this._limitMin = (validationLimit?.value as any).min;
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 8ec155f04a..d832a493d4 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -23,6 +23,7 @@
 			"@umbraco-cms/backoffice/context-api": ["libs/context-api"],
 			"@umbraco-cms/backoffice/controller": ["libs/controller"],
 			"@umbraco-cms/backoffice/css": ["libs/css/custom-properties.css"],
+			"@umbraco-cms/backoffice/data-type": ["libs/data-type"],
 			"@umbraco-cms/backoffice/element": ["libs/element"],
 			"@umbraco-cms/backoffice/element.js": ["libs/element"],
 			"@umbraco-cms/backoffice/entity-action": ["libs/entity-action"],
diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
index 4e33441cf3..c435b2fd94 100644
--- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
+++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
@@ -42,6 +42,7 @@ export default {
 						'@umbraco-cms/backoffice/content-type': './libs/content-type/index.ts',
 						'@umbraco-cms/backoffice/context-api': './libs/context-api/index.ts',
 						'@umbraco-cms/backoffice/controller': './libs/controller/index.ts',
+						'@umbraco-cms/backoffice/data-type': './libs/data-type/index.ts',
 						'@umbraco-cms/backoffice/element': './libs/element/index.ts',
 						'@umbraco-cms/backoffice/entity-action': './libs/entity-action/index.ts',
 						'@umbraco-cms/backoffice/events': './libs/umb-events/index.ts',