diff --git a/packages/vdom-extension/package.json b/packages/vdom-extension/package.json
index c312741d0..c811e3c1b 100644
--- a/packages/vdom-extension/package.json
+++ b/packages/vdom-extension/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@jupyterlab/rendermime-interfaces": "^0.3.0",
     "@phosphor/widgets": "^1.3.0",
+    "@nteract/transform-vdom": "^1.1.1",
     "react": "^15.6.2",
     "react-dom": "^15.6.2"
   },
diff --git a/packages/vdom-extension/src/index.tsx b/packages/vdom-extension/src/index.tsx
index a6a54fb1f..ce9790d87 100644
--- a/packages/vdom-extension/src/index.tsx
+++ b/packages/vdom-extension/src/index.tsx
@@ -13,7 +13,7 @@ import * as React from 'react';
 
 import * as ReactDOM from 'react-dom';
 
-import { objectToReactElement } from './object-to-react';
+import VDOM from '@nteract/transform-vdom';
 
 import '../style/index.css';
 
@@ -53,24 +53,9 @@ class RenderedVDOM extends Widget implements IRenderMime.IRenderer {
     const data = model.data[this._mimeType] as any;
     // const metadata = model.metadata[this._mimeType] as any || {};
     return new Promise<void>((resolve, reject) => {
-      try {
-        const vdomElement = objectToReactElement({ ...data })
-        ReactDOM.render(vdomElement, this.node, () => {
-          resolve(undefined);
-        });
-      } catch (error) {
-        const errorElement = (
-          <div style={{ padding: 5 }}>
-            <div style={{ textAlign: 'center', marginBottom: 10 }}>
-              There was an error rendering VDOM data from the kernel or notebook
-            </div>
-            <code>{error.message}</code>
-          </div>
-        );
-        ReactDOM.render(errorElement, this.node, () => {
-          resolve(undefined);
-        });
-      }
+      ReactDOM.render(<VDOM data={data} />, this.node, () => {
+        resolve(undefined);
+      });
     });
   }
 
diff --git a/packages/vdom-extension/src/object-to-react.ts b/packages/vdom-extension/src/object-to-react.ts
deleted file mode 100644
index 2da7ebe1f..000000000
--- a/packages/vdom-extension/src/object-to-react.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as React from 'react';
-
-export type VDOMNode = VDOMElement | string;
-
-export type VDOMNodeArray = VDOMNode | Array<VDOMNode>
-
-export type VDOMElement = {
-  tagName: string, // Could be an enum honestly
-  children: Array<VDOMNodeArray>,
-  attributes: Object,
-  key: number | string | null
-};
-
-export type ReactArray = Array<React.ReactElement<any> | string>;
-
-/**
- * Convert an object to React element(s).
- *
- * The object schema should be similar to React element's.
- * Note: The object passed in this function will be mutated.
- *
- * @param  {Object}       obj - The element object.
- * @return {ReactElement}
- */
-export function objectToReactElement(obj: VDOMElement): React.ReactElement<any> {
-  // Pack args for React.createElement
-  var args = [];
-  if (!obj.tagName || typeof obj.tagName !== "string") {
-    throw new Error(`Invalid tagName on ${JSON.stringify(obj, null, 2)}`);
-  }
-  if (!obj.attributes || typeof obj.attributes !== "object") {
-    throw new Error(`Attributes must exist on a VDOM Object`);
-  }
-  // `React.createElement` 1st argument: type
-  args[0] = obj.tagName;
-  args[1] = obj.attributes;
-  const children = obj.children;
-  if (children) {
-    if (Array.isArray(children)) {
-      // to be safe (although this should never happen)
-      if (args[1] === undefined) {
-        args[1] = null;
-      }
-      args = args.concat(arrayToReactChildren(children));
-    } else if (typeof children === "string") {
-      args[2] = children;
-    } else if (typeof children === "object") {
-      args[2] = objectToReactElement(children);
-    } else {
-      console.warn("invalid vdom data passed", children);
-    }
-  }
-  return React.createElement.apply({}, args);
-}
-
-/**
- * Convert an array of items to React children.
- *
- * @param  {Array} arr - The array.
- * @return {Array}     - The array of mixed values.
- */
-function arrayToReactChildren(arr: Array<VDOMNodeArray>): Array<React.ReactElement<any> | string | Array<any>> {
-  // similar to `props.children`
-  var result = [];
-  // child of `props.children`
-  // iterate through the `children`
-  for (var i = 0, len = arr.length; i < len; i++) {
-    // child can have mixed values: text, React element, or array
-    const item = arr[i];
-    if (Array.isArray(item)) {
-      result.push(arrayToReactChildren(item));
-    } else if (typeof item === "string") {
-      result.push(item);
-    } else if (typeof item === "object") {
-      const keyedItem = item;
-      item.key = i;
-      result.push(objectToReactElement(keyedItem));
-    } else {
-      console.warn("invalid vdom data passed", item);
-    }
-  }
-  return result;
-}
diff --git a/packages/vdom-extension/src/transform-vdom.d.ts b/packages/vdom-extension/src/transform-vdom.d.ts
new file mode 100644
index 000000000..eb223f1a9
--- /dev/null
+++ b/packages/vdom-extension/src/transform-vdom.d.ts
@@ -0,0 +1,23 @@
+// Type definitions for @nteract/transform-vdom v1.1.1
+// https://github.com/jupyterlab/jupyter-renderers
+// Definitions by: Grant Nestor <https://github.com/gnestor>
+
+
+declare module '@nteract/transform-vdom' {
+  
+  import * as React from 'react';
+
+  interface VDOMElement {
+    tagName: 'string';
+    attributes: Object;
+    children: Array<VDOMElement>;
+    key?: number | string | null;
+  }
+
+  interface VDOMProps extends React.Props<VDOM> {
+    data: VDOMElement;
+  }
+
+  export default class VDOM extends React.Component<VDOMProps, {}> { }
+  
+}