diff --git a/examples/svelte-kitchen-sink/.storybook/config.js b/examples/svelte-kitchen-sink/.storybook/config.js
new file mode 100644
index 000000000000..2eae43220865
--- /dev/null
+++ b/examples/svelte-kitchen-sink/.storybook/config.js
@@ -0,0 +1,7 @@
+import { addParameters } from '@storybook/svelte';
+
+addParameters({
+ docs: {
+ iframeHeight: 300,
+ },
+});
diff --git a/examples/svelte-kitchen-sink/.storybook/main.js b/examples/svelte-kitchen-sink/.storybook/main.js
index 2f3f49da9ad8..de958c60c996 100644
--- a/examples/svelte-kitchen-sink/.storybook/main.js
+++ b/examples/svelte-kitchen-sink/.storybook/main.js
@@ -5,6 +5,12 @@ module.exports = {
addons: [
'@storybook/addon-storysource',
'@storybook/addon-actions',
+ {
+ name: '@storybook/addon-docs',
+ options: {
+ configureJSX: true,
+ },
+ },
'@storybook/addon-links',
'@storybook/addon-knobs',
'@storybook/addon-backgrounds',
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index c6d6ce666aeb..e2d3aaea353a 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -14,6 +14,7 @@
"@storybook/addon-actions": "6.0.0-alpha.25",
"@storybook/addon-backgrounds": "6.0.0-alpha.25",
"@storybook/addon-centered": "6.0.0-alpha.25",
+ "@storybook/addon-docs": "6.0.0-alpha.25",
"@storybook/addon-knobs": "6.0.0-alpha.25",
"@storybook/addon-links": "6.0.0-alpha.25",
"@storybook/addon-options": "6.0.0-alpha.25",
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx b/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx
new file mode 100644
index 000000000000..ddbbb014395f
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx
@@ -0,0 +1,74 @@
+import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';
+import ButtonView from './views/ButtonView.svelte';
+
+# Storybook Docs for Svelte
+
+Storybook supports every major view layer:
+React, Vue, Angular, Ember, React Native, etc.
+
+Storybook Docs does too.
+
+
+
+Hallelujah! Svelte is working out of the box without modification.
+How you like them apples?!
+
+Just like in React, we first declare our component.
+
+
+
+## CSF stories
+
+Here's how we Svelte stories in pure CSF:
+
+```js
+export const rounded = () => ({
+ Component: ButtonView,
+ props: {
+ rounded: true,
+ message: 'Rounded text',
+ },
+});
+
+export const square = () => ({
+ Component: ButtonView,
+ props: {
+ rounded: false,
+ message: 'Squared text',
+ },
+});
+```
+
+## MDX stories
+
+Amd here's how `rounded` looks in MDX:
+
+
+ {{
+ Component: ButtonView,
+ props: {
+ rounded: true,
+ message: 'Rounded text',
+ },
+ }}
+
+
+And `square`:
+
+
+ {{
+ Component: ButtonView,
+ props: {
+ rounded: false,
+ message: 'Squared text',
+ },
+ }}
+
+
+## More info
+
+For more info, check out the [Storybook Docs README](https://github.com/storybookjs/storybook/tree/next/addons/docs).
+
+We want your feedback to help make this more useful.
+
+Follow us on Twitter for more short demos & project updates! ❤️📈🛠
diff --git a/lib/core/src/client/preview/StoryRenderer.tsx b/lib/core/src/client/preview/StoryRenderer.tsx
index 273447146eae..ab57bec53069 100644
--- a/lib/core/src/client/preview/StoryRenderer.tsx
+++ b/lib/core/src/client/preview/StoryRenderer.tsx
@@ -284,6 +284,10 @@ export class StoryRenderer {
}
const docs = parameters.docs || {};
+ if (docs.page && !docs.container) {
+ throw new Error('No `docs.container` set, did you run `addon-docs/preset`?');
+ }
+
const DocsContainer =
docs.container || (({ children }: { children: Element }) => <>{children}>);
const Page = docs.page || NoDocs;