<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
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
">
<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 Vercel!

- [Vercel](https://vercel.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-static&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 &amp;&amp; tsc --noEmit&quot;,&quot;start&quot;:&quot;vite start&quot;},&quot;dependencies&quot;:{&quot;@tanstack/react-router&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router@cf4b4ebd38a9ec1de8ab9208e59f41d518fb27e6&quot;,&quot;@tanstack/react-router-devtools&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@cf4b4ebd38a9ec1de8ab9208e59f41d518fb27e6&quot;,&quot;@tanstack/react-start&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-start@cf4b4ebd38a9ec1de8ab9208e59f41d518fb27e6&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.5.5&quot;},&quot;devDependencies&quot;:{&quot;@types/node&quot;:&quot;^22.5.4&quot;,&quot;@types/react&quot;:&quot;^19.0.8&quot;,&quot;@types/react-dom&quot;:&quot;^19.0.3&quot;,&quot;autoprefixer&quot;:&quot;^10.4.20&quot;,&quot;postcss&quot;:&quot;^8.4.49&quot;,&quot;tailwindcss&quot;:&quot;^3.4.15&quot;,&quot;typescript&quot;:&quot;^5.6.2&quot;,&quot;vite&quot;:&quot;^6.3.5&quot;,&quot;vite-tsconfig-paths&quot;:&quot;^5.1.3&quot;}}">
<input type="hidden" name="project[files][postcss.config.cjs]" value="module.exports = {
  plugins: [
    require(&#39;tailwindcss/nesting&#39;),
    require(&#39;tailwindcss&#39;),
    require(&#39;autoprefixer&#39;),
  ],
}
">
<input type="hidden" name="project[files][tailwind.config.cjs]" value="/** @type {import(&#39;tailwindcss&#39;).Config} */
module.exports = {
  content: [&#39;./src/**/*.{js,ts,jsx,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({
      spa: {
        enabled: true,
        prerender: {
          crawlLinks: true,
        },
      },
      sitemap: {
        host: &#39;https://localhost:3000&#39;,
      },
    }),
  ],
})
">
<input type="hidden" name="project[files][public/android-chrome-192x192.png]" value="https://pkg.pr.new/template/35e229bd-afc2-4e65-8896-9f8fc973ed30">
<input type="hidden" name="project[files][public/android-chrome-512x512.png]" value="https://pkg.pr.new/template/e673d2ba-8c58-4334-b1b6-ed5527457eef">
<input type="hidden" name="project[files][public/apple-touch-icon.png]" value="https://pkg.pr.new/template/a6680e41-5428-4785-a3fe-b1deecd3173f">
<input type="hidden" name="project[files][public/favicon-16x16.png]" value="https://pkg.pr.new/template/a85c6aa3-a86c-41b3-a04e-0782461ca56e">
<input type="hidden" name="project[files][public/favicon-32x32.png]" value="https://pkg.pr.new/template/c3267718-2dbd-4222-8b37-3c1a374f967a">
<input type="hidden" name="project[files][public/favicon.ico]" value="https://pkg.pr.new/template/8da2766c-02eb-4884-aebc-9589ec700a85">
<input type="hidden" name="project[files][public/favicon.png]" value="https://pkg.pr.new/template/5f0aaa04-ba1a-4295-993c-43ca07fbf6f2">
<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 { Route as rootRouteImport } from &#39;./routes/__root&#39;
import { Route as UsersRouteImport } from &#39;./routes/users&#39;
import { Route as RedirectRouteImport } from &#39;./routes/redirect&#39;
import { Route as PostsRouteImport } from &#39;./routes/posts&#39;
import { Route as DeferredRouteImport } from &#39;./routes/deferred&#39;
import { Route as PathlessLayoutRouteImport } from &#39;./routes/_pathlessLayout&#39;
import { Route as IndexRouteImport } from &#39;./routes/index&#39;
import { Route as UsersIndexRouteImport } from &#39;./routes/users.index&#39;
import { Route as PostsIndexRouteImport } from &#39;./routes/posts.index&#39;
import { Route as UsersUserIdRouteImport } from &#39;./routes/users.$userId&#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;

