<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][.gitignore]" value="node_modules
package-lock.json
yarn.lock

.DS_Store
.cache
.env
.vercel
.output
/build/
/api/
/server/build
/public/build# Sentry Config File
.env.sentry-build-plugin
">
<input type="hidden" name="project[files][.prettierignore]" value="**/build
**/public
pnpm-lock.yaml
routeTree.gen.ts">
<input type="hidden" name="project[files][README.md]" value="# Welcome to TanStack.com!

This site is built with TanStack Router!

- [TanStack Router Docs](https://tanstack.com/router)

It&#39;s deployed automagically with Netlify!

- [Netlify](https://netlify.com/)

## Development

From your terminal:

```sh
pnpm install
pnpm dev
```

This starts your app in development mode, rebuilding assets on file changes.

## Editing and previewing the docs of TanStack projects locally

The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.

Follow these steps if you want to edit the doc pages of a project (in these steps we&#39;ll assume it&#39;s [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :

1. Create a new directory called `tanstack`.

```sh
mkdir tanstack
```

2. Enter the directory and clone this repo and the repo of the project there.

```sh
cd tanstack
git clone git@github.com:TanStack/tanstack.com.git
git clone git@github.com:TanStack/form.git
```

&gt; [!NOTE]
&gt; Your `tanstack` directory should look like this:
&gt;
&gt; ```
&gt; tanstack/
&gt;    |
&gt;    +-- form/
&gt;    |
&gt;    +-- tanstack.com/
&gt; ```

&gt; [!WARNING]
&gt; Make sure the name of the directory in your local file system matches the name of the project&#39;s repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won&#39;t be found.

3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:

```sh
cd tanstack.com
pnpm i
# The app will run on https://localhost:3000 by default
pnpm dev
```

4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.

&gt; [!NOTE]
&gt; The updated pages need to be manually reloaded in the browser.

&gt; [!WARNING]
&gt; You will need to update the `docs/config.json` file (in the project&#39;s repo) if you add a new doc page!
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;tanstack-start-example-basic-rsc&quot;,&quot;private&quot;:true,&quot;sideEffects&quot;:false,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vite dev&quot;,&quot;build&quot;:&quot;vite build&quot;,&quot;start&quot;:&quot;vite start&quot;},&quot;dependencies&quot;:{&quot;@babel/plugin-syntax-typescript&quot;:&quot;^7.25.9&quot;,&quot;@tanstack/react-router&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router@006569c86806bcdc5cb006f149bdc6cff987fac4&quot;,&quot;@tanstack/react-router-devtools&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@006569c86806bcdc5cb006f149bdc6cff987fac4&quot;,&quot;@tanstack/react-start&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-start@006569c86806bcdc5cb006f149bdc6cff987fac4&quot;,&quot;react&quot;:&quot;^19.0.0&quot;,&quot;react-dom&quot;:&quot;^19.0.0&quot;,&quot;redaxios&quot;:&quot;^0.5.1&quot;,&quot;tailwind-merge&quot;:&quot;^2.6.0&quot;},&quot;devDependencies&quot;:{&quot;@types/react&quot;:&quot;^19.0.8&quot;,&quot;@types/react-dom&quot;:&quot;^19.0.3&quot;,&quot;postcss&quot;:&quot;^8.5.1&quot;,&quot;autoprefixer&quot;:&quot;^10.4.20&quot;,&quot;tailwindcss&quot;:&quot;^3.4.17&quot;,&quot;typescript&quot;:&quot;^5.7.2&quot;,&quot;vite-tsconfig-paths&quot;:&quot;^5.1.4&quot;},&quot;overrides&quot;:{&quot;react&quot;:&quot;0.0.0-experimental-035a41c4e-20230704&quot;,&quot;react-dom&quot;:&quot;0.0.0-experimental-035a41c4e-20230704&quot;}}">
<input type="hidden" name="project[files][postcss.config.mjs]" value="export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
">
<input type="hidden" name="project[files][tailwind.config.mjs]" value="/** @type {import(&#39;tailwindcss&#39;).Config} */
export default {
  content: [&#39;./src/**/*.{js,jsx,ts,tsx}&#39;],
}
">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;include&quot;: [&quot;**/*.ts&quot;, &quot;**/*.tsx&quot;],
  &quot;compilerOptions&quot;: {
    &quot;strict&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;moduleResolution&quot;: &quot;Bundler&quot;,
    &quot;lib&quot;: [&quot;DOM&quot;, &quot;DOM.Iterable&quot;, &quot;ES2022&quot;],
    &quot;isolatedModules&quot;: true,
    &quot;resolveJsonModule&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;target&quot;: &quot;ES2022&quot;,
    &quot;allowJs&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;baseUrl&quot;: &quot;.&quot;,
    &quot;paths&quot;: {
      &quot;~/*&quot;: [&quot;./src/*&quot;]
    },
    &quot;noEmit&quot;: true
  }
}
">
<input type="hidden" name="project[files][vite.config.ts]" value="import { tanstackStart } from &#39;@tanstack/react-start/plugin/vite&#39;
import { defineConfig } from &#39;vite&#39;
import tsConfigPaths from &#39;vite-tsconfig-paths&#39;

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: [&#39;./tsconfig.json&#39;],
    }),
    tanstackStart(),
  ],
})
">
<input type="hidden" name="project[files][.vscode/settings.json]" value="{
  &quot;files.watcherExclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  },
  &quot;search.exclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  },
  &quot;files.readonlyInclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  }
}
">
<input type="hidden" name="project[files][public/android-chrome-192x192.png]" value="https://pkg.pr.new/template/7d95a424-73df-47e4-a204-0b3430caaa1d">
<input type="hidden" name="project[files][public/android-chrome-512x512.png]" value="https://pkg.pr.new/template/8ab72c03-31af-4710-ac34-2d713071bdd4">
<input type="hidden" name="project[files][public/apple-touch-icon.png]" value="https://pkg.pr.new/template/b479b4ee-3691-4ff2-9393-8fbf2b897eb2">
<input type="hidden" name="project[files][public/favicon-16x16.png]" value="https://pkg.pr.new/template/326ae06a-5efe-42eb-929c-6716d7cec3d8">
<input type="hidden" name="project[files][public/favicon-32x32.png]" value="https://pkg.pr.new/template/c73178a1-f26e-4d50-a9e0-1e1566e8095b">
<input type="hidden" name="project[files][public/favicon.ico]" value="https://pkg.pr.new/template/d38387e9-3d0b-427b-b0fb-351d81dcb409">
<input type="hidden" name="project[files][public/favicon.png]" value="https://pkg.pr.new/template/2de49a81-01bd-4542-b439-73cea438e7da">
<input type="hidden" name="project[files][public/site.webmanifest]" value="{
  &quot;name&quot;: &quot;&quot;,
  &quot;short_name&quot;: &quot;&quot;,
  &quot;icons&quot;: [
    {
      &quot;src&quot;: &quot;/android-chrome-192x192.png&quot;,
      &quot;sizes&quot;: &quot;192x192&quot;,
      &quot;type&quot;: &quot;image/png&quot;
    },
    {
      &quot;src&quot;: &quot;/android-chrome-512x512.png&quot;,
      &quot;sizes&quot;: &quot;512x512&quot;,
      &quot;type&quot;: &quot;image/png&quot;
    }
  ],
  &quot;theme_color&quot;: &quot;#ffffff&quot;,
  &quot;background_color&quot;: &quot;#ffffff&quot;,
  &quot;display&quot;: &quot;standalone&quot;
}
">
<input type="hidden" name="project[files][src/routeTree.gen.ts]" value="/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

import type { CreateFileRoute, FileRoutesByPath } from &#39;@tanstack/react-router&#39;

// Import Routes

import { Route as rootRoute } from &#39;./routes/__root&#39;
import { Route as PostsRouteImport } from &#39;./routes/posts&#39;
import { Route as PathlessLayoutRouteImport } from &#39;./routes/_pathlessLayout&#39;
import { Route as IndexRouteImport } from &#39;./routes/index&#39;
import { Route as PostsIndexRouteImport } from &#39;./routes/posts.index&#39;
import { Route as PostsPostIdRouteImport } from &#39;./routes/posts.$postId&#39;
import { Route as PathlessLayoutNestedLayoutRouteImport } from &#39;./routes/_pathlessLayout/_nested-layout&#39;
import { Route as PostsPostIdDeepRouteImport } from &#39;./routes/posts_.$postId.deep&#39;
import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from &#39;./routes/_pathlessLayout/_nested-layout/route-b&#39;
import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from &#39;./routes/_pathlessLayout/_nested-layout/route-a&#39;

// Create/Update Routes

const PostsRoute = PostsRouteImport.update({
  id: &#39;/posts&#39;,
  path: &#39;/posts&#39;,
  getParentRoute: () =&gt; rootRoute,
} as any)

const PathlessLayoutRoute = PathlessLayoutRouteImport.update({
  id: &#39;/_pathlessLayout&#39;,
  getParentRoute: () =&gt; rootRoute,
} as any)

const IndexRoute = IndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRoute,
} as any)

const PostsIndexRoute = PostsIndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; PostsRoute,
} as any)

const PostsPostIdRoute = PostsPostIdRouteImport.update({
  id: &#39;/$postId&#39;,
  path: &#39;/$postId&#39;,
  getParentRoute: () =&gt; PostsRoute,
} as any)

const PathlessLayoutNestedLayoutRoute =
  PathlessLayoutNestedLayoutRouteImport.update({
    id: &#39;/_nested-layout&#39;,
    getParentRoute: () =&gt; PathlessLayoutRoute,
  } as any)

const PostsPostIdDeepRoute = PostsPostIdDeepRouteImport.update({
  id: &#39;/posts_/$postId/deep&#39;,
  path: &#39;/posts/$postId/deep&#39;,
  getParentRoute: () =&gt; rootRoute,
} as any)

const PathlessLayoutNestedLayoutRouteBRoute =
  PathlessLayoutNestedLayoutRouteBRouteImport.update({
    id: &#39;/route-b&#39;,
    path: &#39;/route-b&#39;,
    getParentRoute: () =&gt; PathlessLayoutNestedLayoutRoute,
  } as any)

const PathlessLayoutNestedLayoutRouteARoute =
  PathlessLayoutNestedLayoutRouteARouteImport.update({
    id: &#39;/route-a&#39;,
    path: &#39;/route-a&#39;,
    getParentRoute: () =&gt; PathlessLayoutNestedLayoutRoute,
  } as any)

// Populate the FileRoutesByPath interface

declare module &#39;@tanstack/react-router&#39; {
  interface FileRoutesByPath {
    &#39;/&#39;: {
      id: &#39;/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRoute
    }
    &#39;/_pathlessLayout&#39;: {
      id: &#39;/_pathlessLayout&#39;
      path: &#39;&#39;
      fullPath: &#39;&#39;
      preLoaderRoute: typeof PathlessLayoutRouteImport
      parentRoute: typeof rootRoute
    }
    &#39;/posts&#39;: {
      id: &#39;/posts&#39;
      path: &#39;/posts&#39;
      fullPath: &#39;/posts&#39;
      preLoaderRoute: typeof PostsRouteImport
      parentRoute: typeof rootRoute
    }
    &#39;/_pathlessLayout/_nested-layout&#39;: {
      id: &#39;/_pathlessLayout/_nested-layout&#39;
      path: &#39;&#39;
      fullPath: &#39;&#39;
      preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteImport
      parentRoute: typeof PathlessLayoutRouteImport
    }
    &#39;/posts/$postId&#39;: {
      id: &#39;/posts/$postId&#39;
      path: &#39;/$postId&#39;
      fullPath: &#39;/posts/$postId&#39;
      preLoaderRoute: typeof PostsPostIdRouteImport
      parentRoute: typeof PostsRouteImport
    }
    &#39;/posts/&#39;: {
      id: &#39;/posts/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/posts/&#39;
      preLoaderRoute: typeof PostsIndexRouteImport
      parentRoute: typeof PostsRouteImport
    }
    &#39;/_pathlessLayout/_nested-layout/route-a&#39;: {
      id: &#39;/_pathlessLayout/_nested-layout/route-a&#39;
      path: &#39;/route-a&#39;
      fullPath: &#39;/route-a&#39;
      preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteARouteImport
      parentRoute: typeof PathlessLayoutNestedLayoutRouteImport
    }
    &#39;/_pathlessLayout/_nested-layout/route-b&#39;: {
      id: &#39;/_pathlessLayout/_nested-layout/route-b&#39;
      path: &#39;/route-b&#39;
      fullPath: &#39;/route-b&#39;
      preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteBRouteImport
      parentRoute: typeof PathlessLayoutNestedLayoutRouteImport
    }
    &#39;/posts_/$postId/deep&#39;: {
      id: &#39;/posts_/$postId/deep&#39;
      path: &#39;/posts/$postId/deep&#39;
      fullPath: &#39;/posts/$postId/deep&#39;
      preLoaderRoute: typeof PostsPostIdDeepRouteImport
      parentRoute: typeof rootRoute
    }
  }
}

// Add type-safety to the createFileRoute function across the route tree

declare module &#39;./routes/index&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/&#39;,
    FileRoutesByPath[&#39;/&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/&#39;][&#39;fullPath&#39;]
  &gt;
}
declare module &#39;./routes/_pathlessLayout&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/_pathlessLayout&#39;,
    FileRoutesByPath[&#39;/_pathlessLayout&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout&#39;][&#39;fullPath&#39;]
  &gt;
}
declare module &#39;./routes/posts&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/posts&#39;,
    FileRoutesByPath[&#39;/posts&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/posts&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/posts&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/posts&#39;][&#39;fullPath&#39;]
  &gt;
}
declare module &#39;./routes/_pathlessLayout/_nested-layout&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/_pathlessLayout/_nested-layout&#39;,
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout&#39;][&#39;fullPath&#39;]
  &gt;
}
declare module &#39;./routes/posts.$postId&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/posts/$postId&#39;,
    FileRoutesByPath[&#39;/posts/$postId&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/posts/$postId&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/posts/$postId&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/posts/$postId&#39;][&#39;fullPath&#39;]
  &gt;
}
declare module &#39;./routes/posts.index&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/posts/&#39;,
    FileRoutesByPath[&#39;/posts/&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/posts/&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/posts/&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/posts/&#39;][&#39;fullPath&#39;]
  &gt;
}
declare module &#39;./routes/_pathlessLayout/_nested-layout/route-a&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/_pathlessLayout/_nested-layout/route-a&#39;,
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout/route-a&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout/route-a&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout/route-a&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout/route-a&#39;][&#39;fullPath&#39;]
  &gt;
}
declare module &#39;./routes/_pathlessLayout/_nested-layout/route-b&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/_pathlessLayout/_nested-layout/route-b&#39;,
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout/route-b&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout/route-b&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout/route-b&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/_pathlessLayout/_nested-layout/route-b&#39;][&#39;fullPath&#39;]
  &gt;
}
declare module &#39;./routes/posts_.$postId.deep&#39; {
  const createFileRoute: CreateFileRoute&lt;
    &#39;/posts_/$postId/deep&#39;,
    FileRoutesByPath[&#39;/posts_/$postId/deep&#39;][&#39;parentRoute&#39;],
    FileRoutesByPath[&#39;/posts_/$postId/deep&#39;][&#39;id&#39;],
    FileRoutesByPath[&#39;/posts_/$postId/deep&#39;][&#39;path&#39;],
    FileRoutesByPath[&#39;/posts_/$postId/deep&#39;][&#39;fullPath&#39;]
  &gt;
}

// Create and export the route tree

interface PathlessLayoutNestedLayoutRouteChildren {
  PathlessLayoutNestedLayoutRouteARoute: typeof PathlessLayoutNestedLayoutRouteARoute
  PathlessLayoutNestedLayoutRouteBRoute: typeof PathlessLayoutNestedLayoutRouteBRoute
}

const PathlessLayoutNestedLayoutRouteChildren: PathlessLayoutNestedLayoutRouteChildren =
  {
    PathlessLayoutNestedLayoutRouteARoute:
      PathlessLayoutNestedLayoutRouteARoute,
    PathlessLayoutNestedLayoutRouteBRoute:
      PathlessLayoutNestedLayoutRouteBRoute,
  }

const PathlessLayoutNestedLayoutRouteWithChildren =
  PathlessLayoutNestedLayoutRoute._addFileChildren(
    PathlessLayoutNestedLayoutRouteChildren,
  )

interface PathlessLayoutRouteChildren {
  PathlessLayoutNestedLayoutRoute: typeof PathlessLayoutNestedLayoutRouteWithChildren
}

const PathlessLayoutRouteChildren: PathlessLayoutRouteChildren = {
  PathlessLayoutNestedLayoutRoute: PathlessLayoutNestedLayoutRouteWithChildren,
}

const PathlessLayoutRouteWithChildren = PathlessLayoutRoute._addFileChildren(
  PathlessLayoutRouteChildren,
)

interface PostsRouteChildren {
  PostsPostIdRoute: typeof PostsPostIdRoute
  PostsIndexRoute: typeof PostsIndexRoute
}

const PostsRouteChildren: PostsRouteChildren = {
  PostsPostIdRoute: PostsPostIdRoute,
  PostsIndexRoute: PostsIndexRoute,
}

const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren)

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof IndexRoute
  &#39;&#39;: typeof PathlessLayoutNestedLayoutRouteWithChildren
  &#39;/posts&#39;: typeof PostsRouteWithChildren
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/posts/&#39;: typeof PostsIndexRoute
  &#39;/route-a&#39;: typeof PathlessLayoutNestedLayoutRouteARoute
  &#39;/route-b&#39;: typeof PathlessLayoutNestedLayoutRouteBRoute
  &#39;/posts/$postId/deep&#39;: typeof PostsPostIdDeepRoute
}

export interface FileRoutesByTo {
  &#39;/&#39;: typeof IndexRoute
  &#39;&#39;: typeof PathlessLayoutNestedLayoutRouteWithChildren
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/posts&#39;: typeof PostsIndexRoute
  &#39;/route-a&#39;: typeof PathlessLayoutNestedLayoutRouteARoute
  &#39;/route-b&#39;: typeof PathlessLayoutNestedLayoutRouteBRoute
  &#39;/posts/$postId/deep&#39;: typeof PostsPostIdDeepRoute
}

export interface FileRoutesById {
  __root__: typeof rootRoute
  &#39;/&#39;: typeof IndexRoute
  &#39;/_pathlessLayout&#39;: typeof PathlessLayoutRouteWithChildren
  &#39;/posts&#39;: typeof PostsRouteWithChildren
  &#39;/_pathlessLayout/_nested-layout&#39;: typeof PathlessLayoutNestedLayoutRouteWithChildren
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/posts/&#39;: typeof PostsIndexRoute
  &#39;/_pathlessLayout/_nested-layout/route-a&#39;: typeof PathlessLayoutNestedLayoutRouteARoute
  &#39;/_pathlessLayout/_nested-layout/route-b&#39;: typeof PathlessLayoutNestedLayoutRouteBRoute
  &#39;/posts_/$postId/deep&#39;: typeof PostsPostIdDeepRoute
}

export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths:
    | &#39;/&#39;
    | &#39;&#39;
    | &#39;/posts&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/posts/&#39;
    | &#39;/route-a&#39;
    | &#39;/route-b&#39;
    | &#39;/posts/$postId/deep&#39;
  fileRoutesByTo: FileRoutesByTo
  to:
    | &#39;/&#39;
    | &#39;&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/posts&#39;
    | &#39;/route-a&#39;
    | &#39;/route-b&#39;
    | &#39;/posts/$postId/deep&#39;
  id:
    | &#39;__root__&#39;
    | &#39;/&#39;
    | &#39;/_pathlessLayout&#39;
    | &#39;/posts&#39;
    | &#39;/_pathlessLayout/_nested-layout&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/posts/&#39;
    | &#39;/_pathlessLayout/_nested-layout/route-a&#39;
    | &#39;/_pathlessLayout/_nested-layout/route-b&#39;
    | &#39;/posts_/$postId/deep&#39;
  fileRoutesById: FileRoutesById
}

export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren
  PostsRoute: typeof PostsRouteWithChildren
  PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
}

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  PathlessLayoutRoute: PathlessLayoutRouteWithChildren,
  PostsRoute: PostsRouteWithChildren,
  PostsPostIdDeepRoute: PostsPostIdDeepRoute,
}

export const routeTree = rootRoute
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()

/* ROUTE_MANIFEST_START
{
  &quot;routes&quot;: {
    &quot;__root__&quot;: {
      &quot;filePath&quot;: &quot;__root.tsx&quot;,
      &quot;children&quot;: [
        &quot;/&quot;,
        &quot;/_pathlessLayout&quot;,
        &quot;/posts&quot;,
        &quot;/posts_/$postId/deep&quot;
      ]
    },
    &quot;/&quot;: {
      &quot;filePath&quot;: &quot;index.tsx&quot;
    },
    &quot;/_pathlessLayout&quot;: {
      &quot;filePath&quot;: &quot;_pathlessLayout.tsx&quot;,
      &quot;children&quot;: [
        &quot;/_pathlessLayout/_nested-layout&quot;
      ]
    },
    &quot;/posts&quot;: {
      &quot;filePath&quot;: &quot;posts.tsx&quot;,
      &quot;children&quot;: [
        &quot;/posts/$postId&quot;,
        &quot;/posts/&quot;
      ]
    },
    &quot;/_pathlessLayout/_nested-layout&quot;: {
      &quot;filePath&quot;: &quot;_pathlessLayout/_nested-layout.tsx&quot;,
      &quot;parent&quot;: &quot;/_pathlessLayout&quot;,
      &quot;children&quot;: [
        &quot;/_pathlessLayout/_nested-layout/route-a&quot;,
        &quot;/_pathlessLayout/_nested-layout/route-b&quot;
      ]
    },
    &quot;/posts/$postId&quot;: {
      &quot;filePath&quot;: &quot;posts.$postId.tsx&quot;,
      &quot;parent&quot;: &quot;/posts&quot;
    },
    &quot;/posts/&quot;: {
      &quot;filePath&quot;: &quot;posts.index.tsx&quot;,
      &quot;parent&quot;: &quot;/posts&quot;
    },
    &quot;/_pathlessLayout/_nested-layout/route-a&quot;: {
      &quot;filePath&quot;: &quot;_pathlessLayout/_nested-layout/route-a.tsx&quot;,
      &quot;parent&quot;: &quot;/_pathlessLayout/_nested-layout&quot;
    },
    &quot;/_pathlessLayout/_nested-layout/route-b&quot;: {
      &quot;filePath&quot;: &quot;_pathlessLayout/_nested-layout/route-b.tsx&quot;,
      &quot;parent&quot;: &quot;/_pathlessLayout/_nested-layout&quot;
    },
    &quot;/posts_/$postId/deep&quot;: {
      &quot;filePath&quot;: &quot;posts_.$postId.deep.tsx&quot;
    }
  }
}
ROUTE_MANIFEST_END */
">
<input type="hidden" name="project[files][src/router.tsx]" value="import { createRouter as createTanStackRouter } from &#39;@tanstack/react-router&#39;
import { routeTree } from &#39;./routeTree.gen&#39;
import { DefaultCatchBoundary } from &#39;./components/DefaultCatchBoundary&#39;
import { NotFound } from &#39;./components/NotFound&#39;

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    defaultPreload: &#39;intent&#39;,
    defaultErrorComponent: DefaultCatchBoundary,
    defaultNotFoundComponent: () =&gt; &lt;NotFound /&gt;,
    scrollRestoration: true,
  })

  return router
}

declare module &#39;@tanstack/react-router&#39; {
  interface Register {
    router: ReturnType&lt;typeof createRouter&gt;
  }
}
">
<input type="hidden" name="project[files][src/tanstack-start.d.ts]" value="/// &lt;reference types=&quot;vite/client&quot; /&gt;
import &#39;../.tanstack-start/server-routes/routeTree.gen&#39;
">
<input type="hidden" name="project[files][.tanstack-start/server-routes/routeTree.gen.ts]" value="/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

// Import Routes

import type {
  FileRoutesByPath,
  CreateServerFileRoute,
} from &#39;@tanstack/react-start/server&#39;
import {
  createServerRoute,
  createServerFileRoute,
} from &#39;@tanstack/react-start/server&#39;

// Create/Update Routes

const rootRoute = createServerRoute()

// Populate the FileRoutesByPath interface

declare module &#39;@tanstack/react-start/server&#39; {
  interface FileRoutesByPath {}
}

