diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
index 99e55283a7..afc4ae44bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
@@ -60,7 +60,7 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 		if (!property) return;
 
 		// Take key and parse to modal:
-		console.log('property key:', property.key!);
+		console.log('property key:', property.id!);
 
 		const modalHandler = this.#modalContext?.open(UMB_PROPERTY_SETTINGS_MODAL);
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index ff90a90a2e..7e9e6efa8a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -12,15 +12,15 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Folder 1',
-		key: 'dt-folder1',
-		parentKey: null,
+		id: 'dt-folder1',
+		parentId: null,
 		isFolder: true,
 	},
 	{
 		$type: 'data-type',
 		type: 'data-type',
-		key: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
-		parentKey: null,
+		id: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+		parentId: null,
 		name: 'Textstring',
 		propertyEditorAlias: 'Umbraco.TextBox',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.TextBox',
@@ -30,8 +30,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Text',
-		key: 'dt-textBox',
-		parentKey: null,
+		id: 'dt-textBox',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.TextBox',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.TextBox',
 		values: [
@@ -45,8 +45,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Text Area',
-		key: 'dt-textArea',
-		parentKey: null,
+		id: 'dt-textArea',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.TextArea',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.TextArea',
 		values: [],
@@ -55,8 +55,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'My JS Property Editor',
-		key: 'dt-custom',
-		parentKey: null,
+		id: 'dt-custom',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.JSON',
 		propertyEditorUiAlias: 'My.PropertyEditorUI.Custom',
 		values: [],
@@ -65,8 +65,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Color Picker',
-		key: 'dt-colorPicker',
-		parentKey: null,
+		id: 'dt-colorPicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.ColorPicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.ColorPicker',
 		values: [
@@ -121,8 +121,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Content Picker',
-		key: 'dt-contentPicker',
-		parentKey: null,
+		id: 'dt-contentPicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.ContentPicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.DocumentPicker',
 		values: [
@@ -136,8 +136,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Eye Dropper',
-		key: 'dt-eyeDropper',
-		parentKey: null,
+		id: 'dt-eyeDropper',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.ColorPicker.EyeDropper',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.EyeDropper',
 		values: [
@@ -173,8 +173,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Multi URL Picker',
-		key: 'dt-multiUrlPicker',
-		parentKey: null,
+		id: 'dt-multiUrlPicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.MultiUrlPicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.MultiUrlPicker',
 		values: [
@@ -204,8 +204,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Multi Node Tree Picker',
-		key: 'dt-multiNodeTreePicker',
-		parentKey: null,
+		id: 'dt-multiNodeTreePicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.MultiNodeTreePicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.TreePicker',
 		values: [],
@@ -214,8 +214,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Date Picker',
-		key: 'dt-datePicker',
-		parentKey: null,
+		id: 'dt-datePicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.DateTime',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.DatePicker',
 		values: [
@@ -233,8 +233,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		name: 'Date Picker With Time',
 		type: 'data-type',
-		key: 'dt-datePicker-time',
-		parentKey: null,
+		id: 'dt-datePicker-time',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.DateTime',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.DatePicker',
 		values: [
@@ -252,8 +252,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		name: 'Time',
 		type: 'data-type',
-		key: 'dt-time',
-		parentKey: null,
+		id: 'dt-time',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.DateTime',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.DatePicker',
 		values: [
@@ -271,8 +271,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Email',
-		key: 'dt-email',
-		parentKey: null,
+		id: 'dt-email',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.EmailAddress',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Email',
 		values: [],
@@ -281,8 +281,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Multiple Text String',
-		key: 'dt-multipleTextString',
-		parentKey: null,
+		id: 'dt-multipleTextString',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.MultipleTextString',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.MultipleTextString',
 		values: [
@@ -300,8 +300,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Dropdown',
-		key: 'dt-dropdown',
-		parentKey: null,
+		id: 'dt-dropdown',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.DropDown.Flexible',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Dropdown',
 		values: [],
@@ -310,8 +310,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Slider',
-		key: 'dt-slider',
-		parentKey: null,
+		id: 'dt-slider',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.Slider',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Slider',
 		values: [
@@ -345,8 +345,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Toggle',
-		key: 'dt-toggle',
-		parentKey: null,
+		id: 'dt-toggle',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.TrueFalse',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Toggle',
 		values: [
@@ -372,8 +372,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Tags',
-		key: 'dt-tags',
-		parentKey: null,
+		id: 'dt-tags',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.Tags',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Tags',
 		values: [],
@@ -382,8 +382,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Markdown Editor',
-		key: 'dt-markdownEditor',
-		parentKey: null,
+		id: 'dt-markdownEditor',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.MarkdownEditor',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.MarkdownEditor',
 		values: [],
@@ -392,8 +392,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Radio Button List',
-		key: 'dt-radioButtonList',
-		parentKey: null,
+		id: 'dt-radioButtonList',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.RadioButtonList',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.RadioButtonList',
 		values: [
@@ -411,8 +411,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Checkbox List',
-		key: 'dt-checkboxList',
-		parentKey: null,
+		id: 'dt-checkboxList',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.CheckboxList',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.CheckboxList',
 		values: [
@@ -430,8 +430,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Block List',
-		key: 'dt-blockList',
-		parentKey: null,
+		id: 'dt-blockList',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.BlockList',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.BlockList',
 		values: [],
@@ -440,8 +440,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Media Picker',
-		key: 'dt-mediaPicker',
-		parentKey: null,
+		id: 'dt-mediaPicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.MediaPicker3',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.MediaPicker',
 		values: [],
@@ -450,8 +450,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Image Cropper',
-		key: 'dt-imageCropper',
-		parentKey: null,
+		id: 'dt-imageCropper',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.ImageCropper',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.ImageCropper',
 		values: [],
@@ -460,8 +460,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Upload Field',
-		key: 'dt-uploadField',
-		parentKey: null,
+		id: 'dt-uploadField',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.UploadField',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.UploadField',
 		values: [
@@ -475,8 +475,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Block Grid',
-		key: 'dt-blockGrid',
-		parentKey: null,
+		id: 'dt-blockGrid',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.BlockGrid',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.BlockGrid',
 		values: [],
@@ -485,8 +485,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Collection View',
-		key: 'dt-collectionView',
-		parentKey: null,
+		id: 'dt-collectionView',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.ListView',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.CollectionView',
 		values: [],
@@ -495,8 +495,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Icon Picker',
-		key: 'dt-iconPicker',
-		parentKey: null,
+		id: 'dt-iconPicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.IconPicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.IconPicker',
 		values: [],
@@ -505,8 +505,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Number Range',
-		key: 'dt-numberRange',
-		parentKey: null,
+		id: 'dt-numberRange',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.JSON',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.NumberRange',
 		values: [],
@@ -515,8 +515,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Order Direction',
-		key: 'dt-orderDirection',
-		parentKey: null,
+		id: 'dt-orderDirection',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.JSON',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.OrderDirection',
 		values: [],
@@ -525,8 +525,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Overlay Size',
-		key: 'dt-overlaySize',
-		parentKey: null,
+		id: 'dt-overlaySize',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.JSON',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.OverlaySize',
 		values: [],
@@ -535,8 +535,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Rich Text Editor',
-		key: 'dt-richTextEditor',
-		parentKey: null,
+		id: 'dt-richTextEditor',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.TinyMCE',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE',
 		values: [],
@@ -545,8 +545,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Label',
-		key: 'dt-label',
-		parentKey: null,
+		id: 'dt-label',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.Label',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Label',
 		values: [],
@@ -555,8 +555,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Integer',
-		key: 'dt-integer',
-		parentKey: null,
+		id: 'dt-integer',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.Integer',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Integer',
 		values: [],
@@ -565,8 +565,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Decimal',
-		key: 'dt-decimal',
-		parentKey: null,
+		id: 'dt-decimal',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.Decimal',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Decimal',
 		values: [],
@@ -575,8 +575,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'User Picker',
-		key: 'dt-userPicker',
-		parentKey: null,
+		id: 'dt-userPicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.UserPicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.UserPicker',
 		values: [],
@@ -585,8 +585,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Member Picker',
-		key: 'dt-memberPicker',
-		parentKey: null,
+		id: 'dt-memberPicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.MemberPicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.MemberPicker',
 		values: [],
@@ -595,8 +595,8 @@ export const data: Array<(DataTypeResponseModel & { type: 'data-type' }) | Folde
 		$type: 'data-type',
 		type: 'data-type',
 		name: 'Member Group Picker',
-		key: 'dt-memberGroupPicker',
-		parentKey: null,
+		id: 'dt-memberGroupPicker',
+		parentId: null,
 		propertyEditorAlias: 'Umbraco.MemberGroupPicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.MemberGroupPicker',
 		values: [],
@@ -613,25 +613,25 @@ class UmbDataTypeData extends UmbEntityData<DataTypeResponseModel | FolderTreeIt
 	}
 
 	getTreeRoot(): Array<FolderTreeItemResponseModel> {
-		const rootItems = this.data.filter((item) => item.parentKey === null);
+		const rootItems = this.data.filter((item) => item.parentId === null);
 		return rootItems.map((item) => createFolderTreeItem(item));
 	}
 
-	getTreeItemChildren(key: string): Array<FolderTreeItemResponseModel> {
-		const childItems = this.data.filter((item) => item.parentKey === key);
+	getTreeItemChildren(id: string): Array<FolderTreeItemResponseModel> {
+		const childItems = this.data.filter((item) => item.parentId === id);
 		return childItems.map((item) => createFolderTreeItem(item));
 	}
 
-	getTreeItem(keys: Array<string>): Array<FolderTreeItemResponseModel> {
-		const items = this.data.filter((item) => keys.includes(item.key ?? ''));
+	getTreeItem(ids: Array<string>): Array<FolderTreeItemResponseModel> {
+		const items = this.data.filter((item) => ids.includes(item.id ?? ''));
 		return items.map((item) => createFolderTreeItem(item));
 	}
 
-	createFolder(folder: CreateFolderRequestModel & { key: string | undefined }) {
+	createFolder(folder: CreateFolderRequestModel & { id: string | undefined }) {
 		const newFolder: FolderTreeItemResponseModel = {
 			name: folder.name,
-			key: folder.key,
-			parentKey: folder.parentKey,
+			id: folder.id,
+			parentId: folder.parentId,
 			$type: 'data-type',
 			type: 'data-type',
 			isFolder: true,
@@ -642,11 +642,11 @@ class UmbDataTypeData extends UmbEntityData<DataTypeResponseModel | FolderTreeIt
 	}
 
 	// TODO: this could be reused across other types that support folders
-	deleteFolder(key: string) {
-		const item = this.getByKey(key) as FolderTreeItemResponseModel;
-		if (!item) throw new Error(`Item with key ${key} not found`);
-		if (!item.isFolder) throw new Error(`Item with key ${key} is not a folder`);
-		this.data = this.data.filter((item) => item.key !== key);
+	deleteFolder(id: string) {
+		const item = this.getByKey(id) as FolderTreeItemResponseModel;
+		if (!item) throw new Error(`Item with id ${id} not found`);
+		if (!item.isFolder) throw new Error(`Item with id ${id} is not a folder`);
+		this.data = this.data.filter((item) => item.id !== id);
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts
index 1df0a4c0ea..0f40b5d37f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts
@@ -8,9 +8,9 @@ import {
 
 export const data: Array<DocumentTypeResponseModel> = [
 	{
-		allowedTemplateKeys: [],
-		defaultTemplateKey: null,
-		key: 'all-property-editors-document-type-key',
+		allowedTemplateIds: [],
+		defaultTemplateId: null,
+		id: 'all-property-editors-document-type-key',
 		alias: 'blogPost',
 		name: 'Blog Post',
 		description: null,
@@ -21,12 +21,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 		isElement: false,
 		properties: [
 			{
-				key: '2',
-				containerKey: 'all-properties-group-key',
+				id: '2',
+				containerId: 'all-properties-group-key',
 				alias: 'colorPicker',
 				name: 'Color Picker',
 				description: '',
-				dataTypeKey: 'dt-colorPicker',
+				dataTypeId: 'dt-colorPicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -40,12 +40,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '3',
-				containerKey: 'all-properties-group-key',
+				id: '3',
+				containerId: 'all-properties-group-key',
 				alias: 'contentPicker',
 				name: 'Content Picker',
 				description: '',
-				dataTypeKey: 'dt-contentPicker',
+				dataTypeId: 'dt-contentPicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -59,12 +59,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '4',
-				containerKey: 'all-properties-group-key',
+				id: '4',
+				containerId: 'all-properties-group-key',
 				alias: 'eyeDropper',
 				name: 'Eye Dropper',
 				description: '',
-				dataTypeKey: 'dt-eyeDropper',
+				dataTypeId: 'dt-eyeDropper',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -78,12 +78,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '5',
-				containerKey: 'all-properties-group-key',
+				id: '5',
+				containerId: 'all-properties-group-key',
 				alias: 'multiUrlPicker',
 				name: 'Multi URL Picker',
 				description: '',
-				dataTypeKey: 'dt-multiUrlPicker',
+				dataTypeId: 'dt-multiUrlPicker',
 				variesByCulture: true,
 				variesBySegment: false,
 				validation: {
@@ -97,12 +97,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '6',
-				containerKey: 'all-properties-group-key',
+				id: '6',
+				containerId: 'all-properties-group-key',
 				alias: 'multiNodeTreePicker',
 				name: 'Multi Node Tree Picker',
 				description: '',
-				dataTypeKey: 'dt-multiNodeTreePicker',
+				dataTypeId: 'dt-multiNodeTreePicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -116,12 +116,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '7',
-				containerKey: 'all-properties-group-key',
+				id: '7',
+				containerId: 'all-properties-group-key',
 				alias: 'datePicker',
 				name: 'Date Picker',
 				description: '',
-				dataTypeKey: 'dt-datePicker',
+				dataTypeId: 'dt-datePicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -135,12 +135,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '8',
-				containerKey: 'all-properties-group-key',
+				id: '8',
+				containerId: 'all-properties-group-key',
 				alias: 'email',
 				name: 'Email',
 				description: '',
-				dataTypeKey: 'dt-email',
+				dataTypeId: 'dt-email',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -154,12 +154,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '9',
-				containerKey: 'all-properties-group-key',
+				id: '9',
+				containerId: 'all-properties-group-key',
 				alias: 'textBox',
 				name: 'Text Box',
 				description: '',
-				dataTypeKey: 'dt-textBox',
+				dataTypeId: 'dt-textBox',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -173,12 +173,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '19',
-				containerKey: 'all-properties-group-key',
+				id: '19',
+				containerId: 'all-properties-group-key',
 				alias: 'dropdown',
 				name: 'Dropdown',
 				description: '',
-				dataTypeKey: 'dt-dropdown',
+				dataTypeId: 'dt-dropdown',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -192,12 +192,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '11',
-				containerKey: 'all-properties-group-key',
+				id: '11',
+				containerId: 'all-properties-group-key',
 				alias: 'textArea',
 				name: 'Text Area',
 				description: '',
-				dataTypeKey: 'dt-textArea',
+				dataTypeId: 'dt-textArea',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -211,12 +211,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '12',
-				containerKey: 'all-properties-group-key',
+				id: '12',
+				containerId: 'all-properties-group-key',
 				alias: 'slider',
 				name: 'Slider',
 				description: '',
-				dataTypeKey: 'dt-slider',
+				dataTypeId: 'dt-slider',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -230,12 +230,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '13',
-				containerKey: 'all-properties-group-key',
+				id: '13',
+				containerId: 'all-properties-group-key',
 				alias: 'toggle',
 				name: 'Toggle',
 				description: '',
-				dataTypeKey: 'dt-toggle',
+				dataTypeId: 'dt-toggle',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -249,12 +249,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '14',
-				containerKey: 'all-properties-group-key',
+				id: '14',
+				containerId: 'all-properties-group-key',
 				alias: 'tags',
 				name: 'Tags',
 				description: '',
-				dataTypeKey: 'dt-tags',
+				dataTypeId: 'dt-tags',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -268,12 +268,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '15',
-				containerKey: 'all-properties-group-key',
+				id: '15',
+				containerId: 'all-properties-group-key',
 				alias: 'markdownEditor',
 				name: 'MarkdownEditor',
 				description: '',
-				dataTypeKey: 'dt-markdownEditor',
+				dataTypeId: 'dt-markdownEditor',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -287,12 +287,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '16',
-				containerKey: 'all-properties-group-key',
+				id: '16',
+				containerId: 'all-properties-group-key',
 				alias: 'radioButtonList',
 				name: 'Radio Button List',
 				description: '',
-				dataTypeKey: 'dt-radioButtonList',
+				dataTypeId: 'dt-radioButtonList',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -306,12 +306,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '17',
-				containerKey: 'all-properties-group-key',
+				id: '17',
+				containerId: 'all-properties-group-key',
 				alias: 'checkboxList',
 				name: 'Checkbox List',
 				description: '',
-				dataTypeKey: 'dt-checkboxList',
+				dataTypeId: 'dt-checkboxList',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -325,12 +325,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '18',
-				containerKey: 'all-properties-group-key',
+				id: '18',
+				containerId: 'all-properties-group-key',
 				alias: 'blockList',
 				name: 'Block List',
 				description: '',
-				dataTypeKey: 'dt-blockList',
+				dataTypeId: 'dt-blockList',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -344,12 +344,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '19',
-				containerKey: 'all-properties-group-key',
+				id: '19',
+				containerId: 'all-properties-group-key',
 				alias: 'mediaPicker',
 				name: 'Media Picker',
 				description: '',
-				dataTypeKey: 'dt-mediaPicker',
+				dataTypeId: 'dt-mediaPicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -363,12 +363,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '20',
-				containerKey: 'all-properties-group-key',
+				id: '20',
+				containerId: 'all-properties-group-key',
 				alias: 'imageCropper',
 				name: 'Image Cropper',
 				description: '',
-				dataTypeKey: 'dt-imageCropper',
+				dataTypeId: 'dt-imageCropper',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -382,12 +382,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '21',
-				containerKey: 'all-properties-group-key',
+				id: '21',
+				containerId: 'all-properties-group-key',
 				alias: 'uploadField',
 				name: 'Upload Field',
 				description: '',
-				dataTypeKey: 'dt-uploadField',
+				dataTypeId: 'dt-uploadField',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -401,12 +401,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '22',
-				containerKey: 'all-properties-group-key',
+				id: '22',
+				containerId: 'all-properties-group-key',
 				alias: 'blockGrid',
 				name: 'Block Grid',
 				description: '',
-				dataTypeKey: 'dt-blockGrid',
+				dataTypeId: 'dt-blockGrid',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -420,12 +420,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '23',
-				containerKey: 'all-properties-group-key',
+				id: '23',
+				containerId: 'all-properties-group-key',
 				alias: 'blockGrid',
 				name: 'Icon Picker',
 				description: '',
-				dataTypeKey: 'dt-iconPicker',
+				dataTypeId: 'dt-iconPicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -439,12 +439,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '24',
-				containerKey: 'all-properties-group-key',
+				id: '24',
+				containerId: 'all-properties-group-key',
 				alias: 'numberRange',
 				name: 'Number Range',
 				description: '',
-				dataTypeKey: 'dt-numberRange',
+				dataTypeId: 'dt-numberRange',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -458,12 +458,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '25',
-				containerKey: 'all-properties-group-key',
+				id: '25',
+				containerId: 'all-properties-group-key',
 				alias: 'orderDirection',
 				name: 'Order Direction',
 				description: '',
-				dataTypeKey: 'dt-orderDirection',
+				dataTypeId: 'dt-orderDirection',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -477,12 +477,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '26',
-				containerKey: 'all-properties-group-key',
+				id: '26',
+				containerId: 'all-properties-group-key',
 				alias: 'overlaySize',
 				name: 'Overlay Size',
 				description: '',
-				dataTypeKey: 'dt-overlaySize',
+				dataTypeId: 'dt-overlaySize',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -496,12 +496,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '27',
-				containerKey: 'all-properties-group-key',
+				id: '27',
+				containerId: 'all-properties-group-key',
 				alias: 'label',
 				name: 'Label',
 				description: '',
-				dataTypeKey: 'dt-label',
+				dataTypeId: 'dt-label',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -515,12 +515,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '28',
-				containerKey: 'all-properties-group-key',
+				id: '28',
+				containerId: 'all-properties-group-key',
 				alias: 'integer',
 				name: 'Integer',
 				description: '',
-				dataTypeKey: 'dt-integer',
+				dataTypeId: 'dt-integer',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -534,12 +534,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '29',
-				containerKey: 'all-properties-group-key',
+				id: '29',
+				containerId: 'all-properties-group-key',
 				alias: 'decimal',
 				name: 'Decimal',
 				description: '',
-				dataTypeKey: 'dt-decimal',
+				dataTypeId: 'dt-decimal',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -553,12 +553,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '30',
-				containerKey: 'all-properties-group-key',
+				id: '30',
+				containerId: 'all-properties-group-key',
 				alias: 'memberPicker',
 				name: 'Member Picker',
 				description: '',
-				dataTypeKey: 'dt-memberPicker',
+				dataTypeId: 'dt-memberPicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -572,12 +572,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '31',
-				containerKey: 'all-properties-group-key',
+				id: '31',
+				containerId: 'all-properties-group-key',
 				alias: 'memberGroupPicker',
 				name: 'Member Group Picker',
 				description: '',
-				dataTypeKey: 'dt-memberGroupPicker',
+				dataTypeId: 'dt-memberGroupPicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -591,12 +591,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '32',
-				containerKey: 'all-properties-group-key',
+				id: '32',
+				containerId: 'all-properties-group-key',
 				alias: 'userPicker',
 				name: 'User Picker',
 				description: '',
-				dataTypeKey: 'dt-userPicker',
+				dataTypeId: 'dt-userPicker',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -612,8 +612,8 @@ export const data: Array<DocumentTypeResponseModel> = [
 		],
 		containers: [
 			{
-				key: 'all-properties-group-key',
-				parentKey: null,
+				id: 'all-properties-group-key',
+				parentId: null,
 				name: 'Content',
 				type: 'Group',
 				sortOrder: 0,
@@ -629,9 +629,9 @@ export const data: Array<DocumentTypeResponseModel> = [
 	},
 
 	{
-		allowedTemplateKeys: [],
-		defaultTemplateKey: null,
-		key: '29643452-cff9-47f2-98cd-7de4b6807681',
+		allowedTemplateIds: [],
+		defaultTemplateId: null,
+		id: '29643452-cff9-47f2-98cd-7de4b6807681',
 		alias: 'blogPost',
 		name: 'Blog Post',
 		description: null,
@@ -642,12 +642,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 		isElement: false,
 		properties: [
 			{
-				key: '5b4ca208-134e-4865-b423-06e5e97adf3c',
-				containerKey: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75',
+				id: '5b4ca208-134e-4865-b423-06e5e97adf3c',
+				containerId: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75',
 				alias: 'blogPostText',
 				name: 'Blog Post Text',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -661,12 +661,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: 'ef7096b6-7c9e-49ba-8d49-395111e65ea2',
-				containerKey: '227d6ed2-e118-4494-b8f2-deb69854a56a',
+				id: 'ef7096b6-7c9e-49ba-8d49-395111e65ea2',
+				containerId: '227d6ed2-e118-4494-b8f2-deb69854a56a',
 				alias: 'blogTextStringUnderMasterTab',
 				name: 'Blog text string under master tab',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: true,
 				variesBySegment: false,
 				validation: {
@@ -680,12 +680,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: 'e010c429-b298-499a-9bfe-79687af8972a',
-				containerKey: '22177c49-ecba-4f2e-b7fa-3f2c04d02cfb',
+				id: 'e010c429-b298-499a-9bfe-79687af8972a',
+				containerId: '22177c49-ecba-4f2e-b7fa-3f2c04d02cfb',
 				alias: 'blogTextStringUnderGroupUnderMasterTab',
 				name: 'Blog text string under group under master tab',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: true,
 				variesBySegment: false,
 				validation: {
@@ -699,12 +699,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '1a22749a-c7d2-44bb-b36b-c977c2ced6ef',
-				containerKey: '2c943997-b685-432d-a6c5-601d8e7a298a',
+				id: '1a22749a-c7d2-44bb-b36b-c977c2ced6ef',
+				containerId: '2c943997-b685-432d-a6c5-601d8e7a298a',
 				alias: 'localBlogTabString',
 				name: 'Local Blog Tab String',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -718,12 +718,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: '22',
-				containerKey: '2c943997-b685-432d-a6c5-601d8e7a298a',
+				id: '22',
+				containerId: '2c943997-b685-432d-a6c5-601d8e7a298a',
 				alias: 'blockGrid',
 				name: 'Block Grid',
 				description: '',
-				dataTypeKey: 'dt-blockGrid',
+				dataTypeId: 'dt-blockGrid',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -739,29 +739,29 @@ export const data: Array<DocumentTypeResponseModel> = [
 		],
 		containers: [
 			{
-				key: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75',
-				parentKey: null,
+				id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75',
+				parentId: null,
 				name: 'Content-group',
 				type: 'Group',
 				sortOrder: 0,
 			},
 			{
-				key: '227d6ed2-e118-4494-b8f2-deb69854a56a',
-				parentKey: null,
+				id: '227d6ed2-e118-4494-b8f2-deb69854a56a',
+				parentId: null,
 				name: 'Master Tab',
 				type: 'Tab',
 				sortOrder: 0,
 			},
 			{
-				key: '22177c49-ecba-4f2e-b7fa-3f2c04d02cfb',
-				parentKey: '227d6ed2-e118-4494-b8f2-deb69854a56a',
+				id: '22177c49-ecba-4f2e-b7fa-3f2c04d02cfb',
+				parentId: '227d6ed2-e118-4494-b8f2-deb69854a56a',
 				name: 'Blog Group under master tab',
 				type: 'Group',
 				sortOrder: 0,
 			},
 			{
-				key: '2c943997-b685-432d-a6c5-601d8e7a298a',
-				parentKey: null,
+				id: '2c943997-b685-432d-a6c5-601d8e7a298a',
+				parentId: null,
 				name: 'Local blog tab',
 				type: 'Tab',
 				sortOrder: 1,
@@ -769,17 +769,17 @@ export const data: Array<DocumentTypeResponseModel> = [
 		],
 		allowedContentTypes: [
 			{
-				key: '29643452-cff9-47f2-98cd-7de4b6807681',
+				id: '29643452-cff9-47f2-98cd-7de4b6807681',
 				sortOrder: 0,
 			},
 		],
 		compositions: [
 			{
-				key: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
+				id: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
 				compositionType: ContentTypeCompositionTypeModel.INHERITANCE,
 			},
 			{
-				key: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
+				id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
 				compositionType: ContentTypeCompositionTypeModel.COMPOSITION,
 			},
 		],
@@ -790,9 +790,9 @@ export const data: Array<DocumentTypeResponseModel> = [
 		},
 	},
 	{
-		allowedTemplateKeys: ['916cfecc-3295-490c-a16d-c41fa9f72980'],
-		defaultTemplateKey: '916cfecc-3295-490c-a16d-c41fa9f72980',
-		key: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
+		allowedTemplateIds: ['916cfecc-3295-490c-a16d-c41fa9f72980'],
+		defaultTemplateId: '916cfecc-3295-490c-a16d-c41fa9f72980',
+		id: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
 		alias: 'masterPage',
 		name: 'Master Page',
 		description: null,
@@ -803,12 +803,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 		isElement: false,
 		properties: [
 			{
-				key: '5e5f7456-c751-4846-9f2b-47965cc96ec6',
-				containerKey: '6f281e5a-0242-4649-bd9e-d6bf87f92b41',
+				id: '5e5f7456-c751-4846-9f2b-47965cc96ec6',
+				containerId: '6f281e5a-0242-4649-bd9e-d6bf87f92b41',
 				alias: 'masterText',
 				name: 'Master text',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -824,8 +824,8 @@ export const data: Array<DocumentTypeResponseModel> = [
 		],
 		containers: [
 			{
-				key: '6f281e5a-0242-4649-bd9e-d6bf87f92b41',
-				parentKey: null,
+				id: '6f281e5a-0242-4649-bd9e-d6bf87f92b41',
+				parentId: null,
 				name: 'Master Tab',
 				type: 'Tab',
 				sortOrder: 0,
@@ -840,9 +840,9 @@ export const data: Array<DocumentTypeResponseModel> = [
 		},
 	},
 	{
-		allowedTemplateKeys: [],
-		defaultTemplateKey: null,
-		key: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
+		allowedTemplateIds: [],
+		defaultTemplateId: null,
+		id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
 		alias: 'baseElementType',
 		name: 'Base Element Type',
 		description: null,
@@ -853,12 +853,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 		isElement: true,
 		properties: [
 			{
-				key: 'b92de6ac-1a22-4a45-a481-b6cae1cccbbf',
-				containerKey: '1e845ca8-1e3e-4b03-be1d-0b4149ce2129',
+				id: 'b92de6ac-1a22-4a45-a481-b6cae1cccbbf',
+				containerId: '1e845ca8-1e3e-4b03-be1d-0b4149ce2129',
 				alias: 'pageTitle',
 				name: 'Page title',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -874,8 +874,8 @@ export const data: Array<DocumentTypeResponseModel> = [
 		],
 		containers: [
 			{
-				key: '1e845ca8-1e3e-4b03-be1d-0b4149ce2129',
-				parentKey: null,
+				id: '1e845ca8-1e3e-4b03-be1d-0b4149ce2129',
+				parentId: null,
 				name: 'Content-group',
 				type: 'Group',
 				sortOrder: 0,
@@ -890,13 +890,13 @@ export const data: Array<DocumentTypeResponseModel> = [
 		},
 	},
 	{
-		allowedTemplateKeys: [
+		allowedTemplateIds: [
 			'2bf464b6-3aca-4388-b043-4eb439cc2643',
 			'9a84c0b3-03b4-4dd4-84ac-706740ac0f71',
 			'9a84c0b3-03b4-4dd4-84ac-706740ac0f72',
 		],
-		defaultTemplateKey: '2bf464b6-3aca-4388-b043-4eb439cc2643',
-		key: 'simple-document-type-key',
+		defaultTemplateId: '2bf464b6-3aca-4388-b043-4eb439cc2643',
+		id: 'simple-document-type-key',
 		alias: 'simpleDocumentType',
 		name: 'Simple Document Type',
 		description: null,
@@ -907,12 +907,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 		isElement: false,
 		properties: [
 			{
-				key: '1680d4d2-cda8-4ac2-affd-a69fc10382b1',
-				containerKey: '341b8521-fd43-4333-ae7a-a10cbbc6f4b0',
+				id: '1680d4d2-cda8-4ac2-affd-a69fc10382b1',
+				containerId: '341b8521-fd43-4333-ae7a-a10cbbc6f4b0',
 				alias: 'prop1',
 				name: 'Prop 1',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -928,16 +928,16 @@ export const data: Array<DocumentTypeResponseModel> = [
 		],
 		containers: [
 			{
-				key: '341b8521-fd43-4333-ae7a-a10cbbc6f4b0',
-				parentKey: null,
+				id: '341b8521-fd43-4333-ae7a-a10cbbc6f4b0',
+				parentId: null,
 				name: 'Content',
 				type: 'Group',
 				sortOrder: 0,
 			},
 		],
 		allowedContentTypes: [
-			{ key: 'simple-document-type-key', sortOrder: 0 },
-			{ key: 'simple-document-type-2-key', sortOrder: 0 },
+			{ id: 'simple-document-type-key', sortOrder: 0 },
+			{ id: 'simple-document-type-2-key', sortOrder: 0 },
 		],
 		compositions: [],
 		cleanup: {
@@ -947,9 +947,9 @@ export const data: Array<DocumentTypeResponseModel> = [
 		},
 	},
 	{
-		allowedTemplateKeys: [],
-		defaultTemplateKey: null,
-		key: 'simple-document-type-2-key',
+		allowedTemplateIds: [],
+		defaultTemplateId: null,
+		id: 'simple-document-type-2-key',
 		alias: 'simpleDocumentType2',
 		name: 'Simple Document Type 2',
 		description: null,
@@ -960,12 +960,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 		isElement: false,
 		properties: [
 			{
-				key: '82d4b050-b128-42fe-ac8e-d5586e533592',
-				containerKey: 'b275052a-1868-4901-bc8c-2b35b78a9ab2',
+				id: '82d4b050-b128-42fe-ac8e-d5586e533592',
+				containerId: 'b275052a-1868-4901-bc8c-2b35b78a9ab2',
 				alias: 'prop1',
 				name: 'Prop 1',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -979,12 +979,12 @@ export const data: Array<DocumentTypeResponseModel> = [
 				},
 			},
 			{
-				key: 'beadc69a-d669-4d01-9919-98bafba31e57',
-				containerKey: 'b275052a-1868-4901-bc8c-2b35b78a9ab2',
+				id: 'beadc69a-d669-4d01-9919-98bafba31e57',
+				containerId: 'b275052a-1868-4901-bc8c-2b35b78a9ab2',
 				alias: 'prop2',
 				name: 'Prop 2',
 				description: null,
-				dataTypeKey: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
+				dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 				variesByCulture: false,
 				variesBySegment: false,
 				validation: {
@@ -1000,14 +1000,14 @@ export const data: Array<DocumentTypeResponseModel> = [
 		],
 		containers: [
 			{
-				key: 'b275052a-1868-4901-bc8c-2b35b78a9ab2',
-				parentKey: null,
+				id: 'b275052a-1868-4901-bc8c-2b35b78a9ab2',
+				parentId: null,
 				name: 'Content',
 				type: 'Group',
 				sortOrder: 0,
 			},
 		],
-		allowedContentTypes: [{ key: 'simple-document-type-key', sortOrder: 0 }],
+		allowedContentTypes: [{ id: 'simple-document-type-key', sortOrder: 0 }],
 		compositions: [],
 		cleanup: {
 			preventCleanup: false,
@@ -1023,9 +1023,9 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		name: 'All property editors document type',
 		type: 'document-type',
 		hasChildren: false,
-		key: 'all-property-editors-document-type-key',
+		id: 'all-property-editors-document-type-key',
 		isContainer: false,
-		parentKey: null,
+		parentId: null,
 		icon: '',
 	},
 	{
@@ -1033,9 +1033,9 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		name: 'Page Document Type',
 		type: 'document-type',
 		hasChildren: false,
-		key: '29643452-cff9-47f2-98cd-7de4b6807681',
+		id: '29643452-cff9-47f2-98cd-7de4b6807681',
 		isContainer: false,
-		parentKey: null,
+		parentId: null,
 		icon: 'umb:document',
 	},
 	{
@@ -1043,9 +1043,9 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		name: 'Page Document Type Compositional',
 		type: 'document-type',
 		hasChildren: false,
-		key: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
+		id: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
 		isContainer: false,
-		parentKey: null,
+		parentId: null,
 		icon: 'umb:document',
 	},
 	{
@@ -1053,9 +1053,9 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		name: 'Page Document Type Inherited',
 		type: 'document-type',
 		hasChildren: false,
-		key: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
+		id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
 		isContainer: false,
-		parentKey: null,
+		parentId: null,
 		icon: 'umb:document',
 	},
 	{
@@ -1063,9 +1063,9 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		name: 'Simple Document Type',
 		type: 'document-type',
 		hasChildren: false,
-		key: 'simple-document-type-key',
+		id: 'simple-document-type-key',
 		isContainer: false,
-		parentKey: null,
+		parentId: null,
 		icon: 'umb:document',
 	},
 	{
@@ -1073,9 +1073,9 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		name: 'Simple Document Type 2',
 		type: 'document-type',
 		hasChildren: false,
-		key: 'simple-document-type-2-key',
+		id: 'simple-document-type-2-key',
 		isContainer: false,
-		parentKey: null,
+		parentId: null,
 		icon: 'umb:document',
 	},
 ];
@@ -1092,24 +1092,24 @@ class UmbDocumentTypeData extends UmbEntityData<DocumentTypeResponseModel> {
 	}
 
 	getTreeRoot(): Array<DocumentTypeTreeItemResponseModel> {
-		const rootItems = this.treeData.filter((item) => item.parentKey === null);
+		const rootItems = this.treeData.filter((item) => item.parentId === null);
 		return rootItems.map((item) => createDocumentTypeTreeItem(item));
 	}
 
-	getTreeItemChildren(key: string): Array<DocumentTypeTreeItemResponseModel> {
-		const childItems = this.treeData.filter((item) => item.parentKey === key);
+	getTreeItemChildren(id: string): Array<DocumentTypeTreeItemResponseModel> {
+		const childItems = this.treeData.filter((item) => item.parentId === id);
 		return childItems.map((item) => createDocumentTypeTreeItem(item));
 	}
 
-	getTreeItem(keys: Array<string>): Array<DocumentTypeTreeItemResponseModel> {
-		const items = this.treeData.filter((item) => keys.includes(item.key ?? ''));
+	getTreeItem(ids: Array<string>): Array<DocumentTypeTreeItemResponseModel> {
+		const items = this.treeData.filter((item) => ids.includes(item.id ?? ''));
 		return items.map((item) => createDocumentTypeTreeItem(item));
 	}
 
-	getAllowedTypesOf(key: string): Array<DocumentTypeTreeItemResponseModel> {
-		const documentType = this.getByKey(key);
-		const allowedTypeKeys = documentType?.allowedContentTypes?.map((documentType) => documentType.key) ?? [];
-		const items = this.treeData.filter((item) => allowedTypeKeys.includes(item.key ?? ''));
+	getAllowedTypesOf(id: string): Array<DocumentTypeTreeItemResponseModel> {
+		const documentType = this.getByKey(id);
+		const allowedTypeKeys = documentType?.allowedContentTypes?.map((documentType) => documentType.id) ?? [];
+		const items = this.treeData.filter((item) => allowedTypeKeys.includes(item.id ?? ''));
 		return items.map((item) => createDocumentTypeTreeItem(item));
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/health-check.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/health-check.handlers.ts
index de8d67686f..a4e075f140 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/health-check.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/health-check.handlers.ts
@@ -54,9 +54,9 @@ export const handlers = [
 
 	rest.post<HealthCheckActionRequestModel>(umbracoPath('/health-check/execute-action'), async (req, res, ctx) => {
 		const body = await req.json<HealthCheckActionRequestModel>();
-		const healthCheckKey = body.healthCheckKey;
-		// Find the health check based on the healthCheckKey from the healthGroups[].checks
-		const healthCheck = healthGroups.flatMap((group) => group.checks).find((check) => check?.key === healthCheckKey);
+		const healthCheckId = body.healthCheckId;
+		// Find the health check based on the healthCheckId from the healthGroups[].checks
+		const healthCheck = healthGroups.flatMap((group) => group.checks).find((check) => check?.id === healthCheckId);
 
 		if (!healthCheck) {
 			return res(ctx.status(404));
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/package.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/package.handlers.ts
index 886d08f5ef..af6f8a9f56 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/package.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/package.handlers.ts
@@ -54,40 +54,40 @@ export const handlers = [
 	rest.post(umbracoPath('/package/created'), async (_req, res, ctx) => {
 		//save
 		const data: PackageMigrationStatusResponseModel = await _req.json();
-		const newPackage: PackageDefinitionResponseModel = { ...data, key: uuidv4() };
+		const newPackage: PackageDefinitionResponseModel = { ...data, id: uuidv4() };
 		packageArray.push(newPackage);
 		return res(ctx.status(200), ctx.json<PackageDefinitionResponseModel>(newPackage));
 	}),
 
-	rest.get(umbracoPath('/package/created/:key'), (_req, res, ctx) => {
+	rest.get(umbracoPath('/package/created/:id'), (_req, res, ctx) => {
 		//read 1
-		const key = _req.params.key as string;
-		if (!key) return res(ctx.status(404));
-		const found = packageArray.find((p) => p.key == key);
+		const id = _req.params.id as string;
+		if (!id) return res(ctx.status(404));
+		const found = packageArray.find((p) => p.id == id);
 		if (!found) return res(ctx.status(404));
 		return res(ctx.status(200), ctx.json<PackageDefinitionResponseModel>(found));
 	}),
 
-	rest.put(umbracoPath('/package/created/:key'), async (_req, res, ctx) => {
+	rest.put(umbracoPath('/package/created/:id'), async (_req, res, ctx) => {
 		//update
 		const data: PackageDefinitionResponseModel = await _req.json();
-		if (!data.key) return;
-		const index = packageArray.findIndex((x) => x.key === data.key);
+		if (!data.id) return;
+		const index = packageArray.findIndex((x) => x.id === data.id);
 		packageArray[index] = data;
 		return res(ctx.status(200));
 	}),
 
-	rest.delete(umbracoPath('/package/created/:key'), (_req, res, ctx) => {
+	rest.delete(umbracoPath('/package/created/:id'), (_req, res, ctx) => {
 		//delete
-		const key = _req.params.key as string;
-		if (!key) return res(ctx.status(404));
-		const index = packageArray.findIndex((p) => p.key == key);
+		const id = _req.params.id as string;
+		if (!id) return res(ctx.status(404));
+		const index = packageArray.findIndex((p) => p.id == id);
 		if (index <= -1) return res(ctx.status(404));
 		packageArray.splice(index, 1);
 		return res(ctx.status(200));
 	}),
 
-	rest.get(umbracoPath('/package/created/:key/download'), (_req, res, ctx) => {
+	rest.get(umbracoPath('/package/created/:id/download'), (_req, res, ctx) => {
 		//download
 		return res(ctx.status(200));
 	}),
@@ -95,7 +95,7 @@ export const handlers = [
 
 const packageArray: PackageDefinitionResponseModel[] = [
 	{
-		key: '2a0181ec-244b-4068-a1d7-2f95ed7e6da6',
+		id: '2a0181ec-244b-4068-a1d7-2f95ed7e6da6',
 		packagePath: undefined,
 		name: 'My Package',
 		//contentNodeId?: string | null;
@@ -113,13 +113,13 @@ const packageArray: PackageDefinitionResponseModel[] = [
 		//dictionaryItems?: Array<string>;
 	},
 	{
-		key: '2a0181ec-244b-4068-a1d7-2f95ed7e6da7',
+		id: '2a0181ec-244b-4068-a1d7-2f95ed7e6da7',
 		packagePath: undefined,
 		name: 'My Second Package',
 	},
 
 	{
-		key: '2a0181ec-244b-4068-a1d7-2f95ed7e6da8',
+		id: '2a0181ec-244b-4068-a1d7-2f95ed7e6da8',
 		packagePath: undefined,
 		name: 'My Third Package',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts
index 0b408a404a..af6d756e80 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts
@@ -35,21 +35,21 @@ export const handlers = [
 		}
 	}),
 
-	rest.get(umbracoPath('/redirect-management/:key'), async (_req, res, ctx) => {
-		const key = _req.params.key as string;
-		if (!key) return res(ctx.status(404));
-		if (key === 'status') return res(ctx.status(200), ctx.json<RedirectUrlStatusResponseModel>(UrlTracker));
+	rest.get(umbracoPath('/redirect-management/:id'), async (_req, res, ctx) => {
+		const id = _req.params.id as string;
+		if (!id) return res(ctx.status(404));
+		if (id === 'status') return res(ctx.status(200), ctx.json<RedirectUrlStatusResponseModel>(UrlTracker));
 
-		const PagedRedirectUrlObject = _getRedirectUrlByKey(key);
+		const PagedRedirectUrlObject = _getRedirectUrlByKey(id);
 
 		return res(ctx.status(200), ctx.json<PagedRedirectUrlResponseModel>(PagedRedirectUrlObject));
 	}),
 
-	rest.delete(umbracoPath('/redirect-management/:key'), async (_req, res, ctx) => {
-		const key = _req.params.key as string;
-		if (!key) return res(ctx.status(404));
+	rest.delete(umbracoPath('/redirect-management/:id'), async (_req, res, ctx) => {
+		const id = _req.params.id as string;
+		if (!id) return res(ctx.status(404));
 
-		const PagedRedirectUrlObject = _deleteRedirectUrlByKey(key);
+		const PagedRedirectUrlObject = _deleteRedirectUrlByKey(id);
 
 		return res(ctx.status(200), ctx.json<any>(PagedRedirectUrlObject));
 	}),
@@ -69,13 +69,13 @@ export const handlers = [
 
 const UrlTracker: RedirectUrlStatusResponseModel = { status: RedirectStatusModel.ENABLED, userIsAdmin: true };
 
-const _getRedirectUrlByKey = (key: string) => {
+const _getRedirectUrlByKey = (id: string) => {
 	const PagedResult: PagedRedirectUrlResponseModel = {
 		total: 0,
 		items: [],
 	};
 	RedirectUrlData.forEach((data) => {
-		if (data.key?.includes(key)) {
+		if (data.id?.includes(id)) {
 			PagedResult.items.push(data);
 			PagedResult.total++;
 		}
@@ -83,8 +83,8 @@ const _getRedirectUrlByKey = (key: string) => {
 	return PagedResult;
 };
 
-const _deleteRedirectUrlByKey = (key: string) => {
-	const index = RedirectUrlData.findIndex((data) => data.key === key);
+const _deleteRedirectUrlByKey = (id: string) => {
+	const index = RedirectUrlData.findIndex((data) => data.id === id);
 	if (index > -1) RedirectUrlData.splice(index, 1);
 	const PagedResult: PagedRedirectUrlResponseModel = {
 		items: RedirectUrlData,
@@ -95,81 +95,81 @@ const _deleteRedirectUrlByKey = (key: string) => {
 
 const RedirectUrlData: RedirectUrlResponseModel[] = [
 	{
-		key: '1',
+		id: '1',
 		created: '2022-12-05T13:59:43.6827244',
 		destinationUrl: 'kitty.com',
 		originalUrl: 'kitty.dk',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2',
+		contentId: '7191c911-6747-4824-849e-5208e2b31d9f2',
 	},
 	{
-		key: '2',
+		id: '2',
 		created: '2022-13-05T13:59:43.6827244',
 		destinationUrl: 'umbraco.com',
 		originalUrl: 'umbraco.dk',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31d9f',
+		contentId: '7191c911-6747-4824-849e-5208e2b31d9f',
 	},
 	{
-		key: '3',
+		id: '3',
 		created: '2022-12-05T13:59:43.6827244',
 		destinationUrl: 'uui.umbraco.com',
 		originalUrl: 'uui.umbraco.dk',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31d9f23',
+		contentId: '7191c911-6747-4824-849e-5208e2b31d9f23',
 	},
 	{
-		key: '4',
+		id: '4',
 		created: '2022-13-05T13:59:43.6827244',
 		destinationUrl: 'umbracoffee.com',
 		originalUrl: 'umbracoffee.dk',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31d9fdsaa',
+		contentId: '7191c911-6747-4824-849e-5208e2b31d9fdsaa',
 	},
 	{
-		key: '5',
+		id: '5',
 		created: '2022-12-05T13:59:43.6827244',
 		destinationUrl: 'section/settings',
 		originalUrl: 'section/settings/123',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2e23',
+		contentId: '7191c911-6747-4824-849e-5208e2b31d9f2e23',
 	},
 	{
-		key: '6',
+		id: '6',
 		created: '2022-13-05T13:59:43.6827244',
 		destinationUrl: 'dxp.com',
 		originalUrl: 'dxp.dk',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31d9fsafsfd',
+		contentId: '7191c911-6747-4824-849e-5208e2b31d9fsafsfd',
 	},
 	{
-		key: '7',
+		id: '7',
 		created: '2022-12-05T13:59:43.6827244',
 		destinationUrl: 'google.com',
 		originalUrl: 'google.dk',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2cxza',
+		contentId: '7191c911-6747-4824-849e-5208e2b31d9f2cxza',
 	},
 	{
-		key: '8',
+		id: '8',
 		created: '2022-13-05T13:59:43.6827244',
 		destinationUrl: 'unicorns.com',
 		originalUrl: 'unicorns.dk',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31d9fweds',
+		contentId: '7191c911-6747-4824-849e-5208e2b31d9fweds',
 	},
 	{
-		key: '9',
+		id: '9',
 		created: '2022-12-05T13:59:43.6827244',
 		destinationUrl: 'h5yr.com',
 		originalUrl: 'h5yr.dk',
-		contentKey: '7191c911-6747-4824-849e-5208e2b31ddsfsdsfadsfdx9f2',
+		contentId: '7191c911-6747-4824-849e-5208e2b31ddsfsdsfadsfdx9f2',
 	},
 	{
-		key: '10',
+		id: '10',
 		created: '2022-13-05T13:59:43.6827244',
 		destinationUrl: 'our.umbraco.com',
 		originalUrl: 'our.umbraco.dk',
-		contentKey: '7191c911-6747-4824-849e-52dsacx08e2b31d9dsafdsff',
+		contentId: '7191c911-6747-4824-849e-52dsacx08e2b31d9dsafdsff',
 	},
 	{
-		key: '11',
+		id: '11',
 		created: '2022-13-05T13:59:43.6827244',
 		destinationUrl: 'your.umbraco.com',
 		originalUrl: 'your.umbraco.dk',
-		contentKey: '7191c911-6747-4824-849e-52dsacx08e2b31d9fsda',
+		contentId: '7191c911-6747-4824-849e-52dsacx08e2b31d9fsda',
 	},
 ];