const UsersRoute = UsersRouteImport.update({
  id: &#39;/users&#39;,
  path: &#39;/users&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const RedirectRoute = RedirectRouteImport.update({
  id: &#39;/redirect&#39;,
  path: &#39;/redirect&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const PostsRoute = PostsRouteImport.update({
  id: &#39;/posts&#39;,
  path: &#39;/posts&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const DeferredRoute = DeferredRouteImport.update({
  id: &#39;/deferred&#39;,
  path: &#39;/deferred&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const PathlessLayoutRoute = PathlessLayoutRouteImport.update({
  id: &#39;/_pathlessLayout&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const UsersIndexRoute = UsersIndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; UsersRoute,
} as any)
const PostsIndexRoute = PostsIndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; PostsRoute,
} as any)
const UsersUserIdRoute = UsersUserIdRouteImport.update({
  id: &#39;/$userId&#39;,
  path: &#39;/$userId&#39;,
  getParentRoute: () =&gt; UsersRoute,
} 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; rootRouteImport,
} 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)

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof IndexRoute
  &#39;/deferred&#39;: typeof DeferredRoute
  &#39;/posts&#39;: typeof PostsRouteWithChildren
  &#39;/redirect&#39;: typeof RedirectRoute
  &#39;/users&#39;: typeof UsersRouteWithChildren
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/users/$userId&#39;: typeof UsersUserIdRoute
  &#39;/posts/&#39;: typeof PostsIndexRoute
  &#39;/users/&#39;: typeof UsersIndexRoute
  &#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;/deferred&#39;: typeof DeferredRoute
  &#39;/redirect&#39;: typeof RedirectRoute
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/users/$userId&#39;: typeof UsersUserIdRoute
  &#39;/posts&#39;: typeof PostsIndexRoute
  &#39;/users&#39;: typeof UsersIndexRoute
  &#39;/route-a&#39;: typeof PathlessLayoutNestedLayoutRouteARoute
  &#39;/route-b&#39;: typeof PathlessLayoutNestedLayoutRouteBRoute
  &#39;/posts/$postId/deep&#39;: typeof PostsPostIdDeepRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  &#39;/&#39;: typeof IndexRoute
  &#39;/_pathlessLayout&#39;: typeof PathlessLayoutRouteWithChildren
  &#39;/deferred&#39;: typeof DeferredRoute
  &#39;/posts&#39;: typeof PostsRouteWithChildren
  &#39;/redirect&#39;: typeof RedirectRoute
  &#39;/users&#39;: typeof UsersRouteWithChildren
  &#39;/_pathlessLayout/_nested-layout&#39;: typeof PathlessLayoutNestedLayoutRouteWithChildren
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/users/$userId&#39;: typeof UsersUserIdRoute
  &#39;/posts/&#39;: typeof PostsIndexRoute
  &#39;/users/&#39;: typeof UsersIndexRoute
  &#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;/deferred&#39;
    | &#39;/posts&#39;
    | &#39;/redirect&#39;
    | &#39;/users&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/users/$userId&#39;
    | &#39;/posts/&#39;
    | &#39;/users/&#39;
    | &#39;/route-a&#39;
    | &#39;/route-b&#39;
    | &#39;/posts/$postId/deep&#39;
  fileRoutesByTo: FileRoutesByTo
  to:
    | &#39;/&#39;
    | &#39;/deferred&#39;
    | &#39;/redirect&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/users/$userId&#39;
    | &#39;/posts&#39;
    | &#39;/users&#39;
    | &#39;/route-a&#39;
    | &#39;/route-b&#39;
    | &#39;/posts/$postId/deep&#39;
  id:
    | &#39;__root__&#39;
    | &#39;/&#39;
    | &#39;/_pathlessLayout&#39;
    | &#39;/deferred&#39;
    | &#39;/posts&#39;
    | &#39;/redirect&#39;
    | &#39;/users&#39;
    | &#39;/_pathlessLayout/_nested-layout&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/users/$userId&#39;
    | &#39;/posts/&#39;
    | &#39;/users/&#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
  DeferredRoute: typeof DeferredRoute
  PostsRoute: typeof PostsRouteWithChildren
  RedirectRoute: typeof RedirectRoute
  UsersRoute: typeof UsersRouteWithChildren
  PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
}