// Add type-safety to the createFileRoute function across the route tree

// Create and export the route tree

export interface FileRoutesByFullPath {}

export interface FileRoutesByTo {}

export interface FileRoutesById {
  __root__: typeof rootRoute
}

export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: never
  fileRoutesByTo: FileRoutesByTo
  to: never
  id: &#39;__root__&#39;
  fileRoutesById: FileRoutesById
}

export interface RootRouteChildren {}

const rootRouteChildren: RootRouteChildren = {}

export const routeTree = rootRoute
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()

/* ROUTE_MANIFEST_START
{
  &quot;routes&quot;: {
    &quot;__root__&quot;: {
      &quot;filePath&quot;: &quot;__root.tsx&quot;,
      &quot;children&quot;: []
    }
  }
}
ROUTE_MANIFEST_END */
">
<input type="hidden" name="project[files][src/components/DefaultCatchBoundary.tsx]" value="import {
  ErrorComponent,
  Link,
  rootRouteId,
  useMatch,
  useRouter,
} from &#39;@tanstack/react-router&#39;
import type { ErrorComponentProps } from &#39;@tanstack/react-router&#39;

export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
  const router = useRouter()
  const isRoot = useMatch({
    strict: false,
    select: (state) =&gt; state.id === rootRouteId,
  })

  console.error(error)

  return (
    &lt;div className=&quot;min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6&quot;&gt;
      &lt;ErrorComponent error={error} /&gt;
      &lt;div className=&quot;flex gap-2 items-center flex-wrap&quot;&gt;
        &lt;button
          onClick={() =&gt; {
            router.invalidate()
          }}
          className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
        &gt;
          Try Again
        &lt;/button&gt;
        {isRoot ? (
          &lt;Link
            to=&quot;/&quot;
            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
          &gt;
            Home
          &lt;/Link&gt;
        ) : (
          &lt;Link
            to=&quot;/&quot;
            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
            onClick={(e) =&gt; {
              e.preventDefault()
              window.history.back()
            }}
          &gt;
            Go Back
          &lt;/Link&gt;
        )}
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/components/NotFound.tsx]" value="import { Link } from &#39;@tanstack/react-router&#39;

