diff --git a/app/angular/src/client/preview/config.ts b/app/angular/src/client/preview/config.ts
index decd470c6d0f..2ea6e7700bc4 100644
--- a/app/angular/src/client/preview/config.ts
+++ b/app/angular/src/client/preview/config.ts
@@ -1,3 +1,3 @@
 export { render, renderToDOM } from './render';
 
-export const parameters = { framework: 'react' };
+export const parameters = { framework: 'angular' };
diff --git a/app/angular/src/client/preview/render.ts b/app/angular/src/client/preview/render.ts
index 685aeb587653..a942d7e05ad6 100644
--- a/app/angular/src/client/preview/render.ts
+++ b/app/angular/src/client/preview/render.ts
@@ -1,13 +1,15 @@
 import { RenderContext } from '@storybook/store';
+import { ArgsStoryFn } from '@storybook/csf';
 
 import { renderNgApp } from './angular/helpers';
-import { AngularFramework, Story } from './types-6-0';
+import { AngularFramework } from './types-6-0';
 
 import { RendererFactory } from './angular-beta/RendererFactory';
 
 export const rendererFactory = new RendererFactory();
 
-export const render: Story = (props) => ({ props });
+export const render: ArgsStoryFn<AngularFramework> = (props) => ({ props });
+
 export async function renderToDOM(
   {
     storyFn,
diff --git a/app/ember/preset.js b/app/ember/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/ember/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/ember/src/client/preview/config.ts b/app/ember/src/client/preview/config.ts
new file mode 100644
index 000000000000..062428c585d0
--- /dev/null
+++ b/app/ember/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'ember' };
diff --git a/app/ember/src/client/preview/index.ts b/app/ember/src/client/preview/index.ts
index 6eb84bc6140e..78bc0f24d3bf 100644
--- a/app/ember/src/client/preview/index.ts
+++ b/app/ember/src/client/preview/index.ts
@@ -1,9 +1,9 @@
 import { start } from '@storybook/core/client';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM);
 
 export const {
   setAddon,
diff --git a/app/ember/src/client/preview/render.ts b/app/ember/src/client/preview/render.ts
index afb49e565f0d..29f9375680a6 100644
--- a/app/ember/src/client/preview/render.ts
+++ b/app/ember/src/client/preview/render.ts
@@ -60,7 +60,7 @@ function render(options: OptionsArgs, el: HTMLElement) {
     });
 }
 
