diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index 222aba5c2a..fe7bb84c12 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -10,6 +10,7 @@ import { UmbDataTypeStore } from '../src/core/stores/data-type/data-type.store';
 import { UmbDocumentTypeStore } from '../src/core/stores/document-type.store';
 import { UmbNodeStore } from '../src/core/stores/node.store';
 import { UmbPropertyEditorStore } from '../src/core/stores/property-editor/property-editor.store';
+import { UmbPropertyEditorConfigStore } from '../src/core/stores/property-editor-config/property-editor-config.store';
 import { onUnhandledRequest } from '../src/mocks/browser';
 import { handlers } from '../src/mocks/browser-handlers';
 import { internalManifests } from '../src/temp-internal-manifests';
@@ -41,6 +42,12 @@ const propertyEditorStoreProvider = (story) => html`
 	>
 `;
 
+const propertyEditorConfigStoreProvider = (story) => html`
+	<umb-context-provider key="umbPropertyEditorConfigStore" .value=${new UmbPropertyEditorConfigStore()}
+		>${story()}</umb-context-provider
+	>
+`;
+
 // Initialize MSW
 initialize({ onUnhandledRequest });
 
@@ -52,6 +59,7 @@ export const decorators = [
 	dataTypeStoreProvider,
 	documentTypeStoreProvider,
 	propertyEditorStoreProvider,
+	propertyEditorConfigStoreProvider,
 ];
 
 export const parameters = {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
index 48368b529a..0cfd168687 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
@@ -12,7 +12,7 @@ import type { UmbExtensionRegistry } from '../../../../../core/extension';
 import type { UmbPropertyEditorStore } from '../../../../../core/stores/property-editor/property-editor.store';
 import type { ManifestPropertyEditorUI } from '../../../../../core/models';
 
-import '../../../../property-editors/shared/property-editor-config.element';
+import '../../../../property-editors/shared/property-editor-config/property-editor-config.element';
 
 @customElement('umb-editor-view-data-type-edit')
 export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(LitElement) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.element.ts
similarity index 91%
rename from src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.element.ts
index dd8d2fd415..c0f04d11fb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.element.ts
@@ -3,13 +3,13 @@ import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { Subscription } from 'rxjs';
-import { UmbContextConsumerMixin } from '../../../core/context';
-import { UmbExtensionRegistry } from '../../../core/extension';
-import { UmbPropertyEditorConfigStore } from '../../../core/stores/property-editor-config/property-editor-config.store';
+import { UmbContextConsumerMixin } from '../../../../core/context';
+import { UmbExtensionRegistry } from '../../../../core/extension';
+import { UmbPropertyEditorConfigStore } from '../../../../core/stores/property-editor-config/property-editor-config.store';
 
-import type { PropertyEditorConfigProperty } from '../../../core/models';
+import type { PropertyEditorConfigProperty } from '../../../../core/models';
 
-import '../../components/entity-property/entity-property.element';
+import '../../../components/entity-property/entity-property.element';
 
 @customElement('umb-property-editor-config')
 export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitElement) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts
new file mode 100644
index 0000000000..e467d25273
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts
@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorConfigElement } from './property-editor-config.element';
+import './property-editor-config.element';
+
+export default {
+	title: 'Property Editors/Shared/Property Editor Config',
+	component: 'umb-property-editor-config',
+	id: 'umb-property-editor-config',
+} as Meta;
+
+const data = [
+	{
+		alias: 'maxChars',
+		value: 100,
+	},
+];
+
+export const AAAOverview: Story<UmbPropertyEditorConfigElement> = () =>
+	html`<umb-property-editor-config
+		property-editor-alias="Umbraco.TextBox"
+		property-editor-ui-alias="Umb.PropertyEditorUI.Text"
+		.data="${data}"></umb-property-editor-config>`;
+AAAOverview.storyName = 'Overview';