<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
.vinxi

/build/
/api/
/server/build
/public/build
.vinxi
# Sentry Config File
.env.sentry-build-plugin
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
">
<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][app.config.ts]" value="import { defineConfig } from &#39;@tanstack/react-start/config&#39;
import tsConfigPaths from &#39;vite-tsconfig-paths&#39;

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: [&#39;./tsconfig.json&#39;],
      }),
    ],
  },
  react: {
    exclude: [/packages/],
  },
} as Partial&lt;Parameters&lt;typeof defineConfig&gt;[0]&gt; as never)
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;@tanstack/form-example-react-tanstack-start&quot;,&quot;private&quot;:true,&quot;sideEffects&quot;:false,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vinxi dev&quot;,&quot;_build&quot;:&quot;vinxi build&quot;,&quot;start&quot;:&quot;vinxi start&quot;},&quot;dependencies&quot;:{&quot;@tanstack/react-form&quot;:&quot;https://pkg.pr.new/TanStack/form/@tanstack/react-form@9810565&quot;,&quot;@tanstack/react-router&quot;:&quot;^1.119.0&quot;,&quot;@tanstack/react-start&quot;:&quot;^1.119.2&quot;,&quot;@tanstack/react-store&quot;:&quot;^0.7.0&quot;,&quot;react&quot;:&quot;^19.0.0&quot;,&quot;react-dom&quot;:&quot;^19.0.0&quot;,&quot;vinxi&quot;:&quot;^0.5.6&quot;},&quot;devDependencies&quot;:{&quot;@types/node&quot;:&quot;^22.10.6&quot;,&quot;@types/react&quot;:&quot;^19.0.7&quot;,&quot;@types/react-dom&quot;:&quot;^19.0.3&quot;,&quot;@vitejs/plugin-react&quot;:&quot;^4.4.1&quot;,&quot;typescript&quot;:&quot;5.8.2&quot;,&quot;vite&quot;:&quot;^6.3.4&quot;,&quot;vite-tsconfig-paths&quot;:&quot;^5.1.4&quot;}}">
<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;./app/*&quot;]
    },
    &quot;noEmit&quot;: true
  }
}
">
<input type="hidden" name="project[files][app/client.tsx]" value="/// &lt;reference types=&quot;vinxi/types/client&quot; /&gt;
import { hydrateRoot } from &#39;react-dom/client&#39;
import { StartClient } from &#39;@tanstack/react-start&#39;
import { createRouter } from &#39;./router&#39;

const router = createRouter()

hydrateRoot(document, &lt;StartClient router={router} /&gt;)
">
<input type="hidden" name="project[files][app/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 { Route as rootRoute } from &#39;./routes/__root&#39;
import { Route as IndexImport } from &#39;./routes/index&#39;

// Create/Update Routes

const IndexRoute = IndexImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRoute,
} 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 IndexImport
      parentRoute: typeof rootRoute
    }
  }
}

// Create and export the route tree

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof IndexRoute
}

export interface FileRoutesByTo {
  &#39;/&#39;: typeof IndexRoute
}

export interface FileRoutesById {
  __root__: typeof rootRoute
  &#39;/&#39;: typeof IndexRoute
}

export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: &#39;/&#39;
  fileRoutesByTo: FileRoutesByTo
  to: &#39;/&#39;
  id: &#39;__root__&#39; | &#39;/&#39;
  fileRoutesById: FileRoutesById
}

export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
}

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
}

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;/&quot;: {
      &quot;filePath&quot;: &quot;index.tsx&quot;
    }
  }
}
ROUTE_MANIFEST_END */
">
<input type="hidden" name="project[files][app/router.tsx]" value="import { createRouter as createTanStackRouter } from &#39;@tanstack/react-router&#39;
import { routeTree } from &#39;./routeTree.gen&#39;

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    defaultPreload: &#39;intent&#39;,
    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][app/ssr.tsx]" value="/// &lt;reference types=&quot;vinxi/types/server&quot; /&gt;
import {
  createStartHandler,
  defaultStreamHandler,
} from &#39;@tanstack/react-start/server&#39;
import { getRouterManifest } from &#39;@tanstack/react-start/router-manifest&#39;

import { createRouter } from &#39;./router&#39;

export default createStartHandler({
  createRouter,
  getRouterManifest,
})(defaultStreamHandler)
">
<input type="hidden" name="project[files][app/routes/__root.tsx]" value="import {
  HeadContent,
  Outlet,
  Scripts,
  createRootRoute,
} from &#39;@tanstack/react-router&#39;

import type { ReactNode } from &#39;react&#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;,
      },
      {
        title: &#39;TanStack Form + Start&#39;,
      },
    ],
  }),
  component: RootComponent,
})

