@tanstack/react-router 1.160.0 → 1.160.2

package/dist/llms/rules/guide.js

@@ -52,6 +52,10 @@ export const Route = createFileRoute('/_authenticated')({
 
 If your authentication check can throw errors (network failures, token validation, etc.), wrap it in try/catch:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createFileRoute, redirect, isRedirect } from '@tanstack/react-router'
 
@@ -81,6 +85,39 @@ export const Route = createFileRoute('/_authenticated')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createFileRoute, redirect, isRedirect } from '@tanstack/solid-router'
+
+// src/routes/_authenticated.tsx
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: async ({ location }) => {
+    try {
+      const user = await verifySession() // might throw on network error
+      if (!user) {
+        throw redirect({
+          to: '/login',
+          search: { redirect: location.href },
+        })
+      }
+      return { user }
+    } catch (error) {
+      // Re-throw redirects (they're intentional, not errors)
+      if (isRedirect(error)) throw error
+
+      // Auth check failed (network error, etc.) - redirect to login
+      throw redirect({
+        to: '/login',
+        search: { redirect: location.href },
+      })
+    }
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 The [\`isRedirect()\`](../api/router/isRedirectFunction.md) helper distinguishes between actual errors and intentional redirects.
 
 Once you have authenticated a user, it's also common practice to redirect them back to the page they were trying to access. To do this, you can utilize the \`redirect\` search param that we added in our original redirect. Since we'll be replacing the entire URL with what it was, \`router.history.push\` is better suited for this than \`router.navigate\`:
@@ -119,9 +156,13 @@ We'll cover the \`router.context\` options in-detail in the [Router Context](./r
 
 Here's an example that uses React context and hooks for protecting authenticated routes in TanStack Router. See the entire working setup in the [Authenticated Routes example](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes).
 
-- \`src/routes/__root.tsx\`
+<!-- ::start:framework -->
 
-\`\`\`tsx
+# React
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/routes/__root.tsx"
 import { createRootRouteWithContext } from '@tanstack/react-router'
 
 interface MyRouterContext {
@@ -134,9 +175,7 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 })
 \`\`\`
 
-- \`src/router.tsx\`
-
-\`\`\`tsx
+\`\`\`tsx title="src/router.tsx"
 import { createRouter } from '@tanstack/react-router'
 
 import { routeTree } from './routeTree.gen'
@@ -151,9 +190,7 @@ export const router = createRouter({
 })
 \`\`\`
 
-- \`src/App.tsx\`
-
-\`\`\`tsx
+\`\`\`tsx title="src/App.tsx"
 import { RouterProvider } from '@tanstack/react-router'
 
 import { AuthProvider, useAuth } from './auth'
@@ -174,11 +211,72 @@ function App() {
 }
 \`\`\`
 
+<!-- ::end:tabs -->
+
+# Solid
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/routes/__root.tsx"
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+
+interface MyRouterContext {
+  // The ReturnType of your useAuth hook or the value of your AuthContext
+  auth: AuthState
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: () => <Outlet />,
+})
+\`\`\`
+
+\`\`\`tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/solid-router'
+
+import { routeTree } from './routeTree.gen'
+
+export const router = createRouter({
+  routeTree,
+  context: {
+    // auth will initially be undefined
+    // We'll be passing down the auth state from within a React component
+    auth: undefined!,
+  },
+})
+\`\`\`
+
+\`\`\`tsx title="src/App.tsx"
+import { RouterProvider } from '@tanstack/solid-router'
+
+import { AuthProvider, useAuth } from './auth'
+
+import { router } from './router'
+
+function InnerApp() {
+  const auth = useAuth()
+  return <RouterProvider router={router} context={{ auth }} />
+}
+
+function App() {
+  return (
+    <AuthProvider>
+      <InnerApp />
+    </AuthProvider>
+  )
+}
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
 Then in the authenticated route, you can check the auth state using the \`beforeLoad\` function, and **throw a \`redirect()\`** to your **Login route** if the user is not signed-in.
 
-- \`src/routes/dashboard.route.tsx\`
+<!-- ::start:framework -->
 
-\`\`\`tsx
+# React
+
+\`\`\`tsx title="src/routes/dashboard.route.tsx"
 import { createFileRoute, redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/dashboard')({
@@ -195,6 +293,27 @@ export const Route = createFileRoute('/dashboard')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/dashboard.route.tsx"
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/dashboard')({
+  beforeLoad: ({ context, location }) => {
+    if (!context.auth.isAuthenticated()) {
+      throw redirect({
+        to: '/login',
+        search: {
+          redirect: location.href,
+        },
+      })
+    }
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 You can _optionally_, also use the [Non-Redirected Authentication](#non-redirected-authentication) approach to show a login form instead of calling a **redirect**.
 
 This approach can also be used in conjunction with Pathless or Layout Route to protect all routes under their parent route.
@@ -298,8 +417,6 @@ For automatic code splitting to work, there are some rules in-place to make sure
 Route properties like \`component\`, \`loader\`, etc., should not be exported from the route file. Exporting these properties results in them being bundled into the main application bundle, which means that they will not be code-split.
 
 \`\`\`tsx
-import { createRoute } from '@tanstack/react-router'
-
 export const Route = createRoute('/posts')({
   // ...
   notFoundComponent: PostsNotFoundComponent,
@@ -331,8 +448,7 @@ You can change how TanStack Router splits your routes by changing the \`defaultB
 
 For example, to bundle all UI-related components into a single chunk, you could configure it like this:
 
-\`\`\`ts
-// vite.config.ts
+\`\`\`ts title="vite.config.ts"
 import { defineConfig } from 'vite'
 import { tanstackRouter } from '@tanstack/router-plugin/vite'
 
@@ -359,8 +475,7 @@ export default defineConfig({
 
 For complex rulesets, you can use the \`splitBehavior\` function in your vite config to programmatically define how routes should be split into chunks based on their \`routeId\`. This function allows you to implement custom logic for grouping properties together, giving you fine-grained control over the code splitting behavior.
 
-\`\`\`ts
-// vite.config.ts
+\`\`\`ts title="vite.config.ts"
 import { defineConfig } from 'vite'
 import { tanstackRouter } from '@tanstack/router-plugin/vite'
 
@@ -386,9 +501,7 @@ export default defineConfig({
 
 For ultimate control, you can override the global configuration directly inside a route file by adding a \`codeSplitGroupings\` property. This is useful for routes that have unique optimization needs.
 
-\`\`\`tsx
-// src/routes/posts.route.tsx
-import { createFileRoute } from '@tanstack/react-router'
+\`\`\`tsx title="src/routes/posts.route.tsx"
 import { loadPostsData } from './-heavy-posts-utils'
 
 export const Route = createFileRoute('/posts')({
@@ -565,8 +678,11 @@ When you are using \`.lazy.tsx\` you can split your route into two files to enab
 
 **Before (Single File)**
 
-\`\`\`tsx
-// src/routes/posts.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 import { fetchPosts } from './api'
 
@@ -580,13 +696,33 @@ function Posts() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from './api'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 **After (Split into two files)**
 
 This file would contain the critical route configuration:
 
-\`\`\`tsx
-// src/routes/posts.tsx
+<!-- ::start:framework -->
+
+# React
 
+\`\`\`tsx title="src/routes/posts.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 import { fetchPosts } from './api'
 
@@ -595,10 +731,26 @@ export const Route = createFileRoute('/posts')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from './api'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 With the non-critical route configuration going into the file with the \`.lazy.tsx\` suffix:
 
-\`\`\`tsx
-// src/routes/posts.lazy.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.lazy.tsx"
 import { createLazyFileRoute } from '@tanstack/react-router'
 
 export const Route = createLazyFileRoute('/posts')({
@@ -610,14 +762,35 @@ function Posts() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/solid-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Using Virtual Routes
 
 You might run into a situation where you end up splitting out everything from a route file, leaving it empty! In this case, simply **delete the route file entirely**! A virtual route will automatically be generated for you to serve as an anchor for your code split files. This virtual route will live directly in the generated route tree file.
 
 **Before (Virtual Routes)**
 
-\`\`\`tsx
-// src/routes/posts.tsx
+<!-- ::start:framework -->
+
+# React
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/routes/posts.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts')({
@@ -625,8 +798,7 @@ export const Route = createFileRoute('/posts')({
 })
 \`\`\`
 
-\`\`\`tsx
-// src/routes/posts.lazy.tsx
+\`\`\`tsx title="src/routes/posts.lazy.tsx"
 import { createLazyFileRoute } from '@tanstack/react-router'
 
 export const Route = createLazyFileRoute('/posts')({
@@ -638,10 +810,43 @@ function Posts() {
 }
 \`\`\`
 
+<!-- ::end:tabs -->
+
+# Solid
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts')({
+  // Hello?
+})
+\`\`\`
+
+\`\`\`tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/solid-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
 **After (Virtual Routes)**
 
-\`\`\`tsx
-// src/routes/posts.lazy.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.lazy.tsx"
 import { createLazyFileRoute } from '@tanstack/react-router'
 
 export const Route = createLazyFileRoute('/posts')({
@@ -653,6 +858,22 @@ function Posts() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.lazy.tsx"
+import { createLazyFileRoute } from '@tanstack/solid-router'
+
+export const Route = createLazyFileRoute('/posts')({
+  component: Posts,
+})
+
+function Posts() {
+  // ...
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 Tada! 🎉
 
 ## Code-Based Splitting
@@ -661,8 +882,7 @@ If you are using code-based routing, you can still code-split your routes using
 
 Create a lazy route using the \`createLazyRoute\` function.
 
-\`\`\`tsx
-// src/posts.lazy.tsx
+\`\`\`tsx title="src/posts.lazy.tsx"
 export const Route = createLazyRoute('/posts')({
   component: MyComponent,
 })
@@ -674,8 +894,7 @@ function MyComponent() {
 
 Then, call the \`.lazy\` method on the route definition in your \`app.tsx\` to import the lazy/code-split route with the non-critical route configuration.
 
-\`\`\`tsx
-// src/app.tsx
+\`\`\`tsx title="src/app.tsx"
 const postsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/posts',
@@ -690,6 +909,10 @@ It can be a powerful tool to reduce bundle size, but it comes with a cost as men
 
 You can code split your data loading logic using the Route's \`loader\` option. While this process makes it difficult to maintain type-safety with the parameters passed to your loader, you can always use the generic \`LoaderContext\` type to get you most of the way there:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { lazyFn } from '@tanstack/react-router'
 
@@ -705,15 +928,38 @@ export const loader = async (context: LoaderContext) => {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { lazyFn } from '@tanstack/solid-router'
+
+const route = createRoute({
+  path: '/my-route',
+  component: MyComponent,
+  loader: lazyFn(() => import('./loader'), 'loader'),
+})
+
+// In another file...a
+export const loader = async (context: LoaderContext) => {
+  /// ...
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 If you are using file-based routing, you'll only be able to split your \`loader\` if you are using [Automatic Code Splitting](#using-automatic-code-splitting) with customized bundling options.
 
 ## Manually accessing Route APIs in other files with the \`getRouteApi\` helper
 
 As you might have guessed, placing your component code in a separate file than your route can make it difficult to consume the route itself. To help with this, TanStack Router exports a handy \`getRouteApi\` function that you can use to access a route's type-safe APIs in a file without importing the route itself.
 
-- \`my-route.tsx\`
+<!-- ::start:framework -->
 
-\`\`\`tsx
+# React
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/my-route.tsx"
 import { createRoute } from '@tanstack/react-router'
 import { MyComponent } from './MyComponent'
 
@@ -726,9 +972,7 @@ const route = createRoute({
 })
 \`\`\`
 
-- \`MyComponent.tsx\`
-
-\`\`\`tsx
+\`\`\`tsx title="src/MyComponent.tsx"
 import { getRouteApi } from '@tanstack/react-router'
 
 const route = getRouteApi('/my-route')
@@ -741,6 +985,42 @@ export function MyComponent() {
 }
 \`\`\`
 
+<!-- ::end:tabs -->
+
+# Solid
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/my-route.tsx"
+import { createRoute } from '@tanstack/solid-router'
+import { MyComponent } from './MyComponent'
+
+const route = createRoute({
+  path: '/my-route',
+  loader: () => ({
+    foo: 'bar',
+  }),
+  component: MyComponent,
+})
+\`\`\`
+
+\`\`\`tsx title="src/MyComponent.tsx"
+import { getRouteApi } from '@tanstack/solid-router'
+
+const route = getRouteApi('/my-route')
+
+export function MyComponent() {
+  const loaderData = route.useLoaderData()
+  //    ^? { foo: string }
+
+  return <div>...</div>
+}
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
 The \`getRouteApi\` function is useful for accessing other type-safe APIs:
 
 - \`useLoaderData\`
@@ -752,11 +1032,15 @@ The \`getRouteApi\` function is useful for accessing other type-safe APIs:
 
 # Creating a Router
 
-## The \`Router\` Class
+## The \`createRouter\` function
 
 When you're ready to start using your router, you'll need to create a new \`Router\` instance. The router instance is the core brains of TanStack Router and is responsible for managing the route tree, matching routes, and coordinating navigations and route transitions. It also serves as a place to configure router-wide settings.
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/router.tsx"
 import { createRouter } from '@tanstack/react-router'
 
 const router = createRouter({
@@ -764,7 +1048,19 @@ const router = createRouter({
 })
 \`\`\`
 
-## Route Tree
+# Solid
+
+\`\`\`tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
+## Route Tree
 
 You'll probably notice quickly that the \`Router\` constructor requires a \`routeTree\` option. This is the route tree that the router will use to match routes and render components.
 
@@ -795,7 +1091,11 @@ const routeTree = rootRoute.addChildren([
 
 TanStack Router provides amazing support for TypeScript, even for things you wouldn't expect like bare imports straight from the library! To make this possible, you must register your router's types using TypeScripts' [Declaration Merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) feature. This is done by extending the \`Register\` interface on \`@tanstack/react-router\` with a \`router\` property that has the type of your \`router\` instance:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/router.tsx"
 declare module '@tanstack/react-router' {
   interface Register {
     // This infers the type of our router and registers it across your entire project
@@ -804,6 +1104,19 @@ declare module '@tanstack/react-router' {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/router.tsx"
+declare module '@tanstack/solid-router' {
+  interface Register {
+    // This infers the type of our router and registers it across your entire project
+    router: typeof router
+  }
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 With your router registered, you'll now get type-safety across your entire project for anything related to routing.
 
 ## 404 Not Found Route
@@ -837,7 +1150,9 @@ While repeating yourself can be acceptable in many situations, you might find th
 
 If you want to create a basic custom link component, you can do so with the following:
 
-[//]: # 'BasicExampleImplementation'
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
 import * as React from 'react'
@@ -862,7 +1177,34 @@ export const CustomLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
 }
 \`\`\`
 
-[//]: # 'BasicExampleImplementation'
+# Solid
+
+\`\`\`tsx
+import * as Solid from 'solid-js'
+import { createLink, LinkComponent } from '@tanstack/solid-router'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+
+type BasicLinkProps = Solid.JSX.IntrinsicElements['a'] & {
+  // Add any additional props you want to pass to the anchor element
+}
+
+const BasicLinkComponent: Solid.Component<BasicLinkProps> = (props) => (
+  <a {...props} class="block px-3 py-2 text-red-700">
+    {props.children}
+  </a>
+)
+
+const CreatedLinkComponent = createLink(BasicLinkComponent)
+
+export const CustomLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
+  return <CreatedLinkComponent preload={'intent'} {...props} />
+}
+\`\`\`
+
+<!-- ::end:framework -->
 
 You can then use your newly created \`Link\` component as any other \`Link\`
 
@@ -870,17 +1212,21 @@ You can then use your newly created \`Link\` component as any other \`Link\`
 <CustomLink to={'/dashboard/invoices/$invoiceId'} params={{ invoiceId: 0 }} />
 \`\`\`
 
-[//]: # 'ExamplesUsingThirdPartyLibs'
-
 ## \`createLink\` with third party libraries
 
 Here are some examples of how you can use \`createLink\` with third-party libraries.
 
+<!-- ::start:framework -->
+
+# React
+
 ### React Aria Components example
 
 React Aria Components v1.11.0 and later works with TanStack Router's \`preload (intent)\` prop. Use \`createLink\` to wrap each React Aria component that you use as a link.
 
-\`\`\`tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="RACLink.tsx"
 import { createLink } from '@tanstack/react-router'
 import { Link as RACLink, MenuItem } from 'react-aria-components'
 
@@ -888,9 +1234,7 @@ export const Link = createLink(RACLink)
 export const MenuItemLink = createLink(MenuItem)
 \`\`\`
 
-To use React Aria's render props, including the \`className\`, \`style\`, and \`children\` functions, create a wrapper component and pass that to \`createLink\`.
-
-\`\`\`tsx
+\`\`\`tsx title="CustomRACLink.tsx"
 import { createLink } from '@tanstack/react-router'
 import { Link as RACLink, type LinkProps } from 'react-aria-components'
 
@@ -912,9 +1256,19 @@ function MyLink(props: MyLinkProps) {
 export const Link = createLink(MyLink)
 \`\`\`
 
+<!-- ::end:tabs -->
+
+To use React Aria's render props, including the \`className\`, \`style\`, and \`children\` functions, create a wrapper component and pass that to \`createLink\`.
+
+<!-- ::end:framework -->
+
+<!-- ::start:framework -->
+
+# React
+
 ### Chakra UI example
 
-\`\`\`tsx
+\`\`\`tsx title="ChakraLinkComponent.tsx"
 import * as React from 'react'
 import { createLink, LinkComponent } from '@tanstack/react-router'
 import { Link } from '@chakra-ui/react'
@@ -950,6 +1304,12 @@ export const CustomLink: LinkComponent<typeof ChakraLinkComponent> = (
 }
 \`\`\`
 
+<!-- ::end:framework -->
+
+<!-- ::start:framework -->
+
+# React
+
 ### MUI example
 
 There is an [example](https://github.com/TanStack/router/tree/main/examples/react/start-material-ui) available which uses these patterns.
@@ -958,16 +1318,22 @@ There is an [example](https://github.com/TanStack/router/tree/main/examples/reac
 
 If the MUI \`Link\` should simply behave like the router \`Link\`, it can be just wrapped with \`createLink\`:
 
-\`\`\`tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="CustomLink.tsx"
 import { createLink } from '@tanstack/react-router'
 import { Link } from '@mui/material'
 
 export const CustomLink = createLink(Link)
 \`\`\`
 
+<!-- ::end:tabs -->
+
 If the \`Link\` should be customized this approach can be used:
 
-\`\`\`tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="CustomLink.tsx"
 import React from 'react'
 import { createLink } from '@tanstack/react-router'
 import { Link } from '@mui/material'
@@ -991,11 +1357,15 @@ export const CustomLink: LinkComponent<typeof MUILinkComponent> = (props) => {
 // Can also be styled
 \`\`\`
 
+<!-- ::end:tabs -->
+
 #### \`Button\`
 
 If a \`Button\` should be used as a router \`Link\`, the \`component\` should be set as \`a\`:
 
-\`\`\`tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="CustomButtonLink.tsx"
 import React from 'react'
 import { createLink } from '@tanstack/react-router'
 import { Button } from '@mui/material'
@@ -1020,11 +1390,15 @@ export const CustomButtonLink: LinkComponent<typeof MUIButtonLinkComponent> = (
 }
 \`\`\`
 
+<!-- ::end:tabs -->
+
 #### Usage with \`styled\`
 
 Any of these MUI approaches can then be used with \`styled\`:
 
-\`\`\`tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="StyledCustomLink.tsx"
 import { css, styled } from '@mui/material'
 import { CustomLink } from './CustomLink'
 
@@ -1035,9 +1409,19 @@ const StyledCustomLink = styled(CustomLink)(
 )
 \`\`\`
 
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
+<!-- ::start:framework -->
+
+# React
+
 ### Mantine example
 
-\`\`\`tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="CustomLink.tsx"
 import * as React from 'react'
 import { createLink, LinkComponent } from '@tanstack/react-router'
 import { Anchor, AnchorProps } from '@mantine/core'
@@ -1062,7 +1446,25 @@ export const CustomLink: LinkComponent<typeof MantineLinkComponent> = (
 }
 \`\`\`
 
-[//]: # 'ExamplesUsingThirdPartyLibs'
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
+<!-- ::start:framework -->
+
+# Solid
+
+### Some Library example
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="UntitledLink.tsx"
+// TODO: Add this example.
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
 
 # Custom Search Param Serialization
 
@@ -1086,6 +1488,10 @@ It would be serialized and escaped into the following search string:
 
 We can implement the default behavior with the following code:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import {
   createRouter,
@@ -1100,6 +1506,24 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import {
+  createRouter,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  parseSearch: parseSearchWith(JSON.parse),
+  stringifySearch: stringifySearchWith(JSON.stringify),
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 However, this default behavior may not be suitable for all use cases. For example, you may want to use a different serialization format, such as base64 encoding, or you may want to use a purpose-built serialization/deserialization library, like [query-string](https://github.com/sindresorhus/query-string), [JSURL2](https://github.com/wmertens/jsurl2), or [Zipson](https://jgranstrom.github.io/zipson/).
 
 This can be achieved by providing your own serialization and deserialization functions to the \`parseSearch\` and \`stringifySearch\` options in the [\`Router\`](../api/router/RouterOptionsType.md#stringifysearch-method) configuration. When doing this, you can utilize TanStack Router's built-in helper functions, \`parseSearchWith\` and \`stringifySearchWith\`, to simplify the process.
@@ -1115,6 +1539,10 @@ Here are some examples of how you can customize the search param serialization i
 
 It's common to base64 encode your search params to achieve maximum compatibility across browsers and URL unfurlers, etc. This can be done with the following code:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import {
   Router,
@@ -1148,6 +1576,43 @@ function encodeToBinary(str: string): string {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/solid-router'
+
+const router = createRouter({
+  parseSearch: parseSearchWith((value) => JSON.parse(decodeFromBinary(value))),
+  stringifySearch: stringifySearchWith((value) =>
+    encodeToBinary(JSON.stringify(value)),
+  ),
+})
+
+function decodeFromBinary(str: string): string {
+  return decodeURIComponent(
+    Array.prototype.map
+      .call(atob(str), function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join(''),
+  )
+}
+
+function encodeToBinary(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16))
+    }),
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 > [⚠️ Why does this snippet not use atob/btoa?](#safe-binary-encodingdecoding)
 
 So, if we were to turn the previous object into a search string using this configuration, it would look like this:
@@ -1163,6 +1628,10 @@ So, if we were to turn the previous object into a search string using this confi
 
 The [query-string](https://github.com/sindresorhus/query-string) library is a popular for being able to reliably parse and stringify query strings. You can use it to customize the serialization format of your search params. This can be done with the following code:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRouter } from '@tanstack/react-router'
 import qs from 'query-string'
@@ -1182,6 +1651,29 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRouter } from '@tanstack/solid-router'
+import qs from 'query-string'
+
+const router = createRouter({
+  // ...
+  stringifySearch: stringifySearchWith((value) =>
+    qs.stringify(value, {
+      // ...options
+    }),
+  ),
+  parseSearch: parseSearchWith((value) =>
+    qs.parse(value, {
+      // ...options
+    }),
+  ),
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 So, if we were to turn the previous object into a search string using this configuration, it would look like this:
 
 \`\`\`txt
@@ -1192,6 +1684,10 @@ So, if we were to turn the previous object into a search string using this confi
 
 [JSURL2](https://github.com/wmertens/jsurl2) is a non-standard library that can compress URLs while still maintaining readability. This can be done with the following code:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import {
   Router,
@@ -1207,6 +1703,25 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/solid-router'
+import { parse, stringify } from 'jsurl2'
+
+const router = createRouter({
+  // ...
+  parseSearch: parseSearchWith(parse),
+  stringifySearch: stringifySearchWith(stringify),
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 So, if we were to turn the previous object into a search string using this configuration, it would look like this:
 
 \`\`\`txt
@@ -1217,6 +1732,10 @@ So, if we were to turn the previous object into a search string using this confi
 
 [Zipson](https://jgranstrom.github.io/zipson/) is a very user-friendly and performant JSON compression library (both in runtime performance and the resulting compression performance). To compress your search params with it (which requires escaping/unescaping and base64 encoding/decoding them as well), you can use the following code:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import {
   Router,
@@ -1251,6 +1770,44 @@ function encodeToBinary(str: string): string {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import {
+  Router,
+  parseSearchWith,
+  stringifySearchWith,
+} from '@tanstack/solid-router'
+import { stringify, parse } from 'zipson'
+
+const router = createRouter({
+  parseSearch: parseSearchWith((value) => parse(decodeFromBinary(value))),
+  stringifySearch: stringifySearchWith((value) =>
+    encodeToBinary(stringify(value)),
+  ),
+})
+
+function decodeFromBinary(str: string): string {
+  return decodeURIComponent(
+    Array.prototype.map
+      .call(atob(str), function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join(''),
+  )
+}
+
+function encodeToBinary(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16))
+    }),
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 > [⚠️ Why does this snippet not use atob/btoa?](#safe-binary-encodingdecoding)
 
 So, if we were to turn the previous object into a search string using this configuration, it would look like this:
@@ -1261,13 +1818,13 @@ So, if we were to turn the previous object into a search string using this confi
 
 <hr>
 
-### Safe Binary Encoding/Decoding
+## Safe Binary Encoding/Decoding
 
 In the browser, the \`atob\` and \`btoa\` functions are not guaranteed to work properly with non-UTF8 characters. We recommend using these encoding/decoding utilities instead:
 
 To encode from a string to a binary string:
 
-\`\`\`typescript
+\`\`\`ts
 export function encodeToBinary(str: string): string {
   return btoa(
     encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
@@ -1279,7 +1836,7 @@ export function encodeToBinary(str: string): string {
 
 To decode from a binary string to a string:
 
-\`\`\`typescript
+\`\`\`ts
 export function decodeFromBinary(str: string): string {
   return decodeURIComponent(
     Array.prototype.map
@@ -1350,7 +1907,7 @@ The router cache is built-in and is as easy as returning data from any route's \
 Route \`loader\` functions are called when a route match is loaded. They are called with a single parameter which is an object containing many helpful properties. We'll go over those in a bit, but first, let's look at an example of a route \`loader\` function:
 
 \`\`\`tsx
-// routes/posts.tsx
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   loader: () => fetchPosts(),
 })
@@ -1387,6 +1944,10 @@ const posts = Route.useLoaderData()
 
 If you don't have ready access to your route object (i.e. you're deep in the component tree for the current route), you can use \`getRouteApi\` to access the same hook (as well as the other hooks on the Route object). This should be preferred over importing the Route object, which is likely to create circular dependencies.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { getRouteApi } from '@tanstack/react-router'
 
@@ -1396,6 +1957,19 @@ const routeApi = getRouteApi('/posts')
 const data = routeApi.useLoaderData()
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { getRouteApi } from '@tanstack/solid-router'
+
+// in your component
+
+const routeApi = getRouteApi('/posts')
+const data = routeApi.useLoaderData()
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Dependency-based Stale-While-Revalidate Caching
 
 TanStack Router provides a built-in Stale-While-Revalidate caching layer for route loaders that is keyed on the dependencies of a route:
@@ -1570,6 +2144,10 @@ export const fetchPosts = async () => {
 
 - \`/routes/__root.tsx\`
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRootRouteWithContext } from '@tanstack/react-router'
 
@@ -1579,11 +2157,22 @@ export const Route = createRootRouteWithContext<{
 }>()() // NOTE: the double call is on purpose, since createRootRouteWithContext is a factory ;)
 \`\`\`
 
-- \`/routes/posts.tsx\`
+# Solid
 
 \`\`\`tsx
-import { createFileRoute } from '@tanstack/react-router'
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+
+// Create a root route using the createRootRouteWithContext<{...}>() function and pass it whatever types you would like to be available in your router context.
+export const Route = createRootRouteWithContext<{
+  fetchPosts: typeof fetchPosts
+}>()() // NOTE: the double call is on purpose, since createRootRouteWithContext is a factory ;)
+\`\`\`
 
+<!-- ::end:framework -->
+
+- \`/routes/posts.tsx\`
+
+\`\`\`tsx
 // Notice how our postsRoute references context to get our fetchPosts function
 // This can be a powerful tool for dependency injection across your router
 // and routes.
@@ -1613,7 +2202,7 @@ const router = createRouter({
 To use path params in your \`loader\` function, access them via the \`params\` property on the function's parameters. Here's an example:
 
 \`\`\`tsx
-// routes/posts.$postId.tsx
+// src/routes/posts.$postId.tsx
 export const Route = createFileRoute('/posts/$postId')({
   loader: ({ params: { postId } }) => fetchPostById(postId),
 })
@@ -1624,9 +2213,7 @@ export const Route = createFileRoute('/posts/$postId')({
 Passing down global context to your router is great, but what if you want to provide context that is specific to a route? This is where the \`beforeLoad\` option comes in. The \`beforeLoad\` option is a function that runs right before attempting to load a route and receives the same parameters as \`loader\`. Beyond its ability to redirect potential matches, block loader requests, etc, it can also return an object that will be merged into the route's context. Let's take a look at an example where we inject some data into our route context via the \`beforeLoad\` option:
 
 \`\`\`tsx
-// /routes/posts.tsx
-import { createFileRoute } from '@tanstack/react-router'
-
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   // Pass the fetchPosts function to the route context
   beforeLoad: () => ({
@@ -1688,7 +2275,7 @@ export const Route = createFileRoute('/posts')({
 The \`abortController\` property of the \`loader\` function is an [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController). Its signal is cancelled when the route is unloaded or when the \`loader\` call becomes outdated. This is useful for cancelling network requests when the route is unloaded or when the route's params change. Here is an example using it with a fetch call:
 
 \`\`\`tsx
-// routes/posts.tsx
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   loader: ({ abortController }) =>
     fetchPosts({
@@ -1703,7 +2290,7 @@ export const Route = createFileRoute('/posts')({
 The \`preload\` property of the \`loader\` function is a boolean which is \`true\` when the route is being preloaded instead of loaded. Some data loading libraries may handle preloading differently than a standard fetch, so you may want to pass \`preload\` to your data loading library, or use it to execute the appropriate data loading logic:
 
 \`\`\`tsx
-// routes/posts.tsx
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   loader: async ({ preload }) =>
     fetchPosts({
@@ -1744,7 +2331,7 @@ TanStack Router provides a few ways to handle errors that occur during the route
 The \`routeOptions.onError\` option is a function that is called when an error occurs during the route loading.
 
 \`\`\`tsx
-// routes/posts.tsx
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   loader: () => fetchPosts(),
   onError: ({ error }) => {
@@ -1759,7 +2346,7 @@ export const Route = createFileRoute('/posts')({
 The \`routeOptions.onCatch\` option is a function that is called whenever an error was caught by the router's CatchBoundary.
 
 \`\`\`tsx
-// routes/posts.tsx
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   onCatch: ({ error, errorInfo }) => {
     // Log the error
@@ -1776,7 +2363,7 @@ The \`routeOptions.errorComponent\` option is a component that is rendered when
 - \`reset\` - A function to reset the internal \`CatchBoundary\`
 
 \`\`\`tsx
-// routes/posts.tsx
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   loader: () => fetchPosts(),
   errorComponent: ({ error }) => {
@@ -1789,7 +2376,7 @@ export const Route = createFileRoute('/posts')({
 The \`reset\` function can be used to allow the user to retry rendering the error boundaries normal children:
 
 \`\`\`tsx
-// routes/posts.tsx
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   loader: () => fetchPosts(),
   errorComponent: ({ error, reset }) => {
@@ -1813,7 +2400,7 @@ export const Route = createFileRoute('/posts')({
 If the error was the result of a route load, you should instead call \`router.invalidate()\`, which will coordinate both a router reload and an error boundary reset:
 
 \`\`\`tsx
-// routes/posts.tsx
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   loader: () => fetchPosts(),
   errorComponent: ({ error, reset }) => {
@@ -1841,9 +2428,7 @@ export const Route = createFileRoute('/posts')({
 TanStack Router provides a default \`ErrorComponent\` that is rendered when an error occurs during the route loading or rendering lifecycle. If you choose to override your routes' error components, it's still wise to always fall back to rendering any uncaught errors with the default \`ErrorComponent\`:
 
 \`\`\`tsx
-// routes/posts.tsx
-import { createFileRoute, ErrorComponent } from '@tanstack/react-router'
-
+// src/routes/posts.tsx
 export const Route = createFileRoute('/posts')({
   loader: () => fetchPosts(),
   errorComponent: ({ error }) => {
@@ -2064,12 +2649,14 @@ The \`Await\` component resolves the promise by triggering the nearest suspense
 
 If the promise is rejected, the \`Await\` component will throw the serialized error, which can be caught by the nearest error boundary.
 
-[//]: # 'DeferredWithAwaitFinalTip'
+<!-- ::start:framework -->
+
+# React
 
 > [!TIP]
 > In React 19, you can use the \`use()\` hook instead of \`Await\`
 
-[//]: # 'DeferredWithAwaitFinalTip'
+<!-- ::end:framework -->
 
 ## Deferred Data Loading with External libraries
 
@@ -2077,6 +2664,10 @@ When your strategy for fetching information for the route relies on [External Da
 
 So, instead of using \`defer\` and \`Await\`, you'll instead want to use the Route's \`loader\` to kick off the data fetching and then use the library's hooks to access the data in your components.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 // src/routes/posts.$postId.tsx
 import { createFileRoute } from '@tanstack/react-router'
@@ -2093,8 +2684,32 @@ export const Route = createFileRoute('/posts/$postId')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute } from '@tanstack/solid-router'
+import { slowDataOptions, fastDataOptions } from '~/api/query-options'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ context: { queryClient } }) => {
+    // Kick off the fetching of some slower data, but do not await it
+    queryClient.prefetchQuery(slowDataOptions())
+
+    // Fetch and await some data that resolves quickly
+    await queryClient.ensureQueryData(fastDataOptions())
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 Then in your component, you can use the library's hooks to access the data:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 // src/routes/posts.$postId.tsx
 import { createFileRoute } from '@tanstack/react-router'
@@ -2125,11 +2740,47 @@ function SlowDataComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute } from '@tanstack/solid-router'
+import { useSuspenseQuery } from '@tanstack/solid-query'
+import { slowDataOptions, fastDataOptions } from '~/api/query-options'
+
+export const Route = createFileRoute('/posts/$postId')({
+  // ...
+  component: PostIdComponent,
+})
+
+function PostIdComponent() {
+  const fastData = useSuspenseQuery(fastDataOptions())
+
+  // do something with fastData
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SlowDataComponent />
+    </Suspense>
+  )
+}
+
+function SlowDataComponent() {
+  const data = useSuspenseQuery(slowDataOptions())
+
+  return <div>{data()}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Caching and Invalidation
 
 Streamed promises follow the same lifecycle as the loader data they are associated with. They can even be preloaded!
 
-[//]: # 'SSRContent'
+<!-- ::start:framework -->
+
+# React
 
 ## SSR & Streaming Deferred Data
 
@@ -2155,17 +2806,17 @@ The following is a high-level overview of how deferred data streaming works with
 - Client
   - The suspended placeholder promises within \`<Await>\` are resolved with the streamed data/error responses and either render the result or throw the error to the nearest error boundary
 
-[//]: # 'SSRContent'
+<!-- ::end:framework -->
 
 # Document Head Management
 
-Document head management is the process of managing the head, title, meta, link, and script tags of a document and TanStack Router provides a robust way to manage the document head for full-stack applications that use Start and for single-page applications that use \`@tanstack/react-router\`. It provides:
+Document head management is the process of managing the head, title, meta, link, and script tags of a document and TanStack Router provides a robust way to manage the document head for full-stack applications that use Start and for single-page applications that use TanStack Router. It provides:
 
 - Automatic deduping of \`title\` and \`meta\` tags
 - Automatic loading/unloading of tags based on route visibility
 - A composable way to merge \`title\` and \`meta\` tags from nested routes
 
-For full-stack applications that use Start, and even for single-page applications that use \`@tanstack/react-router\`, managing the document head is a crucial part of any application for the following reasons:
+For full-stack applications that use Start, and even for single-page applications that use TanStack Router, managing the document head is a crucial part of any application for the following reasons:
 
 - SEO
 - Social media sharing
@@ -2227,6 +2878,10 @@ It should be **rendered either in the \`<head>\` tag of your root layout or as h
 
 ### Start/Full-Stack Applications
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { HeadContent } from '@tanstack/react-router'
 
@@ -2244,10 +2899,35 @@ export const Route = createRootRoute({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { HeadContent } from '@tanstack/solid-router'
+
+export const Route = createRootRoute({
+  component: () => (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <Outlet />
+      </body>
+    </html>
+  ),
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Single-Page Applications
 
 First, remove the \`<title>\` tag from the index.html if you have set any.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { HeadContent } from '@tanstack/react-router'
 
@@ -2261,6 +2941,23 @@ const rootRoute = createRootRoute({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { HeadContent } from '@tanstack/solid-router'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <HeadContent />
+      <Outlet />
+    </>
+  ),
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Managing Body Scripts
 
 In addition to scripts that can be rendered in the \`<head>\` tag, you can also render scripts in the \`<body>\` tag using the \`routeOptions.scripts\` property. This is useful for loading scripts (even inline scripts) that require the DOM to be loaded, but before the main entry point of your application (which includes hydration if you're using Start or a full-stack implementation of TanStack Router).
@@ -2286,9 +2983,13 @@ The \`<Scripts />\` component is **required** to render the body scripts of a do
 
 ### Example
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
-import { createFileRoute, Scripts } from '@tanstack/react-router'
-export const Router = createFileRoute('/')({
+import { createRootRoute, Scripts } from '@tanstack/react-router'
+export const Route = createFileRoute('/')({
   component: () => (
     <html>
       <head />
@@ -2301,23 +3002,33 @@ export const Router = createFileRoute('/')({
 })
 \`\`\`
 
-\`\`\`tsx
-import { Scripts, createRootRoute } from '@tanstack/react-router'
+# Solid
 
-export const Route = createRootRoute({
+\`\`\`tsx
+import { createFileRoute, Scripts } from '@tanstack/solid-router'
+export const Route = createRootRoute('/')({
   component: () => (
-    <>
-      <Outlet />
-      <Scripts />
-    </>
+    <html>
+      <head />
+      <body>
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
   ),
 })
 \`\`\`
 
+<!-- ::end:framework -->
+
 ## Inline Scripts with ScriptOnce
 
 For scripts that must run before React hydrates (like theme detection), use \`ScriptOnce\`. This is particularly useful for avoiding flash of unstyled content (FOUC) or theme flicker.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { ScriptOnce } from '@tanstack/react-router'
 
@@ -2341,6 +3052,33 @@ function ThemeProvider({ children }) {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { ScriptOnce } from '@tanstack/solid-router'
+
+const themeScript = \`(function() {
+  try {
+    const theme = localStorage.getItem('theme') || 'auto';
+    const resolved = theme === 'auto'
+      ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : theme;
+    document.documentElement.classList.add(resolved);
+  } catch (e) {}
+})();\`
+
+function ThemeProvider({ children }) {
+  return (
+    <>
+      <ScriptOnce children={themeScript} />
+      {children}
+    </>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### How ScriptOnce Works
 
 1. During SSR, renders a \`<script>\` tag with the provided code
@@ -2348,6 +3086,10 @@ function ThemeProvider({ children }) {
 3. After execution, the script removes itself from the DOM
 4. On client-side navigation, nothing is rendered (prevents duplicate execution)
 
+<!-- ::start:framework -->
+
+# React
+
 ### Preventing Hydration Warnings
 
 If your script modifies the DOM before hydration (like adding a class to \`<html>\`), use \`suppressHydrationWarning\` to prevent React warnings:
@@ -2370,6 +3112,8 @@ export const Route = createRootRoute({
 })
 \`\`\`
 
+<!-- ::end:framework -->
+
 ### Common Use Cases
 
 - **Theme/dark mode detection** - Apply theme class before hydration to prevent flash
@@ -2575,6 +3319,10 @@ If you don't create a history instance, a browser-oriented instance of this API
 
 Once you have a history instance, you can pass it to the \`Router\` constructor:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`ts
 import { createMemoryHistory, createRouter } from '@tanstack/react-router'
 
@@ -2585,6 +3333,20 @@ const memoryHistory = createMemoryHistory({
 const router = createRouter({ routeTree, history: memoryHistory })
 \`\`\`
 
+# Solid
+
+\`\`\`ts
+import { createMemoryHistory, createRouter } from '@tanstack/solid-router'
+
+const memoryHistory = createMemoryHistory({
+  initialEntries: ['/'], // Pass your initial url
+})
+
+const router = createRouter({ routeTree, history: memoryHistory })
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Browser Routing
 
 The \`createBrowserHistory\` is the default history type. It uses the browser's history API to manage the browser history.
@@ -2593,6 +3355,10 @@ The \`createBrowserHistory\` is the default history type. It uses the browser's
 
 Hash routing can be helpful if your server doesn't support rewrites to index.html for HTTP requests (among other environments that don't have a server).
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`ts
 import { createHashHistory, createRouter } from '@tanstack/react-router'
 
@@ -2601,10 +3367,26 @@ const hashHistory = createHashHistory()
 const router = createRouter({ routeTree, history: hashHistory })
 \`\`\`
 
+# Solid
+
+\`\`\`ts
+import { createHashHistory, createRouter } from '@tanstack/solid-router'
+
+const hashHistory = createHashHistory()
+
+const router = createRouter({ routeTree, history: hashHistory })
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Memory Routing
 
 Memory routing is useful in environments that are not a browser or when you do not want components to interact with the URL.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`ts
 import { createMemoryHistory, createRouter } from '@tanstack/react-router'
 
@@ -2615,7 +3397,21 @@ const memoryHistory = createMemoryHistory({
 const router = createRouter({ routeTree, history: memoryHistory })
 \`\`\`
 
-Refer to the [SSR Guide](./ssr.md#server-history) for usage on the server for server-side rendering.
+# Solid
+
+\`\`\`ts
+import { createMemoryHistory, createRouter } from '@tanstack/solid-router'
+
+const memoryHistory = createMemoryHistory({
+  initialEntries: ['/'], // Pass your initial url
+})
+
+const router = createRouter({ routeTree, history: memoryHistory })
+\`\`\`
+
+<!-- ::end:framework -->
+
+Refer to the [SSR Guide](./ssr.md#automatic-server-history) for usage on the server for server-side rendering.
 
 # Internationalization (i18n)
 
@@ -3015,7 +3811,9 @@ There are 2 ways to use navigation blocking:
 
 Let's imagine we want to prevent navigation if a form is dirty. We can do this by using the \`useBlocker\` hook:
 
-[//]: # 'HookBasedBlockingExample'
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
 import { useBlocker } from '@tanstack/react-router'
@@ -3036,10 +3834,35 @@ function MyComponent() {
 }
 \`\`\`
 
-[//]: # 'HookBasedBlockingExample'
+# Solid
+
+\`\`\`tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  useBlocker({
+    shouldBlockFn: () => {
+      if (!formIsDirty()) return false
+
+      const shouldLeave = confirm('Are you sure you want to leave?')
+      return !shouldLeave
+    },
+  })
+
+  // ...
+}
+\`\`\`
+
+<!-- ::end:framework -->
 
 \`shouldBlockFn\` gives you type safe access to the \`current\` and \`next\` location:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { useBlocker } from '@tanstack/react-router'
 
@@ -3061,9 +3884,36 @@ function MyComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  // always block going from /foo to /bar/123?hello=world
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: ({ current, next }) => {
+      return (
+        current.routeId === '/foo' &&
+        next.fullPath === '/bar/$id' &&
+        next.params.id === 123 &&
+        next.search.hello === 'world'
+      )
+    },
+    withResolver: true,
+  })
+
+  // ...
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 Note that even if \`shouldBlockFn\` returns \`false\`, the browser's \`beforeunload\` event may still be triggered on page reloads or tab closing. To gain control over this, you can use the \`enableBeforeUnload\` option to conditionally register the \`beforeunload\` handler:
 
-[//]: # 'HookBasedBlockingExample'
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
 import { useBlocker } from '@tanstack/react-router'
@@ -3080,16 +3930,37 @@ function MyComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  useBlocker({
+    {/* ... */}
+    enableBeforeUnload: formIsDirty(),
+  })
+
+  // ...
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 You can find more information about the \`useBlocker\` hook in the [API reference](../api/router/useBlockerHook.md).
 
 ## Component-based blocking
 
 In addition to logical/hook based blocking, you can use the \`Block\` component to achieve similar results:
 
-[//]: # 'ComponentBasedBlockingExample'
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
-import { Block } from '@tanstack/react-router'
+import { Block } from '@tanstack/solid-router'
 
 function MyComponent() {
   const [formIsDirty, setFormIsDirty] = useState(false)
@@ -3120,21 +3991,52 @@ function MyComponent() {
 }
 \`\`\`
 
-[//]: # 'ComponentBasedBlockingExample'
+# Solid
 
-## How can I show a custom UI?
+\`\`\`tsx
+import { Block } from '@tanstack/solid-router'
 
-In most cases, using \`window.confirm\` in the \`shouldBlockFn\` function with \`withResolver: false\` in the hook is enough since it will clearly show the user that the navigation is being blocked and resolve the blocking based on their response.
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
 
-However, in some situations, you might want to show a custom UI that is intentionally less disruptive and more integrated with your app's design.
+  return (
+    <Block
+      shouldBlockFn={() => {
+        if (!formIsDirty()) return false
 
-**Note:** The return value of \`shouldBlockFn\` does not resolve the blocking if \`withResolver\` is \`true\`.
+        const shouldLeave = confirm('Are you sure you want to leave?')
+        return !shouldLeave
+      }}
+    />
+  )
 
-### Hook/logical-based custom UI with resolver
+  // OR
 
-[//]: # 'HookBasedCustomUIBlockingWithResolverExample'
+  return (
+    <Block shouldBlockFn={() => !formIsDirty} withResolver>
+      {({ status, proceed, reset }) => <>{/* ... */}</>}
+    </Block>
+  )
+}
+\`\`\`
 
-\`\`\`tsx
+<!-- ::end:framework -->
+
+## How can I show a custom UI?
+
+In most cases, using \`window.confirm\` in the \`shouldBlockFn\` function with \`withResolver: false\` in the hook is enough since it will clearly show the user that the navigation is being blocked and resolve the blocking based on their response.
+
+However, in some situations, you might want to show a custom UI that is intentionally less disruptive and more integrated with your app's design.
+
+**Note:** The return value of \`shouldBlockFn\` does not resolve the blocking if \`withResolver\` is \`true\`.
+
+### Hook/logical-based custom UI with resolver
+
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx
 import { useBlocker } from '@tanstack/react-router'
 
 function MyComponent() {
@@ -3161,11 +4063,42 @@ function MyComponent() {
 }
 \`\`\`
 
-[//]: # 'HookBasedCustomUIBlockingWithResolverExample'
+# Solid
+
+\`\`\`tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: () => formIsDirty(),
+    withResolver: true,
+  })
+
+  // ...
+
+  return (
+    <>
+      {/* ... */}
+      {status === 'blocked' && (
+        <div>
+          <p>Are you sure you want to leave?</p>
+          <button onClick={proceed}>Yes</button>
+          <button onClick={reset}>No</button>
+        </div>
+      )}
+    </>
+}
+\`\`\`
+
+<!-- ::end:framework -->
 
 ### Hook/logical-based custom UI without resolver
 
-[//]: # 'HookBasedCustomUIBlockingWithoutResolverExample'
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
 import { useBlocker } from '@tanstack/react-router'
@@ -3206,13 +4139,56 @@ function MyComponent() {
 }
 \`\`\`
 
-[//]: # 'HookBasedCustomUIBlockingWithoutResolverExample'
+# Solid
+
+\`\`\`tsx
+import { useBlocker } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  useBlocker({
+    shouldBlockFn: () => {
+      if (!formIsDirty()) {
+        return false
+      }
+
+      const shouldBlock = new Promise<boolean>((resolve) => {
+        // Using a modal manager of your choice
+        modals.open({
+          title: 'Are you sure you want to leave?',
+          children: (
+            <SaveBlocker
+              confirm={() => {
+                modals.closeAll()
+                resolve(false)
+              }}
+              reject={() => {
+                modals.closeAll()
+                resolve(true)
+              }}
+            />
+          ),
+          onClose: () => resolve(true),
+        })
+      })
+      return shouldBlock
+    },
+  })
+
+  // ...
+}
+\`\`\`
+
+<!-- ::end:framework -->
 
 ### Component-based custom UI
 
 Similarly to the hook, the \`Block\` component returns the same state and functions as render props:
 
-[//]: # 'ComponentBasedCustomUIBlockingExample'
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
 import { Block } from '@tanstack/react-router'
@@ -3239,7 +4215,34 @@ function MyComponent() {
 }
 \`\`\`
 
-[//]: # 'ComponentBasedCustomUIBlockingExample'
+# Solid
+
+\`\`\`tsx
+import { Block } from '@tanstack/solid-router'
+
+function MyComponent() {
+  const [formIsDirty, setFormIsDirty] = createSignal(false)
+
+  return (
+    <Block shouldBlockFn={() => formIsDirty()} withResolver>
+      {({ status, proceed, reset }) => (
+        <>
+          {/* ... */}
+          {status === 'blocked' && (
+            <div>
+              <p>Are you sure you want to leave?</p>
+              <button onClick={proceed}>Yes</button>
+              <button onClick={reset}>No</button>
+            </div>
+          )}
+        </>
+      )}
+    </Block>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
 
 # Navigation
 
@@ -3395,12 +4398,26 @@ export type LinkProps<
 
 Let's make a simple static link!
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { Link } from '@tanstack/react-router'
 
 const link = <Link to="/about">About</Link>
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { Link } from '@tanstack/solid-router'
+
+const link = <Link to="/about">About</Link>
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Dynamic Links
 
 Dynamic links are links that have dynamic segments in them. For example, a link to a blog post might look like this:
@@ -4254,8 +5271,6 @@ export const Route = createFileRoute('/_pathless/route-a')({
 You can also target the root route by passing the exported \`rootRouteId\` variable to the \`notFound\` function's \`route\` property:
 
 \`\`\`tsx
-import { rootRouteId } from '@tanstack/react-router'
-
 export const Route = createFileRoute('/posts/$postId')({
   loader: async ({ params: { postId } }) => {
     const post = await getPost(postId)
@@ -4320,8 +5335,7 @@ The main differences are:
 
 To migrate from \`NotFoundRoute\` to \`notFoundComponent\`, you'll just need to make a few changes:
 
-\`\`\`tsx
-// router.tsx
+\`\`\`tsx title='src/router.tsx'
 import { createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen.'
 - import { notFoundRoute } from './notFoundRoute'  // [!code --]
@@ -4361,6 +5375,10 @@ The \`Outlet\` component is used to render the next potentially matching child r
 
 A great example is configuring the root route of your application. Let's give our root route a component that renders a title, then an \`<Outlet />\` for our top-level routes to render.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRootRoute, Outlet } from '@tanstack/react-router'
 
@@ -4378,6 +5396,27 @@ function RootComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRootRoute, Outlet } from '@tanstack/solid-router'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <Outlet /> {/* This is where child routes will render */}
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 # Parallel Routes
 
 We haven't covered this yet. Stay tuned!
@@ -4397,9 +5436,11 @@ Because path param routes only match to the next \`/\`, child routes can be crea
 
 Let's create a post route file that uses a path param to match the post ID:
 
-- \`posts.$postId.tsx\`
+<!-- ::start:framework -->
 
-\`\`\`tsx
+# React
+
+\`\`\`tsx title="src/routes/posts.$postId.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts/$postId')({
@@ -4409,6 +5450,20 @@ export const Route = createFileRoute('/posts/$postId')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.$postId.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    return fetchPost(params.postId)
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Path Params can be used by child routes
 
 Once a path param has been parsed, it is available to all child routes. This means that if we define a child route to our \`postRoute\`, we can use the \`postId\` variable from the URL in the child route's path!
@@ -4417,7 +5472,7 @@ Once a path param has been parsed, it is available to all child routes. This mea
 
 Path params are passed to the loader as a \`params\` object. The keys of this object are the names of the path params, and the values are the values that were parsed out of the actual URL path. For example, if we were to visit the \`/blog/123\` URL, the \`params\` object would be \`{ postId: '123' }\`:
 
-\`\`\`tsx
+\`\`\`tsx title="src/routes/posts.$postId.tsx"
 export const Route = createFileRoute('/posts/$postId')({
   loader: async ({ params }) => {
     return fetchPost(params.postId)
@@ -4427,7 +5482,7 @@ export const Route = createFileRoute('/posts/$postId')({
 
 The \`params\` object is also passed to the \`beforeLoad\` option:
 
-\`\`\`tsx
+\`\`\`tsx title="src/routes/posts.$postId.tsx"
 export const Route = createFileRoute('/posts/$postId')({
   beforeLoad: async ({ params }) => {
     // do something with params.postId
@@ -4439,7 +5494,11 @@ export const Route = createFileRoute('/posts/$postId')({
 
 If we add a component to our \`postRoute\`, we can access the \`postId\` variable from the URL by using the route's \`useParams\` hook:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.$postId.tsx"
 export const Route = createFileRoute('/posts/$postId')({
   component: PostComponent,
 })
@@ -4450,19 +5509,49 @@ function PostComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.$postId.tsx"
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const params = Route.useParams()
+  return <div>Post {params().postId}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 > 🧠 Quick tip: If your component is code-split, you can use the [getRouteApi function](./code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the \`Route\` configuration to get access to the typed \`useParams()\` hook.
 
 ## Path Params outside of Routes
 
 You can also use the globally exported \`useParams\` hook to access any parsed path params from any component in your app. You'll need to pass the \`strict: false\` option to \`useParams\`, denoting that you want to access the params from an ambiguous location:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/components/PostComponent.tsx"
 function PostComponent() {
   const { postId } = useParams({ strict: false })
   return <div>Post {postId}</div>
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/components/PostComponent.tsx"
+function PostComponent() {
+  const params = useParams({ strict: false })
+  return <div>Post {params().postId}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Navigating with Path Params
 
 When navigating to a route with path params, TypeScript will require you to pass the params either as an object or as a function that returns an object of params.
@@ -4503,8 +5592,11 @@ When using either prefixes or suffixes, you can define them by wrapping the path
 
 Prefixes are defined by placing the prefix text outside the curly braces before the variable name. For example, if you want to match a URL that starts with \`post-\` followed by a post ID, you can define it like this:
 
-\`\`\`tsx
-// src/routes/posts/post-{$postId}.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts/post-{$postId}.tsx"
 export const Route = createFileRoute('/posts/post-{$postId}')({
   component: PostComponent,
 })
@@ -4516,10 +5608,29 @@ function PostComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts/post-{$postId}.tsx"
+export const Route = createFileRoute('/posts/post-{$postId}')({
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const params = Route.useParams()
+  // postId will be the value after 'post-'
+  return <div>Post ID: {params().postId}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 You can even combines prefixes with wildcard routes to create more complex patterns:
 
-\`\`\`tsx
-// src/routes/on-disk/storage-{$}
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/on-disk/storage-{$postId}/$.tsx"
 export const Route = createFileRoute('/on-disk/storage-{$postId}/$')({
   component: StorageComponent,
 })
@@ -4532,12 +5643,32 @@ function StorageComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/on-disk/storage-{$postId}/$.tsx"
+export const Route = createFileRoute('/on-disk/storage-{$postId}/$')({
+  component: StorageComponent,
+})
+
+function StorageComponent() {
+  const params = Route.useParams()
+  // _splat, will be value after 'storage-'
+  // i.e. my-drive/documents/foo.txt
+  return <div>Storage Location: /{params()._splat}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Defining Suffixes
 
 Suffixes are defined by placing the suffix text outside the curly braces after the variable name. For example, if you want to match a URL a filename that ends with \`txt\`, you can define it like this:
 
-\`\`\`tsx
-// src/routes/files/{$fileName}txt
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/files/{$fileName}[.]txt.tsx"
 export const Route = createFileRoute('/files/{$fileName}.txt')({
   component: FileComponent,
 })
@@ -4549,10 +5680,29 @@ function FileComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/files/{$fileName}[.]txt.tsx"
+export const Route = createFileRoute('/files/{$fileName}.txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const params = Route.useParams()
+  // fileName will be the value before 'txt'
+  return <div>File Name: {params().fileName}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 You can also combine suffixes with wildcards for more complex routing patterns:
 
-\`\`\`tsx
-// src/routes/files/{$}[.]txt
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/files/{$}[.]txt.tsx"
 export const Route = createFileRoute('/files/{$fileName}[.]txt')({
   component: FileComponent,
 })
@@ -4564,12 +5714,31 @@ function FileComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/files/{$}[.]txt.tsx"
+export const Route = createFileRoute('/files/{$fileName}[.]txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const params = Route.useParams()
+  // _splat will be the value before '.txt'
+  return <div>File Splat: {params()._splat}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Combining Prefixes and Suffixes
 
 You can combine both prefixes and suffixes to create very specific routing patterns. For example, if you want to match a URL that starts with \`user-\` and ends with \`.json\`, you can define it like this:
 
-\`\`\`tsx
-// src/routes/users/user-{$userId}.json
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/users/user-{$userId}.json"
 export const Route = createFileRoute('/users/user-{$userId}.json')({
   component: UserComponent,
 })
@@ -4581,6 +5750,22 @@ function UserComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/users/user-{$userId}.json"
+export const Route = createFileRoute('/users/user-{$userId}.json')({
+  component: UserComponent,
+})
+
+function UserComponent() {
+  const params = Route.useParams()
+  // userId will be the value between 'user-' and '.json'
+  return <div>User ID: {params().userId}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 Similar to the previous examples, you can also use wildcards with prefixes and suffixes. Go wild!
 
 ## Optional Path Parameters
@@ -4625,7 +5810,11 @@ When an optional parameter is not present in the URL, its value will be \`undefi
 
 Optional parameters work exactly like regular parameters in your components, but their values may be \`undefined\`:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts/{-$category}.tsx"
 function PostsComponent() {
   const { category } = Route.useParams()
 
@@ -4633,13 +5822,29 @@ function PostsComponent() {
 }
 \`\`\`
 
-### Optional Parameters in Loaders
+# Solid
 
-Optional parameters are available in loaders and may be \`undefined\`:
+\`\`\`tsx title="src/routes/posts/{-$category}.tsx"
+function PostsComponent() {
+  const params = Route.useParams()
 
-\`\`\`tsx
-export const Route = createFileRoute('/posts/{-$category}')({
-  loader: async ({ params }) => {
+  return (
+    <div>
+      {params().category ? \`Posts in \${params().category}\` : 'All Posts'}
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
+### Optional Parameters in Loaders
+
+Optional parameters are available in loaders and may be \`undefined\`:
+
+\`\`\`tsx
+export const Route = createFileRoute('/posts/{-$category}')({
+  loader: async ({ params }) => {
     // params.category might be undefined
     return fetchPosts({ category: params.category })
   },
@@ -4667,8 +5872,12 @@ export const Route = createFileRoute('/posts/{-$category}')({
 
 Optional parameters support prefix and suffix patterns:
 
-\`\`\`tsx
-// File route: /files/prefix{-$name}.txt
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/files/prefix{-$name}.txt"
+// Route: /files/prefix{-$name}.txt
 // Matches: /files/prefix.txt and /files/prefixdocument.txt
 export const Route = createFileRoute('/files/prefix{-$name}.txt')({
   component: FileComponent,
@@ -4680,11 +5889,32 @@ function FileComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/files/prefix{-$name}.txt"
+// Route: /files/prefix{-$name}.txt
+// Matches: /files/prefix.txt and /files/prefixdocument.txt
+export const Route = createFileRoute('/files/prefix{-$name}.txt')({
+  component: FileComponent,
+})
+
+function FileComponent() {
+  const params = Route.useParams()
+  return <div>File: {params().name || 'default'}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 #### All Optional Parameters
 
 You can create routes where all parameters are optional:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/{-$year}/{-$month}/{-$day}.tsx"
 // Route: /{-$year}/{-$month}/{-$day}
 // Matches: /, /2023, /2023/12, /2023/12/25
 export const Route = createFileRoute('/{-$year}/{-$month}/{-$day}')({
@@ -4711,11 +5941,46 @@ function DateComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/{-$year}/{-$month}/{-$day}.tsx"
+// Route: /{-$year}/{-$month}/{-$day}
+// Matches: /, /2023, /2023/12, /2023/12/25
+export const Route = createFileRoute('/{-$year}/{-$month}/{-$day}')({
+  component: DateComponent,
+})
+
+function DateComponent() {
+  const params = Route.useParams()
+
+  if (!params().year) return <div>Select a year</div>
+  if (!params().month) return <div>Year: {params().year}</div>
+  if (!params().day)
+    return (
+      <div>
+        Month: {params().year}/{params().month}
+      </div>
+    )
+
+  return (
+    <div>
+      Date: {params().year}/{params().month}/{params().day}
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 #### Optional Parameters with Wildcards
 
 Optional parameters can be combined with wildcards for complex routing patterns:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/docs/{-$version}/$.tsx"
 // Route: /docs/{-$version}/$
 // Matches: /docs/extra/path, /docs/v2/extra/path
 export const Route = createFileRoute('/docs/{-$version}/$')({
@@ -4735,6 +6000,29 @@ function DocsComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/docs/{-$version}/$.tsx"
+// Route: /docs/{-$version}/$
+// Matches: /docs/extra/path, /docs/v2/extra/path
+export const Route = createFileRoute('/docs/{-$version}/$')({
+  component: DocsComponent,
+})
+
+function DocsComponent() {
+  const params = Route.useParams()
+
+  return (
+    <div>
+      Version: {params().version || 'latest'}
+      Path: {params()._splat}
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Navigating with Optional Parameters
 
 When navigating to routes with optional parameters, you have fine-grained control over which parameters to include:
@@ -4769,7 +6057,11 @@ function Navigation() {
 
 TypeScript provides full type safety for optional parameters:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts/{-$category}.tsx"
 function PostsComponent() {
   // TypeScript knows category might be undefined
   const { category } = Route.useParams() // category: string | undefined
@@ -4796,6 +6088,37 @@ function PostsComponent() {
 </Link>
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts/{-$category}.tsx"
+function PostsComponent() {
+  // TypeScript knows category might be undefined
+  const params = Route.useParams() // category: string | undefined
+
+  // Safe navigation
+  const categoryUpper = params().category?.toUpperCase()
+
+  return <div>{categoryUpper || 'All Categories'}</div>
+}
+
+// Navigation is type-safe and flexible
+<Link
+  to="/posts/{-$category}"
+  params={{ category: 'tech' }} // ✅ Valid - string
+>
+  Tech Posts
+</Link>
+
+<Link
+  to="/posts/{-$category}"
+  params={{ category: 123 }} // ✅ Valid - number (auto-stringified)
+>
+  Category 123
+</Link>
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Internationalization (i18n) with Optional Path Parameters
 
 Optional path parameters are excellent for implementing internationalization (i18n) routing patterns. You can use prefix patterns to handle multiple languages while maintaining clean, SEO-friendly URLs.
@@ -4804,7 +6127,11 @@ Optional path parameters are excellent for implementing internationalization (i1
 
 Use optional language prefixes to support URLs like \`/en/about\`, \`/fr/about\`, or just \`/about\` (default language):
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/{-$locale}/about.tsx"
 // Route: /{-$locale}/about
 export const Route = createFileRoute('/{-$locale}/about')({
   component: AboutComponent,
@@ -4835,6 +6162,41 @@ function AboutComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/{-$locale}/about.tsx"
+// Route: /{-$locale}/about
+export const Route = createFileRoute('/{-$locale}/about')({
+  component: AboutComponent,
+})
+
+function AboutComponent() {
+  const params = Route.useParams()
+  const currentLocale = params().locale || 'en' // Default to English
+
+  const content = {
+    en: { title: 'About Us', description: 'Learn more about our company.' },
+    fr: {
+      title: 'À Propos',
+      description: 'En savoir plus sur notre entreprise.',
+    },
+    es: {
+      title: 'Acerca de',
+      description: 'Conoce más sobre nuestra empresa.',
+    },
+  }
+
+  return (
+    <div>
+      <h1>{content[currentLocale]?.title}</h1>
+      <p>{content[currentLocale]?.description}</p>
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 This pattern matches:
 
 - \`/about\` (default locale)
@@ -4846,7 +6208,11 @@ This pattern matches:
 
 Combine optional parameters for more sophisticated i18n routing:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/{-$locale}/blog/{-$category}/$slug.tsx"
 // Route: /{-$locale}/blog/{-$category}/$slug
 export const Route = createFileRoute('/{-$locale}/blog/{-$category}/$slug')({
   beforeLoad: async ({ params }) => {
@@ -4886,6 +6252,51 @@ function BlogPostComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/{-$locale}/blog/{-$category}/$slug.tsx"
+// Route: /{-$locale}/blog/{-$category}/$slug
+export const Route = createFileRoute('/{-$locale}/blog/{-$category}/$slug')({
+  beforeLoad: async ({ params }) => {
+    const locale = params.locale || 'en'
+    const category = params.category
+
+    // Validate locale and category
+    const validLocales = ['en', 'fr', 'es', 'de']
+    if (locale && !validLocales.includes(locale)) {
+      throw new Error('Invalid locale')
+    }
+
+    return { locale, category }
+  },
+  loader: async ({ params, context }) => {
+    const { locale } = context
+    const { slug, category } = params
+
+    return fetchBlogPost({ slug, category, locale })
+  },
+  component: BlogPostComponent,
+})
+
+function BlogPostComponent() {
+  const params = Route.useParams()
+  const data = Route.useLoaderData()
+
+  return (
+    <article>
+      <h1>{data.title}</h1>
+      <p>
+        Category: {params().category || 'All'} | Language:{' '}
+        {params().locale || 'en'}
+      </p>
+      <div>{data.content}</div>
+    </article>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 This supports URLs like:
 
 - \`/blog/tech/my-post\` (default locale, tech category)
@@ -4897,7 +6308,11 @@ This supports URLs like:
 
 Create language switchers using optional i18n parameters with function-style params:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/components/LanguageSwitcher.tsx"
 function LanguageSwitcher() {
   const currentParams = useParams({ strict: false })
 
@@ -4927,8 +6342,45 @@ function LanguageSwitcher() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/components/LanguageSwitcher.tsx"
+function LanguageSwitcher() {
+  const currentParams = useParams({ strict: false })
+
+  const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'fr', name: 'Français' },
+    { code: 'es', name: 'Español' },
+  ]
+
+  return (
+    <div class="language-switcher">
+      {languages.map(({ code, name }) => (
+        <Link
+          to="/{-$locale}/blog/{-$category}/$slug"
+          params={(prev) => ({
+            ...prev,
+            locale: code === 'en' ? undefined : code, // Remove 'en' for clean URLs
+          })}
+          class={currentParams().locale === code ? 'active' : ''}
+        >
+          {name}
+        </Link>
+      ))}
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 You can also create more sophisticated language switching logic:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 function AdvancedLanguageSwitcher() {
   const currentParams = useParams({ strict: false })
@@ -4976,10 +6428,65 @@ function AdvancedLanguageSwitcher() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+function AdvancedLanguageSwitcher() {
+  const currentParams = useParams({ strict: false })
+
+  const handleLanguageChange = (newLocale: string) => {
+    return (prev: any) => {
+      // Preserve all existing params but update locale
+      const updatedParams = { ...prev }
+
+      if (newLocale === 'en') {
+        // Remove locale for clean English URLs
+        delete updatedParams.locale
+      } else {
+        updatedParams.locale = newLocale
+      }
+
+      return updatedParams
+    }
+  }
+
+  return (
+    <div class="language-switcher">
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('fr')}
+      >
+        Français
+      </Link>
+
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('es')}
+      >
+        Español
+      </Link>
+
+      <Link
+        to="/{-$locale}/blog/{-$category}/$slug"
+        params={handleLanguageChange('en')}
+      >
+        English
+      </Link>
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Advanced i18n with Optional Parameters
 
 Organize i18n routes using optional parameters for flexible locale handling:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 // Route structure:
 // routes/
@@ -5013,11 +6520,52 @@ export const Route = createFileRoute('/{-$locale}/about')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+// Route structure:
+// routes/
+//   {-$locale}/
+//     index.tsx        // /, /en, /fr
+//     about.tsx        // /about, /en/about, /fr/about
+//     blog/
+//       index.tsx      // /blog, /en/blog, /fr/blog
+//       $slug.tsx      // /blog/post, /en/blog/post, /fr/blog/post
+
+// routes/{-$locale}/index.tsx
+export const Route = createFileRoute('/{-$locale}/')({
+  component: HomeComponent,
+})
+
+function HomeComponent() {
+  const params = Route.useParams()
+  const isRTL = ['ar', 'he', 'fa'].includes(params().locale || '')
+
+  return (
+    <div dir={isRTL ? 'rtl' : 'ltr'}>
+      <h1>Welcome ({params().locale || 'en'})</h1>
+      {/* Localized content */}
+    </div>
+  )
+}
+
+// routes/{-$locale}/about.tsx
+export const Route = createFileRoute('/{-$locale}/about')({
+  component: AboutComponent,
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### SEO and Canonical URLs
 
 Handle SEO for i18n routes properly:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/{-$locale}/products/$id.tsx"
 export const Route = createFileRoute('/{-$locale}/products/$id')({
   component: ProductComponent,
   head: ({ params, loaderData }) => {
@@ -5064,11 +6612,66 @@ export const Route = createFileRoute('/{-$locale}/products/$id')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/{-$locale}/products/$id.tsx"
+export const Route = createFileRoute('/{-$locale}/products/$id')({
+  component: ProductComponent,
+  head: ({ params, loaderData }) => {
+    const locale = params.locale || 'en'
+    const product = loaderData
+
+    return {
+      title: product.title[locale] || product.title.en,
+      meta: [
+        {
+          name: 'description',
+          content: product.description[locale] || product.description.en,
+        },
+        {
+          property: 'og:locale',
+          content: locale,
+        },
+      ],
+      links: [
+        // Canonical URL (always use default locale format)
+        {
+          rel: 'canonical',
+          href: \`https://example.com/products/\${params.id}\`,
+        },
+        // Alternate language versions
+        {
+          rel: 'alternate',
+          hreflang: 'en',
+          href: \`https://example.com/products/\${params.id}\`,
+        },
+        {
+          rel: 'alternate',
+          hreflang: 'fr',
+          href: \`https://example.com/fr/products/\${params.id}\`,
+        },
+        {
+          rel: 'alternate',
+          hreflang: 'es',
+          href: \`https://example.com/es/products/\${params.id}\`,
+        },
+      ],
+    }
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Type Safety for i18n
 
 Ensure type safety for your i18n implementations:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/{-$locale}/shop/{-$category}.tsx"
 // Define supported locales
 type Locale = 'en' | 'fr' | 'es' | 'de'
 
@@ -5118,6 +6721,60 @@ function ShopComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/{-$locale}/shop/{-$category}.tsx"
+// Define supported locales
+type Locale = 'en' | 'fr' | 'es' | 'de'
+
+// Type-safe locale validation
+function validateLocale(locale: string | undefined): locale is Locale {
+  return ['en', 'fr', 'es', 'de'].includes(locale as Locale)
+}
+
+export const Route = createFileRoute('/{-$locale}/shop/{-$category}')({
+  beforeLoad: async ({ params }) => {
+    const { locale } = params
+
+    // Type-safe locale validation
+    if (locale && !validateLocale(locale)) {
+      throw redirect({
+        to: '/shop/{-$category}',
+        params: { category: params.category },
+      })
+    }
+
+    return {
+      locale: (locale as Locale) || 'en',
+      isDefaultLocale: !locale || locale === 'en',
+    }
+  },
+  component: ShopComponent,
+})
+
+function ShopComponent() {
+  const params = Route.useParams()
+  const routeContext = Route.useRouteContext()
+
+  // TypeScript knows locale is Locale | undefined
+  // and we have validated it in beforeLoad
+
+  return (
+    <div>
+      <h1>Shop {params().category ? \`- \${params().category}\` : ''}</h1>
+      <p>Language: {params().locale || 'en'}</p>
+      {!routeContext().isDefaultLocale && (
+        <Link to="/shop/{-$category}" params={{ category: params().category }}>
+          View in English
+        </Link>
+      )}
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 Optional path parameters provide a powerful and flexible foundation for implementing internationalization in your TanStack Router applications. Whether you prefer prefix-based or combined approaches, you can create clean, SEO-friendly URLs while maintaining excellent developer experience and type safety.
 
 ## Allowed Characters
@@ -5171,6 +6828,10 @@ If you need more control over preloading, caching and/or garbage collection of p
 
 The simplest way to preload routes for your application is to set the \`defaultPreload\` option to \`intent\` for your entire router:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRouter } from '@tanstack/react-router'
 
@@ -5180,12 +6841,29 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  defaultPreload: 'intent',
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 This will turn on \`intent\` preloading by default for all \`<Link>\` components in your application. You can also set the \`preload\` prop on individual \`<Link>\` components to override the default behavior.
 
 ## Preload Delay
 
 By default, preloading will start after **50ms** of the user hovering or touching a \`<Link>\` component. You can change this delay by setting the \`defaultPreloadDelay\` option on your router:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRouter } from '@tanstack/react-router'
 
@@ -5195,6 +6873,19 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadDelay: 100,
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 You can also set the \`preloadDelay\` prop on individual \`<Link>\` components to override the default behavior on a per-link basis.
 
 ## Built-in Preloading & \`preloadStaleTime\`
@@ -5203,6 +6894,10 @@ If you're using the built-in loaders, you can control how long preloaded data is
 
 To change this, you can set the \`defaultPreloadStaleTime\` option on your router:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRouter } from '@tanstack/react-router'
 
@@ -5212,6 +6907,19 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadStaleTime: 10_000,
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 Or, you can use the \`routeOptions.preloadStaleTime\` option on individual routes:
 
 \`\`\`tsx
@@ -5231,6 +6939,10 @@ To customize the preloading behavior in TanStack Router and fully leverage your
 
 For example:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRouter } from '@tanstack/react-router'
 
@@ -5240,12 +6952,29 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRouter } from '@tanstack/solid-router'
+
+const router = createRouter({
+  // ...
+  defaultPreloadStaleTime: 0,
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 This would then allow you, for instance, to use an option like React Query's \`staleTime\` to control the freshness of your preloads.
 
 ## Preloading Manually
 
 If you need to manually preload a route, you can use the router's \`preloadRoute\` method. It accepts a standard TanStack \`NavigateOptions\` object and returns a promise that resolves when the route is preloaded.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 function Component() {
   const router = useRouter()
@@ -5269,8 +6998,39 @@ function Component() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+function Component() {
+  const router = useRouter()
+
+  createEffect(() => {
+    async function preload() {
+      try {
+        const matches = await router.preloadRoute({
+          to: postRoute,
+          params: { id: 1 },
+        })
+      } catch (err) {
+        // Failed to preload route
+      }
+    }
+
+    preload()
+  })
+
+  return <div />
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 If you need to preload only the JS chunk of a route, you can use the router's \`loadRouteChunk\` method. It accepts a route object and returns a promise that resolves when the route chunk is loaded.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 function Component() {
   const router = useRouter()
@@ -5296,6 +7056,35 @@ function Component() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+function Component() {
+  const router = useRouter()
+
+  createEffect(() => {
+    async function preloadRouteChunks() {
+      try {
+        const postsRoute = router.routesByPath['/posts']
+        await Promise.all([
+          router.loadRouteChunk(router.routesByPath['/']),
+          router.loadRouteChunk(postsRoute),
+          router.loadRouteChunk(postsRoute.parentRoute),
+        ])
+      } catch (err) {
+        // Failed to preload route chunk
+      }
+    }
+
+    preloadRouteChunks()
+  })
+
+  return <div />
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 # Render Optimizations
 
 TanStack Router includes several optimizations to ensure your components only re-render when necessary. These optimizations include:
@@ -5476,7 +7265,9 @@ function onOpenPhoto() {
 
 In addition to the imperative API, you can also use the Router's \`routeMasks\` option to declaratively mask routes. Instead of needing to pass the \`mask\` option to every \`<Link>\` or \`navigate()\` call, you can instead create a route mask on the Router to mask routes that match a certain pattern. Here's an example of the same route mask from above, but using the \`routeMasks\` option instead:
 
-// Use the following for the example below
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
 import { createRouteMask } from '@tanstack/react-router'
@@ -5496,6 +7287,28 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRouteMask } from '@tanstack/solid-router'
+
+const photoModalToPhotoMask = createRouteMask({
+  routeTree,
+  from: '/photos/$photoId/modal',
+  to: '/photos/$photoId',
+  params: (prev) => ({
+    photoId: prev.photoId,
+  }),
+})
+
+const router = createRouter({
+  routeTree,
+  routeMasks: [photoModalToPhotoMask],
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 When creating a route mask, you'll need to pass 1 argument with at least:
 
 - \`routeTree\` - The route tree that the route mask will be applied to
@@ -5539,6 +7352,10 @@ These are just suggested uses of the router context. You can use it for whatever
 
 Like everything else, the root router context is strictly typed. This type can be augmented via any route's \`beforeLoad\` option as it is merged down the route match tree. To constrain the type of the root router context, you must use the \`createRootRouteWithContext<YourContextTypeHere>()(routeOptions)\` function to create a new router context instead of the \`createRootRoute()\` function to create your root route. Here's an example:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import {
   createRootRouteWithContext,
@@ -5564,6 +7381,35 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import {
+  createRootRouteWithContext,
+  createRouter,
+} from '@tanstack/solid-router'
+
+interface MyRouterContext {
+  user: User
+}
+
+// Use the routerContext to create your root route
+const rootRoute = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+
+const routeTree = rootRoute.addChildren([
+  // ...
+])
+
+// Use the routerContext to create your router
+const router = createRouter({
+  routeTree,
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 > [!TIP]
 > \`MyRouterContext\` only needs to contain content that will be passed directly to \`createRouter\` below. All other context added in \`beforeLoad\` will be inferred.
 
@@ -5574,6 +7420,10 @@ The router context is passed to the router at instantiation time. You can pass t
 > [!TIP]
 > If your context has any required properties, you will see a TypeScript error if you don't pass them in the initial router context. If all of your context properties are optional, you will not see a TypeScript error and passing the context will be optional. If you don't pass a router context, it defaults to \`{}\`.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRouter } from '@tanstack/react-router'
 
@@ -5589,10 +7439,33 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRouter } from '@tanstack/solid-router'
+
+// Use the routerContext you created to create your router
+const router = createRouter({
+  routeTree,
+  context: {
+    user: {
+      id: '123',
+      name: 'John Doe',
+    },
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Invalidating the Router Context
 
 If you need to invalidate the context state you are passing into the router, you can call the \`invalidate\` method to tell the router to recompute the context. This is useful when you need to update the context state and have the router recompute the context for all routes.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 function useAuth() {
   const router = useRouter()
@@ -5611,6 +7484,28 @@ function useAuth() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+function useAuth() {
+  const router = useRouter()
+  const [user, setUser] = createSignal<User | null>(null)
+
+  createEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      setUser(user)
+      router.invalidate()
+    })
+
+    return unsubscribe
+  }, [])
+
+  return user()
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Using the Router Context
 
 Once you have defined the router context type, you can use it in your route definitions:
@@ -5655,6 +7550,10 @@ export const Route = createFileRoute('/todos')({
 
 ### How about an external data fetching library?
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import {
   createRootRouteWithContext,
@@ -5679,6 +7578,34 @@ const router = createRouter({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import {
+  createRootRouteWithContext,
+  createRouter,
+} from '@tanstack/solid-router'
+
+interface MyRouterContext {
+  queryClient: QueryClient
+}
+
+const rootRoute = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+
+const queryClient = new QueryClient()
+
+const router = createRouter({
+  routeTree: rootRoute,
+  context: {
+    queryClient,
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 Then, in your route:
 
 \`\`\`tsx
@@ -5694,6 +7621,10 @@ export const Route = createFileRoute('/todos')({
 })
 \`\`\`
 
+<!-- ::start:framework -->
+
+# React
+
 ## How about using React Context/Hooks?
 
 When trying to use React Context or Hooks in your route's \`beforeLoad\` or \`loader\` functions, it's important to remember React's [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks). You can't use hooks in a non-React function, so you can't use hooks in your \`beforeLoad\` or \`loader\` functions.
@@ -5702,9 +7633,9 @@ So, how do we use React Context or Hooks in our route's \`beforeLoad\` or \`load
 
 Let's look at the setup for an example, where we pass down a \`useNetworkStrength\` hook to our route's \`loader\` function:
 
-- \`src/routes/__root.tsx\`
+<!-- ::start:tabs variant="files" -->
 
-\`\`\`tsx
+\`\`\`tsx title="src/routes/__root.tsx"
 // First, make sure the context for the root route is typed
 import { createRootRouteWithContext } from '@tanstack/react-router'
 import { useNetworkStrength } from '@/hooks/useNetworkStrength'
@@ -5718,11 +7649,13 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 })
 \`\`\`
 
+<!-- ::end:tabs -->
+
 In this example, we'd instantiate the hook before rendering the router using the \`<RouterProvider />\`. This way, the hook would be called in React-land, therefore adhering to the Rules of Hooks.
 
-- \`src/router.tsx\`
+<!-- ::start:tabs variant="files" -->
 
-\`\`\`tsx
+\`\`\`tsx title="src/router.tsx"
 import { createRouter } from '@tanstack/react-router'
 
 import { routeTree } from './routeTree.gen'
@@ -5735,9 +7668,13 @@ export const router = createRouter({
 })
 \`\`\`
 
-- \`src/main.tsx\`
+<!-- ::end:tabs -->
 
-\`\`\`tsx
+Then, we can call the \`useNetworkStrength\` hook in our \`App\` component and pass the returned value into the router context via the \`<RouterProvider />\`:
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/main.tsx"
 import { RouterProvider } from '@tanstack/react-router'
 import { router } from './router'
 
@@ -5752,11 +7689,13 @@ function App() {
 // ...
 \`\`\`
 
+<!-- ::end:tabs -->
+
 So, now in our route's \`loader\` function, we can access the \`networkStrength\` hook from the router context:
 
-- \`src/routes/posts.tsx\`
+<!-- ::start:tabs variant="files" -->
 
-\`\`\`tsx
+\`\`\`tsx title="src/routes/posts.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts')({
@@ -5769,13 +7708,21 @@ export const Route = createFileRoute('/posts')({
 })
 \`\`\`
 
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
 ## Modifying the Router Context
 
 The router context is passed down the route tree and is merged at each route. This means that you can modify the context at each route and the modifications will be available to all child routes. Here's an example:
 
-- \`src/routes/__root.tsx\`
+<!-- ::start:framework -->
 
-\`\`\`tsx
+# React
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/routes/__root.tsx"
 import { createRootRouteWithContext } from '@tanstack/react-router'
 
 interface MyRouterContext {
@@ -5787,9 +7734,11 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 })
 \`\`\`
 
-- \`src/router.tsx\`
+<!-- ::end:tabs -->
 
-\`\`\`tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/router.tsx"
 import { createRouter } from '@tanstack/react-router'
 
 import { routeTree } from './routeTree.gen'
@@ -5802,9 +7751,11 @@ const router = createRouter({
 })
 \`\`\`
 
-- \`src/routes/todos.tsx\`
+<!-- ::end:tabs -->
 
-\`\`\`tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/routes/todos.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/todos')({
@@ -5821,12 +7772,71 @@ export const Route = createFileRoute('/todos')({
 })
 \`\`\`
 
+<!-- ::end:tabs -->
+
+# Solid
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/routes/__root.tsx"
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+
+interface MyRouterContext {
+  foo: boolean
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  component: App,
+})
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/router.tsx"
+import { createRouter } from '@tanstack/solid-router'
+
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({
+  routeTree,
+  context: {
+    foo: true,
+  },
+})
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title="src/routes/todos.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/todos')({
+  component: Todos,
+  beforeLoad: () => {
+    return {
+      bar: true,
+    }
+  },
+  loader: ({ context }) => {
+    context.foo // true
+    context.bar // true
+  },
+})
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
 ## Processing Accumulated Route Context
 
 Context, especially the isolated route \`context\` objects, make it trivial to accumulate and process the route context objects for all matched routes. Here's an example where we use all of the matched route contexts to generate a breadcrumb trail:
 
-\`\`\`tsx
-// src/routes/__root.tsx
+\`\`\`tsx title="src/routes/__root.tsx"
 export const Route = createRootRoute({
   component: () => {
     const matches = useRouterState({ select: (s) => s.matches })
@@ -5847,8 +7857,7 @@ export const Route = createRootRoute({
 
 Using that same route context, we could also generate a title tag for our page's \`<head>\`:
 
-\`\`\`tsx
-// src/routes/__root.tsx
+\`\`\`tsx title="src/routes/__root.tsx"
 export const Route = createRootRoute({
   component: () => {
     const matches = useRouterState({ select: (s) => s.matches })
@@ -5925,8 +7934,6 @@ It does this by:
 That may sound like a lot, but for you, it's as simple as this:
 
 \`\`\`tsx
-import { createRouter } from '@tanstack/react-router'
-
 const router = createRouter({
   scrollRestoration: true,
 })
@@ -5950,8 +7957,6 @@ The default \`getKey\` is \`(location) => location.state.__TSR_key!\`, where \`_
 You could sync scrolling to the pathname:
 
 \`\`\`tsx
-import { createRouter } from '@tanstack/react-router'
-
 const router = createRouter({
   getScrollRestorationKey: (location) => location.pathname,
 })
@@ -5960,8 +7965,6 @@ const router = createRouter({
 You can conditionally sync only some paths, then use the key for the rest:
 
 \`\`\`tsx
-import { createRouter } from '@tanstack/react-router'
-
 const router = createRouter({
   getScrollRestorationKey: (location) => {
     const paths = ['/', '/chat']
@@ -5988,8 +7991,6 @@ Most of the time, you won't need to do anything special to get scroll restoratio
 
 To manually control scroll restoration for virtualized lists within the whole browser window:
 
-[//]: # 'VirtualizedWindowScrollRestorationExample'
-
 \`\`\`tsx
 function Component() {
   const scrollEntry = useElementScrollRestoration({
@@ -6015,11 +8016,11 @@ function Component() {
 }
 \`\`\`
 
-[//]: # 'VirtualizedWindowScrollRestorationExample'
-
 To manually control scroll restoration for a specific element, you can use the \`useElementScrollRestoration\` hook and the \`data-scroll-restoration-id\` DOM attribute:
 
-[//]: # 'ManualRestorationExample'
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
 function Component() {
@@ -6058,15 +8059,52 @@ function Component() {
 }
 \`\`\`
 
-[//]: # 'ManualRestorationExample'
+# Solid
+
+\`\`\`tsx
+function Component() {
+  // We need a unique ID for manual scroll restoration on a specific element
+  // It should be as unique as possible for this element across your app
+  const scrollRestorationId = 'myVirtualizedContent'
+
+  // We use that ID to get the scroll entry for this element
+  const scrollEntry = useElementScrollRestoration({
+    id: scrollRestorationId,
+  })
+
+  // Let's use TanStack Virtual to virtualize some content!
+  let virtualizerParentRef: any
+  const virtualizer = createVirtualizer({
+    count: 10000,
+    getScrollElement: () => virtualizerParentRef,
+    estimateSize: () => 100,
+    // We pass the scrollY from the scroll restoration entry to the virtualizer
+    // as the initial offset
+    initialOffset: scrollEntry?.scrollY,
+  })
+
+  return (
+    <div
+      ref={virtualizerParentRef}
+      // We pass the scroll restoration ID to the element
+      // as a custom attribute that will get picked up by the
+      // scroll restoration watcher
+      data-scroll-restoration-id={scrollRestorationId}
+      class="flex-1 border rounded-lg overflow-auto relative"
+    >
+      ...
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
 
 ## Scroll Behavior
 
 To control the scroll behavior when navigating between pages, you can use the \`scrollRestorationBehavior\` option. This allows you to make the transition between pages instant instead of a smooth scroll. The global configuration of scroll restoration behavior has the same options as those supported by the browser, which are \`smooth\`, \`instant\`, and \`auto\` (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#behavior) for more information).
 
 \`\`\`tsx
-import { createRouter } from '@tanstack/react-router'
-
 const router = createRouter({
   scrollRestorationBehavior: 'instant',
 })
@@ -6162,9 +8200,7 @@ Despite TanStack Router being able to parse search params into reliable JSON, th
 
 TanStack Router provides convenient APIs for validating and typing search params. This all starts with the \`Route\`'s \`validateSearch\` option:
 
-\`\`\`tsx
-// /routes/shop.products.tsx
-
+\`\`\`tsx title="src/routes/shop/products.tsx"
 type ProductSearchSortOptions = 'newest' | 'oldest' | 'price'
 
 type ProductSearch = {
@@ -6193,9 +8229,7 @@ The \`validateSearch\` option is a function that is provided the JSON parsed (bu
 
 Here's an example:
 
-\`\`\`tsx
-// /routes/shop.products.tsx
-
+\`\`\`tsx title="src/routes/shop/products.tsx"
 type ProductSearchSortOptions = 'newest' | 'oldest' | 'price'
 
 type ProductSearch = {
@@ -6218,9 +8252,7 @@ export const Route = createFileRoute('/shop/products')({
 
 Here's an example using the [Zod](https://zod.dev/) library (but feel free to use any validation library you want) to both validate and type the search params in a single step:
 
-\`\`\`tsx
-// /routes/shop.products.tsx
-
+\`\`\`tsx title="src/routes/shop/products.tsx"
 import { z } from 'zod'
 
 const productSearchSchema = z.object({
@@ -6251,7 +8283,6 @@ The underlying mechanics why this works relies on the \`validateSearch\` functio
 When using a library like [Zod](https://zod.dev/) to validate search params you might want to \`transform\` search params before committing the search params to the URL. A common \`zod\` \`transform\` is \`default\` for example.
 
 \`\`\`tsx
-import { createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
 
 const productSearchSchema = z.object({
@@ -6278,7 +8309,6 @@ For validation libraries we recommend using adapters which infer the correct \`i
 An adapter is provided for [Zod](https://zod.dev/) which will pipe through the correct \`input\` type and \`output\` type
 
 \`\`\`tsx
-import { createFileRoute } from '@tanstack/react-router'
 import { zodValidator } from '@tanstack/zod-adapter'
 import { z } from 'zod'
 
@@ -6302,7 +8332,6 @@ The important part here is the following use of \`Link\` no longer requires \`se
 However the use of \`catch\` here overrides the types and makes \`page\`, \`filter\` and \`sort\` \`unknown\` causing type loss. We have handled this case by providing a \`fallback\` generic function which retains the types but provides a \`fallback\` value when validation fails
 
 \`\`\`tsx
-import { createFileRoute } from '@tanstack/react-router'
 import { fallback, zodValidator } from '@tanstack/zod-adapter'
 import { z } from 'zod'
 
@@ -6351,7 +8380,6 @@ This provides flexibility in which type you want to infer for navigation and whi
 When using [Valibot](https://valibot.dev/) an adapter is not needed to ensure the correct \`input\` and \`output\` types are used for navigation and reading search params. This is because \`valibot\` implements [Standard Schema](https://github.com/standard-schema/standard-schema)
 
 \`\`\`tsx
-import { createFileRoute } from '@tanstack/react-router'
 import * as v from 'valibot'
 
 const productSearchSchema = v.object({
@@ -6376,7 +8404,6 @@ export const Route = createFileRoute('/shop/products/')({
 When using [ArkType](https://arktype.io/) an adapter is not needed to ensure the correct \`input\` and \`output\` types are used for navigation and reading search params. This is because [ArkType](https://arktype.io/) implements [Standard Schema](https://github.com/standard-schema/standard-schema)
 
 \`\`\`tsx
-import { createFileRoute } from '@tanstack/react-router'
 import { type } from 'arktype'
 
 const productSearchSchema = type({
@@ -6395,7 +8422,6 @@ export const Route = createFileRoute('/shop/products/')({
 When using [Effect/Schema](https://effect.website/docs/schema/introduction/) an adapter is not needed to ensure the correct \`input\` and \`output\` types are used for navigation and reading search params. This is because [Effect/Schema](https://effect.website/docs/schema/standard-schema/) implements [Standard Schema](https://github.com/standard-schema/standard-schema)
 
 \`\`\`tsx
-import { createFileRoute } from '@tanstack/react-router'
 import { Schema as S } from 'effect'
 
 const productSearchSchema = S.standardSchemaV1(
@@ -6441,9 +8467,9 @@ Please read the [Search Params in Loaders](./data-loading.md#using-loaderdeps-to
 
 The search parameters and types of parents are merged as you go down the route tree, so child routes also have access to their parent's search params:
 
-- \`shop.products.tsx\`
+<!-- ::start:tabs variant="files" -->
 
-\`\`\`tsx
+\`\`\`tsx title="src/routes/shop/products.tsx"
 const productSearchSchema = z.object({
   page: z.number().catch(1),
   filter: z.string().catch(''),
@@ -6457,9 +8483,7 @@ export const Route = createFileRoute('/shop/products')({
 })
 \`\`\`
 
-- \`shop.products.$productId.tsx\`
-
-\`\`\`tsx
+\`\`\`tsx title="src/routes/shop/products/$productId.tsx"
 export const Route = createFileRoute('/shop/products/$productId')({
   beforeLoad: ({ search }) => {
     search
@@ -6468,13 +8492,13 @@ export const Route = createFileRoute('/shop/products/$productId')({
 })
 \`\`\`
 
+<!-- ::end:tabs -->
+
 ### Search Params in Components
 
 You can access your route's validated search params in your route's \`component\` via the \`useSearch\` hook.
 
-\`\`\`tsx
-// /routes/shop.products.tsx
-
+\`\`\`tsx title="src/routes/shop/products.tsx"
 export const Route = createFileRoute('/shop/products')({
   validateSearch: productSearchSchema,
 })
@@ -6494,7 +8518,7 @@ const ProductList = () => {
 You can access your route's validated search params anywhere in your app using the \`useSearch\` hook. By passing the \`from\` id/path of your origin route, you'll get even better type safety:
 
 \`\`\`tsx
-// /routes/shop.products.tsx
+// src/routes/shop.products.tsx
 export const Route = createFileRoute('/shop/products')({
   validateSearch: productSearchSchema,
   // ...
@@ -6502,7 +8526,7 @@ export const Route = createFileRoute('/shop/products')({
 
 // Somewhere else...
 
-// /components/product-list-sidebar.tsx
+// src/components/product-list-sidebar.tsx
 const routeApi = getRouteApi('/shop/products')
 
 const ProductList = () => {
@@ -6546,8 +8570,7 @@ The best way to update search params is to use the \`search\` prop on the \`<Lin
 If the search for the current page shall be updated and the \`from\` prop is specified, the \`to\` prop can be omitted.  
 Here's an example:
 
-\`\`\`tsx
-// /routes/shop.products.tsx
+\`\`\`tsx title="src/routes/shop/products.tsx"
 export const Route = createFileRoute('/shop/products')({
   validateSearch: productSearchSchema,
 })
@@ -6603,8 +8626,7 @@ const PageSelector = () => {
 
 The \`navigate\` function also accepts a \`search\` option that works the same way as the \`search\` prop on \`<Link />\`:
 
-\`\`\`tsx
-// /routes/shop.products.tsx
+\`\`\`tsx title="src/routes/shop/products.tsx"
 export const Route = createFileRoute('/shop/products/$productId')({
   validateSearch: productSearchSchema,
 })
@@ -6648,7 +8670,6 @@ The following example shows how to make sure that for **every** link that is bei
 
 \`\`\`tsx
 import { z } from 'zod'
-import { createFileRoute } from '@tanstack/react-router'
 import { zodValidator } from '@tanstack/zod-adapter'
 
 const searchSchema = z.object({
@@ -6673,6 +8694,10 @@ export const Route = createRootRoute({
 
 Since this specific use case is quite common, TanStack Router provides a generic implementation to retain search params via \`retainSearchParams\`:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { z } from 'zod'
 import { createFileRoute, retainSearchParams } from '@tanstack/react-router'
@@ -6690,8 +8715,33 @@ export const Route = createRootRoute({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { z } from 'zod'
+import { createFileRoute, retainSearchParams } from '@tanstack/solid-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const searchSchema = z.object({
+  rootValue: z.string().optional(),
+})
+
+export const Route = createRootRoute({
+  validateSearch: zodValidator(searchSchema),
+  search: {
+    middlewares: [retainSearchParams(['rootValue'])],
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 Another common use case is to strip out search params from links if their default value is set. TanStack Router provides a generic implementation for this use case via \`stripSearchParams\`:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { z } from 'zod'
 import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
@@ -6716,8 +8766,40 @@ export const Route = createFileRoute('/hello')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { z } from 'zod'
+import { createFileRoute, stripSearchParams } from '@tanstack/solid-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const defaultValues = {
+  one: 'abc',
+  two: 'xyz',
+}
+
+const searchSchema = z.object({
+  one: z.string().default(defaultValues.one),
+  two: z.string().default(defaultValues.two),
+})
+
+export const Route = createFileRoute('/hello')({
+  validateSearch: zodValidator(searchSchema),
+  search: {
+    // strip default values
+    middlewares: [stripSearchParams(defaultValues)],
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 Multiple middlewares can be chained. The following example shows how to combine both \`retainSearchParams\` and \`stripSearchParams\`.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import {
   Link,
@@ -6747,6 +8829,39 @@ export const Route = createFileRoute('/search')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import {
+  Link,
+  createFileRoute,
+  retainSearchParams,
+  stripSearchParams,
+} from '@tanstack/solid-router'
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const defaultValues = ['foo', 'bar']
+
+export const Route = createFileRoute('/search')({
+  validateSearch: zodValidator(
+    z.object({
+      retainMe: z.string().optional(),
+      arrayWithDefaults: z.string().array().default(defaultValues),
+      required: z.string(),
+    }),
+  ),
+  search: {
+    middlewares: [
+      retainSearchParams(['retainMe']),
+      stripSearchParams({ arrayWithDefaults: defaultValues }),
+    ],
+  },
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 # SSR
 
 > [!WARNING]
@@ -6770,6 +8885,10 @@ Non-Streaming server-side rendering is the classic process of rendering the mark
 
 To implement non-streaming SSR with TanStack Router, you will need the following utilities:
 
+<!-- ::start:framework -->
+
+# React
+
 - \`RouterClient\` from \`@tanstack/react-router\`
   - e.g. \`<RouterClient router={router} />\`
   - Rendering this component in your client entry will render your application and also automatically implement the \`Wrap\` component option on \`Router\`
@@ -6782,6 +8901,22 @@ To implement non-streaming SSR with TanStack Router, you will need the following
   - \`RouterServer\` from \`@tanstack/react-router\`
     - This implements the \`Wrap\` component option on \`Router\`
 
+# Solid
+
+- \`RouterClient\` from \`@tanstack/solid-router\`
+  - e.g. \`<RouterClient router={router} />\`
+  - Rendering this component in your client entry will render your application and also automatically implement the \`Wrap\` component option on \`Router\`
+- And, either:
+  - \`defaultRenderHandler\` from \`@tanstack/solid-router\`
+    - This will render your application in your server entry and also automatically handle application-level hydration/dehydration and also automatically implement the RouterServer component.
+      or:
+  - \`renderRouterToString\` from \`@tanstack/solid-router\`
+    - This differs from defaultRenderHandler in that it allows you to manually specify the \`Wrap\` component option on \`Router\` together with any other providers you may need to wrap it with.
+  - \`RouterServer\` from \`@tanstack/solid-router\`
+    - This implements the \`Wrap\` component option on \`Router\`
+
+<!-- ::end:framework -->
+
 ### Automatic Server History
 
 On the client, Router defaults to using an instance of \`createBrowserHistory\`, which is the preferred type of history to use on the client. On the server, however, you will want to use an instance of \`createMemoryHistory\` instead. This is because \`createBrowserHistory\` uses the \`window\` object, which does not exist on the server. This is handled automatically for you in the RouterServer component.
@@ -6798,8 +8933,11 @@ For more information on how to utilize data loading, see the [Data Loading](./da
 
 Since your router will exist both on the server and the client, it's important that you create your router in a way that is consistent between both of these environments. The easiest way to do this is to expose a \`createRouter\` function in a shared file that can be imported and called by both your server and client entry files.
 
-\`\`\`tsx
-// src/router.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title='src/router.tsx'
 import { createRouter as createTanstackRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 
@@ -6814,14 +8952,36 @@ declare module '@tanstack/react-router' {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title='src/router.tsx'
+import { createRouter as createTanstackRouter } from '@tanstack/solid-router'
+import { routeTree } from './routeTree.gen'
+
+export function createRouter() {
+  return createTanstackRouter({ routeTree })
+}
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 ### Rendering the Application on the Server
 
 Now that you have a router instance that has loaded all the critical data for the current URL, you can render your application on the server:
 
 using \`defaultRenderHandler\`
 
-\`\`\`tsx
-// src/entry-server.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/entry-server.tsx"
 import {
   createRequestHandler,
   defaultRenderToString,
@@ -6835,10 +8995,55 @@ export async function render({ request }: { request: Request }) {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  defaultRenderToString,
+} from '@tanstack/solid-router/ssr/server'
+import { createRouter } from './router'
+
+export async function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return await handler(defaultRenderHandler)
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 using \`renderRouterToString\`
 
-\`\`\`tsx
-// src/entry-server.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  renderRouterToString,
+  RouterServer,
+} from '@tanstack/react-router/ssr/server'
+import { createRouter } from './router'
+
+export function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return handler(({ request, responseHeaders, router }) =>
+    renderRouterToString({
+      request,
+      responseHeaders,
+      router,
+      children: <RouterServer router={router} />,
+    }),
+  )
+}
+\`\`\`
+
+# Solid
+
+\`\`\`tsx title="src/entry-server.tsx"
 import {
   createRequestHandler,
   renderRouterToString,
@@ -6860,6 +9065,8 @@ export function render({ request }: { request: Request }) {
 }
 \`\`\`
 
+<!-- ::end:framework -->
+
 NOTE: The createRequestHandler method requires a web api standard Request object, while the handler method will return a web api standard Response promise.
 
 Should you be using a server framework like Express that uses its own Request and Response objects you would need to convert from the one to the other. Please have a look at the examples for how such an implementation might look like.
@@ -6871,10 +9078,11 @@ On the client, things are much simpler.
 - Create your router instance
 - Render your application using the \`<RouterClient />\` component
 
-[//]: # 'ClientEntryFileExample'
+<!-- ::start:framework -->
 
-\`\`\`tsx
-// src/entry-client.tsx
+# React
+
+\`\`\`tsx title="src/entry-client.tsx"
 import { hydrateRoot } from 'react-dom/client'
 import { RouterClient } from '@tanstack/react-router/ssr/client'
 import { createRouter } from './router'
@@ -6884,45 +9092,105 @@ const router = createRouter()
 hydrateRoot(document, <RouterClient router={router} />)
 \`\`\`
 
-[//]: # 'ClientEntryFileExample'
+# Solid
+
+\`\`\`tsx title="src/entry-client.tsx"
+import { hydrate } from 'solid-js/web'
+import { RouterClient } from '@tanstack/solid-router/ssr/client'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrate(() => <RouterClient router={router} />, document.body)
+\`\`\`
+
+<!-- ::end:framework -->
+
+With this setup, your application will be rendered on the server and then hydrated on the client!
+
+## Streaming SSR
+
+Streaming SSR is the most modern flavor of SSR and is the process of continuously and incrementally sending HTML markup to the client as it is rendered on the server. This is slightly different from traditional SSR in concept because beyond being able to dehydrate and rehydrate a critical first paint, markup and data with lower priority or slower response times can be streamed to the client after the initial render, but in the same request.
+
+This pattern can be useful for pages that have slow or high-latency data fetching requirements. For example, if you have a page that needs to fetch data from a third-party API, you can stream the critical initial markup and data to the client and then stream the less-critical third-party data to the client as it is resolved.
+
+> [!NOTE]
+> This streaming pattern is all automatic as long as you are using either \`defaultStreamHandler\` or \`renderRouterToStream\`.
+
+using \`defaultStreamHandler\`
+
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-router/ssr/server'
+import { createRouter } from './router'
+
+export async function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
+
+  return await handler(defaultStreamHandler)
+}
+\`\`\`
+
+# Solid
 
-With this setup, your application will be rendered on the server and then hydrated on the client!
+\`\`\`tsx title="src/entry-server.tsx"
+import {
+  createRequestHandler,
+  defaultStreamHandler,
+} from '@tanstack/solid-router/ssr/server'
+import { createRouter } from './router'
 
-## Streaming SSR
+export async function render({ request }: { request: Request }) {
+  const handler = createRequestHandler({ request, createRouter })
 
-Streaming SSR is the most modern flavor of SSR and is the process of continuously and incrementally sending HTML markup to the client as it is rendered on the server. This is slightly different from traditional SSR in concept because beyond being able to dehydrate and rehydrate a critical first paint, markup and data with lower priority or slower response times can be streamed to the client after the initial render, but in the same request.
+  return await handler(defaultStreamHandler)
+}
+\`\`\`
 
-This pattern can be useful for pages that have slow or high-latency data fetching requirements. For example, if you have a page that needs to fetch data from a third-party API, you can stream the critical initial markup and data to the client and then stream the less-critical third-party data to the client as it is resolved.
+<!-- ::end:framework -->
 
-> [!NOTE]
-> This streaming pattern is all automatic as long as you are using either \`defaultStreamHandler\` or \`renderRouterToStream\`.
+using \`renderRouterToStream\`
 
-using \`defaultStreamHandler\`
+<!-- ::start:framework -->
 
-\`\`\`tsx
-// src/entry-server.tsx
+# React
+
+\`\`\`tsx title="src/entry-server.tsx"
 import {
   createRequestHandler,
-  defaultStreamHandler,
+  renderRouterToStream,
+  RouterServer,
 } from '@tanstack/react-router/ssr/server'
 import { createRouter } from './router'
 
-export async function render({ request }: { request: Request }) {
+export function render({ request }: { request: Request }) {
   const handler = createRequestHandler({ request, createRouter })
 
-  return await handler(defaultStreamHandler)
+  return handler(({ request, responseHeaders, router }) =>
+    renderRouterToStream({
+      request,
+      responseHeaders,
+      router,
+      children: <RouterServer router={router} />,
+    }),
+  )
 }
 \`\`\`
 
-using \`renderRouterToStream\`
+# Solid
 
-\`\`\`tsx
-// src/entry-server.tsx
+\`\`\`tsx title="src/entry-server.tsx"
 import {
   createRequestHandler,
   renderRouterToStream,
   RouterServer,
-} from '@tanstack/react-router/ssr/server'
+} from '@tanstack/solid-router/ssr/server'
 import { createRouter } from './router'
 
 export function render({ request }: { request: Request }) {
@@ -6939,6 +9207,8 @@ export function render({ request }: { request: Request }) {
 }
 \`\`\`
 
+<!-- ::end:framework -->
+
 ## Streaming Dehydration/Hydration
 
 Streaming dehydration/hydration is an advanced pattern that goes beyond markup and allows you to dehydrate and stream any supporting data from the server to the client and rehydrate it on arrival. This is useful for applications that may need to further use/manage the underlying data that was used to render the initial markup on the server.
@@ -6966,9 +9236,13 @@ In addition to being able to access this data from the route itself, you can als
 
 ## Example
 
-- \`posts.tsx\`
+<!-- ::start:framework -->
 
-\`\`\`tsx
+# React
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title='src/routes/posts.tsx'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts')({
@@ -6978,11 +9252,13 @@ export const Route = createFileRoute('/posts')({
 })
 \`\`\`
 
+<!-- ::end:tabs -->
+
 You can then access this data anywhere you have access to your routes, including matches that can be mapped back to their routes.
 
-- \`__root.tsx\`
+<!-- ::start:tabs variant="files" -->
 
-\`\`\`tsx
+\`\`\`tsx title='src/routes/__root.tsx'
 import { createRootRoute } from '@tanstack/react-router'
 
 export const Route = createRootRoute({
@@ -7000,10 +9276,59 @@ export const Route = createRootRoute({
 })
 \`\`\`
 
+<!-- ::end:tabs -->
+
+# Solid
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title='src/routes/posts.tsx'
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts')({
+  staticData: {
+    customData: 'Hello!',
+  },
+})
+\`\`\`
+
+<!-- ::end:tabs -->
+
+You can then access this data anywhere you have access to your routes, including matches that can be mapped back to their routes.
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title='src/routes/__root.tsx'
+import { createRootRoute, useMatches } from '@tanstack/solid-router'
+import { For } from 'solid-js'
+
+export const Route = createRootRoute({
+  component: () => {
+    const matches = useMatches()
+
+    return (
+      <div>
+        <For each={matches()}>
+          {(match) => <div>{match.staticData.customData}</div>}
+        </For>
+      </div>
+    )
+  },
+})
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
 ## Enforcing Static Data
 
 If you want to enforce that a route has static data, you can use declaration merging to add a type to the route's static option:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 declare module '@tanstack/react-router' {
   interface StaticDataRouteOption {
@@ -7012,11 +9337,21 @@ declare module '@tanstack/react-router' {
 }
 \`\`\`
 
-Now, if you try to create a route without the \`customData\` property, you'll get a type error:
+# Solid
 
 \`\`\`tsx
-import { createFileRoute } from '@tanstack/react-router'
+declare module '@tanstack/solid-router' {
+  interface StaticDataRouteOption {
+    customData: string
+  }
+}
+\`\`\`
+
+<!-- ::end:framework -->
 
+Now, if you try to create a route without the \`customData\` property, you'll get a type error:
+
+\`\`\`tsx
 export const Route = createFileRoute('/posts')({
   staticData: {
     // Property 'customData' is missing in type '{ customData: number; }' but required in type 'StaticDataRouteOption'.ts(2741)
@@ -7028,6 +9363,10 @@ export const Route = createFileRoute('/posts')({
 
 If you want to make static data optional, simply add a \`?\` to the property:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 declare module '@tanstack/react-router' {
   interface StaticDataRouteOption {
@@ -7036,6 +9375,18 @@ declare module '@tanstack/react-router' {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+declare module '@tanstack/solid-router' {
+  interface StaticDataRouteOption {
+    customData?: string
+  }
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 As long as there are any required properties on the \`StaticDataRouteOption\`, you'll be required to pass in an object.
 
 ## Common Patterns
@@ -7044,14 +9395,19 @@ As long as there are any required properties on the \`StaticDataRouteOption\`, y
 
 Use staticData to control which routes show or hide layout elements:
 
-\`\`\`tsx
-// routes/admin/route.tsx
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title='src/routes/admin/route.tsx'
 export const Route = createFileRoute('/admin')({
   staticData: { showNavbar: false },
   component: AdminLayout,
 })
 \`\`\`
 
+<!-- ::end:tabs -->
+
+<!-- ::start:tabs variant="files" -->
+
 \`\`\`tsx
 // routes/__root.tsx
 function RootComponent() {
@@ -7070,10 +9426,17 @@ function RootComponent() {
 }
 \`\`\`
 
+<!-- ::end:tabs -->
+
 ### Route Titles for Breadcrumbs
 
-\`\`\`tsx
-// routes/posts/$postId.tsx
+<!-- ::start:framework -->
+
+# React
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title='src/routes/posts/$postId.tsx'
 export const Route = createFileRoute('/posts/$postId')({
   staticData: {
     getTitle: () => 'Post Details',
@@ -7081,8 +9444,11 @@ export const Route = createFileRoute('/posts/$postId')({
 })
 \`\`\`
 
-\`\`\`tsx
-// In a Breadcrumb component
+<!-- ::end:tabs -->
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title='src/components/Breadcrumbs.tsx'
 function Breadcrumbs() {
   const matches = useMatches()
 
@@ -7098,6 +9464,45 @@ function Breadcrumbs() {
 }
 \`\`\`
 
+<!-- ::end:tabs -->
+
+# Solid
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title='src/routes/posts/$postId.tsx'
+export const Route = createFileRoute('/posts/$postId')({
+  staticData: {
+    getTitle: () => 'Post Details',
+  },
+})
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::start:tabs variant="files" -->
+
+\`\`\`tsx title='src/components/Breadcrumbs.tsx'
+import { useMatches } from '@tanstack/solid-router'
+import { For } from 'solid-js'
+
+function Breadcrumbs() {
+  const matches = useMatches()
+
+  return (
+    <nav>
+      <For each={matches().filter((m) => m.staticData?.getTitle)}>
+        {(m) => <span>{m.staticData.getTitle()}</span>}
+      </For>
+    </nav>
+  )
+}
+\`\`\`
+
+<!-- ::end:tabs -->
+
+<!-- ::end:framework -->
+
 ### When to Use staticData vs Context
 
 | staticData                             | context                         |
@@ -7136,6 +9541,10 @@ const parentRoute = createRoute({
 
 For the types of your router to work with top-level exports like \`Link\`, \`useNavigate\`, \`useParams\`, etc. they must permeate the TypeScript module boundary and be registered right into the library. To do this, we use declaration merging on the exported \`Register\` interface.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`ts
 const router = createRouter({
   // ...
@@ -7148,6 +9557,22 @@ declare module '@tanstack/react-router' {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`ts
+const router = createRouter({
+  // ...
+})
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 By registering your router with the module, you can now use the exported hooks, components, and utilities with your router's exact types.
 
 ## Fixing the Component Context Problem
@@ -7402,6 +9827,10 @@ Most types exposed by TanStack Router are internal, subject to breaking changes
 
 \`ValidateLinkOptions\` type checks object literal types to ensure they conform to \`Link\` options at inference sites. For example, you may have a generic \`HeadingLink\` component which accepts a \`title\` prop along with \`linkOptions\`, the idea being this component can be re-used for any navigation.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 export interface HeaderLinkProps<
   TRouter extends RegisteredRouter = RegisteredRouter,
@@ -7424,6 +9853,32 @@ export function HeadingLink(props: HeaderLinkProps): React.ReactNode {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+export interface HeaderLinkProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TOptions = unknown,
+> {
+  title: string
+  linkOptions: ValidateLinkOptions<TRouter, TOptions>
+}
+
+export function HeadingLink<TRouter extends RegisteredRouter, TOptions>(
+  props: HeaderLinkProps<TRouter, TOptions>,
+): Solid.JSX.Element
+export function HeadingLink(props: HeaderLinkProps): Solid.JSX.Element {
+  return (
+    <>
+      <h1>{props.title}</h1>
+      <Link {...props.linkOptions} />
+    </>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 A more permissive overload of \`HeadingLink\` is used to avoid type assertions you would otherwise have to do with the generic signature. Using a looser signature without type parameters is an easy way to avoid type assertions in the implementation of \`HeadingLink\`
 
 All type parameters for utilities are optional but for the best TypeScript performance \`TRouter\` should always be specified for the public facing signature. And \`TOptions\` should always be used at inference sites like \`HeadingLink\` to infer the \`linkOptions\` to correctly narrow \`params\` and \`search\`
@@ -7439,6 +9894,10 @@ The result of this is that \`linkOptions\` in the following is completely type-s
 
 All navigation type utilities have an array variant. \`ValidateLinkOptionsArray\` enables type checking of an array of \`Link\` options. For example, you might have a generic \`Menu\` component where each item is a \`Link\`.
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 export interface MenuProps<
   TRouter extends RegisteredRouter = RegisteredRouter,
@@ -7464,6 +9923,39 @@ export function Menu(props: MenuProps): React.ReactNode {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { For } from 'solid-js'
+
+export interface MenuProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
+> {
+  items: ValidateLinkOptionsArray<TRouter, TItems>
+}
+
+export function Menu<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown>,
+>(props: MenuProps<TRouter, TItems>): Solid.JSX.Element
+export function Menu(props: MenuProps): Solid.JSX.Element {
+  return (
+    <ul>
+      <For each={props.items}>
+        {(item) => (
+          <li>
+            <Link {...item} />
+          </li>
+        )}
+      </For>
+    </ul>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 This of course allows the following \`items\` prop to be completely type-safe
 
 \`\`\`tsx
@@ -7477,7 +9969,11 @@ This of course allows the following \`items\` prop to be completely type-safe
 
 It is also possible to fix \`from\` for each \`Link\` options in the array. This would allow all \`Menu\` items to navigate relative to \`from\`. Additional type checking of \`from\` can be provided by the \`ValidateFromPath\` utility
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`ts
 export interface MenuProps<
   TRouter extends RegisteredRouter = RegisteredRouter,
   TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
@@ -7505,6 +10001,42 @@ export function Menu(props: MenuProps): React.ReactNode {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`ts
+import { For } from 'solid-js'
+
+export interface MenuProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
+  TFrom extends string = string,
+> {
+  from: ValidateFromPath<TRouter, TFrom>
+  items: ValidateLinkOptionsArray<TRouter, TItems, TFrom>
+}
+
+export function Menu<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TItems extends ReadonlyArray<unknown>,
+  TFrom extends string = string,
+>(props: MenuProps<TRouter, TItems, TFrom>): Solid.JSX.Element
+export function Menu(props: MenuProps): Solid.JSX.Element {
+  return (
+    <ul>
+      <For each={props.items}>
+        {(item) => (
+          <li>
+            <Link {...item} from={props.from} />
+          </li>
+        )}
+      </For>
+    </ul>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 \`ValidateLinkOptionsArray\` allows you to fix \`from\` by providing an extra type parameter. The result is a type safe array of \`Link\` options providing navigation relative to \`from\`
 
 \`\`\`tsx
@@ -7550,7 +10082,9 @@ fetchOrRedirect('http://example.com/', { to: '/login' })
 
 \`ValidateNavigateOptions\` type checks object literal types to ensure they conform to navigate options at inference sites. For example, you may want to write a custom hook to enable/disable navigation.
 
-[//]: # 'TypeCheckingNavigateOptionsWithValidateNavigateOptionsImpl'
+<!-- ::start:framework -->
+
+# React
 
 \`\`\`tsx
 export interface UseConditionalNavigateResult {
@@ -7582,7 +10116,41 @@ export function useConditionalNavigate(
 }
 \`\`\`
 
-[//]: # 'TypeCheckingNavigateOptionsWithValidateNavigateOptionsImpl'
+# Solid
+
+\`\`\`tsx
+import { createSignal } from 'solid-js'
+
+export interface UseConditionalNavigateResult {
+  enable: () => void
+  disable: () => void
+  navigate: () => void
+}
+
+export function useConditionalNavigate<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TOptions = unknown,
+>(
+  navigateOptions: ValidateNavigateOptions<TRouter, TOptions>,
+): UseConditionalNavigateResult
+export function useConditionalNavigate(
+  navigateOptions: ValidateNavigateOptions,
+): UseConditionalNavigateResult {
+  const [enabled, setEnabled] = createSignal(false)
+  const navigate = useNavigate()
+  return {
+    enable: () => setEnabled(true),
+    disable: () => setEnabled(false),
+    navigate: () => {
+      if (enabled()) {
+        navigate(navigateOptions)
+      }
+    },
+  }
+}
+\`\`\`
+
+<!-- ::end:framework -->
 
 The result of this is that \`navigateOptions\` passed to \`useConditionalNavigate\` is completely type-safe and we can enable/disable navigation based on react state