declare module &#39;@tanstack/react-router&#39; {
  interface FileRoutesByPath {
    &#39;/users&#39;: {
      id: &#39;/users&#39;
      path: &#39;/users&#39;
      fullPath: &#39;/users&#39;
      preLoaderRoute: typeof UsersRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/redirect&#39;: {
      id: &#39;/redirect&#39;
      path: &#39;/redirect&#39;
      fullPath: &#39;/redirect&#39;
      preLoaderRoute: typeof RedirectRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/posts&#39;: {
      id: &#39;/posts&#39;
      path: &#39;/posts&#39;
      fullPath: &#39;/posts&#39;
      preLoaderRoute: typeof PostsRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/deferred&#39;: {
      id: &#39;/deferred&#39;
      path: &#39;/deferred&#39;
      fullPath: &#39;/deferred&#39;
      preLoaderRoute: typeof DeferredRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/_pathlessLayout&#39;: {
      id: &#39;/_pathlessLayout&#39;
      path: &#39;&#39;
      fullPath: &#39;&#39;
      preLoaderRoute: typeof PathlessLayoutRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/&#39;: {
      id: &#39;/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/users/&#39;: {
      id: &#39;/users/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/users/&#39;
      preLoaderRoute: typeof UsersIndexRouteImport
      parentRoute: typeof UsersRoute
    }
    &#39;/posts/&#39;: {
      id: &#39;/posts/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/posts/&#39;
      preLoaderRoute: typeof PostsIndexRouteImport
      parentRoute: typeof PostsRoute
    }
    &#39;/users/$userId&#39;: {
      id: &#39;/users/$userId&#39;
      path: &#39;/$userId&#39;
      fullPath: &#39;/users/$userId&#39;
      preLoaderRoute: typeof UsersUserIdRouteImport
      parentRoute: typeof UsersRoute
    }
    &#39;/posts/$postId&#39;: {
      id: &#39;/posts/$postId&#39;
      path: &#39;/$postId&#39;
      fullPath: &#39;/posts/$postId&#39;
      preLoaderRoute: typeof PostsPostIdRouteImport
      parentRoute: typeof PostsRoute
    }
    &#39;/_pathlessLayout/_nested-layout&#39;: {
      id: &#39;/_pathlessLayout/_nested-layout&#39;
      path: &#39;&#39;
      fullPath: &#39;&#39;
      preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteImport
      parentRoute: typeof PathlessLayoutRoute
    }
    &#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 rootRouteImport
    }
    &#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 PathlessLayoutNestedLayoutRoute
    }
    &#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 PathlessLayoutNestedLayoutRoute
    }
  }
}

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)

interface UsersRouteChildren {
  UsersUserIdRoute: typeof UsersUserIdRoute
  UsersIndexRoute: typeof UsersIndexRoute
}

const UsersRouteChildren: UsersRouteChildren = {
  UsersUserIdRoute: UsersUserIdRoute,
  UsersIndexRoute: UsersIndexRoute,
}

const UsersRouteWithChildren = UsersRoute._addFileChildren(UsersRouteChildren)

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  PathlessLayoutRoute: PathlessLayoutRouteWithChildren,
  DeferredRoute: DeferredRoute,
  PostsRoute: PostsRouteWithChildren,
  RedirectRoute: RedirectRoute,
  UsersRoute: UsersRouteWithChildren,
  PostsPostIdDeepRoute: PostsPostIdDeepRoute,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()
">
<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/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(&#39;DefaultCatchBoundary Error:&#39;, 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="/// &lt;reference types=&quot;vite/client&quot; /&gt;
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;RootLayout&gt;
        &lt;DefaultCatchBoundary {...props} /&gt;
      &lt;/RootLayout&gt;
    )
  },
  notFoundComponent: () =&gt; &lt;NotFound /&gt;,
  component: RootComponent,
})

