diff --git a/addons/docs/src/frameworks/svelte/preset.ts b/addons/docs/src/frameworks/svelte/preset.ts
index 9feb2647f424..a4862b8bb585 100644
--- a/addons/docs/src/frameworks/svelte/preset.ts
+++ b/addons/docs/src/frameworks/svelte/preset.ts
@@ -5,6 +5,7 @@ import { Configuration } from 'webpack';
 export function webpackFinal(webpackConfig: Configuration, options: any = {}) {
   webpackConfig.module.rules.push({
     test: /\.svelte$/,
+    exclude: /\.stories\.svelte$/,
     loader: path.resolve(`${__dirname}/svelte-docgen-loader`),
     enforce: 'post',
   });
diff --git a/app/svelte/jest-transform.js b/app/svelte/jest-transform.js
new file mode 100644
index 000000000000..c790c624162a
--- /dev/null
+++ b/app/svelte/jest-transform.js
@@ -0,0 +1,23 @@
+const svelte = require('svelte/compiler');
+
+const parser = require.resolve('./src/client/parse-stories').replace(/[/\\]/g, '/');
+
+function process(src, filename) {
+  const result = svelte.compile(src, {
+    format: 'cjs',
+    filename,
+  });
+
+  const code = result.js ? result.js.code : result.code;
+
+  const z = {
+    code: `${code}
+    const { default: parser } = require('${parser}');
+    module.exports = parser(module.exports, {});
+    Object.defineProperty(exports, "__esModule", { value: true });`,
+    map: result.js ? result.js.map : result.map,
+  };
+  return z;
+}
+
+exports.process = process;
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 1716ee1c7bdc..3be3f930e54d 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -42,6 +42,8 @@
   },
   "dependencies": {
     "@storybook/addons": "6.2.0-alpha.19",
+    "@storybook/client-api": "6.2.0-alpha.19",
+    "@storybook/client-logger": "6.2.0-alpha.19",
     "@storybook/core": "6.2.0-alpha.19",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
diff --git a/app/svelte/src/client/components/Meta.svelte b/app/svelte/src/client/components/Meta.svelte
new file mode 100644
index 000000000000..1f4060bd8fab
--- /dev/null
+++ b/app/svelte/src/client/components/Meta.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { useContext } from './context';
+
+  useContext().meta = $$props;
+</script>
+
diff --git a/app/svelte/src/client/components/RegisterContext.svelte b/app/svelte/src/client/components/RegisterContext.svelte
new file mode 100644
index 000000000000..12f446ba3695
--- /dev/null
+++ b/app/svelte/src/client/components/RegisterContext.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { createRegistrationContext } from './context';
+
+  export let Stories;
+  export let repositories;
+  
+  createRegistrationContext(repositories);
+  
+</script>
+
+<svelte:component this={Stories} />
diff --git a/app/svelte/src/client/components/RenderContext.svelte b/app/svelte/src/client/components/RenderContext.svelte
new file mode 100644
index 000000000000..16c665f0e03d
--- /dev/null
+++ b/app/svelte/src/client/components/RenderContext.svelte
@@ -0,0 +1,13 @@
+<script>
+    /**
+     * @component
+     * @wrapper
+     */
+    import { createRenderContext } from './context';
+
+    export let Stories;
+
+    createRenderContext($$props);
+</script>
+
+<svelte:component this={Stories}/>
\ No newline at end of file
diff --git a/app/svelte/src/client/components/Story.svelte b/app/svelte/src/client/components/Story.svelte
new file mode 100644
index 000000000000..033054a0684f
--- /dev/null
+++ b/app/svelte/src/client/components/Story.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { useContext } from './context';
+
+  const context = useContext();
+
+  export let name;
+  export let template;
+
+  if (!name) {
+    throw new Error('Missing Story name');
+  }
+
+  context.register({
+    name,
+    ...$$restProps, 
+    template: template != null ? template : !$$slots.default ? 'default' : null,
+  });
+
+  $: render = context.render && !context.templateName && context.storyName == name;
+</script>
+
+{#if render}
+  <slot args={context.args} {...context.args}/>
+{/if}
diff --git a/app/svelte/src/client/components/Template.svelte b/app/svelte/src/client/components/Template.svelte
new file mode 100644
index 000000000000..83ef90345c39
--- /dev/null
+++ b/app/svelte/src/client/components/Template.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { useContext } from './context';
+
+  const context = useContext();
+
+  export let name = 'default';
+
+  context.register({name, isTemplate: true});
+
+  $: render = context.render && context.templateName === name;
+</script>
+
+{#if render}
+  <slot args={context.args} {...context.args}/>
+{/if}
+  
\ No newline at end of file
diff --git a/app/svelte/src/client/components/__tests__/TestStories.svelte b/app/svelte/src/client/components/__tests__/TestStories.svelte
new file mode 100644
index 000000000000..290283883809
--- /dev/null
+++ b/app/svelte/src/client/components/__tests__/TestStories.svelte
@@ -0,0 +1,21 @@
+<script>
+    import Meta from '../Meta.svelte';
+    import Story from '../Story.svelte';
+    import Template from '../Template.svelte';
+</script>
+
+<Meta title="Test"/>
+
+<Template name="tpl1">
+    <div>tpl1</div>
+</Template>
+
+<Template name="tpl2">
+    <div>tpl2</div>
+</Template>
+
+<Story name="Story1" template="tpl1" args={{tpl1:true}}/>
+<Story name="Story2" template="tpl2" source args={{tpl1:true}}/>
+<Story name="Story3" source="xyz">
+    <div>story3</div>
+</Story>
diff --git a/app/svelte/src/client/components/context.ts b/app/svelte/src/client/components/context.ts
new file mode 100644
index 000000000000..769fb1d45482
--- /dev/null
+++ b/app/svelte/src/client/components/context.ts
@@ -0,0 +1,34 @@
+import { getContext, hasContext, setContext } from 'svelte';
+
+const CONTEXT_KEY = 'storybook-registration-context';
+
+export function createRenderContext(props: any = {}) {
+  setContext(CONTEXT_KEY, {
+    render: true,
+    register: () => {},
+    meta: {},
+    args: {},
+    ...props,
+  });
+}
+
+export function createRegistrationContext(repositories: any) {
+  setContext(CONTEXT_KEY, {
+    render: false,
+    register: (story: any) => {
+      repositories.stories.push(story);
+    },
+    set meta(value: any) {
+      // eslint-disable-next-line no-param-reassign
+      repositories.meta = value;
+    },
+    args: {},
+  });
+}
+
+export function useContext() {
+  if (!hasContext(CONTEXT_KEY)) {
+    createRenderContext();
+  }
+  return getContext(CONTEXT_KEY);
+}
diff --git a/app/svelte/src/client/index.ts b/app/svelte/src/client/index.ts
index 8034a9d6433d..c25165c7fc28 100644
--- a/app/svelte/src/client/index.ts
+++ b/app/svelte/src/client/index.ts
@@ -9,6 +9,11 @@ export {
   raw,
 } from './preview';
 
+export { default as Meta } from './components/Meta.svelte';
+export { default as Story } from './components/Story.svelte';
+export { default as Template } from './components/Template.svelte';
+export { useContext } from './components/context';
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }
diff --git a/app/svelte/src/client/parse-stories.js b/app/svelte/src/client/parse-stories.js
new file mode 100644
index 000000000000..b9051ecc3b84
--- /dev/null
+++ b/app/svelte/src/client/parse-stories.js
@@ -0,0 +1,111 @@
+/* eslint-env browser */
+import { logger } from '@storybook/client-logger';
+import { combineParameters } from '@storybook/client-api';
+
+import RegisterContext from './components/RegisterContext.svelte';
+import RenderContext from './components/RenderContext.svelte';
+
+/* Called from a webpack loader and a jest transformation.
+ *
+ * It mounts a Stories component in a context which disables
+ * the rendering of every <Story/> and <Template/> but instead
+ * collects names and properties.
+ *
+ * For every discovered <Story/>, it creates a storyFun which
+ * instanciate the main Stories component: Every Story but
+ * the one selected is disabled.
+ */
+
+const createFragment = document.createDocumentFragment
+  ? () => document.createDocumentFragment()
+  : () => document.createElement('div');
+
+export default (module, sources) => {
+  const { default: Stories } = module;
+
+  const repositories = {
+    meta: null,
+    stories: [],
+  };
+
+  // extract all stories
+  try {
+    const context = new RegisterContext({
+      target: createFragment(),
+      props: {
+        Stories,
+        repositories,
+      },
+    });
+    context.$destroy();
+  } catch (e) {
+    logger.error(`Error extracting stories ${e.toString()}`);
+  }
+
+  const { meta } = repositories;
+  if (!meta) {
+    logger.error('Missing <Meta/> tag');
+    return {};
+  }
+
+  const { component: globalComponent } = meta;
+
+  // collect templates id
+  const templatesId = repositories.stories
+    .filter((story) => story.isTemplate)
+    .map((story) => story.name);
+
+  // check for duplicate templates
+  const duplicateTemplatesId = templatesId.filter(
+    (item, index) => templatesId.indexOf(item) !== index
+  );
+
+  if (duplicateTemplatesId.length > 0) {
+    logger.warn(`Found duplicates templates id :${duplicateTemplatesId}`);
+  }
+
+  const found = repositories.stories
+    .filter((story) => !story.isTemplate)
+    .map((story) => {
+      const { name, template, component, source = false, ...props } = story;
+
+      const unknowTemplate = template != null && templatesId.indexOf(template) < 0;
+
+      const storyFn = (args) => {
+        if (unknowTemplate) {
+          throw new Error(`Story ${name} is referencing an unknown template ${template}`);
+        }
+
+        return {
+          Component: RenderContext,
+          props: {
+            Stories,
+            storyName: name,
+            templateName: template,
+            args,
+            sourceComponent: component || globalComponent,
+          },
+        };
+      };
+
+      storyFn.storyName = name;
+      Object.entries(props).forEach(([k, v]) => {
+        storyFn[k] = v;
+      });
+      // inject sources into story
+      const storySource = source === true ? sources[template ? `tpl:${template}` : name] : source;
+
+      if (storySource) {
+        storyFn.parameters = combineParameters(storyFn.parameters || {}, {
+          docs: { source: { code: storySource } },
+        });
+      }
+
+      return storyFn;
+    });
+
+  return {
+    default: meta,
+    ...found,
+  };
+};
diff --git a/app/svelte/src/client/parse-stories.test.js b/app/svelte/src/client/parse-stories.test.js
new file mode 100644
index 000000000000..8c15ea2f0c3b
--- /dev/null
+++ b/app/svelte/src/client/parse-stories.test.js
@@ -0,0 +1,36 @@
+import parseStories from './parse-stories';
+import TestStories from './components/__tests__/TestStories.svelte';
+
+describe('parse-stories', () => {
+  test('Extract Stories', () => {
+    const stories = parseStories({ default: TestStories }, { 'tpl:tpl2': 'tpl2src' });
+    expect(stories.default).toMatchInlineSnapshot(`
+      Object {
+        "title": "Test",
+      }
+    `);
+
+    expect(stories['0'].storyName).toBe('Story1');
+    expect(stories['0'].parameters).toMatchInlineSnapshot(`undefined`);
+    expect(stories['1'].storyName).toBe('Story2');
+    expect(stories['1'].parameters).toMatchInlineSnapshot(`
+      Object {
+        "docs": Object {
+          "source": Object {
+            "code": "tpl2src",
+          },
+        },
+      }
+    `);
+    expect(stories['2'].storyName).toBe('Story3');
+    expect(stories['2'].parameters).toMatchInlineSnapshot(`
+      Object {
+        "docs": Object {
+          "source": Object {
+            "code": "xyz",
+          },
+        },
+      }
+    `);
+  });
+});
diff --git a/app/svelte/src/server/extract-sources.test.js b/app/svelte/src/server/extract-sources.test.js
new file mode 100644
index 000000000000..da89f9aacb6b
--- /dev/null
+++ b/app/svelte/src/server/extract-sources.test.js
@@ -0,0 +1,86 @@
+import { extractStoriesSources } from './extract-sources';
+
+describe('extractSource', () => {
+  test('Simple Story', () => {
+    expect(
+      extractStoriesSources(`
+        <script>
+          import { Story } from '@storybook/svelte';
+        </script>
+
+        <Story name="MyStory">
+          <div>a story</div>
+        </Story>
+        `)
+    ).toMatchInlineSnapshot(`
+      Object {
+        "MyStory": <div>
+        a story
+      </div>,
+      }
+    `);
+  });
+  test('Simple Template', () => {
+    expect(
+      extractStoriesSources(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Template name="MyTemplate">
+          <div>a template</div>
+        </Template>
+        `)
+    ).toMatchInlineSnapshot(`
+      Object {
+        "tpl:MyTemplate": <div>
+        a template
+      </div>,
+      }
+    `);
+  });
+  test('Unnamed Template', () => {
+    expect(
+      extractStoriesSources(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Template>
+          <div>a template</div>
+        </Template>
+        `)
+    ).toMatchInlineSnapshot(`
+      Object {
+        "tpl:default": <div>
+        a template
+      </div>,
+      }
+    `);
+  });
+  test('Multiple Stories', () => {
+    expect(
+      extractStoriesSources(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        <Story name="Story2">
+          <div>story 2</div>
+        </Story>
+        `)
+    ).toMatchInlineSnapshot(`
+      Object {
+        "Story1": <div>
+        story 1
+      </div>,
+        "Story2": <div>
+        story 2
+      </div>,
+      }
+    `);
+  });
+});
diff --git a/app/svelte/src/server/extract-sources.ts b/app/svelte/src/server/extract-sources.ts
new file mode 100644
index 000000000000..466d300f8721
--- /dev/null
+++ b/app/svelte/src/server/extract-sources.ts
@@ -0,0 +1,52 @@
+import dedent from 'ts-dedent';
+import * as svelte from 'svelte/compiler';
+
+/**
+ * Parse a Svelte component and extract stories sources.
+ * @param component Component Source
+ * @returns Map of storyName -> source
+ */
+export function extractStoriesSources(component: string): Record<string, string> {
+  // compile
+  const { ast } = svelte.compile(component);
+
+  const sources: Record<string, string> = {};
+  svelte.walk(ast.html, {
+    enter(node: any) {
+      if (node.type === 'InlineComponent' && (node.name === 'Story' || node.name === 'Template')) {
+        this.skip();
+
+        const isTemplate = node.name === 'Template';
+
+        // ignore stories without children
+        if (node.children.length === 0) {
+          return;
+        }
+
+        // extract the 'name' attribute
+        const nameAtt = node.attributes.find(
+          (att: any) => att.type === 'Attribute' && att.name === 'name'
+        );
+
+        // extract 'name' value: expecting a constant value, ie one Text node
+        let name;
+        if (nameAtt) {
+          const { value } = nameAtt;
+          if (value && value.length === 1 && value[0].type === 'Text') {
+            name = value[0].data;
+          }
+        } else if (isTemplate) {
+          name = 'default'; // unnamed template
+        }
+
+        if (name) {
+          const { start } = node.children[0];
+          const { end } = node.children[node.children.length - 1];
+          sources[isTemplate ? `tpl:${name}` : name] = dedent(component.substr(start, end - start));
+        }
+      }
+    },
+  });
+
+  return sources;
+}
diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/app/svelte/src/server/framework-preset-svelte.ts
index d29eaf8ec519..abb7e9e745cf 100644
--- a/app/svelte/src/server/framework-preset-svelte.ts
+++ b/app/svelte/src/server/framework-preset-svelte.ts
@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack'; // eslint-disable-line
+import type { Configuration } from 'webpack';
 
 export function webpack(config: Configuration) {
   return {
@@ -7,11 +7,21 @@ export function webpack(config: Configuration) {
       ...config.module,
       rules: [
         ...config.module.rules,
+
         {
           test: /\.(svelte|html)$/,
           loader: require.resolve('svelte-loader'),
           options: {},
         },
+        {
+          test: /\.stories\.svelte$/,
+          enforce: 'post',
+          use: [
+            {
+              loader: require.resolve('./svelte-stories-loader'),
+            },
+          ],
+        },
       ],
     },
     resolve: {
diff --git a/app/svelte/src/server/svelte-stories-loader.ts b/app/svelte/src/server/svelte-stories-loader.ts
new file mode 100644
index 000000000000..42d9769a3ea4
--- /dev/null
+++ b/app/svelte/src/server/svelte-stories-loader.ts
@@ -0,0 +1,21 @@
+import dedent from 'ts-dedent';
+import { readFileSync } from 'fs';
+
+import { extractStoriesSources } from './extract-sources';
+
+const parser = require.resolve('../client/parse-stories').replace(/[/\\]/g, '/');
+
+function transformSvelteStories(code: string) {
+  // eslint-disable-next-line no-underscore-dangle
+  const { resource } = this._module;
+
+  const source = readFileSync(resource).toString();
+  const storiesSources = extractStoriesSources(source);
+
+  return dedent`${code}
+    const { default: parser } = require('${parser}');
+    export const __dynamicStoriesGenerator = (m) => parser(m, ${JSON.stringify(storiesSources)});
+  `;
+}
+
+export default transformSvelteStories;
diff --git a/app/svelte/src/typings.d.ts b/app/svelte/src/typings.d.ts
index 6288cba4b09a..5ed546f22d2c 100644
--- a/app/svelte/src/typings.d.ts
+++ b/app/svelte/src/typings.d.ts
@@ -1,2 +1,3 @@
 declare module '@storybook/core/*';
 declare module 'global';
+declare module '*.svelte';
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index faaa402ad361..85823d27e711 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -14,7 +14,8 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'react/your-component.ts.mdx',
     'angular/your-component.ts.mdx',
     'vue/your-component.js.mdx',
-    'svelte/your-component.js.mdx'
+    'svelte/your-component.svelte.mdx',
+    'svelte/your-component.js.mdx',
   ]}
 />
 
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index c34429da855c..a83aa202c8a6 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -19,6 +19,7 @@ Let’s start with the `Button` component. A story is a function that describes
     'react/button-story.mdx.mdx',
     'angular/button-story.ts.mdx',
     'vue/button-story.js.mdx',
+    'svelte/button-story.svelte.mdx',
     'svelte/button-story.js.mdx',
     'svelte/button-story.mdx.mdx',
   ]}
@@ -38,7 +39,9 @@ The above story definition can be further improved to take advantage of [Storybo
   paths={[
     'react/button-story-with-args.js.mdx',
     'react/button-story-with-args.ts.mdx',
-    'vue/button-story-with-args.js.mdx'
+    'vue/button-story-with-args.js.mdx',
+    'svelte/button-story-with-args.svelte.mdx',
+    'svelte/button-story-with-args.js.mdx',
   ]}
 />
 
diff --git a/docs/snippets/svelte/button-story-component-args-primary.svelte.mdx b/docs/snippets/svelte/button-story-component-args-primary.svelte.mdx
new file mode 100644
index 000000000000..18c53b03e699
--- /dev/null
+++ b/docs/snippets/svelte/button-story-component-args-primary.svelte.mdx
@@ -0,0 +1,19 @@
+```html
+<!-- Button.stories.svelte -->
+<script>
+  import { Meta } from '@storybook/svelte';
+  import Button from './Button.svelte';
+</script>
+
+<Meta
+  title="Button"
+  component={Button}
+  argTypes={{
+    backgroundColor: { control: 'color' },
+  }}
+  args={{
+    // Now all Button stories will be primary.
+    primary: true,
+  }}
+/>
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-component-decorator.svelte.mdx b/docs/snippets/svelte/button-story-component-decorator.svelte.mdx
new file mode 100644
index 000000000000..fedee1474d2e
--- /dev/null
+++ b/docs/snippets/svelte/button-story-component-decorator.svelte.mdx
@@ -0,0 +1,19 @@
+```html
+<!-- Button.stories.svelte -->
+<script>
+  import { Meta, Story } from '@storybook/svelte';
+</script>
+
+<Meta title="Button" component={Button}/>
+
+<div>
+
+  <!-- Your stories here -->
+  <Story ... />
+
+</div>
+
+<style>
+  div { margin: 3em; }
+</style>
+```
diff --git a/docs/snippets/svelte/button-story-decorator.svelte.mdx b/docs/snippets/svelte/button-story-decorator.svelte.mdx
new file mode 100644
index 000000000000..7b3446b108e6
--- /dev/null
+++ b/docs/snippets/svelte/button-story-decorator.svelte.mdx
@@ -0,0 +1,20 @@
+```html
+<!-- Button.stories.js -->
+<script>
+  const marginDecorator = (storyFn) => {
+    const story = storyFun();
+
+    return {
+      Component: MarginDecorator,
+      props: {
+        child: story.Component,
+        props: story.props,
+      },
+    }
+  }
+</script>
+
+<Story decorators={[marginDecorator]}>
+  ...
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-default-export-with-component.svelte.mdx b/docs/snippets/svelte/button-story-default-export-with-component.svelte.mdx
new file mode 100644
index 000000000000..3629b029ed11
--- /dev/null
+++ b/docs/snippets/svelte/button-story-default-export-with-component.svelte.mdx
@@ -0,0 +1,10 @@
+```html
+<!-- Button.stories.svelte -->
+
+<script>
+  import { Meta } from '@storybook/svelte';
+  import Button from './Button.svelte';
+</script>
+
+<Meta title='Components/Button' component={Button}/>
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-rename-story.svelte.mdx b/docs/snippets/svelte/button-story-rename-story.svelte.mdx
new file mode 100644
index 000000000000..2c95fe9e0b04
--- /dev/null
+++ b/docs/snippets/svelte/button-story-rename-story.svelte.mdx
@@ -0,0 +1,11 @@
+```html
+<!-- Button.stories.svelte -->
+<script>
+  import { Story } from '@storybook/svelte';
+  import Button from './Button.svelte';
+</script>
+
+<Story name='I am the primary'>
+  <Button primary label='Button'/>
+</Story>
+```
diff --git a/docs/snippets/svelte/button-story-using-args.svelte.mdx b/docs/snippets/svelte/button-story-using-args.svelte.mdx
new file mode 100644
index 000000000000..06d84ff5840b
--- /dev/null
+++ b/docs/snippets/svelte/button-story-using-args.svelte.mdx
@@ -0,0 +1,21 @@
+```html
+<!-- Button.stories.svelte -->
+<script>
+  import { Story, Template } from '@storybook/svelte';
+  import Button from './Button.svelte';
+
+  const primaryArgs = { background: "#ff0", label: 'Button' };
+</script>
+
+// We create a “template” of how args map to rendering
+<Template let:args>
+  <Button  {...args}/>
+</Template>
+
+// Each story then reuses that template
+<Story name="Primary" args={primaryArgs}/>
+
+<Story name="Secondary" args={{...primaryArgs, label: '😄👍😍💯'}}/>
+
+<Story name="Tertiary" args={{...primaryArgs, label: '📚📕📈🤓'}}/>
+```
diff --git a/docs/snippets/svelte/button-story-with-args.svelte.mdx b/docs/snippets/svelte/button-story-with-args.svelte.mdx
new file mode 100644
index 000000000000..cf056410ca7b
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-args.svelte.mdx
@@ -0,0 +1,14 @@
+```html
+<!-- Button.stories.svelte -->
+
+<script>
+  import { Meta, Template, Story } from '@storybook/svelte';
+  import Button from './Button.svelte';
+</script>
+
+<Template let:args>
+  <Button {...args}/>
+</Template>
+
+<Story args={{primary: true, label: 'Primary'}}/>
+```
diff --git a/docs/snippets/svelte/button-story-with-blue-args.svelte.mdx b/docs/snippets/svelte/button-story-with-blue-args.svelte.mdx
new file mode 100644
index 000000000000..e148e3d223eb
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-blue-args.svelte.mdx
@@ -0,0 +1,20 @@
+```html
+<!-- Button.stories.svelte -->
+<script>
+  import { Meta } from '@storybook/svelte';
+  import Button from './Button.svelte';
+</script>
+
+<Meta
+  title='Button'
+  component={Button}
+  parameters= {{
+    backgrounds: {
+      values: [
+         { name: 'red', value: '#f00', },
+         { name: 'green', value: '#0f0', },
+         { name: 'blue', value: '#00f', },
+      ]
+    }
+  }}/>
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-emojis.svelte.mdx b/docs/snippets/svelte/button-story-with-emojis.svelte.mdx
new file mode 100644
index 000000000000..f34df81cd3f2
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-emojis.svelte.mdx
@@ -0,0 +1,15 @@
+```html
+<!-- Button.stories.svelte -->
+
+<Story name="Primary">
+    <Button background="#ff0" label="Button"/>
+</Story>
+
+<Story name="Secondary">
+    <Button background="#ff0" label="😄👍😍💯"/>
+</Story>
+
+<Story name="Tertiary">
+    <Button background="#ff0" label="📚📕📈🤓"/>
+</Story>
+```
diff --git a/docs/snippets/svelte/button-story.svelte.mdx b/docs/snippets/svelte/button-story.svelte.mdx
new file mode 100644
index 000000000000..4ec0ac5c2bdb
--- /dev/null
+++ b/docs/snippets/svelte/button-story.svelte.mdx
@@ -0,0 +1,14 @@
+```html
+<!-- Button.stories.svelte -->
+
+<script>
+  import { Meta, Story } from '@storybook/svelte';
+  import Button from './Button.svelte';
+</script>
+
+<Meta title="Button" />
+
+<Story name="Primary">
+  <Button primary label="Button"/>
+</Story>
+```
diff --git a/docs/snippets/svelte/list-story-expanded.svelte.mdx b/docs/snippets/svelte/list-story-expanded.svelte.mdx
new file mode 100644
index 000000000000..8cdc702d7125
--- /dev/null
+++ b/docs/snippets/svelte/list-story-expanded.svelte.mdx
@@ -0,0 +1,28 @@
+```html
+<! -- List.stories.svelte -->
+<script>
+  import { Meta, Template, Story } from '@storybook/svelte';
+  import List from './List.svelte';
+  import ListItem from './ListItem.svelte';
+</script>
+
+<Meta title='List' component={List}/>
+
+<Story name="Empty" let:args>
+  <List {...args} />
+</Story>
+
+<Story name="OneItem" let:args>
+  <List {...args}>
+    <ListItem />
+  </List>
+</Story>
+
+<Story name="ManyItems" let:args>
+  <List {...args}>
+    <ListItem />
+    <ListItem />
+    <ListItem />
+  </List>
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/list-story-starter.svelte.mdx b/docs/snippets/svelte/list-story-starter.svelte.mdx
new file mode 100644
index 000000000000..574b857395a5
--- /dev/null
+++ b/docs/snippets/svelte/list-story-starter.svelte.mdx
@@ -0,0 +1,15 @@
+```html
+<!-- List.stories.js -->
+<script>
+  import { Meta, Template, Story } from '@storybook/svelte';
+  import List from './List.svelte';
+</script>
+
+<Meta title='List' component={List}/>
+
+<!-- Always an empty list, not super interesting -->
+<Template let:args>
+  <List {...args}/>
+</Template>
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/your-component-with-decorator.svelte.mdx b/docs/snippets/svelte/your-component-with-decorator.svelte.mdx
new file mode 100644
index 000000000000..5adbe8872eb8
--- /dev/null
+++ b/docs/snippets/svelte/your-component-with-decorator.svelte.mdx
@@ -0,0 +1,14 @@
+```html
+<!-- YourComponent.stories.svelte -->
+<script>
+  import YourComponent from './YourComponent.svelte';
+</script>
+
+<div>
+  <!-- Your templates and stories here. -->
+</div>
+
+<style>
+  div { margin: 3em; }
+</style>
+```
diff --git a/docs/snippets/svelte/your-component.svelte.mdx b/docs/snippets/svelte/your-component.svelte.mdx
new file mode 100644
index 000000000000..184701cb4534
--- /dev/null
+++ b/docs/snippets/svelte/your-component.svelte.mdx
@@ -0,0 +1,19 @@
+```html
+<!-- YourComponent.stories.svelte -->
+
+<script>
+  import { Meta, Template, Story } from '@storybook/svelte';
+  import YourComponent from './YourComponent.svelte';
+</script>
+
+<!-- This component determines where your story goes in the story list -->
+<Meta title='YourComponent' component={YourComponent}/>
+
+<Template let:args>
+  <YourComponent {...args}/>
+</Template>
+
+<Story args={{
+  /* the args you need here will depend on your component */
+}}/>
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index ad31ed4e8742..b9e321d607f1 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -24,6 +24,7 @@ To define the args of a single story, use the `args` CSF story key:
     'react/button-story-with-args.ts.mdx',
     'vue/button-story-with-args.js.mdx',
     'angular/button-story-with-args.ts.mdx',
+    'svelte/button-story-with-args.svelte.mdx',
     'svelte/button-story-with-args.js.mdx',
   ]}
 />
@@ -56,6 +57,7 @@ You can also define args at the component level; such args will apply to all sto
     'react/button-story-component-args-primary.ts.mdx',
     'vue/button-story-component-args-primary.js.mdx',
     'angular/button-story-component-args-primary.ts.mdx',
+    'svelte/button-story-component-args-primary.svelte.mdx',
     'svelte/button-story-component-args-primary.js.mdx',
   ]}
 />
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index 2b56f278a596..a23caf6f44f5 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -20,6 +20,7 @@ Some components require a “harness” to render in a useful way. For instance
     'react/your-component-with-decorator.ts.mdx',
     'vue/your-component-with-decorator.js.mdx',
     'angular/your-component-with-decorator.ts.mdx',
+    'svelte/your-component-with-decorator.svelte.mdx',
     'svelte/your-component-with-decorator.js.mdx',
   ]}
 />
@@ -66,6 +67,7 @@ To define a decorator for a single story, use the `decorators` key on a named ex
     'react/button-story-decorator.ts.mdx',
     'vue/button-story-decorator.js.mdx',
     'angular/button-story-decorator.ts.mdx',
+    'svelte/button-story-decorator.svelte.mdx',
     'svelte/button-story-decorator.js.mdx',
   ]}
 />
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index a383a9cb4064..6a80c47f337f 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -33,6 +33,7 @@ The _default_ export metadata controls how Storybook lists your stories and prov
     'react/button-story-default-export-with-component.ts.mdx',
     'vue/button-story-default-export-with-component.js.mdx',
     'angular/button-story-default-export-with-component.ts.mdx',
