{"id":11687,"library":"react-devtools-inline","title":"React DevTools Inline","description":"react-devtools-inline provides a mechanism to embed the full React Developer Tools interface directly within a browser-based application, such as online code editors (e.g., CodeSandbox, StackBlitz) or debugging tools (e.g., Replay). Unlike the standalone `react-devtools` package, this package is specifically designed for integration into host environments. The current stable version is 7.0.1, though it is part of the larger React monorepo which sees frequent updates, particularly for React v19 and related tooling like `eslint-plugin-react-hooks`. A critical differentiator is its reliance on several *experimental* React APIs, necessitating the use of `react@experimental` and `react-dom@experimental` in the target application, making it unsuitable for applications running stable React releases. It exposes distinct frontend and backend APIs for setup within a main window and an iframe, respectively.","status":"active","version":"7.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript"],"install":[{"cmd":"npm install react-devtools-inline","lang":"bash","label":"npm"},{"cmd":"yarn add react-devtools-inline","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-devtools-inline","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Relies on experimental React APIs for functionality, specifically requires `react@experimental`.","package":"react","optional":false},{"reason":"Relies on experimental React DOM APIs, specifically requires `react-dom@experimental` and `ReactDOMClient.createRoot`.","package":"react-dom","optional":false}],"imports":[{"note":"This backend-specific `initialize` must be called in the target iframe *before* React itself is loaded in that iframe. The package primarily targets ESM environments.","wrong":"const { initialize } = require('react-devtools-inline/backend');","symbol":"initialize (backend)","correct":"import { initialize } from 'react-devtools-inline/backend';"},{"note":"This backend-specific `activate` should only be called in the target iframe *after* the frontend `initialize` has completed to ensure proper synchronization.","wrong":"const { activate } = require('react-devtools-inline/backend');","symbol":"activate (backend)","correct":"import { activate } from 'react-devtools-inline/backend';"},{"note":"This frontend-specific `initialize` returns a React component that *must* be rendered using `ReactDOMClient.createRoot` from `react-dom/client` due to its use of concurrent features.","wrong":"const { initialize } = require('react-devtools-inline/frontend');","symbol":"initialize (frontend)","correct":"import { initialize } from 'react-devtools-inline/frontend';"},{"note":"This is not a direct import for a symbol, but rather a function that dynamically imports the `hookNames` module, used as a prop for the DevTools component to enable advanced hook naming features.","symbol":"hookNamesModuleLoaderFunction","correct":"const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames');"}],"quickstart":{"code":"import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport * as ReactDOMClient from 'react-dom/client';\nimport { activate, initialize as initializeBackend } from 'react-devtools-inline/backend';\nimport { initialize as initializeFrontend } from 'react-devtools-inline/frontend';\n\n// Create a minimal React app to run inside the iframe\nconst IframeApp = () => {\n  const [count, setCount] = React.useState(0);\n  return (\n    <div>\n      <h1>Hello from Iframe React App!</h1>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(c => c + 1)}>Increment</button>\n    </div>\n  );\n};\n\nconst setupDevTools = () => {\n  const iframe = document.createElement('iframe');\n  iframe.id = 'react-app-iframe';\n  iframe.style.width = '50%';\n  iframe.style.height = '100%';\n  iframe.sandbox = 'allow-scripts allow-same-origin';\n  document.body.appendChild(iframe);\n\n  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;\n  iframeDoc.open();\n  iframeDoc.write('<div id=\"iframe-root\"></div>');\n  iframeDoc.close();\n\n  const DevTools = initializeFrontend(iframe.contentWindow);\n\n  // Render the DevTools component in the main window\n  const devToolsRoot = ReactDOMClient.createRoot(document.getElementById('devtools-root'));\n  devToolsRoot.render(\n    <React.StrictMode>\n      <DevTools\n        hookNamesModuleLoaderFunction={() => import('react-devtools-inline/hookNames')}\n      />\n    </React.StrictMode>\n  );\n\n  // Backend setup in the iframe\n  // Important: initializeBackend must be called before React loads in the iframe\n  initializeBackend(iframe.contentWindow);\n  // Simulate React loading in the iframe after backend is initialized\n  // In a real scenario, the iframe content would load React itself\n  const iframeReactRoot = ReactDOMClient.createRoot(iframeDoc.getElementById('iframe-root'));\n  iframeReactRoot.render(\n    <React.StrictMode>\n      <IframeApp />\n    </React.StrictMode>\n  );\n\n  // Activate backend once frontend is ready and React is loaded in iframe\n  activate(iframe.contentWindow);\n};\n\n// Initial HTML structure\nconst mainRoot = document.getElementById('root');\nif (mainRoot) {\n  mainRoot.innerHTML = '<div id=\"devtools-root\" style=\"width:50%; height: 500px; float: left;\"></div>';\n  setupDevTools();\n}\n","lang":"typescript","description":"This quickstart demonstrates how to embed React DevTools inline by setting up both the backend and frontend. It creates an iframe to host a simple React application, initializes the backend within that iframe before React loads, then initializes the frontend in the main window and renders the DevTools UI. It also shows how to use `ReactDOMClient.createRoot` for rendering the DevTools component and how to provide the `hookNamesModuleLoaderFunction`."},"warnings":[{"fix":"Ensure your project's `package.json` specifies `\"react\": \"experimental\"` and `\"react-dom\": \"experimental\"`, then run `npm install` or `yarn install`.","message":"This package relies on several *experimental* React APIs. You must install `react@experimental` and `react-dom@experimental` in your project for it to function correctly. It is not compatible with stable React releases.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Ensure the script that calls `initialize(windowOrGlobal)` is the very first script loaded in the `iframe.contentWindow` (or global object) before any React-related code.","message":"The backend `initialize(windowOrGlobal)` function *must* be called before React (or any package that imports React) is loaded within the target `window` or `iframe`. Calling it after React has loaded will prevent DevTools from hooking into React's internals.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Replace `ReactDOM.render(<DevTools />, container)` with `ReactDOMClient.createRoot(container).render(<DevTools />)`.","message":"The `initialize` function from `react-devtools-inline/frontend` returns a React component that must be rendered using `ReactDOMClient.createRoot` (from `react-dom/client`) instead of the older `ReactDOM.render`. This is due to its use of React's concurrent features.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Structure your initialization flow such that the frontend DevTools component is rendered and mounted before `activate(windowOrGlobal)` is invoked in the backend iframe.","message":"The backend `activate(windowOrGlobal)` function should only be called once the frontend DevTools interface has been fully initialized. Calling it prematurely can lead to missed tree-initialization events and an incomplete DevTools display.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use `ReactDOMClient.createRoot(containerElement).render(<DevToolsComponent />)` for the DevTools frontend component.","cause":"Attempting to render the DevTools component returned by `initializeFrontend` using `ReactDOM.render` instead of `ReactDOMClient.createRoot`.","error":"Error: A React root is required to render. You provided an element."},{"fix":"Ensure the script that calls `initialize(iframe.contentWindow)` is executed as the very first script within the iframe, before any React-related imports or scripts.","cause":"The `initialize` function from `react-devtools-inline/backend` was called *after* React had already loaded in the target iframe, preventing DevTools from injecting its hook.","error":"React DevTools: Could not find the React global hook. Is React loaded?"},{"fix":"Ensure your project is configured for ES Modules (e.g., `\"type\": \"module\"` in `package.json` for Node.js, or use a bundler like Webpack/Rollup/Vite that handles ESM correctly for browser environments).","cause":"Using `require()` or attempting to run ESM `import` statements in a CommonJS-only Node.js environment or without proper bundler configuration.","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm"}