diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index 39511aef6be4..8d2ac3b7e2d4 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -225,10 +225,13 @@ export const frameworkOptions = async (
 export const docs = (
   docsOptions: StorybookConfig['docs'],
   { docs: docsMode }: CLIOptions
-): StorybookConfig['docs'] => ({
-  ...docsOptions,
-  docsMode,
-});
+): StorybookConfig['docs'] =>
+  docsOptions && docsMode !== undefined
+    ? {
+        ...docsOptions,
+        docsMode,
+      }
+    : docsOptions;
 
 export const managerHead = async (_: any, options: Options) => {
   const location = join(options.configDir, 'manager-head.html');
diff --git a/code/lib/preview-api/template/stories/args.stories.ts b/code/lib/preview-api/template/stories/args.stories.ts
index aa9719c4bf2c..6d397e108c5c 100644
--- a/code/lib/preview-api/template/stories/args.stories.ts
+++ b/code/lib/preview-api/template/stories/args.stories.ts
@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { pick } from 'lodash';
+import pick from 'lodash/pick';
 import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events';
 
 export default {
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 3d042ea5f214..9dec7bb0745e 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -26,11 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -71,7 +69,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/html/preset.js b/code/renderers/html/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/renderers/html/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/renderers/html/preview.js b/code/renderers/html/preview.js
deleted file mode 100644
index fe48d8883ba4..000000000000
--- a/code/renderers/html/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/config';
diff --git a/code/renderers/html/src/config.ts b/code/renderers/html/src/config.ts
deleted file mode 100644
index a318cb8498a2..000000000000
--- a/code/renderers/html/src/config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { parameters as docsParams } from './docs/config';
-import type { Parameters } from './types';
-
-export const parameters: Parameters = { renderer: 'html', ...docsParams };
-
-export { decorators, argTypesEnhancers } from './docs/config';
-export { renderToCanvas, render } from './render';
diff --git a/code/renderers/html/src/docs/config.ts b/code/renderers/html/src/docs/config.ts
deleted file mode 100644
index 2043949f02e1..000000000000
--- a/code/renderers/html/src/docs/config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
-import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
-
-import { sourceDecorator } from './sourceDecorator';
-import type { Parameters, StoryFnHtmlReturnType } from '../types';
-
-export const decorators: Addon_DecoratorFunction<StoryFnHtmlReturnType>[] = [
-  sourceDecorator as Addon_DecoratorFunction<StoryFnHtmlReturnType>,
-];
-
-export const parameters: Partial<Parameters> = {
-  docs: {
-    story: { inline: true },
-    source: {
-      type: SourceType.DYNAMIC,
-      language: 'html',
-      code: undefined,
-      excludeDecorators: undefined,
-    },
-  },
-};
-
-export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];
diff --git a/code/renderers/html/src/docs/sourceDecorator.ts b/code/renderers/html/src/docs/sourceDecorator.ts
index da1160fdc4f7..6318c9203312 100644
--- a/code/renderers/html/src/docs/sourceDecorator.ts
+++ b/code/renderers/html/src/docs/sourceDecorator.ts
@@ -2,13 +2,13 @@
 
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons, useEffect } from '@storybook/preview-api';
-import type { PartialStoryFn } from '@storybook/types';
+import type { DecoratorFunction } from '@storybook/types';
 
-import type { HtmlRenderer, StoryContext } from '../types';
+import type { HtmlRenderer } from '../types';
 
 import type { StoryFn } from '../public-types';
 
