<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/start/config&#39;
import tsConfigPaths from &#39;vite-tsconfig-paths&#39;

export default defineConfig({
  vite: {
    plugins: () =&gt; [
      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/form-core&quot;: &quot;https://pkg.pr.new/TanStack/form/@tanstack/form-core@eb01133&quot;,
    &quot;@tanstack/react-form&quot;: &quot;https://pkg.pr.new/TanStack/form/@tanstack/react-form@eb01133&quot;,
    &quot;@tanstack/react-router&quot;: &quot;^1.47.1&quot;,
    &quot;@tanstack/start&quot;: &quot;^1.47.2&quot;,
    &quot;react&quot;: &quot;^18.3.1&quot;,
    &quot;react-dom&quot;: &quot;^18.3.1&quot;,
    &quot;vinxi&quot;: &quot;^0.4.1&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@types/node&quot;: &quot;^20.14.10&quot;,
    &quot;@types/react&quot;: &quot;^18.3.3&quot;,
    &quot;@types/react-dom&quot;: &quot;^18.3.0&quot;,
    &quot;@vitejs/plugin-react&quot;: &quot;^4.3.1&quot;,
    &quot;typescript&quot;: &quot;5.4.2&quot;,
    &quot;vite&quot;: &quot;^5.4.0&quot;,
    &quot;vite-tsconfig-paths&quot;: &quot;^5.0.1&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="import { hydrateRoot } from &#39;react-dom/client&#39;
import { StartClient } from &#39;@tanstack/start&#39;
import { createRouter } from &#39;./router&#39;

const router = createRouter()

hydrateRoot(document.getElementById(&#39;root&#39;)!, &lt;StartClient router={router} /&gt;)
">
<input type="hidden" name="project[files][app/routeTree.gen.ts]" value="/* prettier-ignore-start */

/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file is auto-generated by TanStack Router

// 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({
  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 const routeTree = rootRoute.addChildren({ IndexRoute })

/* prettier-ignore-end */

/* 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;,
  })

  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="import {
  createStartHandler,
  defaultStreamHandler,
} from &#39;@tanstack/start/server&#39;
import { getRouterManifest } from &#39;@tanstack/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 { createRootRoute } from &#39;@tanstack/react-router&#39;
import { Outlet, ScrollRestoration } from &#39;@tanstack/react-router&#39;
import { Body, Head, Html, Meta, Scripts } from &#39;@tanstack/start&#39;
import * as React from &#39;react&#39;

export const Route = createRootRoute({
  meta: () =&gt; [
    {
      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 }: { children: React.ReactNode }) {
  return (
    &lt;Html&gt;
      &lt;Head&gt;
        &lt;Meta /&gt;
      &lt;/Head&gt;
      &lt;Body&gt;
        {children}
        &lt;ScrollRestoration /&gt;
        &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 { formOpts, getFormDataFromServer, handleForm } from &#39;~/utils/form&#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 = form.useStore((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 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.tsx]" value="import { createServerFn } from &#39;@tanstack/start&#39;
import { formOptions } from &#39;@tanstack/react-form&#39;
import {
  ServerValidateError,
  createServerValidate,
  getFormData,
} from &#39;@tanstack/react-form/start&#39;

export const formOpts = formOptions({
  defaultValues: {
    firstName: &#39;&#39;,
    age: 0,
  },
})

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(
  &#39;POST&#39;,
  async (formData: FormData, ctx) =&gt; {
    try {
      await serverValidate(ctx, formData)
    } catch (e) {
      if (e instanceof ServerValidateError) {
        return e.response
      }

      // Some other error occurred when parsing the form
      console.error(e)
      return new Response(&#39;There was an internal error&#39;, {
        status: 500,
      })
    }

    return new Response(&#39;Form has validated successfully&#39;, {
      status: 200,
    })
  },
)

export const getFormDataFromServer = createServerFn(&#39;GET&#39;, async (_, ctx) =&gt; {
  return getFormData(ctx)
})
">
<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>