diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/content/editor-content.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/content/editor-content.stories.ts
new file mode 100644
index 0000000000..aebb0076f3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/content/editor-content.stories.ts
@@ -0,0 +1,19 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import { UmbEditorContentElement } from './editor-content.element';
+import './editor-content.element';
+
+import { data } from '../../../mocks/data/node.data';
+
+export default {
+	title: 'Editors/Content',
+	component: 'umb-editor-content',
+	id: 'umb-editor-content',
+} as Meta;
+
+const documentNodes = data.filter((node) => node.type === 'document');
+
+export const AAAOverview: Story<UmbEditorContentElement> = () =>
+	html` <umb-editor-content id="${documentNodes[0].id}"></umb-editor-content>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.stories.ts
new file mode 100644
index 0000000000..d036b1cf53
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.stories.ts
@@ -0,0 +1,19 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import { UmbEditorMediaElement } from './editor-media.element';
+import './editor-media.element';
+
+import { data } from '../../../mocks/data/node.data';
+
+export default {
+	title: 'Editors/Media',
+	component: 'umb-editor-media',
+	id: 'umb-editor-media',
+} as Meta;
+
+const mediaNodes = data.filter((node) => node.type === 'media');
+
+export const AAAOverview: Story<UmbEditorMediaElement> = () =>
+	html` <umb-editor-media id="${mediaNodes[0].id}"></umb-editor-media>`;
+AAAOverview.storyName = 'Overview';