-function skipSourceRender(context: StoryContext) {
+function skipSourceRender(context: Parameters<DecoratorFunction<HtmlRenderer>>[1]) {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -22,7 +22,7 @@ function skipSourceRender(context: StoryContext) {
   return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 }
 
-export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context: StoryContext) {
+export const sourceDecorator: DecoratorFunction<HtmlRenderer> = (storyFn, context) => {
   const story = storyFn();
   const renderedForSource = context?.parameters.docs?.source?.excludeDecorators
     ? (context.originalStoryFn as StoryFn)(context.args, context)
@@ -42,4 +42,4 @@ export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context:
   });
 
   return story;
-}
+};
diff --git a/code/renderers/html/src/entry-preview-docs.ts b/code/renderers/html/src/entry-preview-docs.ts
new file mode 100644
index 000000000000..872b95e0e077
--- /dev/null
+++ b/code/renderers/html/src/entry-preview-docs.ts
@@ -0,0 +1,21 @@
+import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
+import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
+
+import { sourceDecorator } from './docs/sourceDecorator';
+import type { HtmlRenderer } from './types';
+
+export const decorators: DecoratorFunction<HtmlRenderer>[] = [sourceDecorator];
+
+export const parameters = {
+  docs: {
+    story: { inline: true },
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+      code: undefined,
+      excludeDecorators: undefined,
+    },
+  },
+};
+
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];
diff --git a/code/renderers/html/src/entry-preview.ts b/code/renderers/html/src/entry-preview.ts
new file mode 100644
index 000000000000..ab53ac0c984a
--- /dev/null
+++ b/code/renderers/html/src/entry-preview.ts
@@ -0,0 +1,5 @@
+import type { Parameters } from './types';
+
+export const parameters: Parameters = { renderer: 'html' };
+
+export { renderToCanvas, render } from './render';
diff --git a/code/renderers/html/src/preset.ts b/code/renderers/html/src/preset.ts
new file mode 100644
index 000000000000..b60ba9208510
--- /dev/null
+++ b/code/renderers/html/src/preset.ts
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index eed4e9bdf033..9d5330d468eb 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -26,11 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -71,7 +69,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/preact/preset.js b/code/renderers/preact/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/renderers/preact/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/renderers/preact/preview.js b/code/renderers/preact/preview.js
deleted file mode 100644
index fe48d8883ba4..000000000000
--- a/code/renderers/preact/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/config';
diff --git a/code/renderers/preact/src/config.ts b/code/renderers/preact/src/config.ts
deleted file mode 100644
index 6c72da1bc702..000000000000
--- a/code/renderers/preact/src/config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { parameters as docsParams } from './docs/config';
-
-export { renderToCanvas, render } from './render';
-
-export const parameters: {} = { renderer: 'preact' as const, ...docsParams };
diff --git a/code/renderers/preact/src/docs/config.ts b/code/renderers/preact/src/entry-preview-docs.ts
similarity index 100%
rename from code/renderers/preact/src/docs/config.ts
rename to code/renderers/preact/src/entry-preview-docs.ts
diff --git a/code/renderers/preact/src/entry-preview.ts b/code/renderers/preact/src/entry-preview.ts
new file mode 100644
index 000000000000..b09bdf943bcf
--- /dev/null
+++ b/code/renderers/preact/src/entry-preview.ts
@@ -0,0 +1,3 @@
+export { renderToCanvas, render } from './render';
+
+export const parameters = { renderer: 'preact' };
diff --git a/code/renderers/preact/src/preset.ts b/code/renderers/preact/src/preset.ts
new file mode 100644
index 000000000000..b60ba9208510
--- /dev/null
+++ b/code/renderers/preact/src/preset.ts
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 0a8dad42ae80..08c29dd01229 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -26,15 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
-    "./dist/preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -102,8 +96,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/react/preview.js b/code/renderers/react/preview.js
deleted file mode 100644
index f00f03b4e2e4..000000000000
--- a/code/renderers/react/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/config.mjs';
diff --git a/code/renderers/react/src/config.ts b/code/renderers/react/src/config.ts
deleted file mode 100644
index ee07fe8687a4..000000000000
--- a/code/renderers/react/src/config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { parameters as docsParams } from './docs/config';
-
-export const parameters: {} = { renderer: 'react', ...docsParams };
-
-export { decorators, argTypesEnhancers } from './docs/config';
-
-export { render, renderToCanvas } from './render';
-
-export { applyDecorators } from './applyDecorators';
diff --git a/code/renderers/react/src/applyDecorators.ts b/code/renderers/react/src/docs/applyDecorators.ts
similarity index 88%
rename from code/renderers/react/src/applyDecorators.ts
rename to code/renderers/react/src/docs/applyDecorators.ts
index cf5c44fa5f80..109b5057f0c4 100644
--- a/code/renderers/react/src/applyDecorators.ts
+++ b/code/renderers/react/src/docs/applyDecorators.ts
@@ -1,8 +1,8 @@
 import { defaultDecorateStory } from '@storybook/preview-api';
 import type { LegacyStoryFn, DecoratorFunction } from '@storybook/types';
 
