diff --git a/package-lock.json b/package-lock.json
index 9915134..583a2ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -184,6 +184,12 @@
       "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
       "dev": true
     },
+    "array-filter": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
+      "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw=",
+      "dev": true
+    },
     "array-includes": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.0.3.tgz",
@@ -194,6 +200,18 @@
         "es-abstract": "^1.7.0"
       }
     },
+    "array-map": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
+      "integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=",
+      "dev": true
+    },
+    "array-reduce": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
+      "integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=",
+      "dev": true
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -4386,6 +4404,18 @@
         "whatwg-url": "^6.4.0",
         "ws": "^4.0.0",
         "xml-name-validator": "^3.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
+          "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0",
+            "safe-buffer": "~5.1.0"
+          }
+        }
       }
     },
     "json-schema": {
@@ -5313,6 +5343,29 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-devtools-core": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-3.2.3.tgz",
+      "integrity": "sha1-o34ZnZSGXiy7YWuXvo9YIGdOar0=",
+      "dev": true,
+      "requires": {
+        "shell-quote": "^1.6.1",
+        "ws": "^3.3.1"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "3.3.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
+          "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0",
+            "safe-buffer": "~5.1.0",
+            "ultron": "~1.1.0"
+          }
+        }
+      }
+    },
     "react-reconciler": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.11.0.tgz",
@@ -6025,6 +6078,18 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "shell-quote": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.6.1.tgz",
+      "integrity": "sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=",
+      "dev": true,
+      "requires": {
+        "array-filter": "~0.0.0",
+        "array-map": "~0.0.0",
+        "array-reduce": "~0.0.0",
+        "jsonify": "~0.0.0"
+      }
+    },
     "shellwords": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
@@ -6945,6 +7010,12 @@
       "dev": true,
       "optional": true
     },
+    "ultron": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
+      "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==",
+      "dev": true
+    },
     "union-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
@@ -7284,13 +7355,12 @@
       }
     },
     "ws": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
-      "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.0.tgz",
+      "integrity": "sha512-c18dMeW+PEQdDFzkhDsnBAlS4Z8KGStBQQUcQ5mf7Nf689jyGk0594L+i9RaQuf4gog6SvWLJorz2NfSaqxZ7w==",
       "dev": true,
       "requires": {
-        "async-limiter": "~1.0.0",
-        "safe-buffer": "~5.1.0"
+        "async-limiter": "~1.0.0"
       }
     },
     "xml-name-validator": {
diff --git a/package.json b/package.json
index 6c8827d..df0efc1 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,9 @@
     "eslint-plugin-react": "^7.5.1",
     "gui": "^0.5.0",
     "jest": "^22.0.3",
-    "react": "^16.2.0"
+    "react": "^16.2.0",
+    "react-devtools-core": "^3.2.3",
+    "ws": "^5.2.0"
   },
   "license": "MIT",
   "babel": {
diff --git a/src/devtools.js b/src/devtools.js
new file mode 100644
index 0000000..ea164b5
--- /dev/null
+++ b/src/devtools.js
@@ -0,0 +1,22 @@
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+// src https://github.com/iamdustan/react-hardware/blob/master/src/devtools/setupDevtoolsFiber.js
+
+const defineProperty = Object.defineProperty
+defineProperty(global, 'WebSocket', {
+  value: require('ws'),
+})
+defineProperty(global, 'window', {
+  value: global,
+})
+
+const { connectToDevTools } = require('react-devtools-core')
+
+connectToDevTools({
+  isAppActive() {
+    // Don't steal the DevTools from currently active app.
+    return true
+  },
+  host: 'localhost',
+  // default port? port: ,
+  resolveRNStyle: null, // TODO maybe: require('flattenStyle')
+})
diff --git a/src/index.js b/src/index.js
index 378a876..a182601 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,10 @@
 // TODO: have to force "production" env or the react-reconciler will
 // swallow errors in non-browser environments
 
+if (process.env.NODE_ENV !== 'production') {
+  require('./devtools.js')
+}
+
 const { render } = require('./renderer')
 
 module.exports = {
diff --git a/src/renderer.js b/src/renderer.js
index dc007e4..020c184 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -181,6 +181,13 @@ function render(element, guiContainer, callback) {
     root = guiContainer._reactRootContainer = newRoot
   }
 
+  YueRenderer.injectIntoDevTools({
+    bundleType: 1, // 0 for PROD, 1 for DEV
+    version: require('../package.json').version, // version for your renderer
+    rendererPackageName: 'react-yue', // package name
+    findHostInstanceByFiber: YueRenderer.findHostInstance, // host instance (root)
+  })
+
   return YueRenderer.updateContainer(element, root, null, callback)
 }