function RootComponent() {
  return (
    &lt;RootLayout&gt;
      &lt;Outlet /&gt;
    &lt;/RootLayout&gt;
  )
}

function RootLayout({ 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;{&#39; &#39;}
          &lt;Link
            to=&quot;/users&quot;
            activeProps={{
              className: &#39;font-bold&#39;,
            }}
          &gt;
            Users
          &lt;/Link&gt;{&#39; &#39;}
          &lt;Link
            to=&quot;/route-a&quot;
            activeProps={{
              className: &#39;font-bold&#39;,
            }}
          &gt;
            Pathless Layout
          &lt;/Link&gt;{&#39; &#39;}
          &lt;Link
            to=&quot;/deferred&quot;
            activeProps={{
              className: &#39;font-bold&#39;,
            }}
          &gt;
            Deferred
          &lt;/Link&gt;{&#39; &#39;}
          &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;
        {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, createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/_pathlessLayout&#39;)({
  component: PathlessLayoutComponent,
})

function PathlessLayoutComponent() {
  return (
    &lt;div className=&quot;p-2&quot;&gt;
      &lt;div className=&quot;border-b&quot;&gt;I&#39;m a pathless layout&lt;/div&gt;
      &lt;div&gt;
        &lt;Outlet /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/deferred.tsx]" value="import { Await, createFileRoute } from &#39;@tanstack/react-router&#39;
import { createServerFn } from &#39;@tanstack/react-start&#39;
import { Suspense, useState } from &#39;react&#39;

const personServerFn = createServerFn({ method: &#39;GET&#39;, type: &#39;static&#39; })
  .validator((d: string) =&gt; d)
  .handler(({ data: name }) =&gt; {
    return { name, randomNumber: Math.floor(Math.random() * 100) }
  })

const slowServerFn = createServerFn({ method: &#39;GET&#39;, type: &#39;static&#39; })
  .validator((d: string) =&gt; d)
  .handler(async ({ data: name }) =&gt; {
    await new Promise((r) =&gt; setTimeout(r, 1000))
    return { name, randomNumber: Math.floor(Math.random() * 100) }
  })

export const Route = createFileRoute(&#39;/deferred&#39;)({
  loader: async () =&gt; {
    return {
      deferredStuff: new Promise&lt;string&gt;((r) =&gt;
        setTimeout(() =&gt; r(&#39;Hello deferred!&#39;), 2000),
      ),
      deferredPerson: slowServerFn({ data: &#39;Tanner Linsley&#39; }),
      person: await personServerFn({ data: &#39;John Doe&#39; }),
    }
  },
  component: Deferred,
})

function Deferred() {
  const [count, setCount] = useState(0)
  const { deferredStuff, deferredPerson, person } = Route.useLoaderData()

  return (
    &lt;div className=&quot;p-2&quot;&gt;
      &lt;div data-testid=&quot;regular-person&quot;&gt;
        {person.name} - {person.randomNumber}
      &lt;/div&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading person...&lt;/div&gt;}&gt;
        &lt;Await
          promise={deferredPerson}
          children={(data) =&gt; (
            &lt;div data-testid=&quot;deferred-person&quot;&gt;
              {data.name} - {data.randomNumber}
            &lt;/div&gt;
          )}
        /&gt;
      &lt;/Suspense&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading stuff...&lt;/div&gt;}&gt;
        &lt;Await
          promise={deferredStuff}
          children={(data) =&gt; &lt;h3 data-testid=&quot;deferred-stuff&quot;&gt;{data}&lt;/h3&gt;}
        /&gt;
      &lt;/Suspense&gt;
      &lt;div&gt;Count: {count}&lt;/div&gt;
      &lt;div&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(&#39;/&#39;)({
  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, createFileRoute } from &#39;@tanstack/react-router&#39;
import { fetchPost } from &#39;../utils/posts&#39;
import type { ErrorComponentProps } from &#39;@tanstack/react-router&#39;
import { NotFound } from &#39;~/components/NotFound&#39;

export const Route = createFileRoute(&#39;/posts/$postId&#39;)({
  loader: ({ params: { postId } }) =&gt; fetchPost({ 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() {
  const post = Route.useLoaderData()

  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;inline-block py-1 text-blue-800 hover:text-blue-600&quot;
      &gt;
        Deep View
      &lt;/Link&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts.index.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(&#39;/posts/&#39;)({
  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 { Link, Outlet, createFileRoute } from &#39;@tanstack/react-router&#39;
import { fetchPosts } from &#39;../utils/posts&#39;

export const Route = createFileRoute(&#39;/posts&#39;)({
  loader: async () =&gt; fetchPosts(),
  component: PostsComponent,
})

function PostsComponent() {
  const posts = Route.useLoaderData()

  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;
                &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;Outlet /&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts_.$postId.deep.tsx]" value="import { Link, createFileRoute } from &#39;@tanstack/react-router&#39;
import { fetchPost } from &#39;../utils/posts&#39;
import { PostErrorComponent } from &#39;./posts.$postId&#39;

export const Route = createFileRoute(&#39;/posts_/$postId/deep&#39;)({
  loader: ({ params: { postId } }) =&gt;
    fetchPost({
      data: 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/routes/redirect.tsx]" value="import { redirect, createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/redirect&#39;)({
  beforeLoad: async () =&gt; {
    throw redirect({
      to: &#39;/posts&#39;,
    })
  },
})
">
<input type="hidden" name="project[files][src/routes/users.$userId.tsx]" value="import { ErrorComponent, createFileRoute } from &#39;@tanstack/react-router&#39;
import axios from &#39;redaxios&#39;
import { createServerFn } from &#39;@tanstack/react-start&#39;
import type { ErrorComponentProps } from &#39;@tanstack/react-router&#39;
import type { User } from &#39;~/utils/users&#39;
import { NotFound } from &#39;~/components/NotFound&#39;

const fetchUser = createServerFn({ method: &#39;GET&#39;, type: &#39;static&#39; })
  .validator((d: string) =&gt; d)
  .handler(async ({ data: userId }) =&gt; {
    return axios
      .get&lt;User&gt;(&#39;https://jsonplaceholder.typicode.com/users/&#39; + userId)
      .then((d) =&gt; ({
        id: d.data.id,
        name: d.data.name,
        email: d.data.email,
      }))
      .catch((e) =&gt; {
        throw new Error(&#39;Failed to fetch user&#39;)
      })
  })

export const Route = createFileRoute(&#39;/users/$userId&#39;)({
  loader: ({ params: { userId } }) =&gt; fetchUser({ data: userId }),
  errorComponent: UserErrorComponent,
  component: UserComponent,
  notFoundComponent: () =&gt; {
    return &lt;NotFound&gt;User not found&lt;/NotFound&gt;
  },
})

export function UserErrorComponent({ error }: ErrorComponentProps) {
  return &lt;ErrorComponent error={error} /&gt;
}

function UserComponent() {
  const user = Route.useLoaderData()

  if (&#39;error&#39; in user) {
    return &lt;NotFound&gt;User not found&lt;/NotFound&gt;
  }

  return (
    &lt;div className=&quot;space-y-2&quot;&gt;
      &lt;h4 className=&quot;text-xl font-bold underline&quot;&gt;{user.name}&lt;/h4&gt;
      &lt;div className=&quot;text-sm&quot;&gt;{user.email}&lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/users.index.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(&#39;/users/&#39;)({
  component: UsersIndexComponent,
})

function UsersIndexComponent() {
  return &lt;div&gt;Select a user.&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/users.tsx]" value="import { Link, Outlet, createFileRoute } from &#39;@tanstack/react-router&#39;
import axios from &#39;redaxios&#39;
import { createServerFn } from &#39;@tanstack/react-start&#39;
import type { User } from &#39;../utils/users&#39;

const fetchUsers = createServerFn({ method: &#39;GET&#39;, type: &#39;static&#39; }).handler(
  async () =&gt; {
    console.info(&#39;Fetching users...&#39;)
    const res = await axios.get&lt;Array&lt;User&gt;&gt;(
      &#39;https://jsonplaceholder.typicode.com/users&#39;,
    )

    return res.data
      .slice(0, 10)
      .map((u) =&gt; ({ id: u.id, name: u.name, email: u.email }))
  },
)

export const Route = createFileRoute(&#39;/users&#39;)({
  loader: async () =&gt; fetchUsers(),
  component: UsersComponent,
})

function UsersComponent() {
  const users = Route.useLoaderData()

  return (
    &lt;div className=&quot;p-2 flex gap-2&quot;&gt;
      &lt;ul className=&quot;list-disc pl-4&quot;&gt;
        {[
          ...users,
          { id: &#39;i-do-not-exist&#39;, name: &#39;Non-existent User&#39;, email: &#39;&#39; },
        ].map((user) =&gt; {
          return (
            &lt;li key={user.id} className=&quot;whitespace-nowrap&quot;&gt;
              &lt;Link
                to=&quot;/users/$userId&quot;
                params={{
                  userId: String(user.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;{user.name}&lt;/div&gt;
              &lt;/Link&gt;
            &lt;/li&gt;
          )
        })}
      &lt;/ul&gt;
      &lt;hr /&gt;
      &lt;Outlet /&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/styles/app.css]" value="@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  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/loggingMiddleware.tsx]" value="import { createMiddleware } from &#39;@tanstack/react-start&#39;

export const logMiddleware = createMiddleware({ type: &#39;function&#39; })
  .middleware([
    createMiddleware({ type: &#39;function&#39; })
      .client(async (ctx) =&gt; {
        const clientTime = new Date()

        return await ctx.next({
          context: {
            clientTime,
          },
          sendContext: {
            clientTime,
          },
        })
      })
      .server(async (ctx) =&gt; {
        const serverTime = new Date()

        return await ctx.next({
          sendContext: {
            serverTime,
            durationToServer:
              serverTime.getTime() - ctx.context.clientTime.getTime(),
          },
        })
      }),
  ])
  .client(async (options) =&gt; {
    const result = await options.next()

    const now = new Date()

    console.log(&#39;Client Req/Res:&#39;, {
      duration: result.context.clientTime.getTime() - now.getTime(),
      durationToServer: result.context.durationToServer,
      durationFromServer: now.getTime() - result.context.serverTime.getTime(),
    })

    return result
  })
">
<input type="hidden" name="project[files][src/utils/posts.tsx]" value="import { createServerFn } from &#39;@tanstack/react-start&#39;
import axios from &#39;redaxios&#39;
import { notFound } from &#39;@tanstack/react-router&#39;
import { logMiddleware } from &#39;./loggingMiddleware&#39;

export type PostType = {
  id: string
  title: string
  body: string
}

export const fetchPost = createServerFn({ method: &#39;GET&#39;, type: &#39;static&#39; })
  .middleware([logMiddleware])
  .validator((d: string) =&gt; d)
  .handler(async ({ data }) =&gt; {
    console.info(`Fetching post with id ${data}...`)
    const post = await axios
      .get&lt;PostType&gt;(`https://jsonplaceholder.typicode.com/posts/${data}`)
      .catch((err) =&gt; {
        if (err.status === 404) {
          throw notFound()
        }
        throw err
      })
      .then((r) =&gt; r.data)

    return post
  })

export const fetchPosts = createServerFn({ method: &#39;GET&#39;, type: &#39;static&#39; })
  .middleware([logMiddleware])
  .handler(async () =&gt; {
    console.info(&#39;Fetching posts...&#39;)
    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/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/utils/users.tsx]" value="export type User = {
  id: number
  name: string
  email: string
}

export const DEPLOY_URL = &#39;http://localhost:3000&#39;
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout/_nested-layout.tsx]" value="import { Link, Outlet, createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/_pathlessLayout/_nested-layout&#39;)({
  component: LayoutComponent,
})

function LayoutComponent() {
  return (
    &lt;div&gt;
      &lt;div&gt;I&#39;m a nested 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="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(&#39;/_pathlessLayout/_nested-layout/route-a&#39;)(
  {
    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="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(&#39;/_pathlessLayout/_nested-layout/route-b&#39;)(
  {
    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-static">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>