+    'svelte/button-story-default-export-with-component.svelte.mdx',
     'svelte/button-story-default-export-with-component.js.mdx',
   ]}
 />
@@ -51,6 +52,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
     'react/button-story.ts.mdx',
     'vue/button-story.js.mdx',
     'angular/button-story.ts.mdx',
+    'svelte/button-story.svelte.mdx',
     'svelte/button-story.js.mdx',
   ]}
 />
@@ -69,6 +71,7 @@ You can rename any particular story you need. For instance to give it a clearer
     'react/button-story-rename-story.ts.mdx',
     'vue/button-story-rename-story.js.mdx',
     'angular/button-story-rename-story.ts.mdx',
+    'svelte/button-story-rename-story.svelte.mdx',
     'svelte/button-story-rename-story.js.mdx',
   ]}
 />
@@ -89,6 +92,7 @@ A story is a function that describes how to render a component. You can have mul
     'react/button-story-with-emojis.ts.mdx',
     'vue/button-story-with-emojis.js.mdx',
     'angular/button-story-with-emojis.ts.mdx',
+    'svelte/button-story-with-emojis.svelte.mdx',
     'svelte/button-story-with-emojis.js.mdx',
   ]}
 />
@@ -109,6 +113,7 @@ Refine this pattern by defining a master template for a component’s stories th
     'react/button-story-using-args.ts.mdx',
     'vue/button-story-using-args.js.mdx',
     'angular/button-story-using-args.ts.mdx',
