diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 5674583..41aa65c 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -13,7 +13,6 @@ import Details from "./components/details/Details";
 import StatusBar from "./components/statusbar/StatusBar";
 import WaitingForReady from "./components/misc/WaitingForReady";
 import FiberTreeKeyboardNav from "./components/misc/FiberTreeKeyboardNav";
-import { Widget, navButtons } from "@discoveryjs/discovery/dist/discovery";
 
 function App() {
   return (
@@ -33,30 +32,6 @@ function App() {
   );
 }
 
-declare let __DISCOVERY_CSS__: string;
-const discovery = new Widget(null, null, {
-  styles: [__DISCOVERY_CSS__],
-  extensions: [{ ...navButtons, loadData: undefined }],
-});
-function Discovery() {
-  const { allEvents, setPaused } = useEventsContext();
-  const ref = React.useCallback(el => {
-    discovery.setPage("report");
-    discovery.setContainer(el);
-  }, []);
-
-  React.useEffect(() => {
-    setPaused(true);
-    discovery.setData(allEvents, { name: "React Render Tracker" });
-
-    return () => {
-      setPaused(false);
-    };
-  }, []);
-
-  return <div className="app__discovery-wrapper" ref={ref} />;
-}
-
 function Layout() {
   const [groupByParent, setGroupByParent] = React.useState(false);
   const [showUnmounted, setShowUnmounted] = React.useState(true);
@@ -65,6 +40,17 @@ function Layout() {
   const { selectedId } = useSelectedId();
   const { pinnedId } = usePinnedId();
 
+  const { allEvents, setPaused } = useEventsContext();
+
+  React.useEffect(() => {
+    setPaused(discoveryMode);
+
+    const discoveryIFrame: HTMLIFrameElement | null = document.querySelector('iframe[name=discovery]');
+    if (discoveryIFrame && discoveryIFrame.contentWindow) {
+      discoveryIFrame.contentWindow.postMessage({ allEvents, discoveryMode }, '*');
+    }
+  }, [discoveryMode]);
+
   return (
     <div
       className={
@@ -73,8 +59,6 @@ function Layout() {
         (discoveryMode ? " app_discovery-mode" : "")
       }
     >
-      {discoveryMode && <Discovery />}
-
       <FindMatchContextProvider>
         <Toolbar
           onGroupingChange={setGroupByParent}
diff --git a/src/ui/index.css b/src/ui/index.css
index 7488402..b9dcad5 100644
--- a/src/ui/index.css
+++ b/src/ui/index.css
@@ -50,3 +50,12 @@ body {
   color: #333;
   background-color: transparent;
 }
+
+iframe[name=discovery] {
+  border: none;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  height: calc(100vh - 21px);
+  display: none;
+}
diff --git a/src/ui/index.tsx b/src/ui/index.tsx
index f5e3004..72970a2 100644
--- a/src/ui/index.tsx
+++ b/src/ui/index.tsx
@@ -1,13 +1,48 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
+import { Widget, navButtons, router } from '@discoveryjs/discovery/dist/discovery';
 import App from "./App";
 
 // bootstrap HTML document
 declare let __CSS__: string;
-const rootEl = document.createElement("div");
 document.head.appendChild(document.createElement("style")).append(__CSS__);
+
+const rootEl = document.createElement("div");
 document.body.appendChild(rootEl);
 
+const discoveryEl = document.createElement("iframe");
+discoveryEl.name = 'discovery';
+const blob = new Blob(
+  ['<html><style>html,body{margin:0;padding:0}</style><body></body></html>'],
+  {type : 'text/html'}
+);
+discoveryEl.src = window.URL.createObjectURL(blob);
+document.body.appendChild(discoveryEl);
+
+declare let __DISCOVERY_CSS__: string;
+
+discoveryEl.addEventListener('load', () => {
+  if (discoveryEl.contentDocument && discoveryEl.contentWindow) {
+    const discovery = new Widget(null, null, {
+      styles: [__DISCOVERY_CSS__],
+      extensions: [{ ...navButtons, router, loadData: undefined }],
+    });
+
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('app__discovery-wrapper');
+    discoveryEl.contentDocument.body.appendChild(wrapper);
+
+    discovery.setData({}, { name: "React Render Tracker" });
+    discovery.setPage("report");
+    discovery.setContainer(wrapper);
+
+    discoveryEl.contentWindow.addEventListener('message', ({ data }) => {
+      discovery.setData(data.allEvents);
+      discoveryEl.style.display = data.discoveryMode ? 'initial' : 'none';
+    })
+  }
+})
+
 // That's actually a hack.
 // React add 2x listeners for all known events (one for capture and one for bubbling phases),
 // and perform search for a proper fiber and event handlers on it. It turns out that