function RootComponent() {
  return (
    &lt;RootDocument&gt;
      &lt;Outlet /&gt;
    &lt;/RootDocument&gt;
  )
}

function RootDocument({ children }: Readonly&lt;{ children: ReactNode }&gt;) {
  return (
    &lt;html&gt;
      &lt;head&gt;
        &lt;HeadContent /&gt;
      &lt;/head&gt;
      &lt;body&gt;
        {children}
        &lt;Scripts /&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  )
}
">
<input type="hidden" name="project[files][app/routes/index.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import { mergeForm, useForm, useTransform } from &#39;@tanstack/react-form&#39;
import { useStore } from &#39;@tanstack/react-store&#39;
import { getFormDataFromServer, handleForm } from &#39;~/utils/form&#39;
import { formOpts } from &#39;~/utils/form-isomorphic&#39;

export const Route = createFileRoute(&#39;/&#39;)({
  component: Home,
  loader: async () =&gt; ({
    state: await getFormDataFromServer(),
  }),
})

function Home() {
  const { state } = Route.useLoaderData()

  const form = useForm({
    ...formOpts,
    transform: useTransform((baseForm) =&gt; mergeForm(baseForm, state), [state]),
  })

  const formErrors = useStore(form.store, (formState) =&gt; formState.errors)

  return (
    &lt;form action={handleForm.url} method=&quot;post&quot; encType={&#39;multipart/form-data&#39;}&gt;
      {formErrors.map((error) =&gt; (
        &lt;p key={error as never as string}&gt;{error}&lt;/p&gt;
      ))}

      &lt;form.Field
        name=&quot;age&quot;
        validators={{
          onChange: ({ value }) =&gt;
            value &lt; 8 ? &#39;Client validation: You must be at least 8&#39; : undefined,
        }}
      &gt;
        {(field) =&gt; {
          return (
            &lt;div&gt;
              &lt;input
                name=&quot;age&quot;
                type=&quot;number&quot;
                value={field.state.value}
                onChange={(e) =&gt; field.handleChange(e.target.valueAsNumber)}
              /&gt;
              {field.state.meta.errors.map((error) =&gt; (
                &lt;p key={error as string}&gt;{error}&lt;/p&gt;
              ))}
            &lt;/div&gt;
          )
        }}
      &lt;/form.Field&gt;
      &lt;form.Subscribe
        selector={(formState) =&gt; [formState.canSubmit, formState.isSubmitting]}
      &gt;
        {([canSubmit, isSubmitting]) =&gt; (
          &lt;button type=&quot;submit&quot; disabled={!canSubmit}&gt;
            {isSubmitting ? &#39;...&#39; : &#39;Submit&#39;}
          &lt;/button&gt;
        )}
      &lt;/form.Subscribe&gt;
    &lt;/form&gt;
  )
}
">
<input type="hidden" name="project[files][app/utils/form-isomorphic.ts]" value="import { formOptions } from &#39;@tanstack/react-form&#39;

export const formOpts = formOptions({
  defaultValues: {
    firstName: &#39;&#39;,
    age: 0,
  },
})
">
<input type="hidden" name="project[files][app/utils/form.tsx]" value="import { createServerFn } from &#39;@tanstack/react-start&#39;
import {
  ServerValidateError,
  createServerValidate,
  getFormData,
} from &#39;@tanstack/react-form/start&#39;
import { setResponseStatus } from &#39;@tanstack/react-start/server&#39;
import { formOpts } from &#39;./form-isomorphic&#39;

const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: ({ value }) =&gt; {
    if (value.age &lt; 12) {
      return &#39;Server validation: You must be at least 12 to sign up&#39;
    }
  },
})

export const handleForm = createServerFn({
  method: &#39;POST&#39;,
})
  .validator((data: unknown) =&gt; {
    if (!(data instanceof FormData)) {
      throw new Error(&#39;Invalid form data&#39;)
    }
    return data
  })
  .handler(async (ctx) =&gt; {
    try {
      const validatedData = await serverValidate(ctx.data)
      console.log(&#39;validatedData&#39;, validatedData)
      // Persist the form data to the database
      // await sql`
      //   INSERT INTO users (name, email, password)
      //   VALUES (${validatedData.name}, ${validatedData.email}, ${validatedData.password})
      // `
    } catch (e) {
      if (e instanceof ServerValidateError) {
        // Log form errors or do any other logic here
        return e.response
      }

      // Some other error occurred when parsing the form
      console.error(e)
      setResponseStatus(500)
      return &#39;There was an internal error&#39;
    }

    return &#39;Form has validated successfully&#39;
  })

export const getFormDataFromServer = createServerFn({ method: &#39;GET&#39; }).handler(
  async () =&gt; {
    return getFormData()
  },
)
">
<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/form-example-react-tanstack-start">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>