diff --git a/packages/website/.babelrc b/packages/website/.babelrc
new file mode 100644
index 000000000..9e26dfeeb
--- /dev/null
+++ b/packages/website/.babelrc
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/packages/website/.storybook/main.js b/packages/website/.storybook/main.js
new file mode 100644
index 000000000..a8fbec58d
--- /dev/null
+++ b/packages/website/.storybook/main.js
@@ -0,0 +1,28 @@
+/* eslint-env node */
+const {join} = require('path');
+const isProd = process.env.NODE_ENV === 'production';
+
+// This custom webpack config allows storybook to use the source files from 'react-vis'.
+// Changes can be made and instantly be reflected in storybook to allow quick development
+module.exports = {
+  webpackFinal: config => {
+    if (isProd) { return config;}
+
+    const reactVisPath = join(__dirname, '../../react-vis/src')
+
+    // Add an alias to 'react-vis' so that it looks in its src directory.
+    config.resolve.alias['react-vis'] =reactVisPath
+    config.resolve.modules.push(reactVisPath)
+
+    const jsRule = config.module.rules.find(rule => rule.test.test('test.js'));
+    // Add the react-vis/src folder to the list of files to compile
+    jsRule.include.push(reactVisPath)
+
+    const babelLoader = jsRule.use.find(x => x.loader === 'babel-loader');
+    if (babelLoader) {
+      babelLoader.options.rootMode = 'upward'
+    }
+
+    return config;
+  }
+}
diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js
index 833884df2..6c3420dcb 100644
--- a/packages/website/webpack.config.js
+++ b/packages/website/webpack.config.js
@@ -16,7 +16,8 @@ module.exports = {
   },
   resolve: {
     alias: {
-      react: resolve(__dirname, './node_modules/react')
+      react: resolve(__dirname, './node_modules/react'),
+      'react-vis': resolve('../react-vis/src')
     }
   }
 };