diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 4ad9ad3801f5..58052db43324 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/preview.mjs": "./dist/preview.mjs",
+    "./dist/preview-docs.mjs": "./dist/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/preview.ts",
+      "./src/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/preset.ts b/code/renderers/svelte/src/preset.ts
new file mode 100644
index 000000000000..f5fab9828623
--- /dev/null
+++ b/code/renderers/svelte/src/preset.ts
@@ -0,0 +1,23 @@
+import type { LoadedPreset, StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+const hasDocs = (presetsList: LoadedPreset[]) => {
+  return presetsList.some((preset: string | { name: string }) => {
+    const presetName = typeof preset === 'string' ? preset : preset.name;
+    return presetName.includes('@storybook/addon-docs');
+  });
+};
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const { presetsList } = options;
+  if (!presetsList) {
+    return input;
+  }
+  const docsInList = hasDocs(presetsList);
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'preview.mjs')])
+    .concat(docsInList ? [join(__dirname, 'preview-docs.mjs')] : []);
+};
diff --git a/code/renderers/svelte/src/preview-docs.ts b/code/renderers/svelte/src/preview-docs.ts
new file mode 100644
index 000000000000..71c69e9b33c6
--- /dev/null
+++ b/code/renderers/svelte/src/preview-docs.ts
@@ -0,0 +1,3 @@
+export { parameters } from './docs/config';
+
+export { decorators, argTypesEnhancers } from './docs/config';
diff --git a/code/renderers/svelte/src/preview.ts b/code/renderers/svelte/src/preview.ts
new file mode 100644
index 000000000000..4d8b883dbffe
--- /dev/null
+++ b/code/renderers/svelte/src/preview.ts
@@ -0,0 +1,4 @@
+export const parameters: {} = { renderer: 'svelte' };
+
+export { render, renderToCanvas } from './render';
+export { decorateStory as applyDecorators } from './decorators';