diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.stories.ts
new file mode 100644
index 0000000000..cdb79a4095
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.stories.ts
@@ -0,0 +1,17 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import { UmbEditorDataTypeElement } from './editor-data-type.element';
+import './editor-data-type.element';
+
+import { data } from '../../../mocks/data/data-type.data';
+
+export default {
+	title: 'Editors/Data Type',
+	component: 'umb-editor-data-type',
+	id: 'umb-editor-data-type',
+} as Meta;
+
+export const AAAOverview: Story<UmbEditorDataTypeElement> = () =>
+	html` <umb-editor-data-type id="${data[0].id}"></umb-editor-data-type>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/editor-view-data-type-edit.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/editor-view-data-type-edit.stories.ts
new file mode 100644
index 0000000000..2a7cfb1ae7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/editor-view-data-type-edit.stories.ts
@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import { UmbDataTypeContext } from '../data-type.context';
+import { UmbEditorViewDataTypeEditElement } from './editor-view-data-type-edit.element';
+import './editor-view-data-type-edit.element';
+import { data } from '../../../../mocks/data/data-type.data';
+
+export default {
+	title: 'Editors/Data Type/Views/Edit',
+	component: 'umb-editor-view-data-type-edit',
+	id: 'umb-editor-view-data-type-edit',
+	decorators: [
+		(story) =>
+			html` <umb-context-provider key="umbDataTypeContext" .value=${new UmbDataTypeContext(data[0])}>
+				${story()}
+			</umb-context-provider>`,
+	],
+} as Meta;
+
+export const AAAOverview: Story<UmbEditorViewDataTypeEditElement> = () =>
+	html` <umb-editor-view-data-type-edit></umb-editor-view-data-type-edit>`;
+AAAOverview.storyName = 'Overview';