diff --git a/examples/real-world/components/Explore.js b/examples/real-world/components/Explore.js
index 7b46b75c69..efd4356ba1 100644
--- a/examples/real-world/components/Explore.js
+++ b/examples/real-world/components/Explore.js
@@ -50,6 +50,9 @@ export default class Explore extends Component {
         <p>
           Code on <a href={GITHUB_REPO} target="_blank">Github</a>.
         </p>
+        <p>
+          Move the DevTools with Ctrl+W or hide them with Ctrl+H.
+        </p>
       </div>
     );
   }
diff --git a/examples/real-world/containers/DevTools.js b/examples/real-world/containers/DevTools.js
new file mode 100644
index 0000000000..f5fbd3a5d2
--- /dev/null
+++ b/examples/real-world/containers/DevTools.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+export default createDevTools(
+  <DockMonitor toggleVisibilityKey="H"
+               changePositionKey="W">
+    <LogMonitor />
+  </DockMonitor>
+);
diff --git a/examples/real-world/containers/Root.dev.js b/examples/real-world/containers/Root.dev.js
new file mode 100644
index 0000000000..0d0ad50fc2
--- /dev/null
+++ b/examples/real-world/containers/Root.dev.js
@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react';
+import { Provider } from 'react-redux';
+import { ReduxRouter } from 'redux-router';
+import DevTools from './DevTools';
+
+export default class Root extends Component {
+  render() {
+    const { store } = this.props;
+    return (
+      <Provider store={store}>
+        <div>
+          <ReduxRouter />
+          <DevTools />
+        </div>
+      </Provider>
+    );
+  }
+}
+
+Root.propTypes = {
+  store: PropTypes.object.isRequired
+};
diff --git a/examples/real-world/containers/Root.js b/examples/real-world/containers/Root.js
new file mode 100644
index 0000000000..9cea0b2263
--- /dev/null
+++ b/examples/real-world/containers/Root.js
@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./Root.prod');
+} else {
+  module.exports = require('./Root.dev');
+}
diff --git a/examples/real-world/containers/Root.prod.js b/examples/real-world/containers/Root.prod.js
new file mode 100644
index 0000000000..4d40c6dbcd
--- /dev/null
+++ b/examples/real-world/containers/Root.prod.js
@@ -0,0 +1,18 @@
+import React, { Component, PropTypes } from 'react';
+import { Provider } from 'react-redux';
+import { ReduxRouter } from 'redux-router';
+
+export default class Root extends Component {
+  render() {
+    const { store } = this.props;
+    return (
+      <Provider store={store}>
+        <ReduxRouter />
+      </Provider>
+    );
+  }
+}
+
+Root.propTypes = {
+  store: PropTypes.object.isRequired
+};
diff --git a/examples/real-world/createDevToolsWindow.js b/examples/real-world/createDevToolsWindow.js
deleted file mode 100644
index 97c26b562c..0000000000
--- a/examples/real-world/createDevToolsWindow.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
-
-/*
- * Puts Redux DevTools into a separate window.
- * Based on https://gist.github.com/tlrobinson/1e63d15d3e5f33410ef7#gistcomment-1560218.
- */
-export default function createDevToolsWindow(store) {
-  // Give it a name so it reuses the same window
-  const name = 'Redux DevTools';
-  const win = window.open(
-    null,
-    name,
-    'menubar=no,location=no,resizable=yes,scrollbars=no,status=no,width=450,height=5000'
-  );
-
-  if (!win) {
-    console.error( // eslint-disable-line no-console
-      'Couldn\'t open Redux DevTools due to a popup blocker. ' +
-      'Please disable the popup blocker for the current page.'
-    );
-    return;
-  }
-
-  // Reload in case it's reusing the same window with the old content.
-  win.location.reload();
-
-  // Set visible Window title.
-  win.document.title = name;
-
-  // Wait a little bit for it to reload, then render.
-  setTimeout(() => render(
-    <DebugPanel top right bottom left>
-      <DevTools store={store} monitor={LogMonitor} />
-    </DebugPanel>,
-    win.document.body.appendChild(document.createElement('div'))
-  ), 10);
-}
diff --git a/examples/real-world/index.js b/examples/real-world/index.js
index b961ea7ae2..251b9e017e 100644
--- a/examples/real-world/index.js
+++ b/examples/real-world/index.js
@@ -1,23 +1,12 @@
 import 'babel-core/polyfill';
 import React from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
-import { ReduxRouter } from 'redux-router';
+import Root from './containers/Root';
 import configureStore from './store/configureStore';
 
 const store = configureStore();
 
 render(
-  <Provider store={store}>
-    <ReduxRouter />
-  </Provider>,
+  <Root store={store} />,
   document.getElementById('root')
 );