-import type { ReactRenderer } from './types';
-import { jsxDecorator } from './docs/jsxDecorator';
+import type { ReactRenderer } from '../types';
+import { jsxDecorator } from './jsxDecorator';
 
 export const applyDecorators = (
   storyFn: LegacyStoryFn<ReactRenderer>,
diff --git a/code/renderers/react/src/docs/config.ts b/code/renderers/react/src/docs/config.ts
deleted file mode 100644
index adc3af6d2318..000000000000
--- a/code/renderers/react/src/docs/config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
-import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
-
-import { extractArgTypes } from './extractArgTypes';
-import { jsxDecorator } from './jsxDecorator';
-import type { StoryFnReactReturnType } from '../types';
-
-export const parameters: {} = {
-  docs: {
-    story: { inline: true },
-    extractArgTypes,
-    extractComponentDescription,
-  },
-};
-
-export const decorators: Addon_DecoratorFunction<StoryFnReactReturnType>[] = [jsxDecorator];
-
-export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];
diff --git a/code/renderers/react/src/entry-preview-docs.ts b/code/renderers/react/src/entry-preview-docs.ts
new file mode 100644
index 000000000000..51e347b0f03d
--- /dev/null
+++ b/code/renderers/react/src/entry-preview-docs.ts
@@ -0,0 +1,20 @@
+import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
+import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
+
+import { extractArgTypes } from './docs/extractArgTypes';
+import { jsxDecorator } from './docs/jsxDecorator';
+import type { ReactRenderer } from './types';
+
+export const parameters = {
+  docs: {
+    story: { inline: true },
+    extractArgTypes,
+    extractComponentDescription,
+  },
+};
+
+export const decorators: DecoratorFunction<ReactRenderer>[] = [jsxDecorator];
+
+export const argTypesEnhancers: ArgTypesEnhancer<ReactRenderer>[] = [enhanceArgTypes];
+
+export { applyDecorators } from './docs/applyDecorators';
diff --git a/code/renderers/react/src/entry-preview.ts b/code/renderers/react/src/entry-preview.ts
new file mode 100644
index 000000000000..fe96bc623da7
--- /dev/null
+++ b/code/renderers/react/src/entry-preview.ts
@@ -0,0 +1,2 @@
+export const parameters: {} = { renderer: 'react' };
+export { render, renderToCanvas } from './render';
diff --git a/code/renderers/react/src/preset.ts b/code/renderers/react/src/preset.ts
index 5194fd3a23f8..6da62d30bbf2 100644
--- a/code/renderers/react/src/preset.ts
+++ b/code/renderers/react/src/preset.ts
@@ -1,5 +1,18 @@
 import type { StorybookConfig } from '@storybook/types';
 
+import { join } from 'path';
+
 export const addons: StorybookConfig['addons'] = [
   require.resolve('@storybook/react-dom-shim/dist/preset'),
 ];
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsConfig = await options.presets.apply('docs', {}, options);
+  const docsEnabled = Object.keys(docsConfig).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 879e51a778e6..47d9cced041e 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -26,16 +26,8 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js",
-      "import": "./dist/preset.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -77,8 +69,8 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/server/preview.js b/code/renderers/server/preview.js
deleted file mode 100644
index fe48d8883ba4..000000000000
--- a/code/renderers/server/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/config';
diff --git a/code/renderers/server/src/config.ts b/code/renderers/server/src/entry-preview.ts
similarity index 100%
rename from code/renderers/server/src/config.ts
rename to code/renderers/server/src/entry-preview.ts
diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts
index 63cc1aca491a..01039ebfb980 100644
--- a/code/renderers/server/src/preset.ts
+++ b/code/renderers/server/src/preset.ts
@@ -2,6 +2,8 @@ import fs from 'fs-extra';
 import yaml from 'yaml';
 import type { StorybookConfig, Tag, StoryName, ComponentTitle } from '@storybook/types';
 
