diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ContentPicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ContentPicker.ts
new file mode 100644
index 0000000000..27731b8bf8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ContentPicker.ts
@@ -0,0 +1,19 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Content Picker',
+	alias: 'Umbraco.ContentPicker',
+	meta: {
+		config: {
+			properties: [
+				{
+					alias: 'startNodeId',
+					label: 'Start node',
+					description: '',
+					propertyEditorUI: 'Umb.PropertyEditorUI.TreePicker',
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.JSON.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.JSON.ts
new file mode 100644
index 0000000000..33a09adbef
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.JSON.ts
@@ -0,0 +1,8 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'JSON model',
+	alias: 'Umbraco.JSON',
+	meta: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
index 3d3d37b71b..93ea3b3373 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
@@ -1,14 +1,12 @@
 import { manifest as UmbracoColorPicker } from './Umbraco.ColorPicker';
+import { manifest as UmbracoContentPicker } from './Umbraco.ContentPicker';
+import { manifest as UmbracoJSON } from './Umbraco.JSON';
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
 export const manifests: Array<ManifestPropertyEditorModel> = [
 	UmbracoColorPicker,
-	{
-		type: 'propertyEditorModel',
-		name: 'Content Picker',
-		alias: 'Umbraco.ContentPicker',
-		meta: {},
-	},
+	UmbracoContentPicker,
+	UmbracoJSON,
 	{
 		type: 'propertyEditorModel',
 		name: 'Eye Dropper Color Picker',
@@ -205,12 +203,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 		alias: 'Umbraco.MediaPicker3',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Custom Property Editor',
-		alias: 'Umbraco.Custom',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'Icon Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/manifests.ts
new file mode 100644
index 0000000000..cc0fead291
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/manifests.ts
@@ -0,0 +1,14 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.ColorPicker',
+	name: 'Color Picker Property Editor UI',
+	loader: () => import('./property-editor-ui-color-picker.element'),
+	meta: {
+		label: 'Color Picker',
+		propertyEditorModel: 'Umbraco.ColorPicker',
+		icon: 'umb:colorpicker',
+		group: 'pickers',
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/manifests.ts
new file mode 100644
index 0000000000..fc48d2f811
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/manifests.ts
@@ -0,0 +1,24 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.ContentPicker',
+	name: 'Content Picker Property Editor UI',
+	loader: () => import('./property-editor-ui-content-picker.element'),
+	meta: {
+		label: 'Content Picker',
+		propertyEditorModel: 'Umbraco.ContentPicker',
+		icon: 'umb:document',
+		group: 'common',
+		config: {
+			properties: [
+				{
+					alias: 'showOpenButton',
+					label: 'Show open button',
+					description: 'Opens the node in a dialog',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
index fa3e2fb5db..6e01449678 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
@@ -1,18 +1,12 @@
+import { manifest as ColorPicker } from './color-picker/manifests';
+import { manifest as ContentPicker } from './content-picker/manifests';
+import { manifest as TreePicker } from './tree-picker/manifests';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
 export const manifests: Array<ManifestPropertyEditorUI> = [
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.ColorPicker',
-		name: 'Color Picker Property Editor UI',
-		loader: () => import('./color-picker/property-editor-ui-color-picker.element'),
-		meta: {
-			label: 'Color Picker',
-			propertyEditorModel: 'Umbraco.ColorPicker',
-			icon: 'umb:colorpicker',
-			group: 'pickers',
-		},
-	},
+	ColorPicker,
+	ContentPicker,
+	TreePicker,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.BlockList',
@@ -95,18 +89,6 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 			propertyEditorModel: 'Umbraco.Integer',
 		},
 	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.ContentPicker',
-		name: 'Content Picker Property Editor UI',
-		loader: () => import('./content-picker/property-editor-ui-content-picker.element'),
-		meta: {
-			label: 'Content Picker',
-			propertyEditorModel: 'Umbraco.ContentPicker',
-			icon: 'umb:document',
-			group: 'common',
-		},
-	},
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.IconPicker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts
new file mode 100644
index 0000000000..ea85a03b9f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts
@@ -0,0 +1,14 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.TreePicker',
+	name: 'Tree Picker Property Editor UI',
+	loader: () => import('./property-editor-ui-tree-picker.element'),
+	meta: {
+		label: 'Tree Picker',
+		icon: 'umb:page-add',
+		group: 'pickers',
+		propertyEditorModel: 'Umbraco.JSON',
+	},
+};