diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts
index 819760fe65..03f1215189 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.stories.ts
@@ -1,15 +1,20 @@
-import { Meta, Story } from '@storybook/web-components';
+import { Meta } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
 
-import type { UmbPropertyEditorUITinyMceDimensionsConfigurationElement } from './property-editor-ui-tiny-mce-dimensions-configuration.element';
 import './property-editor-ui-tiny-mce-dimensions-configuration.element';
 
+const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
+
 export default {
 	title: 'Property Editor UIs/Tiny Mce Dimensions Configuration',
 	component: 'umb-property-eDitor-ui-tiny-mce-dimensions-configuration',
 	id: 'umb-property-editor-ui-tiny-mce-dimensions-configuration',
 } as Meta;
 
-export const AAAOverview: Story<UmbPropertyEditorUITinyMceDimensionsConfigurationElement> = () =>
-	html`<umb-property-editor-ui-tiny-mce-dimensions-configuration></umb-property-editor-ui-tiny-mce-dimensions-configuration>`;
+export const AAAOverview = ({ value }: any) =>
+	html`<umb-property-editor-ui-tiny-mce-dimensions-configuration .value=${value}></umb-property-editor-ui-tiny-mce-dimensions-configuration>`;
 AAAOverview.storyName = 'Overview';
+AAAOverview.args = {
+	value: dataTypeData?.data?.find((x) => x.alias === 'dimensions')?.value,
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts
index 422b738d92..c2e5180504 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.stories.ts
@@ -1,15 +1,21 @@
-import { Meta, Story } from '@storybook/web-components';
+import { Meta } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
 
-import type { UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } from './property-editor-ui-tiny-mce-maximagesize-configuration.element';
 import './property-editor-ui-tiny-mce-maximagesize-configuration.element';
 
+const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
+
 export default {
 	title: 'Property Editor UIs/Tiny Mce Max Image Size Configuration',
 	component: 'umb-property-eDitor-ui-tiny-mce-maximagesize-configuration',
 	id: 'umb-property-editor-ui-tiny-mce-maximagesize-configuration',
 } as Meta;
 
-export const AAAOverview: Story<UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement> = () =>
-	html`<umb-property-editor-ui-tiny-mce-maximagesize-configuration></umb-property-editor-ui-tiny-mce-maximagesize-configuration>`;
+export const AAAOverview = ({ value }: any) =>
+	html`<umb-property-editor-ui-tiny-mce-maximagesize-configuration
+		.value=${value}></umb-property-editor-ui-tiny-mce-maximagesize-configuration>`;
 AAAOverview.storyName = 'Overview';
+AAAOverview.args = {
+	value: dataTypeData?.data?.find((x) => x.alias === 'maxImageSize')?.value,
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.stories.ts
index 444ef10324..3ecb5c8bf7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/mode/property-editor-ui-tiny-mce-mode-configuration.stories.ts
@@ -1,15 +1,20 @@
-import { Meta, Story } from '@storybook/web-components';
+import { Meta } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
 
-import type { UmbPropertyEditorUITinyMceModeConfigurationElement } from './property-editor-ui-tiny-mce-mode-configuration.element';
 import './property-editor-ui-tiny-mce-mode-configuration.element';
 
+const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
+
 export default {
 	title: 'Property Editor UIs/Tiny Mce Mode Configuration',
 	component: 'umb-property-editor-ui-tiny-mce-mode-configuration',
 	id: 'umb-property-editor-ui-tiny-mce-mode-configuration',
 } as Meta;
 
-export const AAAOverview: Story<UmbPropertyEditorUITinyMceModeConfigurationElement> = () =>
-	html`<umb-property-editor-ui-tiny-mce-mode-configuration></umb-property-editor-ui-tiny-mce-mode-configuration>`;
+export const AAAOverview = ({ value }: any) =>
+	html`<umb-property-editor-ui-tiny-mce-mode-configuration .value=${value}></umb-property-editor-ui-tiny-mce-mode-configuration>`;
 AAAOverview.storyName = 'Overview';
+AAAOverview.args = {
+	value: dataTypeData?.data?.find((x) => x.alias === 'mode')?.value,
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.stories.ts
index d9831f6db9..83b70bf00b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.stories.ts
@@ -1,15 +1,20 @@
-import { Meta, Story } from '@storybook/web-components';
+import { Meta } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
 
-import type { UmbPropertyEditorUITinyMceStylesheetsConfigurationElement } from './property-editor-ui-tiny-mce-stylesheets-configuration.element';
 import './property-editor-ui-tiny-mce-stylesheets-configuration.element';
 
+const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
+
 export default {
 	title: 'Property Editor UIs/Tiny Mce Stylesheets Configuration',
 	component: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration',
 	id: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration',
 } as Meta;
 
-export const AAAOverview: Story<UmbPropertyEditorUITinyMceStylesheetsConfigurationElement> = () =>
-	html`<umb-property-editor-ui-tiny-mce-stylesheets-configuration></umb-property-editor-ui-tiny-mce-stylesheets-configuration>`;
+export const AAAOverview = ({ value }: any) =>
+	html`<umb-property-editor-ui-tiny-mce-stylesheets-configuration .value=${value}></umb-property-editor-ui-tiny-mce-stylesheets-configuration>`;
 AAAOverview.storyName = 'Overview';
+AAAOverview.args = {
+	value: dataTypeData?.data?.find(x => x.alias === 'stylesheets')?.value ?? []
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.stories.ts
index 3948d585ab..57785270d4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.stories.ts
@@ -1,15 +1,22 @@
-import { Meta, Story } from '@storybook/web-components';
+import { Meta } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
 
-import type { UmbPropertyEditorUITinyMceToolbarConfigurationElement } from './property-editor-ui-tiny-mce-toolbar-configuration.element';
 import './property-editor-ui-tiny-mce-toolbar-configuration.element';
 
+const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
+
 export default {
 	title: 'Property Editor UIs/Tiny Mce Toolbar Configuration',
 	component: 'umb-property-editor-ui-tiny-mce-toolbar-configuration',
 	id: 'umb-property-editor-ui-tiny-mce-toolbar-configuration',
 } as Meta;
 
-export const AAAOverview: Story<UmbPropertyEditorUITinyMceToolbarConfigurationElement> = () =>
-	html`<umb-property-editor-ui-tiny-mce-toolbar-configuration></umb-property-editor-ui-tiny-mce-toolbar-configuration>`;
-AAAOverview.storyName = 'Overview';
+export const AAAOverview = ({ value }: any) =>
+	html`<umb-property-editor-ui-tiny-mce-toolbar-configuration .value=${value}></umb-property-editor-ui-tiny-mce-toolbar-configuration>`;
+
+	AAAOverview.storyName = 'Overview';
+
+	AAAOverview.args = {
+		value: dataTypeData?.data?.find(x => x.alias === 'toolbar')?.value ?? []
+	}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts
index 3dc06cef73..d449d860cd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts
@@ -1,15 +1,23 @@
-import { Meta, Story } from '@storybook/web-components';
+import { Meta } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { umbDataTypeData } from 'src/core/mocks/data/data-type.data';
 
-import type { UmbPropertyEditorUITinyMceElement } from './property-editor-ui-tiny-mce.element';
 import './property-editor-ui-tiny-mce.element';
 
+const dataTypeData = umbDataTypeData.getByKey('dt-richTextEditor');
+
 export default {
 	title: 'Property Editor UIs/Tiny Mce',
 	component: 'umb-property-editor-ui-tiny-mce',
 	id: 'umb-property-editor-ui-tiny-mce',
 } as Meta;
 
-export const AAAOverview: Story<UmbPropertyEditorUITinyMceElement> = () =>
-	html`<umb-property-editor-ui-tiny-mce></umb-property-editor-ui-tiny-mce>`;
+export const AAAOverview = ({ config, value }: any) =>
+	html`<umb-property-editor-ui-tiny-mce .config=${config} .value=${value}></umb-property-editor-ui-tiny-mce>`;
+	
 AAAOverview.storyName = 'Overview';
+
+AAAOverview.args = {
+	config: dataTypeData?.data,
+	value: 'I am a default value for the TinyMCE text editor story.',
+}
\ No newline at end of file