update docs for data mode

Author: AlemTuzlak

docs/content/01-started/01-installation.mdx

@@ -14,7 +14,7 @@ npm install react-router-devtools -D
 
 This will install it as a dev dependency in your project.
 
-## Enabling the tools
+## Enabling the tools (framework mode)
 
 After you have installed the tools, you need to go to your `vite.config.ts` file which will probably look something like this:
 
@@ -48,6 +48,32 @@ Make sure your plugin is BEFORE the react router one!
 </WarningAlert>
 
 
+## Enabling the tools (data/declarative mode)
+
+If you are using React Router in data/declarative mode, you can still use the devtools
+by first installing @tanstack/react-devtools and then adding the devtools somewhere under
+the router provider in your app.
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools';
+import { EmbeddedDevTools } from 'react-router-devtools';
+
+export function App() {
+  return (
+    <>
+      <YourRouterProvider>
+        <YourAppComponents />
+        <TanStackDevtools plugins=[{
+          name: "React Router",
+          render: <EmbeddedDevTools />
+        }] />
+      </YourRouterProvider>
+      <TanStackDevtools />
+    </>
+  );
+}
+```
+
 react-router-devtools uses @tanstack/devtools as the base for the UI, you can refer to their
 [documentation](https://tanstack.com/devtools/latest/docs/overview) for more information on how to use the devtools interface.
 

docs/package.json

@@ -36,12 +36,12 @@
 		"@content-collections/remix-vite": "0.2.2",
 		"@epic-web/client-hints": "1.3.5",
 		"@forge42/seo-tools": "1.3.0",
-		"@react-router/node": "7.9.3",
+		"@react-router/node": "7.9.5",
 		"@tsparticles/engine": "^3.3.0",
 		"@tsparticles/react": "^3.0.0",
 		"@tsparticles/slim": "^3.3.0",
 		"clsx": "2.1.1",
-		"framer-motion": "^11.0.8",
+		"framer-motion": "^12.23.24",
 		"hono": "4.6.20",
 		"i18next": "24.2.2",
 		"i18next-browser-languagedetector": "8.0.2",
@@ -64,11 +64,11 @@
 	"devDependencies": {
 		"@babel/preset-typescript": "7.26.0",
 		"@dotenvx/dotenvx": "1.34.0",
-		"@react-router/dev": "7.9.3",
+		"@react-router/dev": "7.9.5",
 		"@tailwindcss/typography": "0.5.16",
 		"@tailwindcss/vite": "^4.1.4",
-		"@testing-library/react": "16.2.0",
-		"@types/node": "22.13.1",
+		"@testing-library/react": "16.3.0",
+		"@types/node": "24.10.0",
 		"@types/prompt": "1.1.9",
 		"@types/react": "^19.1.2",
 		"@types/react-dom": "^19.1.2",
@@ -78,16 +78,16 @@
 		"@vitest/coverage-v8": "3.0.5",
 		"@vitest/ui": "3.0.5",
 		"babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
-		"chalk": "5.4.1",
-		"happy-dom": "16.8.1",
+		"chalk": "5.6.2",
+		"happy-dom": "20.0.10",
 		"npm-run-all": "4.1.5",
 		"playwright": "1.50.1",
 		"prompt": "1.3.0",
 		"react-router-devtools": "*",
 		"tailwindcss": "4.0.9",
-		"tsx": "4.19.2",
-		"typescript": "^5.8.3",
-		"vite": "^6.3.3",
+		"tsx": "4.20.6",
+		"typescript": "^5.9.3",
+		"vite": "^7.2.2",
 		"vite-plugin-babel": "1.3.0",
 		"vite-plugin-icons-spritesheet": "3.0.1",
 		"vite-tsconfig-paths": "5.1.4",

package.json

@@ -50,7 +50,7 @@
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
 		"@changesets/cli": "^2.29.0",
-		"@types/node": "22.13.1",
+		"@types/node": "24.10.0",
 		"knip": "5.43.6",
 		"lefthook": "^1.11.10",
 		"nx": "^21.6.3",

packages/react-router-devtools/package.json

@@ -102,49 +102,49 @@
 		"vite": ">=5.0.0 || >=6.0.0"
 	},
 	"devDependencies": {
-		"@react-router/dev": "7.9.3",
-		"@react-router/node": "7.9.3",
-		"@react-router/serve": "7.9.3",
+		"@react-router/dev": "7.9.5",
+		"@react-router/node": "7.9.5",
+		"@react-router/serve": "7.9.5",
 		"@tanstack/devtools": "^0.8.1",
-		"@testing-library/dom": "^10.4.0",
-		"@testing-library/react": "16.2.0",
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "16.3.0",
 		"@types/babel__core": "^7.20.5",
 		"@types/babel__generator": "^7.27.0",
 		"@types/babel__traverse": "^7.28.0",
-		"@types/node": "22.13.1",
+		"@types/node": "24.10.0",
 		"@vitest/coverage-v8": "3.0.5",
 		"@vitest/ui": "3.0.5",
-		"happy-dom": "16.8.1",
-		"jest-preview": "^0.3.1",
+		"happy-dom": "20.0.10",
+		"jest-preview": "^0.3.2",
 		"npm-run-all": "4.1.5",
-		"tsup": "^8.3.6",
-		"tsx": "4.19.2",
-		"typescript": "^5.8.3",
-		"vite": "^6.3.3",
-		"vite-node": "^3.1.2",
+		"tsup": "^8.5.0",
+		"tsx": "4.20.6",
+		"typescript": "^5.9.3",
+		"vite": "^7.2.2",
+		"vite-node": "^5.0.0",
 		"vitest": "3.0.5"
 	},
 	"dependencies": {
-		"@babel/core": "^7.26.10",
-		"@babel/generator": "^7.26.5",
-		"@babel/parser": "^7.26.10",
-		"@babel/traverse": "^7.26.10",
-		"@babel/types": "^7.26.10",
-		"@radix-ui/react-accordion": "^1.2.2",
-		"@tanstack/devtools-event-client": "^0.3.3",
+		"@babel/core": "^7.28.5",
+		"@babel/generator": "^7.28.5",
+		"@babel/parser": "^7.28.5",
+		"@babel/traverse": "^7.28.5",
+		"@babel/types": "^7.28.5",
+		"@radix-ui/react-accordion": "^1.2.12",
+		"@tanstack/devtools-event-client": "^0.3.4",
 		"@tanstack/devtools-vite": "^0.3.11",
-		"@tanstack/react-devtools": "^0.8.0",
-		"chalk": "5.4.1",
+		"@tanstack/react-devtools": "^0.8.1",
+		"chalk": "5.6.2",
 		"clsx": "2.1.1",
-		"framer-motion": "^11.0.8",
+		"framer-motion": "^12.23.24",
 		"goober": "^2.1.18",
-		"react-d3-tree": "^3.6.4",
-		"react-hotkeys-hook": "^4.6.1",
-		"react-tooltip": "^5.28.0"
+		"react-d3-tree": "^3.6.6",
+		"react-hotkeys-hook": "^5.2.1",
+		"react-tooltip": "^5.30.0"
 	},
 	"optionalDependencies": {
-		"@biomejs/cli-darwin-arm64": "^1.9.4",
-		"@rollup/rollup-darwin-arm64": "^4.32.1",
-		"@rollup/rollup-linux-x64-gnu": "^4.32.1"
+		"@biomejs/cli-darwin-arm64": "^2.3.5",
+		"@rollup/rollup-darwin-arm64": "^4.53.2",
+		"@rollup/rollup-linux-x64-gnu": "^4.53.2"
 	}
 }