+import { join } from 'path';
+
 type FileContent = {
   title: ComponentTitle;
   tags?: Tag[];
@@ -34,3 +36,13 @@ export const experimental_indexers: StorybookConfig['experimental_indexers'] = (
   },
   ...(existingIndexers || []),
 ];
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const { presetsList } = options;
+  if (!presetsList) {
+    return input;
+  }
+  const result: string[] = [];
+
+  return result.concat(input).concat([join(__dirname, 'entry-preview.mjs')]);
+};
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 4ad9ad3801f5..99a84af9c552 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -26,11 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json",
     "./templates/HOC.svelte": "./templates/HOC.svelte",
     "./templates/PreviewRender.svelte": "./templates/PreviewRender.svelte",
@@ -81,7 +79,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/svelte/preset.js b/code/renderers/svelte/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/renderers/svelte/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/renderers/svelte/preview.js b/code/renderers/svelte/preview.js
deleted file mode 100644
index f00f03b4e2e4..000000000000
--- a/code/renderers/svelte/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/config.mjs';
diff --git a/code/renderers/svelte/src/config.ts b/code/renderers/svelte/src/config.ts
deleted file mode 100644
index 78323a1ce32c..000000000000
--- a/code/renderers/svelte/src/config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { parameters as docsParams } from './docs/config';
-
-export const parameters: {} = { renderer: 'svelte' as const, ...docsParams };
-export { decorators, argTypesEnhancers } from './docs/config';
-
-export { render, renderToCanvas } from './render';
-export { decorateStory as applyDecorators } from './decorators';
diff --git a/code/renderers/svelte/src/docs/config.ts b/code/renderers/svelte/src/docs/config.ts
deleted file mode 100644
index 563235ec7f2d..000000000000
--- a/code/renderers/svelte/src/docs/config.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
-import { enhanceArgTypes } from '@storybook/docs-tools';
-import { extractArgTypes } from './extractArgTypes';
-import { extractComponentDescription } from './extractComponentDescription';
-import { sourceDecorator } from './sourceDecorator';
-
-export const parameters: {} = {
-  docs: {
-    story: { inline: true },
-    extractArgTypes,
-    extractComponentDescription,
-  },
-};
-
-export const decorators: Addon_DecoratorFunction<unknown>[] = [sourceDecorator];
-
-export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];
diff --git a/code/renderers/svelte/src/docs/sourceDecorator.ts b/code/renderers/svelte/src/docs/sourceDecorator.ts
index 7b61eea6a7e9..62b27773058a 100644
--- a/code/renderers/svelte/src/docs/sourceDecorator.ts
+++ b/code/renderers/svelte/src/docs/sourceDecorator.ts
@@ -1,16 +1,17 @@
 /* eslint-disable no-underscore-dangle */
 import { addons, useEffect } from '@storybook/preview-api';
 import { deprecate } from '@storybook/client-logger';
-import type { ArgTypes, Args, StoryContext, Renderer } from '@storybook/types';
+import type { ArgTypes, Args, StoryContext } from '@storybook/types';
 
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
+import type { SvelteRenderer } from '../types';
 
 /**
- * Check if the sourcecode should be generated.
+ * Check if the source-code should be generated.
  *
  * @param context StoryContext
  */
