docs: udpate

docs/config.json

@@ -58,7 +58,7 @@
           "children": [
             {
               "label": "Quick Start",
-              "to": "react/quick-start"
+              "to": "framework/react/quick-start"
             }
           ]
         },
@@ -67,19 +67,19 @@
           "children": [
             {
               "label": "useForm",
-              "to": "react/reference/useForm"
+              "to": "framework/react/reference/useForm"
             },
             {
               "label": "useField",
-              "to": "react/reference/useField"
+              "to": "framework/react/reference/useField"
             },
             {
               "label": "Field",
-              "to": "react/reference/Field"
+              "to": "framework/react/reference/Field"
             },
             {
               "label": "FormApi",
-              "to": "react/reference/formApi"
+              "to": "framework/react/reference/formApi"
             }
           ]
         },
@@ -88,7 +88,7 @@
           "children": [
             {
               "label": "Simple",
-              "to": "react/examples/simple"
+              "to": "framework/react/examples/simple"
             }
           ]
         }

docs/framework/react/reference/Field.md

@@ -33,9 +33,13 @@ export function Field<TData, TFormData>({
 
 A functional React component that renders a form field.
 
-- `children: (fieldApi: FieldApi<TData, TFormData>) => any`
+- ```tsx
+  children: (fieldApi: FieldApi<TData, TFormData>) => any
+  ```
   - A render function that takes a field API instance and returns a React element.
-- `fieldOptions: FieldOptions<TData, TFormData>`
+- ```tsx
+  fieldOptions: FieldOptions<TData, TFormData>
+  ```
   - The field options.
 
 The `Field` component uses the `useField` hook internally to manage the field instance.
@@ -50,5 +54,7 @@ export function createFieldComponent<TFormData>(
 
 A factory function that creates a connected field component for a specific form API instance.
 
-- `formApi: FormApi<TFormData>`
+- ```tsx
+  formApi: FormApi<TFormData>
+  ```
   - The form API instance to connect the field component to.

docs/framework/react/reference/formApi.md

@@ -7,13 +7,23 @@ title: Form API
 
 When using `@tanstack/react-form`, the [core form API](../../core//reference/formApi.md) is extended with additional methods for React-specific functionality:
 
-- `Form: FormComponent`
+- ```tsx
+  Form: FormComponent
+  ```
   - A pre-bound and type-safe form component, specific to this forms instance.
-- `Field: FieldComponent<TFormData>`
+- ```tsx
+  Field: FieldComponent<TFormData>
+  ```
   - A pre-bound and type-safe field component, specific to this forms instance.
-- `useField: UseField<TFormData>`
+- ```tsx
+  useField: UseField<TFormData>
+  ```
   - A pre-bound and type-safe custom hook to use fields from this form instance.
-- `useStore<TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected): TSelected`
+- ```tsx
+  useStore<TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected): TSelected
+  ```
   - A custom hook to use the form store.
-- `Subscribe<TSelected = NoInfer<FormState<TFormData>>>(props: {selector?: (state: NoInfer<FormState<TFormData>>) => TSelected; children: ((state: NoInfer<TSelected>) => React.ReactNode) | React.ReactNode}): any`
+- ```tsx
+  Subscribe<TSelected = NoInfer<FormState<TFormData>>>(props: {selector?: (state: NoInfer<FormState<TFormData>>) => TSelected; children: ((state: NoInfer<TSelected>) => React.ReactNode) | React.ReactNode}): any
+  ```
   - A subscription component to provide the selected form state to children.

docs/framework/react/reference/useField.md

@@ -28,13 +28,17 @@ export function useField<TData, TFormData>(
 
 A hook for managing a field in a form.
 
-- `opts: FieldOptions<TData, TFormData>`
+- ```tsx
+  opts: FieldOptions<TData, TFormData>
+  ```
   - An object with field options.
 
 #### Returns
 
-- `FieldApi<TData, TFormData>`
-  - `FieldApi` instance for the specified field.
+- ```tsx
+  FieldApi<TData, TFormData>
+  ```
+  - The `FieldApi` instance for the specified field.
 
 ### `createUseField`
 

docs/overview.md

@@ -3,20 +3,117 @@ id: overview
 title: Overview
 ---
 
+TanStack Form is the ultimate solution for handling forms in web applications, providing a powerful and flexible approach to form management. Designed with first-class TypeScript support, headless UI components, and a framework-agnostic design, it streamlines form handling and ensures a seamless experience across various front-end frameworks.
+
 ## Motivation
 
-TODO
+Most web frameworks do not offer a comprehensive solution for form handling, leaving developers to create their own custom implementations or rely on less-capable libraries. This often results in a lack of consistency, poor performance, and increased development time. TanStack Form aims to address these challenges by providing an all-in-one solution for managing forms that is both powerful and easy to use.
+
+With TanStack Form, developers can tackle common form-related challenges such as:
+
+- Reactive data binding and state management
+- Complex validation and error handling
+- Accessibility and responsive design
+- Internationalization and localization
+- Cross-platform compatibility and custom styling
+
+By providing a complete solution for these challenges, TanStack Form empowers developers to build robust and user-friendly forms with ease.
 
 ## Enough talk, show me some code already!
 
-In the example below, you can see React Form in its most basic and simple form being used to fetch the GitHub stats for the React Form GitHub project itself:
+In the example below, you can see TanStack Form in action, showcasing its simplicity and effectiveness in handling form data:
 
 [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-form/tree/main/examples/react/simple)
 
 ```tsx
-TODO
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { useForm, FieldApi } from '@tanstack/react-form'
+
+function FieldInfo({ field }: { field: FieldApi<any, any> }) {
+  return (
+    <>
+      {field.state.meta.touchedError ? (
+        <em>{field.state.meta.touchedError}</em>
+      ) : null}{' '}
+      {field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+
+export default function App() {
+  const form = useForm({
+    // Memoize your default values to prevent re-renders
+    defaultValues: React.useMemo(
+      () => ({
+        firstName: '',
+        lastName: '',
+      }),
+      [],
+    ),
+    onSubmit: async (values) => {
+      // Do something with form data
+      console.log(values)
+    },
+  })
+
+  return (
+    <div>
+      <h1>Simple Form Example</h1>
+      {/* A pre-bound form component */}
+      <form.Form>
+        <div>
+          {/* A type-safe and pre-bound field component*/}
+          <form.Field
+            name="firstName"
+            validate={(value) => !value && 'A first name is required'}
+            validateAsyncOn="change"
+            validateAsyncDebounceMs={500}
+            validateAsync={async (value) => {
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+              return (
+                value.includes('error') && 'No "error" allowed in first name'
+              )
+            }}
+            children={(field) => (
+              // Avoid hasty abstractions. Render props are great!
+              <>
+                <label htmlFor={field.name}>First Name:</label>
+                <input name={field.name} {...field.getInputProps()} />
+                <FieldInfo field={field} />
+              </>
+            )}
+          />
+        </div>
+        <div>
+          <form.Field
+            name="lastName"
+            children={(field) => (
+              <>
+                <label htmlFor={field.name}>Last Name:</label>
+                <input name={field.name} {...field.getInputProps()} />
+                <FieldInfo field={field} />
+              </>
+            )}
+          />
+        </div>
+        <form.Subscribe
+          selector={(state) => [state.canSubmit, state.isSubmitting]}
+          children={([canSubmit, isSubmitting]) => (
+            <button type="submit" disabled={!canSubmit}>
+              {isSubmitting ? '...' : 'Submit'}
+            </button>
+          )}
+        />
+      </form.Form>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')!
+ReactDOM.createRoot(rootElement).render(<App />)
 ```
 
 ## You talked me into it, so what now?
 
-- Learn React Form at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/useForm)
+- Learn React Form at your own pace with our thorough [Walkthrough Guide](../installation) and [API Reference](../reference/FormApi)