diff --git a/docs/framework/preact/basic-setup.md b/docs/framework/preact/basic-setup.md
index efb501b6..d9bacc4c 100644
--- a/docs/framework/preact/basic-setup.md
+++ b/docs/framework/preact/basic-setup.md
@@ -13,20 +13,23 @@ Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/preact-d
 npm i @tanstack/preact-devtools
 ```
 
-Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/preact-devtools).
+Next, render the `TanStackDevtools` inside the providers required by the plugins you use (for example, `QueryClientProvider`). If you use TanStack Router devtools, you must pass the router instance to the router panel.
 
 ```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
 import { TanStackDevtools } from '@tanstack/preact-devtools'
 import { render } from 'preact'
 
 import App from './App'
 
+const queryClient = new QueryClient()
+
 render(
-  <>
+  <QueryClientProvider client={queryClient}>
     <App />
 
     <TanStackDevtools />
-  </>,
+  </QueryClientProvider>,
   document.getElementById('root')!,
 )
 ```
@@ -42,24 +45,33 @@ Currently TanStack offers:
 
 ```tsx
 import { render } from 'preact'
-
+import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
 import { TanStackDevtools } from '@tanstack/preact-devtools'
+import { PreactQueryDevtoolsPanel } from '@tanstack/preact-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/preact-router-devtools'
 
 import App from './App'
 
+const queryClient = new QueryClient()
+const router = /* create or import your TanStack Router instance */
+
 render(
-  <>
+  <QueryClientProvider client={queryClient}>
     <App />
 
     <TanStackDevtools
       plugins={[
         {
-          name: 'Your Plugin',
-          render: <YourPluginComponent />,
+          name: 'TanStack Query',
+          render: <PreactQueryDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Router',
+          render: <TanStackRouterDevtoolsPanel router={router} />,
         },
       ]}
     />
-  </>,
+  </QueryClientProvider>,
   document.getElementById('root')!,
 )
 ```
diff --git a/docs/framework/react/basic-setup.md b/docs/framework/react/basic-setup.md
index aa24ec9d..2ee5c604 100644
--- a/docs/framework/react/basic-setup.md
+++ b/docs/framework/react/basic-setup.md
@@ -13,18 +13,26 @@ Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/react-de
 npm i @tanstack/react-devtools
 ```
 
-Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/react-devtools).
+Next, render the `TanStackDevtools` inside the providers required by the plugins you use (for example, `QueryClientProvider`). If you use TanStack Router devtools, you must pass the router instance to the router panel.
 
 ```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 
-import App from './App'
+import { routeTree } from './routeTree.gen'
+
+const queryClient = new QueryClient()
+const router = createRouter({ routeTree })
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
-
-    <TanStackDevtools />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <TanStackDevtools />
+    </QueryClientProvider>
   </StrictMode>,
 )
 ```
@@ -39,37 +47,41 @@ Currently TanStack offers:
 - `FormDevtools` [coming soon](https://github.com/TanStack/form/pull/1692)
 
 ```tsx
+import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { TanStackDevtools } from '@tanstack/react-devtools'
-
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import { ReactFormDevtoolsPanel } from '@tanstack/react-form-devtools'
 
+import { routeTree } from './routeTree.gen'
 
-import App from './App'
+const queryClient = new QueryClient()
+const router = createRouter({ routeTree })
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
-
-    <TanStackDevtools
-      plugins={[
-        {
-          name: 'TanStack Query',
-          render: <ReactQueryDevtoolsPanel />,
-        },
-        {
-          name: 'TanStack Router',
-          render: <TanStackRouterDevtoolsPanel />,
-        },
-        {
-          name: 'TanStack Form',
-          render: <ReactFormDevtoolsPanel />,
-        },
-      ]}
-    />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <TanStackDevtools
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          {
+            name: 'TanStack Form',
+            render: <ReactFormDevtoolsPanel />,
+          },
+        ]}
+      />
+    </QueryClientProvider>
   </StrictMode>,
 )
 ```
diff --git a/docs/framework/solid/basic-setup.md b/docs/framework/solid/basic-setup.md
index 238dfedf..26e43103 100644
--- a/docs/framework/solid/basic-setup.md
+++ b/docs/framework/solid/basic-setup.md
@@ -13,20 +13,25 @@ Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/solid-de
 npm i @tanstack/solid-devtools
 ```
 
-Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/solid-devtools).
+Next, render the `TanStackDevtools` inside the providers required by the plugins you use (for example, `QueryClientProvider`). If you use TanStack Router devtools, you must pass the router instance to the router panel.
 
 ```tsx
+import { render } from 'solid-js/web'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
 import { TanStackDevtools } from '@tanstack/solid-devtools'
 
-import App from './App'
+import { routeTree } from './routeTree.gen'
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
+const queryClient = new QueryClient()
+const router = createRouter({ routeTree })
 
+render(() => (
+  <QueryClientProvider client={queryClient}>
+    <RouterProvider router={router} />
     <TanStackDevtools />
-  </StrictMode>,
-)
+  </QueryClientProvider>
+), document.getElementById('root')!)
 ```
 
 Import the desired devtools and provide it to the `TanStackDevtools` component along with a label for the menu.
@@ -38,25 +43,31 @@ Currently TanStack offers:
 - `FormDevtools`
 
 ```tsx
