{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-devtools-inline"],"cli":null},"imports":["import { initialize } from 'react-devtools-inline/backend';","import { activate } from 'react-devtools-inline/backend';","import { initialize } from 'react-devtools-inline/frontend';","const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames');"],"auth":{"required":false,"env_vars":[]},"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}