-const skipSourceRender = (context: StoryContext<Renderer>) => {
+const skipSourceRender = (context: StoryContext<SvelteRenderer>) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -162,7 +163,7 @@ function getWrapperProperties(component: any) {
  * @param storyFn Fn
  * @param context  StoryContext
  */
-export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) => {
+export const sourceDecorator = (storyFn: any, context: StoryContext<SvelteRenderer>) => {
   const channel = addons.getChannel();
   const skip = skipSourceRender(context);
   const story = storyFn();
diff --git a/code/renderers/svelte/src/entry-preview-docs.ts b/code/renderers/svelte/src/entry-preview-docs.ts
new file mode 100644
index 000000000000..8cc14c3b191f
--- /dev/null
+++ b/code/renderers/svelte/src/entry-preview-docs.ts
@@ -0,0 +1,18 @@
+import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
+import { enhanceArgTypes } from '@storybook/docs-tools';
+import { extractArgTypes } from './docs/extractArgTypes';
+import { extractComponentDescription } from './docs/extractComponentDescription';
+import { sourceDecorator } from './docs/sourceDecorator';
+import type { SvelteRenderer } from './types';
+
+export const parameters = {
+  docs: {
+    story: { inline: true },
+    extractArgTypes,
+    extractComponentDescription,
+  },
+};
+
+export const decorators: DecoratorFunction<SvelteRenderer>[] = [sourceDecorator];
+
+export const argTypesEnhancers: ArgTypesEnhancer<SvelteRenderer>[] = [enhanceArgTypes];
diff --git a/code/renderers/svelte/src/entry-preview.ts b/code/renderers/svelte/src/entry-preview.ts
new file mode 100644
index 000000000000..4d8b883dbffe
--- /dev/null
+++ b/code/renderers/svelte/src/entry-preview.ts
@@ -0,0 +1,4 @@
+export const parameters: {} = { renderer: 'svelte' };
+
+export { render, renderToCanvas } from './render';
+export { decorateStory as applyDecorators } from './decorators';
diff --git a/code/renderers/svelte/src/preset.ts b/code/renderers/svelte/src/preset.ts
new file mode 100644
index 000000000000..b60ba9208510
--- /dev/null
+++ b/code/renderers/svelte/src/preset.ts
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};
diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json
index a6df7ed76983..e9b16f82f4ae 100644
--- a/code/renderers/vue/package.json
+++ b/code/renderers/vue/package.json
@@ -26,11 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -83,7 +81,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/vue/preset.js b/code/renderers/vue/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/renderers/vue/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/renderers/vue/preview.js b/code/renderers/vue/preview.js
deleted file mode 100644
index fe48d8883ba4..000000000000
--- a/code/renderers/vue/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/config';
diff --git a/code/renderers/vue/src/config.ts b/code/renderers/vue/src/config.ts
deleted file mode 100644
index bd9a2fb152cd..000000000000
--- a/code/renderers/vue/src/config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { parameters as docsParams } from './docs/config';
-
-export const parameters: {} = { renderer: 'vue' as const, ...docsParams };
-export { decorators, argTypesEnhancers } from './docs/config';
-
-export { render, renderToCanvas } from './render';
-export { decorateStory as applyDecorators } from './decorateStory';
diff --git a/code/renderers/vue/src/docs/config.ts b/code/renderers/vue/src/docs/config.ts
deleted file mode 100644
index 2e4d23aa3ad7..000000000000
--- a/code/renderers/vue/src/docs/config.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
-import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
-import { extractArgTypes } from './extractArgTypes';
-import { sourceDecorator } from './sourceDecorator';
-
-export const parameters: {} = {
-  docs: {
-    story: { inline: true, iframeHeight: '120px' },
-    extractArgTypes,
-    extractComponentDescription,
-  },
-};
-
-export const decorators: Addon_DecoratorFunction<any>[] = [sourceDecorator];
-
-export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];
diff --git a/code/renderers/vue/src/entry-preview-docs.ts b/code/renderers/vue/src/entry-preview-docs.ts
new file mode 100644
index 000000000000..bd5af4e3f916
--- /dev/null
+++ b/code/renderers/vue/src/entry-preview-docs.ts
@@ -0,0 +1,17 @@
+import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
+import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
+import { extractArgTypes } from './docs/extractArgTypes';
+import { sourceDecorator } from './docs/sourceDecorator';
+import type { VueRenderer } from './types';
+
+export const parameters = {
+  docs: {
+    story: { inline: true, iframeHeight: '120px' },
+    extractArgTypes,
+    extractComponentDescription,
+  },
+};
+
+export const decorators: DecoratorFunction<VueRenderer>[] = [sourceDecorator];
+
+export const argTypesEnhancers: ArgTypesEnhancer<VueRenderer>[] = [enhanceArgTypes];
diff --git a/code/renderers/vue/src/entry-preview.ts b/code/renderers/vue/src/entry-preview.ts
new file mode 100644
index 000000000000..2110e13bcf0c
--- /dev/null
+++ b/code/renderers/vue/src/entry-preview.ts
@@ -0,0 +1,3 @@
+export const parameters: {} = { renderer: 'vue' };
+export { render, renderToCanvas } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';
diff --git a/code/renderers/vue/src/preset.ts b/code/renderers/vue/src/preset.ts
new file mode 100644
index 000000000000..b60ba9208510
--- /dev/null
+++ b/code/renderers/vue/src/preset.ts
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index f536aee0c1c1..3ea92f413b5f 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -26,11 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -82,7 +80,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/vue3/preset.js b/code/renderers/vue3/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/renderers/vue3/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/renderers/vue3/preview.js b/code/renderers/vue3/preview.js
deleted file mode 100644
index f00f03b4e2e4..000000000000
--- a/code/renderers/vue3/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/config.mjs';
diff --git a/code/renderers/vue3/src/config.ts b/code/renderers/vue3/src/config.ts
deleted file mode 100644
index f132fb510296..000000000000
--- a/code/renderers/vue3/src/config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { parameters as docsParams } from './docs/config';
-
-export const parameters: {} = { renderer: 'vue3' as const, ...docsParams };
-export { decorators, argTypesEnhancers } from './docs/config';
-
-export { render, renderToCanvas } from './render';
-export { decorateStory as applyDecorators } from './decorateStory';
diff --git a/code/renderers/vue3/src/docs/config.ts b/code/renderers/vue3/src/docs/config.ts
deleted file mode 100644
index ba0a4949b53f..000000000000
--- a/code/renderers/vue3/src/docs/config.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
-import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
-import { extractArgTypes } from './extractArgTypes';
-import { sourceDecorator } from './sourceDecorator';
-
-export const parameters: {} = {
-  docs: {
-    story: { inline: true },
-    extractArgTypes,
-    extractComponentDescription,
-  },
-};
-
-export const decorators: Addon_DecoratorFunction<unknown>[] = [sourceDecorator];
-
-export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index f0e254f082ae..e0820db75cbd 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-eval */
 /* eslint-disable no-underscore-dangle */
 import { addons } from '@storybook/preview-api';
-import type { ArgTypes, Args, StoryContext, Renderer } from '@storybook/types';
+import type { ArgTypes, Args, StoryContext } from '@storybook/types';
 
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
 
@@ -25,13 +25,14 @@ import {
   replaceValueWithRef,
   generateExpression,
 } from './utils';
+import type { VueRenderer } from '../types';
 
 /**
  * Check if the sourcecode should be generated.
  *
  * @param context StoryContext
  */
-const skipSourceRender = (context: StoryContext<Renderer>) => {
+const skipSourceRender = (context: StoryContext<VueRenderer>) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
   const isDocsViewMode = context?.viewMode === 'docs';
@@ -153,7 +154,7 @@ function generateScriptSetup(args: Args, argTypes: ArgTypes, components: any[]):
  */
 function getTemplateComponents(
   renderFn: any,
-  context?: StoryContext<Renderer>
+  context?: StoryContext<VueRenderer>
 ): (TemplateChildNode | VNode)[] {
   try {
     const originalStoryFn = renderFn;
@@ -274,7 +275,7 @@ export function generateTemplateSource(
  * @param storyFn Fn
  * @param context  StoryContext
  */
-export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) => {
+export const sourceDecorator = (storyFn: any, context: StoryContext<VueRenderer>) => {
   const skip = skipSourceRender(context);
   const story = storyFn();
 
@@ -290,7 +291,7 @@ export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) =
   return story;
 };
 
-export function generateSource(context: StoryContext<Renderer>) {
+export function generateSource(context: StoryContext<VueRenderer>) {
   const channel = addons.getChannel();
   const { args = {}, argTypes = {}, id } = context || {};
   const storyComponents = getTemplateComponents(context?.originalStoryFn, context);
diff --git a/code/renderers/vue3/src/entry-preview-docs.ts b/code/renderers/vue3/src/entry-preview-docs.ts
new file mode 100644
index 000000000000..0c598ffdec49
--- /dev/null
+++ b/code/renderers/vue3/src/entry-preview-docs.ts
@@ -0,0 +1,17 @@
+import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
+import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
+import { extractArgTypes } from './docs/extractArgTypes';
+import { sourceDecorator } from './docs/sourceDecorator';
+import type { VueRenderer } from './types';
+
+export const parameters = {
+  docs: {
+    story: { inline: true },
+    extractArgTypes,
+    extractComponentDescription,
+  },
+};
+
+export const decorators: DecoratorFunction<VueRenderer>[] = [sourceDecorator];
+
+export const argTypesEnhancers: ArgTypesEnhancer<VueRenderer>[] = [enhanceArgTypes];
diff --git a/code/renderers/vue3/src/entry-preview.ts b/code/renderers/vue3/src/entry-preview.ts
new file mode 100644
index 000000000000..a53fd937a5fa
--- /dev/null
+++ b/code/renderers/vue3/src/entry-preview.ts
@@ -0,0 +1,3 @@
+export const parameters: {} = { renderer: 'vue3' };
+export { render, renderToCanvas } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';
diff --git a/code/renderers/vue3/src/preset.ts b/code/renderers/vue3/src/preset.ts
new file mode 100644
index 000000000000..b60ba9208510
--- /dev/null
+++ b/code/renderers/vue3/src/preset.ts
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 43a43b404127..6ac0d96131dd 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -29,11 +29,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -82,7 +80,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/web-components/preset.js b/code/renderers/web-components/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/renderers/web-components/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/renderers/web-components/preview.js b/code/renderers/web-components/preview.js
deleted file mode 100644
index fe48d8883ba4..000000000000
--- a/code/renderers/web-components/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/config';
diff --git a/code/renderers/web-components/src/config.ts b/code/renderers/web-components/src/config.ts
deleted file mode 100644
index abf93dbc12f2..000000000000
--- a/code/renderers/web-components/src/config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { parameters as docsParams } from './docs/config';
-
-export const parameters: {} = { renderer: 'web-components' as const, ...docsParams };
-export { decorators, argTypesEnhancers } from './docs/config';
-export { render, renderToCanvas } from './render';
diff --git a/code/renderers/web-components/src/docs/config.ts b/code/renderers/web-components/src/docs/config.ts
deleted file mode 100644
index 3597f99cd4cc..000000000000
--- a/code/renderers/web-components/src/docs/config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types';
-import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
-import { extractArgTypes, extractComponentDescription } from './custom-elements';
-import { sourceDecorator } from './sourceDecorator';
-import type { StoryFnHtmlReturnType } from '../types';
-
-export const decorators: Addon_DecoratorFunction<StoryFnHtmlReturnType>[] = [sourceDecorator];
-
-export const parameters: object = {
-  docs: {
-    extractArgTypes,
-    extractComponentDescription,
-    story: { inline: true },
-    source: {
-      type: SourceType.DYNAMIC,
-      language: 'html',
-    },
-  },
-};
-
-export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];
diff --git a/code/renderers/web-components/src/entry-preview-docs.ts b/code/renderers/web-components/src/entry-preview-docs.ts
new file mode 100644
index 000000000000..917c0c17eb84
--- /dev/null
+++ b/code/renderers/web-components/src/entry-preview-docs.ts
@@ -0,0 +1,21 @@
+import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
+import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
+import { extractArgTypes, extractComponentDescription } from './docs/custom-elements';
+import { sourceDecorator } from './docs/sourceDecorator';
+import type { WebComponentsRenderer } from './types';
+
+export const decorators: DecoratorFunction<WebComponentsRenderer>[] = [sourceDecorator];
+
+export const parameters = {
+  docs: {
+    extractArgTypes,
+    extractComponentDescription,
+    story: { inline: true },
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+    },
+  },
+};
+
+export const argTypesEnhancers: ArgTypesEnhancer<WebComponentsRenderer>[] = [enhanceArgTypes];
diff --git a/code/renderers/web-components/src/entry-preview.ts b/code/renderers/web-components/src/entry-preview.ts
new file mode 100644
index 000000000000..c0a759dcab8a
--- /dev/null
+++ b/code/renderers/web-components/src/entry-preview.ts
@@ -0,0 +1,2 @@
+export const parameters: {} = { renderer: 'web-components' };
+export { render, renderToCanvas } from './render';
diff --git a/code/renderers/web-components/src/preset.ts b/code/renderers/web-components/src/preset.ts
new file mode 100644
index 000000000000..b60ba9208510
--- /dev/null
+++ b/code/renderers/web-components/src/preset.ts
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};