-import { render } from 'solid-js/web';
-
+import { render } from 'solid-js/web'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
 import { TanStackDevtools } from '@tanstack/solid-devtools'
-
 import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
 import { SolidFormDevtoolsPanel } from '@tanstack/solid-form'
 
-import App from './App'
+import { routeTree } from './routeTree.gen'
 
-render(() => (
-  <>
-    <App />
+const queryClient = new QueryClient()
+const router = createRouter({ routeTree })
 
+render(() => (
+  <QueryClientProvider client={queryClient}>
+    <RouterProvider router={router} />
     <TanStackDevtools
       plugins={[
         {
-          name: 'TanStack router',
-          render: () => <TanStackRouterDevtoolsPanel />,
+          name: 'TanStack Query',
+          render: () => <SolidQueryDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Router',
+          render: () => <TanStackRouterDevtoolsPanel router={router} />,
         },
         {
           name: 'TanStack Form',
@@ -64,7 +75,7 @@ render(() => (
         },
       ]}
     />
-  </>
+  </QueryClientProvider>
 ), document.getElementById('root')!)
 ```
 
diff --git a/docs/quick-start.md b/docs/quick-start.md
index 2f41aa9a..a4a9d597 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -10,17 +10,20 @@ To get up and running install the correct adapter for your framework:
 - **React**: `npm install @tanstack/react-devtools @tanstack/devtools-vite`
 - **Solid**: `npm install @tanstack/solid-devtools @tanstack/devtools-vite`
 
-Then import the devtools into the root of your application:
+Then render the devtools inside the provider tree required by the plugins you use (for example, `QueryClientProvider`). If you use TanStack Router devtools, you must pass the router instance to the router panel.
 
 ```javascript
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 
+const queryClient = new QueryClient()
+
 function App() {
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       <YourApp />
       <TanStackDevtools />
-    </>
+    </QueryClientProvider>
   )
 }
 ```
@@ -41,30 +44,40 @@ export default {
 And you're done! If you want to add custom plugins, you can do so by using the `plugins` prop:
 
 ```javascript
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 
+const queryClient = new QueryClient()
+
 function App() {
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       <YourApp />
       <TanStackDevtools plugins={[
         // Add your custom plugins here
       ]} />
-    </>
+    </QueryClientProvider>
   )
 }
 ```
 
-For example, if you want to add TanStack query & router you could do so in the following way:
+For example, if you want to add TanStack Query & Router you could do so in the following way:
 ```javascript
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+
+import { routeTree } from './routeTree.gen'
+
+const queryClient = new QueryClient()
+const router = createRouter({ routeTree })
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <YourApp />
+      <RouterProvider router={router} />
       <TanStackDevtools plugins={[
         {
           name: 'TanStack Query',
@@ -73,11 +86,11 @@ function App() {
         },
         {
           name: 'TanStack Router',
-          render: <TanStackRouterDevtoolsPanel />,
+          render: <TanStackRouterDevtoolsPanel router={router} />,
           defaultOpen: false
         },
       ]} />
     </QueryClientProvider>
   )
 }
-```
\ No newline at end of file
+```