-
-if (process.env.NODE_ENV !== 'production') {
-  // Use require because imports can't be conditional.
-  // In production, you should ensure process.env.NODE_ENV
-  // is envified so that Uglify can eliminate this
-  // module and its dependencies as dead code.
-  require('./createDevToolsWindow')(store);
-}
diff --git a/examples/real-world/package.json b/examples/real-world/package.json
index 912839e8d9..be1e9b21d7 100644
--- a/examples/real-world/package.json
+++ b/examples/real-world/package.json
@@ -20,8 +20,8 @@
     "isomorphic-fetch": "^2.1.1",
     "lodash": "^3.10.1",
     "normalizr": "^1.0.0",
-    "react": "^0.14.0-rc1",
-    "react-dom": "^0.14.0-rc1",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
     "react-redux": "^2.1.2",
     "react-router": "^1.0.0-rc1",
     "redux": "^3.0.0",
@@ -32,11 +32,13 @@
   "devDependencies": {
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
-    "redux-devtools": "^2.1.5",
     "babel-plugin-react-transform": "^1.1.0",
     "concurrently": "^0.1.1",
     "express": "^4.13.3",
     "react-transform-hmr": "^1.0.0",
+    "redux-devtools": "^3.0.0-beta-3",
+    "redux-devtools-dock-monitor": "^1.0.0-beta-3",
+    "redux-devtools-log-monitor": "^1.0.0-beta-3",
     "webpack": "^1.9.11",
     "webpack-dev-middleware": "^1.2.0",
     "webpack-hot-middleware": "^2.2.0"
diff --git a/examples/real-world/store/configureStore.dev.js b/examples/real-world/store/configureStore.dev.js
new file mode 100644
index 0000000000..04fbc4377d
--- /dev/null
+++ b/examples/real-world/store/configureStore.dev.js
@@ -0,0 +1,30 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { reduxReactRouter } from 'redux-router';
+import DevTools from '../containers/DevTools';
+import createHistory from 'history/lib/createBrowserHistory';
+import routes from '../routes';
+import thunk from 'redux-thunk';
+import api from '../middleware/api';
+import createLogger from 'redux-logger';
+import rootReducer from '../reducers';
+
+const finalCreateStore = compose(
+  applyMiddleware(thunk, api),
+  reduxReactRouter({ routes, createHistory }),
+  applyMiddleware(createLogger()),
+  DevTools.instrument()
+)(createStore);
+
+export default function configureStore(initialState) {
+  const store = finalCreateStore(rootReducer, initialState);
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextRootReducer = require('../reducers');
+      store.replaceReducer(nextRootReducer);
+    });
+  }
+
+  return store;
+}
diff --git a/examples/real-world/store/configureStore.js b/examples/real-world/store/configureStore.js
index f79c9e028a..78c9ea1fdc 100644
--- a/examples/real-world/store/configureStore.js
+++ b/examples/real-world/store/configureStore.js
@@ -1,30 +1,5 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import { reduxReactRouter } from 'redux-router';
-import { devTools } from 'redux-devtools';
-import createHistory from 'history/lib/createBrowserHistory';
-import routes from '../routes';
-import thunk from 'redux-thunk';
-import api from '../middleware/api';
-import createLogger from 'redux-logger';
-import rootReducer from '../reducers';
-
-const finalCreateStore = compose(
-  applyMiddleware(thunk, api),
-  reduxReactRouter({ routes, createHistory }),
-  applyMiddleware(createLogger()),
-  devTools()
-)(createStore);
-
-export default function configureStore(initialState) {
-  const store = finalCreateStore(rootReducer, initialState);
-
-  if (module.hot) {
-    // Enable Webpack hot module replacement for reducers
-    module.hot.accept('../reducers', () => {
-      const nextRootReducer = require('../reducers');
-      store.replaceReducer(nextRootReducer);
-    });
-  }
-
-  return store;
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./configureStore.prod');
+} else {
+  module.exports = require('./configureStore.dev');
 }
diff --git a/examples/real-world/store/configureStore.prod.js b/examples/real-world/store/configureStore.prod.js
new file mode 100644
index 0000000000..173f657b3a
--- /dev/null
+++ b/examples/real-world/store/configureStore.prod.js
@@ -0,0 +1,16 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { reduxReactRouter } from 'redux-router';
+import createHistory from 'history/lib/createBrowserHistory';
+import routes from '../routes';
+import thunk from 'redux-thunk';
+import api from '../middleware/api';
+import rootReducer from '../reducers';
+
+const finalCreateStore = compose(
+  applyMiddleware(thunk, api),
+  reduxReactRouter({ routes, createHistory })
+)(createStore);
+
+export default function configureStore(initialState) {
+  return finalCreateStore(rootReducer, initialState);
+}