diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MarkdownEditor.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MarkdownEditor.ts
new file mode 100644
index 0000000000..30aa9fe60c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MarkdownEditor.ts
@@ -0,0 +1,8 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Markdown Editor',
+	alias: 'Umbraco.MarkdownEditor',
+	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 4492724934..49621ed137 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
@@ -13,6 +13,7 @@ import { manifest as textArea } from './Umbraco.TextArea';
 import { manifest as slider } from './Umbraco.Slider';
 import { manifest as trueFalse } from './Umbraco.TrueFalse';
 import { manifest as tags } from './Umbraco.Tags';
+import { manifest as markdownEditor } from './Umbraco.MarkdownEditor';
 
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
@@ -32,6 +33,7 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 	slider,
 	trueFalse,
 	tags,
+	markdownEditor,
 	{
 		type: 'propertyEditorModel',
 		name: 'Decimal',
@@ -50,12 +52,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 		alias: 'Umbraco.Integer',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Markdown editor',
-		alias: 'Umbraco.MarkdownEditor',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'Rich Text Editor',
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 5749caf0c2..92603a34d5 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
@@ -13,6 +13,7 @@ import { manifest as textArea } from './textarea/manifests';
 import { manifest as slider } from './slider/manifests';
 import { manifest as toggle } from './toggle/manifests';
 import { manifest as tags } from './tags/manifests';
+import { manifest as markdownEditor } from './markdown-editor/manifests';
 
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
@@ -32,6 +33,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 	slider,
 	toggle,
 	tags,
+	markdownEditor,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.BlockList',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/manifests.ts
new file mode 100644
index 0000000000..b3f1e12abb
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/manifests.ts
@@ -0,0 +1,36 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.MarkdownEditor',
+	name: 'Markdown Editor Property Editor UI',
+	loader: () => import('./property-editor-ui-markdown-editor.element'),
+	meta: {
+		label: 'Markdown Editor',
+		propertyEditorModel: 'Umbraco.MarkdownEditor',
+		icon: 'umb:code',
+		group: 'pickers',
+		config: {
+			properties: [
+				{
+					alias: 'preview',
+					label: 'Preview',
+					description: 'Display a live preview',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+				{
+					alias: 'defaultValue',
+					label: 'Default value',
+					description: 'If value is blank, the editor will show this',
+					propertyEditorUI: 'Umb.PropertyEditorUI.TextArea',
+				},
+				{
+					alias: 'overlaySize',
+					label: 'Overlay Size',
+					description: 'Select the width of the overlay.',
+					propertyEditorUI: 'Umb.PropertyEditorUI.OverlaySize',
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
new file mode 100644
index 0000000000..0ac40ef5d3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-markdown-editor
+ */
+@customElement('umb-property-editor-ui-markdown-editor')
+export class UmbPropertyEditorUIMarkdownEditorElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-markdown-editor</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIMarkdownEditorElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-markdown-editor': UmbPropertyEditorUIMarkdownEditorElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.stories.ts
new file mode 100644
index 0000000000..33ba0d5203
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIMarkdownEditorElement } from './property-editor-ui-markdown-editor.element';
+import './property-editor-ui-markdown-editor.element';
+
+export default {
+	title: 'Property Editor UIs/Markdown Editor',
+	component: 'umb-property-editor-ui-markdown-editor',
+	id: 'umb-property-editor-ui-markdown-editor',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIMarkdownEditorElement> = () =>
+	html`<umb-property-editor-ui-markdown-editor></umb-property-editor-ui-markdown-editor>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.test.ts
new file mode 100644
index 0000000000..93ec2d48e0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUIMarkdownEditorElement } from './property-editor-ui-markdown-editor.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUIMarkdownEditorElement', () => {
+  let element: UmbPropertyEditorUIMarkdownEditorElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-markdown-editor></umb-property-editor-ui-markdown-editor> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIMarkdownEditorElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
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 3cfa597793..4a1d250c58 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
@@ -252,6 +252,19 @@ export const data: Array<DataTypeDetails> = [
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.Tags',
 		data: [],
 	},
+	{
+		name: 'Markdown Editor',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-markdownEditor',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.MarkdownEditor',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.MarkdownEditor',
+		data: [],
+	},
 ];
 
 // Temp mocked database
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
index f2d13fdcea..bcbc1b91c3 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
@@ -96,6 +96,12 @@ export const data: Array<DocumentDetails> = [
 				description: '',
 				dataTypeKey: 'dt-tags',
 			},
+			{
+				alias: 'markdownEditor',
+				label: 'MarkdownEditor',
+				description: '',
+				dataTypeKey: 'dt-markdownEditor',
+			},
 		],
 		data: [],
 		variants: [],