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
index 6e3e210769..94b73ec579 100644
--- 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
@@ -14,5 +14,5 @@ export default {
 } as Meta;
 
 export const AAAOverview: Story<UmbEditorDataTypeElement> = () =>
-	html` <umb-editor-data-type id="${data[0].id}"></umb-editor-data-type>`;
+	html` <umb-editor-data-type id="${data[0].key}"></umb-editor-data-type>`;
 AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.stories.ts
index 787b83c706..efb3070157 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.stories.ts
@@ -14,5 +14,5 @@ export default {
 } as Meta;
 
 export const AAAOverview: Story<UmbEditorDocumentTypeElement> = () =>
-	html` <umb-editor-document-type id="${data[0].id}"></umb-editor-document-type>`;
+	html` <umb-editor-document-type id="${data[0].key}"></umb-editor-document-type>`;
 AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.stories.ts
index ae24a6d127..f7251e5684 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.stories.ts
@@ -16,5 +16,5 @@ export default {
 const documentNodes = data.filter((node) => node.type === 'document');
 
 export const AAAOverview: Story<UmbEditorDocumentElement> = () =>
-	html` <umb-editor-document id="${documentNodes[0].id}"></umb-editor-document>`;
+	html` <umb-editor-document id="${documentNodes[0].key}"></umb-editor-document>`;
 AAAOverview.storyName = 'Overview';