+    'svelte/button-story-using-args.svelte.mdx',
     'svelte/button-story-using-args.js.mdx',
   ]}
 />
@@ -167,6 +172,7 @@ For instance, suppose you wanted to test your Button component against a differe
     'react/button-story-with-blue-args.ts.mdx',
     'vue/button-story-with-blue-args.js.mdx',
     'angular/button-story-with-blue-args.ts.mdx',
+    'svelte/button-story-with-blue-args.svelte.mdx',
     'svelte/button-story-with-blue-args.js.mdx',
   ]}
 />
@@ -191,6 +197,7 @@ A simple example is adding padding to a component’s stories. Accomplish this u
     'react/button-story-component-decorator.ts.mdx',
     'vue/button-story-component-decorator.js.mdx',
     'angular/button-story-component-decorator.ts.mdx',
+    'svelte/button-story-component-decorator.svelte.mdx',
     'svelte/button-story-component-decorator.js.mdx',
   ]}
 />
@@ -210,7 +217,8 @@ When building design systems or component libraries, you may have two or more co
     'react/list-story-starter.js.mdx',
     'react/list-story-starter.ts.mdx',
     'angular/list-story-starter.ts.mdx',
-    'vue/list-story-starter.js.mdx'
+    'vue/list-story-starter.js.mdx',
+    'svelte/list-story-starter.svelte.mdx'
   ]}
 />
 
