diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/pie.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/pie.ts
index 16eee349475ef..11551c50d9f25 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/pie.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/pie.ts
@@ -39,9 +39,9 @@ interface PieOptions {
   colors: string[];
   legend: {
     show: boolean;
-    backgroundOpacity: number;
-    labelBoxBorderColor: string;
-    position: Legend;
+    backgroundOpacity?: number;
+    labelBoxBorderColor?: string;
+    position?: Legend;
   };
   grid: {
     show: boolean;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/image.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/image.stories.storyshot
new file mode 100644
index 0000000000000..b9bc21dd6e3ea
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/image.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/image default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "400px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/repeat_image.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/repeat_image.stories.storyshot
new file mode 100644
index 0000000000000..9b97ae1fdacb3
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/repeat_image.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/repeatImage default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "400px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/table.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/table.stories.storyshot
new file mode 100644
index 0000000000000..cf9cc6dd82f7f
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/__snapshots__/table.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/table default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "400px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx
new file mode 100644
index 0000000000000..bcd8365034448
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { image } from '../image';
+import { Render } from './render';
+import { elasticLogo } from '../../lib/elastic_logo';
+
+storiesOf('renderers/image', module).add('default', () => {
+  const config = {
+    type: 'image' as 'image',
+    mode: 'cover',
+    dataurl: elasticLogo,
+  };
+
+  return <Render renderer={image} config={config} width="400px" />;
+});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx
new file mode 100644
index 0000000000000..647c63c2c1042
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { action } from '@storybook/addon-actions';
+import React, { useRef, useEffect } from 'react';
+import { RendererFactory, RendererHandlers } from '../../../types';
+
+export const defaultHandlers: RendererHandlers = {
+  destroy: () => action('destroy'),
+  getElementId: () => 'element-id',
+  getFilter: () => 'filter',
+  onComplete: (fn) => undefined,
+  onEmbeddableDestroyed: action('onEmbeddableDestroyed'),
+  onEmbeddableInputChange: action('onEmbeddableInputChange'),
+  onResize: action('onResize'),
+  resize: action('resize'),
+  setFilter: action('setFilter'),
+  done: action('done'),
+  onDestroy: action('onDestroy'),
+  reload: action('reload'),
+  update: action('update'),
+  event: action('event'),
+};
+
+/*
+  Uses a RenderDefinitionFactory and Config to render into an element.
+
+  Intended to be used for stories for RenderDefinitionFactory
+*/
+interface RenderAdditionalProps {
+  height?: string;
+  width?: string;
+  handlers?: RendererHandlers;
+}
+
+export const Render = <Renderer,>({
+  renderer,
+  config,
+  ...rest
+}: Renderer extends RendererFactory<infer Config>
+  ? { renderer: Renderer; config: Config } & RenderAdditionalProps
+  : { renderer: undefined; config: undefined } & RenderAdditionalProps) => {
+  const { height, width, handlers } = {
+    height: '200px',
+    width: '200px',
+    handlers: defaultHandlers,
+    ...rest,
+  };
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (renderer && containerRef.current !== null) {
+      renderer().render(containerRef.current, config, handlers);
+    }
+  }, [renderer, config, handlers]);
+
+  return (
+    <div style={{ width, height }} ref={containerRef}>
+      {' '}
+    </div>
+  );
+};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx
new file mode 100644
index 0000000000000..41ccc054a77fb
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { repeatImage } from '../repeat_image';
+import { Render } from './render';
+import { elasticLogo } from '../../lib/elastic_logo';
+import { elasticOutline } from '../../lib/elastic_outline';
+
+storiesOf('renderers/repeatImage', module).add('default', () => {
+  const config = {
+    count: 42,
+    image: elasticLogo,
+    size: 20,
+    max: 60,
+    emptyImage: elasticOutline,
+  };
+
+  return <Render renderer={repeatImage} config={config} width="400px" />;
+});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
new file mode 100644
index 0000000000000..f3c70cb30de45
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { table } from '../table';
+import { Render } from './render';
+
+storiesOf('renderers/table', module).add('default', () => {
+  const config = {
+    paginate: true,
+    perPage: 5,
+    showHeader: true,
+    datatable: {
+      type: 'datatable' as 'datatable',
+      columns: [
+        {
+          name: 'Foo',
+          type: 'string' as 'string',
+          id: 'id-foo',
+          meta: { type: 'string' as 'string' },
+        },
+        {
+          name: 'Bar',
+          type: 'number' as 'number',
+          id: 'id-bar',
+          meta: { type: 'string' as 'string' },
+        },
+      ],
+      rows: [
+        { Foo: 'a', Bar: 700 },
+        { Foo: 'b', Bar: 600 },
+        { Foo: 'c', Bar: 500 },
+        { Foo: 'd', Bar: 400 },
+        { Foo: 'e', Bar: 300 },
+        { Foo: 'f', Bar: 200 },
+        { Foo: 'g', Bar: 100 },
+      ],
+    },
+  };
+
+  return <Render renderer={table} config={config} width="400px" />;
+});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/__snapshots__/error.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/__snapshots__/error.stories.storyshot
new file mode 100644
index 0000000000000..b7039ee1847c7
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/__snapshots__/error.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/error default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/error.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/error.stories.tsx
new file mode 100644
index 0000000000000..c71999bc04bb1
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/error.stories.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { error } from '../';
+import { Render } from '../../__stories__/render';
+
+storiesOf('renderers/error', module).add('default', () => {
+  const thrownError = new Error('There was an error');
+  const config = {
+    error: thrownError,
+  };
+  return <Render renderer={error} config={config} />;
+});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/__snapshots__/markdown.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/__snapshots__/markdown.stories.storyshot
new file mode 100644
index 0000000000000..79f447c953d6d
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/__snapshots__/markdown.stories.storyshot
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/markdown default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
+
+exports[`Storyshots renderers/markdown links in new tab 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
new file mode 100644
index 0000000000000..d5b190c74a92f
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { markdown } from '../';
+import { Render } from '../../__stories__/render';
+
+storiesOf('renderers/markdown', module)
+  .add('default', () => {
+    const config = {
+      content: '# This is Markdown',
+      font: {
+        css: '',
+        spec: {},
+        type: 'style' as 'style',
+      },
+      openLinksInNewTab: false,
+    };
+    return <Render renderer={markdown} config={config} />;
+  })
+  .add('links in new tab', () => {
+    const config = {
+      content: '[Elastic.co](https://elastic.co)',
+      font: {
+        css: '',
+        spec: {},
+        type: 'style' as 'style',
+      },
+      openLinksInNewTab: true,
+    };
+    return <Render renderer={markdown} config={config} />;
+  });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/__stories__/__snapshots__/pie.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/__stories__/__snapshots__/pie.stories.storyshot
new file mode 100644
index 0000000000000..3260dbe8c83c2
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/__stories__/__snapshots__/pie.stories.storyshot
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/pie default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
+
+exports[`Storyshots renderers/pie with legend 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/__stories__/pie.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/__stories__/pie.stories.tsx
new file mode 100644
index 0000000000000..dea2876de0ec8
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/__stories__/pie.stories.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { pie } from '../';
+import { Render } from '../../__stories__/render';
+
+const pieOptions = {
+  canvas: false,
+  colors: ['#882E72', '#B178A6', '#D6C1DE'],
+  grid: { show: false },
+  legend: { show: false },
+  series: {
+    pie: {
+      show: true,
+      innerRadius: 0,
+      label: { show: true, radius: 1 },
+      radius: 'auto' as 'auto',
+      stroke: { width: 0 },
+      tilt: 1,
+    },
+  },
+};
+
+const data = [
+  {
+    data: [10],
+    label: 'A',
+  },
+  {
+    data: [10],
+    label: 'B',
+  },
+  {
+    data: [10],
+    label: 'C',
+  },
+];
+
+storiesOf('renderers/pie', module)
+  .add('default', () => {
+    const config = {
+      data,
+      options: pieOptions,
+      font: {
+        css: '',
+        spec: {},
+        type: 'style' as 'style',
+      },
+    };
+    return <Render renderer={pie} config={config} />;
+  })
+  .add('with legend', () => {
+    const options = {
+      ...pieOptions,
+      legend: { show: true },
+    };
+
+    const config = {
+      data,
+      options,
+      font: {
+        css: '',
+        spec: {},
+        type: 'style' as 'style',
+      },
+    };
+
+    return <Render renderer={pie} config={config} />;
+  });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/__stories__/__snapshots__/plot.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/__stories__/__snapshots__/plot.stories.storyshot
new file mode 100644
index 0000000000000..7419d13fc7195
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/__stories__/__snapshots__/plot.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/plot default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/__stories__/plot.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/__stories__/plot.stories.tsx
new file mode 100644
index 0000000000000..0e9566d2a5c20
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/__stories__/plot.stories.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { plot } from '../';
+import { Render } from '../../__stories__/render';
+
+const plotOptions = {
+  canvas: false,
+  colors: ['#882E72', '#B178A6', '#D6C1DE'],
+  grid: {
+    margin: {
+      bottom: 0,
+      left: 0,
+      right: 30,
+      top: 20,
+    },
+  },
+  legend: { show: true },
+  series: {
+    bubbles: {
+      show: true,
+      fill: false,
+    },
+  },
+  xaxis: {
+    show: true,
+    mode: 'time',
+  },
+  yaxis: {
+    show: true,
+  },
+};
+
+const data = [
+  {
+    bubbles: { show: true },
+    data: [
+      [1546351551031, 33, { size: 5 }],
+      [1546351551131, 38, { size: 2 }],
+    ],
+    label: 'done',
+  },
+  {
+    bubbles: { show: true },
+    data: [
+      [1546351551032, 37, { size: 4 }],
+      [1546351551139, 45, { size: 3 }],
+    ],
+    label: 'running',
+  },
+];
+
+storiesOf('renderers/plot', module).add('default', () => {
+  const config = {
+    data,
+    options: plotOptions,
+    font: {
+      css: '',
+      spec: {},
+      type: 'style' as 'style',
+    },
+  };
+  return <Render renderer={plot} config={config} />;
+});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/progress/__stories__/__snapshots__/progress.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/progress/__stories__/__snapshots__/progress.stories.storyshot
new file mode 100644
index 0000000000000..1fe884656ef3b
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/progress/__stories__/__snapshots__/progress.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/progress default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/progress/__stories__/progress.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/progress/__stories__/progress.stories.tsx
new file mode 100644
index 0000000000000..3e20cfd4772a8
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/progress/__stories__/progress.stories.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { progress } from '../';
+import { Render } from '../../__stories__/render';
+import { Shape } from '../../../functions/common/progress';
+
+storiesOf('renderers/progress', module).add('default', () => {
+  const config = {
+    barColor: '#bc1234',
+    barWeight: 20,
+    font: {
+      css: '',
+      spec: {},
+      type: 'style' as 'style',
+    },
+    label: '66%',
+    max: 1,
+    shape: Shape.UNICORN,
+    value: 0.66,
+    valueColor: '#000',
+    valueWeight: 15,
+  };
+
+  return <Render renderer={progress} config={config} />;
+});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/__snapshots__/reveal_image.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/__snapshots__/reveal_image.stories.storyshot
new file mode 100644
index 0000000000000..b9963565a09f5
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/__snapshots__/reveal_image.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/revealImage default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx
new file mode 100644
index 0000000000000..637f9a2bb6986
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { revealImage } from '../';
+import { Render } from '../../__stories__/render';
+import { elasticOutline } from '../../../lib/elastic_outline';
+import { elasticLogo } from '../../../lib/elastic_logo';
+import { Origin } from '../../../functions/common/revealImage';
+
+storiesOf('renderers/revealImage', module).add('default', () => {
+  const config = {
+    image: elasticLogo,
+    emptyImage: elasticOutline,
+    origin: Origin.LEFT,
+    percent: 0.45,
+  };
+
+  return <Render renderer={revealImage} config={config} />;
+});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/shape/__stories__/__snapshots__/shape.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/shape/__stories__/__snapshots__/shape.stories.storyshot
new file mode 100644
index 0000000000000..317c20021015a
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/shape/__stories__/__snapshots__/shape.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/shape default 1`] = `
+<div
+  style={
+    Object {
+      "height": "200px",
+      "width": "200px",
+    }
+  }
+>
+   
+</div>
+`;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/shape/__stories__/shape.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/shape/__stories__/shape.stories.tsx
new file mode 100644
index 0000000000000..19df14c08688f
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/shape/__stories__/shape.stories.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { shape } from '../';
+import { Render } from '../../__stories__/render';
+import { Shape } from '../../../functions/common/shape';
+
+storiesOf('renderers/shape', module).add('default', () => {
+  const config = {
+    type: 'shape' as 'shape',
+    border: '#FFEEDD',
+    borderWidth: 8,
+    shape: Shape.BOOKMARK,
+    fill: '#112233',
+    maintainAspect: true,
+  };
+
+  return <Render renderer={shape} config={config} />;
+});