-export default function renderMain(
+export function renderToDOM(
   { storyFn, kind, name, showMain, showError }: RenderContext<EmberFramework>,
   domElement: HTMLElement
 ) {
diff --git a/app/html/preset.js b/app/html/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/html/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/html/src/client/preview/config.ts b/app/html/src/client/preview/config.ts
new file mode 100644
index 000000000000..981ec886773a
--- /dev/null
+++ b/app/html/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'html' };
diff --git a/app/html/src/client/preview/index.ts b/app/html/src/client/preview/index.ts
index 50450304f66f..96f8be1e9156 100644
--- a/app/html/src/client/preview/index.ts
+++ b/app/html/src/client/preview/index.ts
@@ -4,7 +4,7 @@ import { ClientStoryApi, Loadable } from '@storybook/addons';
 import { HtmlFramework } from './types-6-0';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 import { IStorybookSection } from './types';
 
 const framework = 'html';
@@ -18,7 +18,7 @@ interface ClientApi extends ClientStoryApi<HtmlFramework['storyResult']> {
   raw: () => any; // todo add type
 }
 
-const api = start(render);
+const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/app/html/src/client/preview/render.ts b/app/html/src/client/preview/render.ts
index 411a745a0ddc..f9a29aab5ebe 100644
--- a/app/html/src/client/preview/render.ts
+++ b/app/html/src/client/preview/render.ts
@@ -7,7 +7,7 @@ import { HtmlFramework } from './types-6-0';
 
 const { Node } = global;
 
-export default function renderMain(
+export function renderToDOM(
   { storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<HtmlFramework>,
   domElement: HTMLElement
 ) {
diff --git a/app/preact/preset.js b/app/preact/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/preact/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/preact/src/client/preview/config.ts b/app/preact/src/client/preview/config.ts
new file mode 100644
index 000000000000..4038e5dbab2a
--- /dev/null
+++ b/app/preact/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'preact' };
diff --git a/app/preact/src/client/preview/index.ts b/app/preact/src/client/preview/index.ts
index 6f35fcf2060d..82bbf67a73d3 100644
--- a/app/preact/src/client/preview/index.ts
+++ b/app/preact/src/client/preview/index.ts
@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 import { IStorybookSection } from './types';
 import { PreactFramework } from './types-6-0';
 
@@ -18,7 +18,7 @@ export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']
 }
 
 const framework = 'preact';
-const api = start(render);
+const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/app/preact/src/client/preview/render.tsx b/app/preact/src/client/preview/render.tsx
index 981197f28f7c..095e2ebea50f 100644
--- a/app/preact/src/client/preview/render.tsx
+++ b/app/preact/src/client/preview/render.tsx
@@ -36,7 +36,7 @@ const StoryHarness: preact.FunctionalComponent<{
   return content;
 };
 
-export default function renderMain(
+export function renderToDOM(
   { storyFn, title, name, showMain, showError, forceRemount }: RenderContext<PreactFramework>,
   domElement: HTMLElement
 ) {
diff --git a/app/react/preset.js b/app/react/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/react/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/react/src/client/preview/config.ts b/app/react/src/client/preview/config.ts
new file mode 100644
index 000000000000..decd470c6d0f
--- /dev/null
+++ b/app/react/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { render, renderToDOM } from './render';
+
+export const parameters = { framework: 'react' };
diff --git a/app/server/preset.js b/app/server/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/server/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/server/src/client/preview/config.ts b/app/server/src/client/preview/config.ts
new file mode 100644
index 000000000000..221ce28653fe
--- /dev/null
+++ b/app/server/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { render, renderToDOM } from './render';
+
+export const parameters = { framework: 'server' };
diff --git a/app/server/src/client/preview/index.ts b/app/server/src/client/preview/index.ts
index e77650e889ac..6b6d6f99db55 100644
--- a/app/server/src/client/preview/index.ts
+++ b/app/server/src/client/preview/index.ts
@@ -1,8 +1,8 @@
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable, StoryFn, Args } from '@storybook/addons';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
-import { renderMain as renderToDOM } from './render';
+import { renderToDOM, render } from './render';
 import { IStorybookSection, ServerFramework } from './types';
 
 const framework = 'server';
@@ -16,8 +16,6 @@ interface ClientApi extends ClientStoryApi<ServerFramework['storyResult']> {
   raw: () => any; // todo add type
 }
 
-const render: StoryFn = (args: Args) => {};
-
 const api = start(renderToDOM, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
diff --git a/app/server/src/client/preview/render.ts b/app/server/src/client/preview/render.ts
index 0d2f00bded54..450bab66d85d 100644
--- a/app/server/src/client/preview/render.ts
+++ b/app/server/src/client/preview/render.ts
@@ -1,9 +1,9 @@
 /* eslint-disable no-param-reassign */
 import global from 'global';
 import dedent from 'ts-dedent';
-import { Args, ArgTypes } from '@storybook/api';
 import { RenderContext } from '@storybook/store';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
+import { StoryFn, Args, ArgTypes } from '@storybook/csf';
 import { FetchStoryHtmlType, ServerFramework } from './types';
 
 const { fetch, Node } = global;
@@ -40,7 +40,9 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => {
   return storyArgs;
 };
 
-export async function renderMain(
+export const render: StoryFn<ServerFramework> = (args: Args) => {};
+
+export async function renderToDOM(
   {
     id,
     title,
diff --git a/app/svelte/preset.js b/app/svelte/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/svelte/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/svelte/src/client/preview/config.ts b/app/svelte/src/client/preview/config.ts
new file mode 100644
index 000000000000..1a3054f5126c
--- /dev/null
+++ b/app/svelte/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'svelte' };
diff --git a/app/svelte/src/client/preview/index.ts b/app/svelte/src/client/preview/index.ts
index cbfed51c1669..271ccc0602bb 100644
--- a/app/svelte/src/client/preview/index.ts
+++ b/app/svelte/src/client/preview/index.ts
@@ -2,9 +2,11 @@ import { start } from '@storybook/core/client';
 import { decorateStory } from './decorators';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start(render, { decorateStory });
+const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM, {
+  decorateStory,
+});
 
 export const {
   setAddon,
diff --git a/app/svelte/src/client/preview/render.ts b/app/svelte/src/client/preview/render.ts
index aa1934a21c7b..4b2e4a9a81fb 100644
--- a/app/svelte/src/client/preview/render.ts
+++ b/app/svelte/src/client/preview/render.ts
@@ -15,7 +15,7 @@ function cleanUpPreviousStory() {
   previousComponent = null;
 }
 
-export default function render(
+export function renderToDOM(
   { storyFn, kind, name, showMain, showError }: RenderContext<SvelteFramework>,
   domElement: HTMLElement
 ) {
diff --git a/app/vue/preset.js b/app/vue/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/vue/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/vue/src/client/preview/config.ts b/app/vue/src/client/preview/config.ts
new file mode 100644
index 000000000000..1ffa6048478c
--- /dev/null
+++ b/app/vue/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'vue' };
diff --git a/app/vue/src/client/preview/index.ts b/app/vue/src/client/preview/index.ts
index f733d2b44a76..1470e77e91b4 100644
--- a/app/vue/src/client/preview/index.ts
+++ b/app/vue/src/client/preview/index.ts
@@ -9,7 +9,7 @@ import './globals';
 import { IStorybookSection, StoryFnVueReturnType } from './types';
 import { VueFramework } from './types-6-0';
 
-import render, { VALUES } from './render';
+import { renderToDOM, VALUES } from './render';
 import { extractProps } from './util';
 
 export const WRAPS = 'STORYBOOK_WRAPS';
@@ -100,7 +100,7 @@ interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   load: (...args: any[]) => void;
 }
 
-const api = start(render, { decorateStory });
+const api = start(renderToDOM, { decorateStory });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/app/vue/src/client/preview/render.ts b/app/vue/src/client/preview/render.ts
index c1328c2719a0..2f82dd7fa706 100644
--- a/app/vue/src/client/preview/render.ts
+++ b/app/vue/src/client/preview/render.ts
@@ -19,7 +19,7 @@ const root = new Vue({
   },
 });
 
-export default function render(
+export function renderToDOM(
   {
     title,
     name,
diff --git a/app/vue3/preset.js b/app/vue3/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/vue3/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/vue3/src/client/preview/config.ts b/app/vue3/src/client/preview/config.ts
new file mode 100644
index 000000000000..256d07e9a057
--- /dev/null
+++ b/app/vue3/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'vue3' };
diff --git a/app/vue3/src/client/preview/index.ts b/app/vue3/src/client/preview/index.ts
index e8302827ab05..83ea77664b37 100644
--- a/app/vue3/src/client/preview/index.ts
+++ b/app/vue3/src/client/preview/index.ts
@@ -9,7 +9,7 @@ import './globals';
 import { IStorybookSection } from './types';
 import { VueFramework } from './types-6-0';
 
-import render, { storybookApp } from './render';
+import { renderToDOM, storybookApp } from './render';
 
 /*
   This normalizes a functional component into a render method in ComponentOptions.
@@ -87,7 +87,7 @@ interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   app: App;
 }
 
-const api = start(render, { decorateStory });
+const api = start(renderToDOM, { decorateStory });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/app/vue3/src/client/preview/render.ts b/app/vue3/src/client/preview/render.ts
index 22fa07929eb8..db46ddfaa966 100644
--- a/app/vue3/src/client/preview/render.ts
+++ b/app/vue3/src/client/preview/render.ts
@@ -23,7 +23,7 @@ export const storybookApp = createApp({
   },
 });
 
-export default function render(
+export function renderToDOM(
   { title, name, storyFn, showMain, showError, showException }: RenderContext<VueFramework>,
   domElement: HTMLElement
 ) {
diff --git a/app/web-components/preset.js b/app/web-components/preset.js
new file mode 100644
index 000000000000..20b417ae97b5
--- /dev/null
+++ b/app/web-components/preset.js
@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};
diff --git a/app/web-components/src/client/preview/config.ts b/app/web-components/src/client/preview/config.ts
new file mode 100644
index 000000000000..a8f16dae7703
--- /dev/null
+++ b/app/web-components/src/client/preview/config.ts
@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'web-components' };
diff --git a/app/web-components/src/client/preview/index.ts b/app/web-components/src/client/preview/index.ts
index f6f71e6669d6..44ba037d0f03 100644
--- a/app/web-components/src/client/preview/index.ts
+++ b/app/web-components/src/client/preview/index.ts
@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
-import render from './render';
+import { renderToDOM } from './render';
 import { IStorybookSection } from './types';
 import { WebComponentsFramework } from './types-6-0';
 
@@ -18,7 +18,7 @@ interface ClientApi extends ClientStoryApi<WebComponentsFramework['storyResult']
   raw: () => any; // todo add type
 }
 
-const api = start(render);
+const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/app/web-components/src/client/preview/render.ts b/app/web-components/src/client/preview/render.ts
index 3b4662c1ec81..86a44c81b9d0 100644
--- a/app/web-components/src/client/preview/render.ts
+++ b/app/web-components/src/client/preview/render.ts
@@ -11,7 +11,7 @@ import { WebComponentsFramework } from './types-6-0';
 
 const { Node } = global;
 
-export default function renderMain(
+export function renderToDOM(
   { storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<WebComponentsFramework>,
   domElement: HTMLElement
 ) {