docs(core, react): fixes to examples package.json, links and typos

Author: harry-whorlow

docs/configuration.md

@@ -5,39 +5,39 @@ id: configuration
 
 Both TanStack `DevTools` and `EventClient` can be configured.
 
-> **important** all configuration is optional unless marked (required)
+> [!IMPORTANT] all configuration is optional unless marked (required)
 
 ## Devtools Configuration
 
-With the `Devtools` there are two configuration objects, regardless of Frameworks these are the same and are provided to the Devtools through props.
+The `Devtools` component has two configuration props, regardless of Frameworks these are the same.
 
-- `config` configuration for the devtool panel and interaction with it
-- `eventBusConfig` configuration for the event bus
+- `config` - Configuration for the devtool panel and interaction with it.
+- `eventBusConfig` - Configuration for the event bus.
 
 The `config` object is mainly focused around user interaction with the devtools panel and accepts the following properties:
 
 - `defaultOpen` - If the devtools are open by default
 
 ```ts
-{defaultOpen: boolean}
+{ defaultOpen: boolean }
 ```
 
 - `hideUntilHover` - Hides the TanStack devtools trigger until hovered
 
 ```ts
-{hideUntilHover: boolean}
+{ hideUntilHover: boolean }
 ```
 
 - `position` - The position of the TanStack devtools trigger
 
 ```ts
-{position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'}
+{ position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }
 ```
 
 - `panelLocation` - The location of the devtools panel
 
 ```ts
-{panelLocation: 'top' | 'bottom'}
+{ panelLocation: 'top' | 'bottom' }
 
 ```
 
@@ -47,40 +47,40 @@ The `config` object is mainly focused around user interaction with the devtools
 type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
 type KeyboardKey = ModifierKey | (string & {});
 
-{openHotkey: Array<KeyboardKey>}
+{ openHotkey: Array<KeyboardKey> }
 ```
 
 - `requireUrlFlag` - Requires a flag present in the url to enable devtools
 
 ```ts
-{requireUrlFlag: boolean}
+{ requireUrlFlag: boolean }
 
 ```
 
 - `urlFlag` - The required flag that must be present in the url to enable devtools.
 
 ```ts
-{urlFlag: string}
+{ urlFlag: string }
 ```
 
 The `eventBusConfig` is configuration for the back bone of the devtools, the ``, and accepts the following properties:
 
 - `debug` - Enables debug mode for the EventBus
 
 ```ts
-{debug: boolean}
+{ debug: boolean }
 ```
 
 - `connectToServerBus` - Optional flag to indicate if the devtools server event bus is available to connect to
 
 ```ts
-{connectToServerBus: boolean}
+{ connectToServerBus: boolean }
 ```
 
 - `port` - The port at which the client connects to the devtools server event bus
 
 ```ts
-{port: number}
+{ port: number }
 ```
 
 Put together here is an example in react:
@@ -148,4 +148,4 @@ class customEventClient extends EventClient<EventMap> {
 }
 ```
 
-More information about EventClient configuration can be found in our [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/basic)
+More information about EventClient configuration can be found in our [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools)

docs/framework/react/guides/custom-plugins.md

@@ -33,7 +33,7 @@ export function createCounter() {
 
 ## Event Client Setup
 
-Install the [TanStack Devtools Event Client](https://tanstack.com/devtools/) utils.
+Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
 
 ```bash
 npm i @tanstack/devtools-event-client
@@ -67,7 +67,7 @@ export const DevtoolsEventClient = new FormEventClient()
 
 ## Event Client Integration
 
-Now we need to hook our `EventClient` into out application code. This can be done in many way's, a UseEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
+Now we need to hook our `EventClient` into our application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
 
 Our new library code will looks as follows:
 
@@ -108,7 +108,7 @@ export function createCounter() {
 
 Now we need to create our devtools panel, for a simple approach write the devtools in the framework that the adapter is, be aware that this will make the plugin framework specific.
 
-> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you you can ignore this).
+> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you, you can ignore this).
 
 DevtoolsPanel.ts
 ```tsx
@@ -134,7 +134,7 @@ export function DevtoolPanel() {
 
 ## Application Integration
 
-This step follows what's shown in [../basic-setup] for a more documented guide go check it out. As well as the complete [custom-plugin example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-plugin) in our examples section.
+This step follows what's shown in [../basic-setup] for a more documented guide go check it out. As well as the complete [custom-devtools example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools) in our examples section.
 
 Main.tsx
 ```tsx

examples/react/basic/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/devtools-event-client": "workspace:^",
-    "@tanstack/react-devtools": "^0.2.2",
+    "@tanstack/react-devtools": "workspace:^",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-devtools": "^5.83.0",
     "@tanstack/react-router": "^1.130.2",

examples/react/custom-devtools/package.json

@@ -9,8 +9,8 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/devtools-event-client": "https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-client@11",
-    "@tanstack/react-devtools": "https://pkg.pr.new/TanStack/devtools/@tanstack/react-devtools@0a0219b",
+    "@tanstack/devtools-event-client": "workspace:^",
+    "@tanstack/react-devtools": "workspace:^",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

examples/solid/basic/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/solid-devtools": "^0.2.2",
+    "@tanstack/solid-devtools": "workspace:^",
     "@tanstack/solid-query": "^5.83.0",
     "@tanstack/solid-query-devtools": "^5.83.0",
     "@tanstack/solid-router": "^1.129.8",