@@ -225,7 +233,8 @@ In such cases, it makes sense to render a different function for each story:
     'react/list-story-expanded.js.mdx',
     'react/list-story-expanded.ts.mdx',
     'angular/list-story-expanded.ts.mdx',
-    'vue/list-story-expanded.js.mdx'
+    'vue/list-story-expanded.js.mdx',
+    'svelte/list-story-expanded.svelte.mdx'
   ]}
 />
 
diff --git a/examples/svelte-kitchen-sink/jest.config.js b/examples/svelte-kitchen-sink/jest.config.js
index 3476ff274a8d..3b7b9f4dce23 100644
--- a/examples/svelte-kitchen-sink/jest.config.js
+++ b/examples/svelte-kitchen-sink/jest.config.js
@@ -1,11 +1,12 @@
 const config = require('../../jest.config');
 
 module.exports = {
+  verbose: true,
   ...config,
   roots: [__dirname],
   transform: {
+    '.*\\.stories.svelte$': '@storybook/svelte/jest-transform',
     ...config.transform,
-    '.*\\.(svelte)$': '<rootDir>/scripts/utils/jest-transform-svelte',
   },
   moduleNameMapper: {
     '!!raw-loader!.*': '<rootDir>/__mocks__/fileMock.js',
diff --git a/examples/svelte-kitchen-sink/src/components/Button.test.js b/examples/svelte-kitchen-sink/src/components/Button.test.js
index ef7794535eb4..2160b1358b31 100644
--- a/examples/svelte-kitchen-sink/src/components/Button.test.js
+++ b/examples/svelte-kitchen-sink/src/components/Button.test.js
@@ -8,7 +8,7 @@ describe('Button Component', () => {
   beforeEach(() => {
     target = document.createElement('div');
 
-    component = new Button.default({ target }); // eslint-disable-line new-cap
+    component = new Button({ target });
   });
 
   it('should render `text` property', () => {
diff --git a/examples/svelte-kitchen-sink/src/stories/svelte-format/addon-actions.stories.svelte b/examples/svelte-kitchen-sink/src/stories/svelte-format/addon-actions.stories.svelte
new file mode 100644
index 000000000000..c0bc7f5e05d1
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/svelte-format/addon-actions.stories.svelte
@@ -0,0 +1,15 @@
+<script>
+    import { Meta, Story } from '@storybook/svelte';
+    import { action } from '@storybook/addon-actions';
+
+    import Button from '../../components/Button.svelte';
+
+    console.log("in addon action stories");
+</script>
+
+<Meta title="Addon/Actions (Svelte)" component={Button}/>
+
+<Story name="Action on component method">
+    <Button text="Custom text" on:click={action('I am logging in the actions tab')}/>
+</Story>
+
diff --git a/examples/svelte-kitchen-sink/src/stories/svelte-format/addon-knobs.stories.svelte b/examples/svelte-kitchen-sink/src/stories/svelte-format/addon-knobs.stories.svelte
new file mode 100644
index 000000000000..46b436e09351
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/svelte-format/addon-knobs.stories.svelte
@@ -0,0 +1,27 @@
+<script>
+    import { Meta, Story } from '@storybook/svelte';
+    import { withKnobs, text, number } from '@storybook/addon-knobs';
+
+    const backgroundColor = text('Background', 'green');
+    const width = number('Width', 200, {
+        range: true,
+        min: 100,
+        max: 1000,
+        step: 100,
+    });
+
+    const height = number('Height', 200, {
+        range: true,
+        min: 100,
+        max: 1000,
+        step: 100,
+    });
+</script>
+
+<Meta title="Addon/Knobs (Svelte)" decorators={[withKnobs]}/>
+
+<Story name="Simple" source>
+    <div style="width: {width}px; height: {height}px; background-color: {backgroundColor}">
+        <p>I am interactive</p>
+    </div>
+</Story>
\ No newline at end of file
diff --git a/examples/svelte-kitchen-sink/src/stories/svelte-format/argstable.stories.svelte b/examples/svelte-kitchen-sink/src/stories/svelte-format/argstable.stories.svelte
new file mode 100644
index 000000000000..82a3ccb03016
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/svelte-format/argstable.stories.svelte
@@ -0,0 +1,14 @@
+<script>
+    import { Meta, Story } from '@storybook/svelte';
+
+    import ArgsTableView from '../views/ArgsTableView.svelte';
+    // eslint-disable-next-line
+    import srcArgsTableView from '!!raw-loader!../views/ArgsTableView.svelte';
+
+</script>
+
+<Meta title="Args Table (Svelte)" component={ArgsTableView}/>
+
+<Story name="ArgsTable" let:args source={srcArgsTableView}>
+    <ArgsTableView {...args}/>
+</Story>
\ No newline at end of file
diff --git a/examples/svelte-kitchen-sink/src/stories/svelte-format/button.stories.svelte b/examples/svelte-kitchen-sink/src/stories/svelte-format/button.stories.svelte
new file mode 100644
index 000000000000..ad936f5bc6ac
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/svelte-format/button.stories.svelte
@@ -0,0 +1,22 @@
+<script>
+    import { Meta, Story, Template } from '@storybook/svelte';
+
+    import Button from '../../components/Button.svelte';
+
+    let count = 0;
+    function handleClick(event) {
+        count += 1;
+    }
+</script>
+
+<Meta title="Button (Svelte)" component={Button}/>
+
+<Template let:args>
+    <Button {...args} on:click={handleClick}>
+        You clicked: {count}
+    </Button>
+</Template>
+
+<Story name="Rounded" args={{rounded: true}}/>
+
+<Story name="Square" source args={{rounded: false}}/>
\ No newline at end of file
diff --git a/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte b/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
index 7306df6a054a..5858d47c1311 100644
--- a/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
+++ b/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
@@ -5,7 +5,6 @@
    */
   import Button from '../../components/Button.svelte';
 
-
   /**
    * Rounds the button
    */
diff --git a/examples/svelte-kitchen-sink/svelte-format/__snapshots__/addon-actions.stories.storyshot b/examples/svelte-kitchen-sink/svelte-format/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..9a428f190e4c
--- /dev/null
+++ b/examples/svelte-kitchen-sink/svelte-format/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon/Actions (Svelte) Action on component method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+   
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+     
+    <br />
+     
+    Custom text
+     
+  </button>
+  
+  
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/svelte-format/__snapshots__/addon-knobs.stories.storyshot b/examples/svelte-kitchen-sink/svelte-format/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..3d3242996322
--- /dev/null
+++ b/examples/svelte-kitchen-sink/svelte-format/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon/Knobs (Svelte) Simple 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+   
+  <div
+    style="width: 200px; height: 200px; background-color: green;"
+  >
+    <p>
+      I am interactive
+    </p>
+  </div>
+  
+  
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/svelte-format/__snapshots__/argstable.stories.storyshot b/examples/svelte-kitchen-sink/svelte-format/__snapshots__/argstable.stories.storyshot
new file mode 100644
index 000000000000..e2f8fa8935c5
--- /dev/null
+++ b/examples/svelte-kitchen-sink/svelte-format/__snapshots__/argstable.stories.storyshot
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Args Table (Svelte) ArgsTable 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+   
+  <pre>
+    {
+  "string": "string",
+  "number": 0,
+  "unionstr": "a",
+  "unionnumeric": 1,
+  "required": ""
+}
+  </pre>
+   
+  <div />
+   
+  <div />
+   
+   
+  
+  
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/svelte-format/__snapshots__/button.stories.storyshot b/examples/svelte-kitchen-sink/svelte-format/__snapshots__/button.stories.storyshot
new file mode 100644
index 000000000000..f79064894466
--- /dev/null
+++ b/examples/svelte-kitchen-sink/svelte-format/__snapshots__/button.stories.storyshot
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button (Svelte) Rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+   
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+     
+    <br />
+     
+    
+     
+    You clicked: 
+    0
+  </button>
+  
+   
+  
+   
+  
+  
+</section>
+`;
+
+exports[`Storyshots Button (Svelte) Square 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+     
+    <br />
+     
+    
+     
+    You clicked: 
+    0
+  </button>
+  
+   
+  
+   
+  
+  
+</section>
+`;
diff --git a/jest.config.js b/jest.config.js
index 1ef84420b73f..9c52d6a42873 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -45,6 +45,7 @@ module.exports = {
     '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
     '^.+\\.[jt]sx?$': '<rootDir>/scripts/utils/jest-transform-js.js',
     '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
+    '^.+\\.svelte$': '<rootDir>/scripts/utils/jest-transform-svelte.js',
   },
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: [
diff --git a/lib/core/src/client/preview/loadCsf.ts b/lib/core/src/client/preview/loadCsf.ts
index 6d54ec2f5193..c1095b83e22c 100644
--- a/lib/core/src/client/preview/loadCsf.ts
+++ b/lib/core/src/client/preview/loadCsf.ts
@@ -83,7 +83,11 @@ const loadStories = (
 
   const added = Array.from(currentExports.keys()).filter((exp) => !previousExports.has(exp));
 
-  added.forEach((fileExports) => {
+  added.forEach((fE) => {
+    // Dynamic stories generator ?
+    // eslint-disable-next-line no-underscore-dangle
+    const fileExports = fE.__dynamicStoriesGenerator ? fE.__dynamicStoriesGenerator(fE) : fE;
+
     // An old-style story file
     if (!fileExports.default) {
       return;
@@ -136,7 +140,7 @@ const loadStories = (
       framework,
       component,
       subcomponents,
-      fileName: currentExports.get(fileExports),
+      fileName: currentExports.get(fE),
       ...kindParameters,
       args: kindArgs,
       argTypes: kindArgTypes,
diff --git a/scripts/utils/jest-transform-svelte.js b/scripts/utils/jest-transform-svelte.js
index 16120155678f..d7c48e97c7ac 100644
--- a/scripts/utils/jest-transform-svelte.js
+++ b/scripts/utils/jest-transform-svelte.js
@@ -1,12 +1,14 @@
 const svelte = require('svelte/compiler');
 
+const esInterop = '\nObject.defineProperty(exports, "__esModule", { value: true });';
+
 function process(src, filename) {
   const result = svelte.compile(src, {
     format: 'cjs',
     filename,
   });
 
-  const code = result.js ? result.js.code : result.code;
+  const code = (result.js ? result.js.code : result.code) + esInterop;
 
   return {
     code,