export function NotFound({ children }: { children?: any }) {
  return (
    &lt;div className=&quot;space-y-2 p-2&quot;&gt;
      &lt;div className=&quot;text-gray-600 dark:text-gray-400&quot;&gt;
        {children || &lt;p&gt;The page you are looking for does not exist.&lt;/p&gt;}
      &lt;/div&gt;
      &lt;p className=&quot;flex items-center gap-2 flex-wrap&quot;&gt;
        &lt;button
          onClick={() =&gt; window.history.back()}
          className=&quot;bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm&quot;
        &gt;
          Go back
        &lt;/button&gt;
        &lt;Link
          to=&quot;/&quot;
          className=&quot;bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm&quot;
        &gt;
          Start Over
        &lt;/Link&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/__root.tsx]" value="import {
  HeadContent,
  Link,
  Outlet,
  Scripts,
  createRootRoute,
} from &#39;@tanstack/react-router&#39;
import { TanStackRouterDevtools } from &#39;@tanstack/react-router-devtools&#39;
import * as React from &#39;react&#39;
import { DefaultCatchBoundary } from &#39;~/components/DefaultCatchBoundary&#39;
import { NotFound } from &#39;~/components/NotFound&#39;
import appCss from &#39;~/styles/app.css?url&#39;
import { seo } from &#39;~/utils/seo&#39;

export const Route = createRootRoute({
  head: () =&gt; ({
    meta: [
      {
        charSet: &#39;utf-8&#39;,
      },
      {
        name: &#39;viewport&#39;,
        content: &#39;width=device-width, initial-scale=1&#39;,
      },
      ...seo({
        title:
          &#39;TanStack Start | Type-Safe, Client-First, Full-Stack React Framework&#39;,
        description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
      }),
    ],
    links: [
      { rel: &#39;stylesheet&#39;, href: appCss },
      {
        rel: &#39;apple-touch-icon&#39;,
        sizes: &#39;180x180&#39;,
        href: &#39;/apple-touch-icon.png&#39;,
      },
      {
        rel: &#39;icon&#39;,
        type: &#39;image/png&#39;,
        sizes: &#39;32x32&#39;,
        href: &#39;/favicon-32x32.png&#39;,
      },
      {
        rel: &#39;icon&#39;,
        type: &#39;image/png&#39;,
        sizes: &#39;16x16&#39;,
        href: &#39;/favicon-16x16.png&#39;,
      },
      { rel: &#39;manifest&#39;, href: &#39;/site.webmanifest&#39;, color: &#39;#fffff&#39; },
      { rel: &#39;icon&#39;, href: &#39;/favicon.ico&#39; },
    ],
  }),
  errorComponent: (props) =&gt; {
    return (
      &lt;RootDocument&gt;
        &lt;DefaultCatchBoundary {...props} /&gt;
      &lt;/RootDocument&gt;
    )
  },
  notFoundComponent: () =&gt; &lt;NotFound /&gt;,
  component: RootComponent,
})

function RootComponent() {
  return (
    &lt;RootDocument&gt;
      &lt;Outlet /&gt;
    &lt;/RootDocument&gt;
  )
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    &lt;html&gt;
      &lt;head&gt;
        &lt;HeadContent /&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div className=&quot;p-2 flex gap-2 text-lg&quot;&gt;
          &lt;Link
            to=&quot;/&quot;
            activeProps={{
              className: &#39;font-bold&#39;,
            }}
            activeOptions={{ exact: true }}
          &gt;
            Home
          &lt;/Link&gt;{&#39; &#39;}
          &lt;Link
            to=&quot;/posts&quot;
            activeProps={{
              className: &#39;font-bold&#39;,
            }}
          &gt;
            Posts
          &lt;/Link&gt;
          &lt;Link
            to=&quot;/route-a&quot;
            activeProps={{
              className: &#39;font-bold&#39;,
            }}
          &gt;
            Pathless Layout
          &lt;/Link&gt;
          &lt;Link
            // @ts-expect-error
            to=&quot;/this-route-does-not-exist&quot;
            activeProps={{
              className: &#39;font-bold&#39;,
            }}
          &gt;
            This Route Does Not Exist
          &lt;/Link&gt;
        &lt;/div&gt;
        &lt;hr /&gt;
        {/* &lt;React.Suspense fallback={null}&gt;{children}&lt;/React.Suspense&gt; */}
        {children}
        &lt;TanStackRouterDevtools position=&quot;bottom-right&quot; /&gt;
        &lt;Scripts /&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout.tsx]" value="import { Outlet } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute({
  component: LayoutComponent,
})

function LayoutComponent() {
  return (
    &lt;div className=&quot;p-2&quot;&gt;
      &lt;div className=&quot;border-b&quot;&gt;I&#39;m a layout&lt;/div&gt;
      &lt;div&gt;
        &lt;Outlet /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="export const Route = createFileRoute({
  component: Home,
})

function Home() {
  return (
    &lt;div className=&quot;p-2&quot;&gt;
      &lt;h3&gt;Welcome Home!&lt;/h3&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts.$postId.tsx]" value="import { ErrorComponent, Link } from &#39;@tanstack/react-router&#39;
import { createServerFn } from &#39;@tanstack/react-start&#39;
import { fetchPost } from &#39;../utils/posts&#39;
import type { ErrorComponentProps } from &#39;@tanstack/react-router&#39;
import { NotFound } from &#39;~/components/NotFound&#39;

const renderPost = createServerFn({ method: &#39;GET&#39; })
  .validator((postId: string) =&gt; postId)
  .handler(async ({ data }) =&gt; {
    const post = await fetchPost(data)

    return (
      &lt;div className=&quot;space-y-2&quot;&gt;
        &lt;h4 className=&quot;text-xl font-bold underline&quot;&gt;{post.title}&lt;/h4&gt;
        &lt;div className=&quot;text-sm&quot;&gt;{post.body}&lt;/div&gt;
        &lt;Link
          to=&quot;/posts/$postId/deep&quot;
          params={{
            postId: post.id,
          }}
          activeProps={{ className: &#39;text-black font-bold&#39; }}
          className=&quot;block py-1 text-blue-800 hover:text-blue-600&quot;
        &gt;
          Deep View
        &lt;/Link&gt;
      &lt;/div&gt;
    )
  })

export const Route = createFileRoute({
  loader: async ({ params: { postId } }) =&gt; renderPost({ data: postId }),
  errorComponent: PostErrorComponent,
  component: PostComponent,
  notFoundComponent: () =&gt; {
    return &lt;NotFound&gt;Post not found&lt;/NotFound&gt;
  },
})

export function PostErrorComponent({ error }: ErrorComponentProps) {
  return &lt;ErrorComponent error={error} /&gt;
}

function PostComponent() {
  return Route.useLoaderData()
}
">
<input type="hidden" name="project[files][src/routes/posts.index.tsx]" value="export const Route = createFileRoute({
  component: PostsIndexComponent,
})

function PostsIndexComponent() {
  return &lt;div&gt;Select a post.&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/posts.tsx]" value="import { createServerFn, renderRsc } from &#39;@tanstack/react-start&#39;
import { renderPosts } from &#39;~/utils/renderPosts&#39;

export const serverRenderPosts = createServerFn({ method: &#39;GET&#39; }).handler(
  renderPosts,
)

export const Route = createFileRoute({
  loader: async () =&gt; serverRenderPosts(),
  component: PostsComponent,
})

function PostsComponent() {
  return renderRsc(Route.useLoaderData())
}
">
<input type="hidden" name="project[files][src/routes/posts_.$postId.deep.tsx]" value="import { Link } from &#39;@tanstack/react-router&#39;
import { fetchPost } from &#39;../utils/posts&#39;
import { PostErrorComponent } from &#39;./posts.$postId&#39;

export const Route = createFileRoute({
  loader: async ({ params: { postId } }) =&gt; fetchPost(postId),
  errorComponent: PostErrorComponent,
  component: PostDeepComponent,
})

function PostDeepComponent() {
  const post = Route.useLoaderData()

  return (
    &lt;div className=&quot;p-2 space-y-2&quot;&gt;
      &lt;Link
        to=&quot;/posts&quot;
        className=&quot;block py-1 text-blue-800 hover:text-blue-600&quot;
      &gt;
        ← All Posts
      &lt;/Link&gt;
      &lt;h4 className=&quot;text-xl font-bold underline&quot;&gt;{post.title}&lt;/h4&gt;
      &lt;div className=&quot;text-sm&quot;&gt;{post.body}&lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/styles/app.css]" value="@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    color-scheme: light dark;
  }

  * {
    @apply border-gray-200 dark:border-gray-800;
  }

  html,
  body {
    @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
  }

  .using-mouse * {
    outline: none !important;
  }
}
">
<input type="hidden" name="project[files][src/utils/posts.tsx]" value="// import { notFound } from &#39;@tanstack/react-router&#39;
// import { createServerFn } from &#39;@tanstack/react-start&#39;
import axios from &#39;redaxios&#39;

export type PostType = {
  id: string
  title: string
  body: string
}

export const fetchPost = async (postId: string) =&gt; {
  &#39;use server&#39;
  console.info(`Fetching post with id ${postId}...`)
  await new Promise((r) =&gt; setTimeout(r, 500))
  const post = await axios
    .get&lt;PostType&gt;(`https://jsonplaceholder.typicode.com/posts/${postId}`)
    .then((r) =&gt; r.data)
    .catch((err) =&gt; {
      if (err.status === 404) {
        // throw notFound()
      }
      throw err
    })

  return post
}

export const fetchPosts = async () =&gt; {
  &#39;use server&#39;
  console.info(&#39;Fetching posts...&#39;)
  await new Promise((r) =&gt; setTimeout(r, 500))
  return axios
    .get&lt;Array&lt;PostType&gt;&gt;(&#39;https://jsonplaceholder.typicode.com/posts&#39;)
    .then((r) =&gt; r.data.slice(0, 10))
}
">
<input type="hidden" name="project[files][src/utils/renderPosts.tsx]" value="&#39;use server&#39;

import React from &#39;react&#39;
import { fetchPosts } from &#39;./posts&#39;

export async function renderPosts() {
  const posts = await fetchPosts()

  posts.state = posts.state || {
    status: &#39;pending&#39;,
    promise: Promise.resolve(),
  }

  return (
    &lt;div className=&quot;p-2 flex gap-2&quot;&gt;
      &lt;ul className=&quot;list-disc pl-4&quot;&gt;
        {[...posts, { id: &#39;i-do-not-exist&#39;, title: &#39;Non-existent Post&#39; }]?.map(
          (post) =&gt; {
            return (
              &lt;li key={post.id} className=&quot;whitespace-nowrap&quot;&gt;
                {post.title.substring(0, 20)}
                {/* &lt;Link
                  to=&quot;/posts/$postId&quot;
                  params={{
                    postId: post.id,
                  }}
                  className=&quot;block py-1 text-blue-800 hover:text-blue-600&quot;
                  activeProps={{ className: &#39;text-black font-bold&#39; }}
                &gt;
                  &lt;div&gt;{post.title.substring(0, 20)}&lt;/div&gt;
                &lt;/Link&gt; */}
              &lt;/li&gt;
            )
          },
        )}
      &lt;/ul&gt;
      &lt;hr /&gt;
      &lt;React.Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
        &lt;DelayedDateViaSuspense state={posts.state} /&gt;
      &lt;/React.Suspense&gt;
    &lt;/div&gt;
  )
}

function DelayedDateViaSuspense({ state }) {
  // a component that will suspend for 1 second and then show the current date
  if (state.status === &#39;pending&#39;) {
    state.promise = new Promise&lt;void&gt;((resolve) =&gt; {
      setTimeout(() =&gt; {
        state.status = &#39;success&#39;
        resolve()
      }, 5000)
    })
    throw state.promise
  }

  return &lt;div&gt;{new Date().toISOString().replace(&#39;T&#39;, &#39; &#39;).split(&#39;.&#39;)[0]}&lt;/div&gt;
}

// ...fetchPosts
// posts
// ...5000
// timestamp
">
<input type="hidden" name="project[files][src/utils/seo.ts]" value="export const seo = ({
  title,
  description,
  keywords,
  image,
}: {
  title: string
  description?: string
  image?: string
  keywords?: string
}) =&gt; {
  const tags = [
    { title },
    { name: &#39;description&#39;, content: description },
    { name: &#39;keywords&#39;, content: keywords },
    { name: &#39;twitter:title&#39;, content: title },
    { name: &#39;twitter:description&#39;, content: description },
    { name: &#39;twitter:creator&#39;, content: &#39;@tannerlinsley&#39; },
    { name: &#39;twitter:site&#39;, content: &#39;@tannerlinsley&#39; },
    { name: &#39;og:type&#39;, content: &#39;website&#39; },
    { name: &#39;og:title&#39;, content: title },
    { name: &#39;og:description&#39;, content: description },
    ...(image
      ? [
          { name: &#39;twitter:image&#39;, content: image },
          { name: &#39;twitter:card&#39;, content: &#39;summary_large_image&#39; },
          { name: &#39;og:image&#39;, content: image },
        ]
      : []),
  ]

  return tags
}
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout/_nested-layout.tsx]" value="import { Link, Outlet } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute({
  component: LayoutComponent,
})

function LayoutComponent() {
  return (
    &lt;div&gt;
      &lt;div&gt;I&#39;m a nested pathless layout&lt;/div&gt;
      &lt;div className=&quot;flex gap-2 border-b&quot;&gt;
        &lt;Link
          to=&quot;/route-a&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          Go to route A
        &lt;/Link&gt;
        &lt;Link
          to=&quot;/route-b&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          Go to route B
        &lt;/Link&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;Outlet /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout/_nested-layout/route-a.tsx]" value="export const Route = createFileRoute({
  component: LayoutAComponent,
})

function LayoutAComponent() {
  return &lt;div&gt;I&#39;m A!&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout/_nested-layout/route-b.tsx]" value="export const Route = createFileRoute({
  component: LayoutBComponent,
})

function LayoutBComponent() {
  return &lt;div&gt;I&#39;m B!&lt;/div&gt;
}
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="tanstack-start-example-basic-rsc">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>