diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 73ff4218f..81962ae69 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -98,7 +98,7 @@ body:
   - type: dropdown
     id: adapter
     attributes:
-      label: Tanstack Form adapter
+      label: TanStack Form adapter
       description: |
         Please let us know which adapter of TanStack Form you were using when the issue occurred.
       options:
diff --git a/docs/config.json b/docs/config.json
index 583217bd1..483cad023 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -53,6 +53,15 @@
               "to": "framework/solid/quick-start"
             }
           ]
+        },
+        {
+          "label": "lit",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/lit/quick-start"
+            }
+          ]
         }
       ]
     },
@@ -278,6 +287,19 @@
               "to": "framework/solid/examples/valibot"
             }
           ]
+        },
+        {
+          "label": "lit",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "framework/lit/examples/simple"
+            },
+            {
+              "label": "UI Libraries",
+              "to": "framework/lit/examples/ui-libraries"
+            }
+          ]
         }
       ]
     }
diff --git a/docs/framework/lit/quick-start.md b/docs/framework/lit/quick-start.md
new file mode 100644
index 000000000..78345f778
--- /dev/null
+++ b/docs/framework/lit/quick-start.md
@@ -0,0 +1,65 @@
+---
+id: quick-start
+title: Quick Start
+---
+
+
+The bare minimum to get started with TanStack Form is to create a `TanstackFormController`:
+
+```ts
+interface Employee {
+  firstName: string
+  lastName: string
+  employed: boolean
+  jobTitle: string
+}
+
+#form = new TanstackFormController(this, {
+  defaultValues: {
+    employees: [] as Employee[],
+  },
+})
+```
+
+In this example `this` references the instance of your `LitElement` in which you want to use TanStack Form.
+
+To wire a form element in your template up with TanStack Form, use the `field` method of `TanstackFormController`:
+
+```ts
+export class TestForm extends LitElement {
+  render() {
+    return html`
+ <p>Please enter your first name></p>
+ ${this.form.field(
+      {
+        name: `firstName`,
+        validators: {
+          onChange: ({ value }) =>
+            value.length < 3 ? 'Not long enough' : undefined,
+        },
+      },
+      (field: FieldApi<Employee, 'firstName'>) => {
+        return html` <div>
+              <label>First Name</label>
+              <input
+                id="firstName"
+                type="text"
+                placeholder="First Name"
+                @blur="${() => field.handleBlur()}"
+                .value="${field.getValue()}"
+                @input="${(event: InputEvent) => {
+                  if (event.currentTarget) {
+                    const newValue = (event.currentTarget as HTMLInputElement).value;
+                    field.handleChange(newValue);
+                  }
+                }}"
+              />
+            </div>`
+      },
+    )}`;
+  }
+}
+```
+
+The first parameter of `field` is `FieldOptions` and the second is callback to render your element. Be aware that you need
+to handle updating the element and form yourself as seen in the example above.
diff --git a/docs/framework/react/guides/react-native.md b/docs/framework/react/guides/react-native.md
index 2cba9ddc0..af8e2e12d 100644
--- a/docs/framework/react/guides/react-native.md
+++ b/docs/framework/react/guides/react-native.md
@@ -3,7 +3,7 @@ id: react-native
 title: Usage with React Native
 ---
 
-Tanstack Form is headless and it should support React Native out-of-the-box without needing any additional configuration.
+TanStack Form is headless and it should support React Native out-of-the-box without needing any additional configuration.
 
 Here is an example:
 
diff --git a/examples/lit/simple/.eslintrc.cjs b/examples/lit/simple/.eslintrc.cjs
new file mode 100644
index 000000000..75ee331c1
--- /dev/null
+++ b/examples/lit/simple/.eslintrc.cjs
@@ -0,0 +1,15 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+  rules: {
+    'react/no-children-prop': 'off',
+  },
+}
+
+module.exports = config
diff --git a/examples/lit/simple/.gitignore b/examples/lit/simple/.gitignore
new file mode 100644
index 000000000..4673b022e
--- /dev/null
+++ b/examples/lit/simple/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/lit/simple/README.md b/examples/lit/simple/README.md
new file mode 100644
index 000000000..1cf889265
--- /dev/null
+++ b/examples/lit/simple/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/lit/simple/index.html b/examples/lit/simple/index.html
new file mode 100644
index 000000000..6bbd54321
--- /dev/null
+++ b/examples/lit/simple/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit + TS</title>
+    <script type="module" src="/src/index.ts"></script>
+  </head>
+  <body>
+    <tanstack-form-demo> </tanstack-form-demo>
+  </body>
+</html>
diff --git a/examples/lit/simple/package.json b/examples/lit/simple/package.json
new file mode 100644
index 000000000..7d2a228c2
--- /dev/null
+++ b/examples/lit/simple/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@tanstack/form-example-lit-simple",
+  "version": "0.0.1",
+  "main": "src/index.jsx",
+  "scripts": {
+    "dev": "vite --port=3001",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsc"
+  },
+  "dependencies": {
+    "@tanstack/lit-form": "<1.0.0",
+    "lit": "^3.1.1"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/lit/simple/src/index.ts b/examples/lit/simple/src/index.ts
new file mode 100644
index 000000000..46ce21735
--- /dev/null
+++ b/examples/lit/simple/src/index.ts
@@ -0,0 +1,230 @@
+import { LitElement, html, nothing } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { TanStackFormController } from '@tanstack/lit-form'
+import { repeat } from 'lit/directives/repeat.js'
+import { styles } from './styles.js'
+
+interface Employee {
+  firstName: string
+  lastName: string
+  employed: boolean
+  jobTitle?: string
+  about?: string
+}
+
+@customElement('tanstack-form-demo')
+export class TanStackFormDemo extends LitElement {
+  static styles = styles
+
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      employees: [] as Employee[],
+    },
+  })
+
+  render() {
+    return html`
+      <form
+        id="form"
+        @submit=${(e: Event) => {
+          e.preventDefault()
+        }}
+      >
+        <h1>TanStack Form - Lit Demo</h1>
+        ${this.#form.field(
+          {
+            name: 'employees',
+            defaultValue: [],
+          },
+          (employeesField) => {
+            return html`${repeat(
+                employeesField.state.value,
+                (_, index) => index,
+                (_, index) => {
+                  return html`
+                    ${this.#form.field(
+                      {
+                        name: `employees[${index}].firstName`,
+                        validators: {
+                          onChange: ({ value }: { value: string }) => {
+                            return value && value.length < 3
+                              ? 'Not long enough'
+                              : undefined
+                          },
+                        },
+                      },
+                      (field) => {
+                        return html` <div>
+                          <div class="container">
+                            <label>First Name</label>
+                            <input
+                              type="text"
+                              placeholder="First Name"
+                              .value="${field.state.value}"
+                              @blur="${() => field.handleBlur()}"
+                              @input="${(e: Event) => {
+                                const target = e.target as HTMLInputElement
+                                field.handleChange(target.value)
+                              }}"
+                            />
+                          </div>
+                          ${field.state.meta.touchedErrors.length
+                            ? html`${repeat(
+                                field.state.meta.touchedErrors,
+                                (__, idx) => idx,
+                                (error) => {
+                                  return html`<div class="container">
+                                    ${error}
+                                  </div>`
+                                },
+                              )}`
+                            : nothing}
+                        </div>`
+                      },
+                    )}
+                    ${this.#form.field(
+                      { name: `employees[${index}].lastName` },
+                      (lastNameField) => {
+                        return html` <div class="container">
+                          <label>Last Name</label>
+                          <input
+                            type="text"
+                            placeholder="Last Name"
+                            .value="${lastNameField.state.value}"
+                            @blur="${() => lastNameField.handleBlur()}"
+                            @input="${(e: Event) => {
+                              const target = e.target as HTMLInputElement
+                              lastNameField.handleChange(target.value)
+                            }}"
+                          />
+                        </div>`
+                      },
+                    )}
+                    ${this.#form.field(
+                      { name: `employees[${index}].about`, defaultValue: '' },
+                      (aboutField) => {
+                        return html` <div class="container">
+                          <label>About</label>
+                          <textarea
+                            style="width: 100%"
+                            .value="${aboutField.state.value}"
+                            @blur="${() => aboutField.handleBlur()}"
+                            @input="${(e: Event) => {
+                              const target = e.target as HTMLInputElement
+                              aboutField.handleChange(target.value)
+                            }}"
+                          ></textarea>
+                        </div>`
+                      },
+                    )}
+                    ${this.#form.field(
+                      { name: `employees[${index}].employed` },
+                      (employedField) => {
+                        return html`<div class="container">
+                            <label>Employed?</label>
+                            <input
+                              type="checkbox"
+                              @input="${() =>
+                                employedField.handleChange(
+                                  !employedField.state.value,
+                                )}"
+                              .checked="${employedField.state.value}"
+                              @blur="${() => employedField.handleBlur()}"
+                            />
+                          </div>
+                          ${employedField.state.value
+                            ? this.#form.field(
+                                {
+                                  name: `employees[${index}].jobTitle`,
+                                  defaultValue: '',
+                                  validators: {
+                                    onChange: ({
+                                      value,
+                                    }: {
+                                      value: string
+                                    }) => {
+                                      return value.length === 0
+                                        ? 'Needs to have a job here'
+                                        : null
+                                    },
+                                  },
+                                },
+                                (jobTitleField) => {
+                                  return html` <div>
+                                    <div class="container">
+                                      <label>Job Title</label>
+                                      <input
+                                        type="text"
+                                        placeholder="Job Title"
+                                        .value="${jobTitleField.state.value}"
+                                        @blur="${() =>
+                                          jobTitleField.handleBlur()}"
+                                        @input="${(e: Event) => {
+                                          const target =
+                                            e.target as HTMLInputElement
+                                          jobTitleField.handleChange(
+                                            target.value,
+                                          )
+                                        }}"
+                                      />
+                                    </div>
+                                    ${jobTitleField.state.meta.touchedErrors
+                                      .length
+                                      ? html`${repeat(
+                                          jobTitleField.state.meta
+                                            .touchedErrors,
+                                          (__, idx) => idx,
+                                          (error) => {
+                                            return html`<div class="container">
+                                              ${error}
+                                            </div>`
+                                          },
+                                        )}`
+                                      : nothing}
+                                  </div>`
+                                },
+                              )
+                            : ''} `
+                      },
+                    )}
+                  `
+                },
+              )}
+
+              <div class="container">
+                <button
+                  type="button"
+                  @click=${() => {
+                    employeesField.pushValue({
+                      firstName: '',
+                      lastName: '',
+                      employed: false,
+                    })
+                  }}
+                >
+                  Add employee
+                </button>
+              </div> `
+          },
+        )}
+
+        <div class="container">
+          <button type="submit" ?disabled=${this.#form.api.state.isSubmitting}>
+            ${this.#form.api.state.isSubmitting ? html` Submitting` : 'Submit'}
+          </button>
+          <button
+            type="button"
+            id="reset"
+            @click=${() => {
+              this.#form.api.reset()
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </form>
+      <pre>${JSON.stringify(this.#form.api.state, null, 2)}</pre>
+    `
+  }
+}
diff --git a/examples/lit/simple/src/styles.ts b/examples/lit/simple/src/styles.ts
new file mode 100644
index 000000000..ac6c95648
--- /dev/null
+++ b/examples/lit/simple/src/styles.ts
@@ -0,0 +1,66 @@
+import { css } from 'lit'
+
+export const styles = css`
+  form {
+    max-width: 600px;
+    margin: 10px auto;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    box-shadow: 1 1 2px rgba(0, 0, 0, 0.3);
+    padding: 10px;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
+  h1 {
+    text-align: center;
+    color: #333;
+  }
+
+  p {
+    margin: 10px auto;
+    line-height: 1.2em;
+    max-width: 500px;
+  }
+
+  .container {
+    margin: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+  }
+
+  label {
+    width: 120px;
+    text-align: right;
+    margin-right: 15px;
+    padding: 5px;
+  }
+
+  input {
+    padding: 5px;
+    flex: 1;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+
+  select {
+    flex: 1;
+    height: 24px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+
+  span {
+    color: #600;
+    font-weight: bold;
+    margin: 0 0 0 10px;
+    line-height: 26px;
+  }
+
+  button {
+    width: 80px;
+    display: block;
+    margin: 0 auto;
+  }
+`
diff --git a/examples/lit/simple/tsconfig.json b/examples/lit/simple/tsconfig.json
new file mode 100644
index 000000000..69e31ac92
--- /dev/null
+++ b/examples/lit/simple/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/lit/ui-libraries/.eslintrc.cjs b/examples/lit/ui-libraries/.eslintrc.cjs
new file mode 100644
index 000000000..75ee331c1
--- /dev/null
+++ b/examples/lit/ui-libraries/.eslintrc.cjs
@@ -0,0 +1,15 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+  rules: {
+    'react/no-children-prop': 'off',
+  },
+}
+
+module.exports = config
diff --git a/examples/lit/ui-libraries/.gitignore b/examples/lit/ui-libraries/.gitignore
new file mode 100644
index 000000000..4673b022e
--- /dev/null
+++ b/examples/lit/ui-libraries/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/lit/ui-libraries/README.md b/examples/lit/ui-libraries/README.md
new file mode 100644
index 000000000..1cf889265
--- /dev/null
+++ b/examples/lit/ui-libraries/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/lit/ui-libraries/index.html b/examples/lit/ui-libraries/index.html
new file mode 100644
index 000000000..6bbd54321
--- /dev/null
+++ b/examples/lit/ui-libraries/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit + TS</title>
+    <script type="module" src="/src/index.ts"></script>
+  </head>
+  <body>
+    <tanstack-form-demo> </tanstack-form-demo>
+  </body>
+</html>
diff --git a/examples/lit/ui-libraries/package.json b/examples/lit/ui-libraries/package.json
new file mode 100644
index 000000000..519bd4d16
--- /dev/null
+++ b/examples/lit/ui-libraries/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@tanstack/form-example-lit-ui-libraries",
+  "version": "0.0.1",
+  "main": "src/index.jsx",
+  "scripts": {
+    "dev": "vite --port=3001",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsc"
+  },
+  "dependencies": {
+    "@tanstack/lit-form": "<1.0.0",
+    "lit": "^3.1.1",
+    "@material/web": "^1.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/lit/ui-libraries/src/index.ts b/examples/lit/ui-libraries/src/index.ts
new file mode 100644
index 000000000..638cda832
--- /dev/null
+++ b/examples/lit/ui-libraries/src/index.ts
@@ -0,0 +1,205 @@
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import '@material/web/textfield/filled-text-field.js'
+import '@material/web/checkbox/checkbox.js'
+import '@material/web/select/filled-select.js'
+import '@material/web/select/select-option.js'
+import '@material/web/button/filled-button.js'
+import '@material/web/button/outlined-button.js'
+
+import { TanStackFormController } from '@tanstack/lit-form'
+import { repeat } from 'lit/directives/repeat.js'
+import { styles } from './styles.js'
+
+interface Employee {
+  firstName: string
+  lastName: string
+  employed: boolean
+  jobTitle?: string
+}
+
+@customElement('tanstack-form-demo')
+export class TanStackFormDemo extends LitElement {
+  static styles = styles
+
+  #form = new TanStackFormController(this, {
+    defaultValues: {
+      employees: [] as Employee[],
+    },
+  })
+
+  render() {
+    return html`
+      <form
+        id="form"
+        @submit=${(e: Event) => {
+          e.preventDefault()
+        }}
+      >
+        <h1>TanStack Form - Lit Demo</h1>
+        ${this.#form.field(
+          {
+            name: 'employees',
+            defaultValue: [],
+          },
+          (employeesField) => {
+            return html`${repeat(
+                employeesField.state.value,
+                (_, index) => index,
+                (_, index) => {
+                  return html`
+                    ${this.#form.field(
+                      {
+                        name: `employees[${index}].firstName`,
+                        validators: {
+                          onChange: ({ value }: { value: string }) => {
+                            return value && value.length < 3
+                              ? 'Not long enough'
+                              : undefined
+                          },
+                        },
+                      },
+                      (field) => {
+                        return html` <div>
+                          <label>First Name</label>
+                          <md-filled-text-field
+                            type="text"
+                            placeholder="First Name"
+                            .value="${field.state.value}"
+                            @blur="${() => field.handleBlur()}"
+                            @input="${(e: Event) => {
+                              const target = e.target as HTMLInputElement
+                              field.handleChange(target.value)
+                            }}"
+                            .error="${!!field.state.meta.touchedErrors.length}"
+                            .errorText="${field.state.meta.touchedErrors.join(
+                              ', ',
+                            )}"
+                          ></md-filled-text-field>
+                        </div>`
+                      },
+                    )}
+                    ${this.#form.field(
+                      { name: `employees[${index}].lastName` },
+                      (lastNameField) => {
+                        return html` <div>
+                          <label>Last Name</label>
+                          <md-filled-text-field
+                            type="text"
+                            placeholder="Last Name"
+                            .value="${lastNameField.state.value}"
+                            @blur="${() => lastNameField.handleBlur()}"
+                            @input="${(e: Event) => {
+                              const target = e.target as HTMLInputElement
+                              lastNameField.handleChange(target.value)
+                            }}"
+                            .error="${!!lastNameField.state.meta.touchedErrors
+                              .length}"
+                            .errorText="${lastNameField.state.meta.touchedErrors.join(
+                              ', ',
+                            )}"
+                          ></md-filled-text-field>
+                        </div>`
+                      },
+                    )}
+                    ${this.#form.field(
+                      { name: `employees[${index}].employed` },
+                      (employedField) => {
+                        return html`<div>
+                            <label>Employed?</label>
+                            <md-checkbox
+                              type="checkbox"
+                              @input="${() =>
+                                employedField.handleChange(
+                                  !employedField.state.value,
+                                )}"
+                              .checked="${employedField.state.value}"
+                              @blur="${() => employedField.handleBlur()}"
+                            ></md-checkbox>
+                          </div>
+                          ${employedField.state.value
+                            ? this.#form.field(
+                                {
+                                  name: `employees[${index}].jobTitle`,
+                                  defaultValue: '',
+                                  validators: {
+                                    onChange: ({
+                                      value,
+                                    }: {
+                                      value: string
+                                    }) => {
+                                      return value.length === 0
+                                        ? 'Needs to have a job here'
+                                        : null
+                                    },
+                                  },
+                                },
+                                (jobTitleField) => {
+                                  return html` <div>
+                                    <label>Job Title</label>
+                                    <md-filled-text-field
+                                      type="text"
+                                      placeholder="Job Title"
+                                      .value="${jobTitleField.state.value}"
+                                      @blur="${() =>
+                                        jobTitleField.handleBlur()}"
+                                      @input="${(e: Event) => {
+                                        const target =
+                                          e.target as HTMLInputElement
+                                        jobTitleField.handleChange(target.value)
+                                      }}"
+                                      .error="${!!jobTitleField.state.meta
+                                        .errors.length}"
+                                      .errorText="${jobTitleField.state.meta.touchedErrors.join(
+                                        ', ',
+                                      )}"
+                                    ></md-filled-text-field>
+                                  </div>`
+                                },
+                              )
+                            : ''} `
+                      },
+                    )}
+                  `
+                },
+              )}
+
+              <div>
+                <md-outlined-button
+                  type="button"
+                  @click=${() => {
+                    employeesField.pushValue({
+                      firstName: '',
+                      lastName: '',
+                      employed: false,
+                    })
+                  }}
+                >
+                  Add employee
+                </md-outlined-button>
+              </div> `
+          },
+        )}
+
+        <div>
+          <md-filled-button
+            type="submit"
+            ?disabled=${this.#form.api.state.isSubmitting}
+          >
+            ${this.#form.api.state.isSubmitting ? html` Submitting` : 'Submit'}
+          </md-filled-button>
+          <md-outlined-button
+            type="button"
+            id="reset"
+            @click=${() => {
+              this.#form.api.reset()
+            }}
+          >
+            Reset
+          </md-outlined-button>
+        </div>
+      </form>
+      <pre>${JSON.stringify(this.#form.api.state, null, 2)}</pre>
+    `
+  }
+}
diff --git a/examples/lit/ui-libraries/src/styles.ts b/examples/lit/ui-libraries/src/styles.ts
new file mode 100644
index 000000000..a3e7be648
--- /dev/null
+++ b/examples/lit/ui-libraries/src/styles.ts
@@ -0,0 +1,66 @@
+import { css } from 'lit'
+
+export const styles = css`
+  form {
+    max-width: 600px;
+    margin: 10px auto;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    box-shadow: 1 1 2px rgba(0, 0, 0, 0.3);
+    padding: 10px;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
+  h1 {
+    text-align: center;
+    color: #333;
+  }
+
+  p {
+    margin: 10px auto;
+    line-height: 1.2em;
+    max-width: 500px;
+  }
+
+  div {
+    margin: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+  }
+
+  label {
+    width: 120px;
+    text-align: right;
+    margin-right: 15px;
+    padding: 5px;
+  }
+
+  input {
+    padding: 5px;
+    flex: 1;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+
+  select {
+    flex: 1;
+    height: 24px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+
+  span {
+    color: #600;
+    font-weight: bold;
+    margin: 0 0 0 10px;
+    line-height: 26px;
+  }
+
+  button {
+    width: 80px;
+    display: block;
+    margin: 0 auto;
+  }
+`
diff --git a/examples/lit/ui-libraries/tsconfig.json b/examples/lit/ui-libraries/tsconfig.json
new file mode 100644
index 000000000..69e31ac92
--- /dev/null
+++ b/examples/lit/ui-libraries/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/react/next-server-actions/package.json b/examples/react/next-server-actions/package.json
index 479374956..49b1e9d2a 100644
--- a/examples/react/next-server-actions/package.json
+++ b/examples/react/next-server-actions/package.json
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "typescript": "5.2.2",
-    "@types/node": "^20",
+    "@types/node": "^20.9.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.19",
     "eslint": "^8.56.0",
diff --git a/package.json b/package.json
index 4edbc8dad..a63b1adb8 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.0.2",
     "@types/eslint": "^8.56.0",
-    "@types/node": "^18.19.3",
+    "@types/node": "^20.9.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
diff --git a/packages/lit-form/.eslintrc.cjs b/packages/lit-form/.eslintrc.cjs
new file mode 100644
index 000000000..e0ee3beb4
--- /dev/null
+++ b/packages/lit-form/.eslintrc.cjs
@@ -0,0 +1,17 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.eslint.json',
+  },
+  rules: {
+    'react/jsx-key': ['error', { checkFragmentShorthand: true }],
+    'react-hooks/exhaustive-deps': 'error',
+    'react/no-children-prop': 'off',
+  },
+}
+
+module.exports = config
diff --git a/packages/lit-form/package.json b/packages/lit-form/package.json
new file mode 100644
index 000000000..923eb78b0
--- /dev/null
+++ b/packages/lit-form/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@tanstack/lit-form",
+  "version": "0.9.0",
+  "description": "Powerful, type-safe forms for Lit.",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/form",
+  "homepage": "https://tanstack.com/form",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc --noEmit",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "nx": {
+    "targets": {
+      "test:build": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.9.0"
+  },
+  "dependencies": {
+    "@tanstack/form-core": "workspace:*"
+  },
+  "peerDependencies": {
+    "lit": "^3.1.1"
+  }
+}
diff --git a/packages/lit-form/src/index.ts b/packages/lit-form/src/index.ts
new file mode 100644
index 000000000..4d7d91923
--- /dev/null
+++ b/packages/lit-form/src/index.ts
@@ -0,0 +1,2 @@
+export type { FieldApi, FormOptions, FieldState } from '@tanstack/form-core'
+export { TanStackFormController } from './tanstack-form-controller'
diff --git a/packages/lit-form/src/tanstack-form-controller.ts b/packages/lit-form/src/tanstack-form-controller.ts
new file mode 100644
index 000000000..27802dc63
--- /dev/null
+++ b/packages/lit-form/src/tanstack-form-controller.ts
@@ -0,0 +1,161 @@
+import { nothing } from 'lit'
+import { PartType, directive } from 'lit/directive.js'
+import { FieldApi, FormApi } from '@tanstack/form-core'
+import { AsyncDirective } from 'lit/async-directive.js'
+import type {
+  DeepKeys,
+  DeepValue,
+  FieldOptions,
+  FormOptions,
+  Validator,
+} from '@tanstack/form-core'
+import type { ElementPart, PartInfo } from 'lit/directive.js'
+import type { ReactiveController, ReactiveControllerHost } from 'lit'
+
+type renderCallback<
+  FormValues,
+  Name extends DeepKeys<FormValues>,
+  FieldValidator extends
+    | Validator<DeepValue<FormValues, Name>, unknown>
+    | undefined,
+  FormValidator extends Validator<FormValues> | undefined,
+> = (
+  fieldOptions: FieldApi<FormValues, Name, FieldValidator, FormValidator>,
+) => unknown
+type fieldDirectiveType<
+  FormValues,
+  Name extends DeepKeys<FormValues>,
+  FieldValidator extends
+    | Validator<DeepValue<FormValues, Name>, unknown>
+    | undefined,
+  FormValidator extends Validator<FormValues> | undefined,
+> = (
+  form: FormApi<FormValues, FormValidator>,
+  options: FieldOptions<FormValues, Name, FieldValidator, FormValidator>,
+  render: renderCallback<FormValues, Name, FieldValidator, FormValidator>,
+) => {
+  values: {
+    form: FormApi<FormValues, FormValidator>
+    options: FieldOptions<FormValues, Name, FieldValidator, FormValidator>
+    render: renderCallback<FormValues, Name, FieldValidator, FormValidator>
+  }
+}
+
+export class TanStackFormController<
+  FormValues,
+  FormValidator extends Validator<FormValues> | undefined = undefined,
+> implements ReactiveController
+{
+  #host: ReactiveControllerHost
+  #subscription?: () => void
+
+  api: FormApi<FormValues, FormValidator>
+
+  constructor(
+    host: ReactiveControllerHost,
+    config?: FormOptions<FormValues, FormValidator>,
+  ) {
+    ;(this.#host = host).addController(this)
+
+    this.api = new FormApi<FormValues, FormValidator>(config)
+  }
+
+  hostConnected() {
+    this.#subscription = this.api.store.subscribe(() => {
+      this.#host.requestUpdate()
+    })
+  }
+
+  hostDisconnected() {
+    this.#subscription?.()
+  }
+
+  field<
+    Name extends DeepKeys<FormValues>,
+    FieldValidator extends
+      | Validator<DeepValue<FormValues, Name>, unknown>
+      | undefined,
+  >(
+    fieldConfig: FieldOptions<FormValues, Name, FieldValidator, FormValidator>,
+    render: renderCallback<FormValues, Name, FieldValidator, FormValidator>,
+  ) {
+    return (
+      fieldDirective as unknown as fieldDirectiveType<
+        FormValues,
+        Name,
+        FieldValidator,
+        FormValidator
+      >
+    )(this.api, fieldConfig, render)
+  }
+}
+
+class FieldDirective<
+  FormValues,
+  Name extends DeepKeys<FormValues>,
+  FieldValidator extends
+    | Validator<DeepValue<FormValues, Name>, unknown>
+    | undefined = undefined,
+  FormValidator extends Validator<FormValues> | undefined = undefined,
+> extends AsyncDirective {
+  #registered = false
+  #field?: FieldApi<FormValues, Name, FieldValidator, FormValidator>
+  #unmount?: () => void
+
+  constructor(partInfo: PartInfo) {
+    super(partInfo)
+    if (partInfo.type !== PartType.CHILD) {
+      throw new Error(
+        'The `field` directive must be used in the `child` attribute',
+      )
+    }
+  }
+
+  update(
+    _: ElementPart,
+    [form, fieldConfig, _render]: Parameters<this['render']>,
+  ) {
+    if (!this.#registered) {
+      if (!this.#field) {
+        const options = { ...fieldConfig, form }
+
+        this.#field = new FieldApi(options)
+        this.#unmount = this.#field.mount()
+      }
+
+      this.#registered = true
+    }
+
+    return this.render(form, fieldConfig, _render)
+  }
+
+  protected disconnected() {
+    super.disconnected()
+    this.#unmount?.()
+  }
+
+  protected reconnected() {
+    super.reconnected()
+    if (this.#field) {
+      this.#unmount = this.#field.mount()
+    }
+  }
+
+  render(
+    _form: FormApi<FormValues, FormValidator>,
+    _fieldConfig: FieldOptions<FormValues, Name, FieldValidator, FormValidator>,
+    _renderCallback: renderCallback<
+      FormValues,
+      Name,
+      FieldValidator,
+      FormValidator
+    >,
+  ) {
+    if (this.#field) {
+      return _renderCallback(this.#field)
+    }
+    return nothing
+  }
+}
+
+const fieldDirective = directive(FieldDirective)
diff --git a/packages/lit-form/src/tests/simple.test.ts b/packages/lit-form/src/tests/simple.test.ts
new file mode 100644
index 000000000..8881a4426
--- /dev/null
+++ b/packages/lit-form/src/tests/simple.test.ts
@@ -0,0 +1,72 @@
+/// <reference lib="dom" />
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+import { TestForm, sampleData } from './simple'
+
+window.customElements.define('test-form', TestForm)
+describe('Lit Tests', () => {
+  let element: TestForm
+  beforeEach(async () => {
+    element = document.createElement('test-form') as TestForm
+    document.body.appendChild(element)
+    await element.updateComplete
+  })
+
+  afterEach(() => {
+    element.remove()
+  })
+
+  it('should have initial values', async () => {
+    expect(
+      await element.shadowRoot!.querySelector<HTMLInputElement>('#firstName'),
+    ).toHaveValue(sampleData.firstName)
+    expect(
+      await element.shadowRoot!.querySelector<HTMLInputElement>('#lastName'),
+    ).toHaveValue('')
+    const form = element.form!
+    expect(form.api.getFieldValue('firstName')).toBe(sampleData.firstName)
+    expect(form.api.getFieldMeta('firstName')?.isTouched).toBeFalsy()
+    expect(form.api.getFieldValue('lastName')).toBe('')
+    expect(form.api.getFieldMeta('lastName')?.isTouched).toBeFalsy()
+  })
+  it('should mirror user input', async () => {
+    const lastName =
+      await element.shadowRoot!.querySelector<HTMLInputElement>('#lastName')!
+    const lastNameValue = 'Jobs'
+    await userEvent.type(lastName, lastNameValue)
+
+    const form = element.form!
+    expect(form.api.getFieldValue('lastName')).toBe(lastNameValue)
+    expect(form.api.getFieldMeta('lastName')?.isTouched).toBeTruthy()
+  })
+  it('Reset form to initial value', async () => {
+    const firstName =
+      await element.shadowRoot!.querySelector<HTMLInputElement>('#firstName')!
+    await userEvent.type(firstName, '-Joseph')
+
+    expect(firstName).toHaveValue('Christian-Joseph')
+
+    const form = element.form
+    await element
+      .shadowRoot!.querySelector<HTMLButtonElement>('#reset')
+      ?.click()
+    expect(form.api.getFieldValue('firstName')).toBe(sampleData.firstName)
+  })
+
+  it('should display validation', async () => {
+    const lastName =
+      await element.shadowRoot!.querySelector<HTMLInputElement>('#lastName')!
+    const lastNameValue = 'Jo'
+    await userEvent.type(lastName, lastNameValue)
+    expect(lastName).toHaveValue('Jo')
+    const form = element.form
+    expect(form.api.getFieldMeta('lastName')?.errors[0]).toBe('Not long enough')
+
+    await userEvent.type(lastName, lastNameValue)
+
+    expect(await lastName.getAttribute('error-text')).toBeFalsy()
+    expect(form.api.getFieldValue('lastName')).toBe('JoJo')
+    expect(form.api.getFieldMeta('lastName')?.isTouched).toBeTruthy()
+    expect(form.api.getFieldMeta('lastName')?.errors.length).toBeFalsy()
+  })
+})
diff --git a/packages/lit-form/src/tests/simple.ts b/packages/lit-form/src/tests/simple.ts
new file mode 100644
index 000000000..5e79935bf
--- /dev/null
+++ b/packages/lit-form/src/tests/simple.ts
@@ -0,0 +1,176 @@
+import { LitElement, html } from 'lit'
+import { TanStackFormController } from '../index.js'
+import type { FieldApi, FormOptions } from '../index.js'
+
+interface Employee {
+  firstName: string
+  lastName: string
+  color?: '#FF0000' | '#00FF00' | '#0000FF'
+  employed: boolean
+  jobTitle: string
+}
+
+export const sampleData: Employee = {
+  firstName: 'Christian',
+  lastName: '',
+  employed: false,
+  jobTitle: '',
+}
+
+const formConfig: FormOptions<Employee, undefined> = {
+  defaultValues: sampleData,
+}
+
+export class TestForm extends LitElement {
+  form = new TanStackFormController(this, formConfig)
+
+  render() {
+    return html`
+      <form
+        id="form"
+        @submit=${(e: Event) => {
+          e.preventDefault()
+        }}
+      >
+        <h1>TanStack Form - Lit Demo</h1>
+
+        ${this.form.field(
+          {
+            name: `firstName`,
+            validators: {
+              onChange: ({ value }) =>
+                value.length < 3 ? 'Not long enough' : undefined,
+            },
+          },
+          (field: FieldApi<Employee, 'firstName'>) => {
+            return html` <div>
+              <label>First Name</label>
+              <input
+                id="firstName"
+                type="text"
+                placeholder="First Name"
+                .value="${field.state.value}"
+                @blur="${() => field.handleBlur()}"
+                @input="${(e: Event) => {
+                  const target = e.target as HTMLInputElement
+                  field.handleChange(target.value)
+                }}"
+              />
+            </div>`
+          },
+        )}
+        ${this.form.field(
+          {
+            name: `lastName`,
+            validators: {
+              onChange: ({ value }) =>
+                value.length < 3 ? 'Not long enough' : undefined,
+            },
+          },
+          (field: FieldApi<Employee, 'lastName'>) => {
+            return html` <div>
+              <label>Last Name</label>
+              <input
+                id="lastName"
+                type="text"
+                placeholder="Last Name"
+                .value="${field.state.value}"
+                @blur="${() => field.handleBlur()}"
+                @input="${(e: Event) => {
+                  const target = e.target as HTMLInputElement
+                  field.handleChange(target.value)
+                }}"
+              />
+            </div>`
+          },
+        )}
+        ${this.form.field(
+          { name: `color` },
+          (field: FieldApi<Employee, 'color'>) => {
+            return html` <div>
+              <label>Favorite Color</label>
+              <select
+                .value="${field.state.value}"
+                @blur="${() => field.handleBlur()}"
+                @input="${(e: Event) => {
+                  const target = e.target as HTMLInputElement
+                  field.handleChange(
+                    target.value as '#FF0000' | '#00FF00' | '#0000FF',
+                  )
+                }}"
+              >
+                <option value="#FF0000">Red</option>
+                <option value="#00FF00">Green</option>
+                <option value="#0000FF">Blue</option>
+              </select>
+            </div>`
+          },
+        )}
+        ${this.form.field(
+          { name: `employed` },
+          (field: FieldApi<Employee, 'employed'>) => {
+            return html`
+              <div>
+                <label>Employed?</label>
+                <input
+                  @input="${() => field.handleChange(!field.getValue())}"
+                  .checked="${field.getValue()}"
+                  @blur="${() => field.handleBlur()}"
+                  id="employed"
+                  .type=${'checkbox'}
+                />
+              </div>
+              ${field.getValue()
+                ? this.form.field(
+                    {
+                      name: `jobTitle`,
+                      validators: {
+                        onChange: ({ value }) =>
+                          value.length === 0
+                            ? 'Needs to have a job here'
+                            : null,
+                      },
+                    },
+                    (subField: FieldApi<Employee, 'jobTitle'>) => {
+                      return html` <div>
+                        <label>Job Title</label>
+                        <input
+                          type="text"
+                          id="jobTitle"
+                          placeholder="Job Title"
+                          .value="${subField.state.value}"
+                          @blur="${() => subField.handleBlur()}"
+                          @input="${(e: Event) => {
+                            const target = e.target as HTMLInputElement
+                            subField.handleChange(target.value)
+                          }}"
+                        />
+                      </div>`
+                    },
+                  )
+                : ''}
+            `
+          },
+        )}
+      </form>
+        <div>
+          <button
+            type="submit"
+            ?disabled=${this.form.api.state.isSubmitting}
+            >${this.form.api.state.isSubmitting ? html` Submitting` : 'Submit'}
+          </button>
+          <button
+            type="button"
+            id="reset"
+            @click=${() => {
+              this.form.api.reset()
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </form>
+      <pre>${JSON.stringify(this.form.api.state, null, 2)}</pre>
+    `
+  }
+}
diff --git a/packages/lit-form/tsconfig.eslint.json b/packages/lit-form/tsconfig.eslint.json
new file mode 100644
index 000000000..bd0895c40
--- /dev/null
+++ b/packages/lit-form/tsconfig.eslint.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["**/*.ts", ".eslintrc.cjs", "tsup.config.js"]
+}
diff --git a/packages/lit-form/tsconfig.json b/packages/lit-form/tsconfig.json
new file mode 100644
index 000000000..dfdf1d959
--- /dev/null
+++ b/packages/lit-form/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "composite": true,
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["DOM"],
+    "outDir": "./build/lib",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src"]
+}
diff --git a/packages/lit-form/vite.config.ts b/packages/lit-form/vite.config.ts
new file mode 100644
index 000000000..65d17b25d
--- /dev/null
+++ b/packages/lit-form/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackBuildConfig } from '@tanstack/config/build'
+
+const config = defineConfig({
+  test: {
+    name: 'lit-form',
+    dir: './src',
+    watch: false,
+    environment: 'jsdom',
+    globals: true,
+    coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
+    typecheck: { enabled: true },
+  },
+})
+export default mergeConfig(
+  config,
+  tanstackBuildConfig({
+    entry: './src/index.ts',
+    srcDir: './src',
+    exclude: ['./src/tests'],
+  }),
+)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 574370ac2..573d0fc85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ importers:
         version: 0.8.6(@solidjs/router@0.13.0)(solid-js@1.7.12)
       '@tanstack/config':
         specifier: ^0.6.0
-        version: 0.6.0(@types/node@18.19.4)(esbuild@0.19.11)(rollup@4.9.2)(typescript@5.2.2)(vite@5.0.12)
+        version: 0.6.0(@types/node@20.10.6)(esbuild@0.19.11)(rollup@4.9.2)(typescript@5.2.2)(vite@5.0.12)
       '@testing-library/jest-dom':
         specifier: ^6.4.2
         version: 6.4.2(vitest@1.3.1)
@@ -30,8 +30,8 @@ importers:
         specifier: ^8.56.0
         version: 8.56.0
       '@types/node':
-        specifier: ^18.19.3
-        version: 18.19.4
+        specifier: ^20.9.0
+        version: 20.10.6
       '@types/react':
         specifier: ^18.2.45
         version: 18.2.46
@@ -70,7 +70,7 @@ importers:
         version: 24.0.0
       knip:
         specifier: ^4.6.0
-        version: 4.6.0(@types/node@18.19.4)(typescript@5.2.2)
+        version: 4.6.0(@types/node@20.10.6)(typescript@5.2.2)
       nx:
         specifier: ^17.3.1
         version: 17.3.1
@@ -109,14 +109,43 @@ importers:
         version: /typescript@5.1.6
       vite:
         specifier: ^5.0.12
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vitest:
         specifier: ^1.3.1
-        version: 1.3.1(@types/node@18.19.4)(jsdom@24.0.0)
+        version: 1.3.1(@types/node@20.10.6)(jsdom@24.0.0)
       vue:
         specifier: ^3.3.4
         version: 3.3.4
 
+  examples/lit/simple:
+    dependencies:
+      '@tanstack/lit-form':
+        specifier: <1.0.0
+        version: link:../../../packages/lit-form
+      lit:
+        specifier: ^3.1.1
+        version: 3.1.2
+    devDependencies:
+      vite:
+        specifier: ^5.0.10
+        version: 5.0.12(@types/node@20.10.6)
+
+  examples/lit/ui-libraries:
+    dependencies:
+      '@material/web':
+        specifier: ^1.0.0
+        version: 1.3.0
+      '@tanstack/lit-form':
+        specifier: <1.0.0
+        version: link:../../../packages/lit-form
+      lit:
+        specifier: ^3.1.1
+        version: 3.1.2
+    devDependencies:
+      vite:
+        specifier: ^5.0.10
+        version: 5.0.12(@types/node@20.10.6)
+
   examples/react/array:
     dependencies:
       '@tanstack/react-form':
@@ -134,7 +163,7 @@ importers:
         version: 4.2.1(vite@5.0.12)
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
 
   examples/react/next-server-actions:
     dependencies:
@@ -152,7 +181,7 @@ importers:
         version: 18.2.0(react@18.2.0)
     devDependencies:
       '@types/node':
-        specifier: ^20
+        specifier: ^20.9.0
         version: 20.10.6
       '@types/react':
         specifier: ^18.2.45
@@ -187,7 +216,7 @@ importers:
         version: 4.2.1(vite@5.0.12)
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
 
   examples/react/ui-libraries:
     dependencies:
@@ -263,7 +292,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
 
   examples/react/valibot:
     dependencies:
@@ -288,7 +317,7 @@ importers:
         version: 4.2.1(vite@5.0.12)
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
 
   examples/react/yup:
     dependencies:
@@ -313,7 +342,7 @@ importers:
         version: 4.2.1(vite@5.0.12)
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
 
   examples/react/zod:
     dependencies:
@@ -338,7 +367,7 @@ importers:
         version: 4.2.1(vite@5.0.12)
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
 
   examples/solid/array:
     dependencies:
@@ -354,7 +383,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vite-plugin-solid:
         specifier: ^2.10.1
         version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.7.12)(vite@5.0.12)
@@ -373,7 +402,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vite-plugin-solid:
         specifier: ^2.10.1
         version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.7.12)(vite@5.0.12)
@@ -398,7 +427,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vite-plugin-solid:
         specifier: ^2.10.1
         version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.7.12)(vite@5.0.12)
@@ -423,7 +452,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vite-plugin-solid:
         specifier: ^2.10.1
         version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.7.12)(vite@5.0.12)
@@ -448,7 +477,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vite-plugin-solid:
         specifier: ^2.10.1
         version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.7.12)(vite@5.0.12)
@@ -470,7 +499,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vue-tsc:
         specifier: ^1.8.10
         version: 1.8.27(typescript@5.2.2)
@@ -492,7 +521,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vue-tsc:
         specifier: ^1.8.10
         version: 1.8.27(typescript@5.2.2)
@@ -520,7 +549,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vue-tsc:
         specifier: ^1.8.10
         version: 1.8.27(typescript@5.2.2)
@@ -548,7 +577,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vue-tsc:
         specifier: ^1.8.10
         version: 1.8.27(typescript@5.2.2)
@@ -576,7 +605,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^5.0.10
-        version: 5.0.12(@types/node@18.19.4)
+        version: 5.0.12(@types/node@20.10.6)
       vue-tsc:
         specifier: ^1.8.10
         version: 1.8.27(typescript@5.2.2)
@@ -587,6 +616,19 @@ importers:
         specifier: ^0.3.1
         version: 0.3.1
 
+  packages/lit-form:
+    dependencies:
+      '@tanstack/form-core':
+        specifier: workspace:*
+        version: link:../form-core
+      lit:
+        specifier: ^3.1.1
+        version: 3.1.2
+    devDependencies:
+      '@types/node':
+        specifier: ^20.9.0
+        version: 20.10.6
+
   packages/react-form:
     dependencies:
       '@tanstack/form-core':
@@ -1431,6 +1473,16 @@ packages:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /@lit-labs/ssr-dom-shim@1.2.0:
+    resolution: {integrity: sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==}
+    dev: false
+
+  /@lit/reactive-element@2.0.4:
+    resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.2.0
+    dev: false
+
   /@mantine/core@7.3.2(@mantine/hooks@7.3.2)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-CwAuQogVLcLR7O9e1eOgi3gtk4XX6cnaqevAxzJJpIOIyCnHiQ3cEGINVXyUUjUUipBlvK3sqz3NPGJ2ekLFDQ==}
     peerDependencies:
@@ -1459,24 +1511,31 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@microsoft/api-extractor-model@7.28.3(@types/node@18.19.4):
+  /@material/web@1.3.0:
+    resolution: {integrity: sha512-yUqF35yygXreiPXQneD3l210UoSMlbgHZrJ0V1dUiEizGpWfVmuAKp9LnLnV/Qx5MhJlNOZddsGJOGR9lU8R/w==}
+    dependencies:
+      lit: 3.1.2
+      tslib: 2.6.2
+    dev: false
+
+  /@microsoft/api-extractor-model@7.28.3(@types/node@20.10.6):
     resolution: {integrity: sha512-wT/kB2oDbdZXITyDh2SQLzaWwTOFbV326fP0pUwNW00WeliARs0qjmXBWmGWardEzp2U3/axkO3Lboqun6vrig==}
     dependencies:
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.62.0(@types/node@18.19.4)
+      '@rushstack/node-core-library': 3.62.0(@types/node@20.10.6)
     transitivePeerDependencies:
       - '@types/node'
     dev: true
 
-  /@microsoft/api-extractor@7.39.0(@types/node@18.19.4):
+  /@microsoft/api-extractor@7.39.0(@types/node@20.10.6):
     resolution: {integrity: sha512-PuXxzadgnvp+wdeZFPonssRAj/EW4Gm4s75TXzPk09h3wJ8RS3x7typf95B4vwZRrPTQBGopdUl+/vHvlPdAcg==}
     hasBin: true
     dependencies:
-      '@microsoft/api-extractor-model': 7.28.3(@types/node@18.19.4)
+      '@microsoft/api-extractor-model': 7.28.3(@types/node@20.10.6)
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.62.0(@types/node@18.19.4)
+      '@rushstack/node-core-library': 3.62.0(@types/node@20.10.6)
       '@rushstack/rig-package': 0.5.1
       '@rushstack/ts-command-line': 4.17.1
       colors: 1.2.5
@@ -2237,7 +2296,7 @@ packages:
     resolution: {integrity: sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==}
     dev: true
 
-  /@rushstack/node-core-library@3.62.0(@types/node@18.19.4):
+  /@rushstack/node-core-library@3.62.0(@types/node@20.10.6):
     resolution: {integrity: sha512-88aJn2h8UpSvdwuDXBv1/v1heM6GnBf3RjEy6ZPP7UnzHNCqOHA2Ut+ScYUbXcqIdfew9JlTAe3g+cnX9xQ/Aw==}
     peerDependencies:
       '@types/node': '*'
@@ -2245,7 +2304,7 @@ packages:
       '@types/node':
         optional: true
     dependencies:
-      '@types/node': 18.19.4
+      '@types/node': 20.10.6
       colors: 1.2.5
       fs-extra: 7.0.1
       import-lazy: 4.0.0
@@ -2434,7 +2493,7 @@ packages:
     resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
     dev: true
 
-  /@tanstack/config@0.6.0(@types/node@18.19.4)(esbuild@0.19.11)(rollup@4.9.2)(typescript@5.2.2)(vite@5.0.12):
+  /@tanstack/config@0.6.0(@types/node@20.10.6)(esbuild@0.19.11)(rollup@4.9.2)(typescript@5.2.2)(vite@5.0.12):
     resolution: {integrity: sha512-ndVPsyXWZFz3RcpRF7q5L4Ol5zY+m1H2lAiufw+J4BrV09042PETU2OZAREYz88ZcLtu6p+LZAHKltmqrL8gDg==}
     engines: {node: '>=18'}
     hasBin: true
@@ -2455,7 +2514,7 @@ packages:
       semver: 7.6.0
       stream-to-array: 2.3.0
       v8flags: 4.0.1
-      vite-plugin-dts: 3.7.2(@types/node@18.19.4)(rollup@4.9.2)(typescript@5.2.2)(vite@5.0.12)
+      vite-plugin-dts: 3.7.2(@types/node@20.10.6)(rollup@4.9.2)(typescript@5.2.2)(vite@5.0.12)
       vite-plugin-externalize-deps: 0.8.0(vite@5.0.12)
       vite-tsconfig-paths: 4.3.1(typescript@5.2.2)(vite@5.0.12)
     transitivePeerDependencies:
@@ -2563,7 +2622,7 @@ packages:
       dom-accessibility-api: 0.6.3
       lodash: 4.17.21
       redent: 3.0.0
-      vitest: 1.3.1(@types/node@18.19.4)(jsdom@24.0.0)
+      vitest: 1.3.1(@types/node@20.10.6)(jsdom@24.0.0)
     dev: true
 
   /@testing-library/react@14.2.1(react-dom@18.2.0)(react@18.2.0):
@@ -2667,12 +2726,6 @@ packages:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
     dev: true
 
-  /@types/node@18.19.4:
-    resolution: {integrity: sha512-xNzlUhzoHotIsnFoXmJB+yWmBvFZgKCI9TtPIEdYIMM1KWfwuY8zh7wvc1u1OAXlC7dlf6mZVx/s+Y5KfFz19A==}
-    dependencies:
-      undici-types: 5.26.5
-    dev: true
-
   /@types/node@20.10.6:
     resolution: {integrity: sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==}
     dependencies:
@@ -2720,6 +2773,10 @@ packages:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
+  /@types/trusted-types@2.0.7:
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+    dev: false
+
   /@typescript-eslint/eslint-plugin@6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.2.2):
     resolution: {integrity: sha512-fTwGQUnjhoYHeSF6m5pWNkzmDDdsKELYrOBxhjMrofPqCkoC2k3B2wvGHFxa1CTIqkEn88nlW1HVMztjo2K8Hg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2862,7 +2919,7 @@ packages:
       vite: ^4 || ^5
     dependencies:
       '@swc/core': 1.4.6
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -2878,7 +2935,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2890,7 +2947,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
       vue: 3.3.4
     dev: true
 
@@ -2908,7 +2965,7 @@ packages:
       magicast: 0.3.3
       picocolors: 1.0.0
       test-exclude: 6.0.0
-      vitest: 1.3.1(@types/node@18.19.4)(jsdom@24.0.0)
+      vitest: 1.3.1(@types/node@20.10.6)(jsdom@24.0.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5891,7 +5948,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /knip@4.6.0(@types/node@18.19.4)(typescript@5.2.2):
+  /knip@4.6.0(@types/node@20.10.6)(typescript@5.2.2):
     resolution: {integrity: sha512-6slzggzmyAuvtr97nH56ob1RNlkrG2dGF7yn8PJ/LIF8bPsoM93TRNLWTbmuOg4/E1CImilSX4qy9fok0AKJyA==}
     engines: {node: '>=18.6.0'}
     hasBin: true
@@ -5906,7 +5963,7 @@ packages:
       '@pnpm/logger': 5.0.0
       '@pnpm/workspace.pkgs-graph': 2.0.14(@pnpm/logger@5.0.0)
       '@snyk/github-codeowners': 1.1.0
-      '@types/node': 18.19.4
+      '@types/node': 20.10.6
       '@types/picomatch': 2.3.3
       easy-table: 1.2.0
       fast-glob: 3.3.2
@@ -5974,6 +6031,28 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /lit-element@4.0.4:
+    resolution: {integrity: sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.2.0
+      '@lit/reactive-element': 2.0.4
+      lit-html: 3.1.2
+    dev: false
+
+  /lit-html@3.1.2:
+    resolution: {integrity: sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==}
+    dependencies:
+      '@types/trusted-types': 2.0.7
+    dev: false
+
+  /lit@3.1.2:
+    resolution: {integrity: sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==}
+    dependencies:
+      '@lit/reactive-element': 2.0.4
+      lit-element: 4.0.4
+      lit-html: 3.1.2
+    dev: false
+
   /load-json-file@6.2.0:
     resolution: {integrity: sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==}
     engines: {node: '>=8'}
@@ -8594,7 +8673,7 @@ packages:
       semver: 7.6.0
     dev: true
 
-  /vite-node@1.3.1(@types/node@18.19.4):
+  /vite-node@1.3.1(@types/node@20.10.6):
     resolution: {integrity: sha512-azbRrqRxlWTJEVbzInZCTchx0X69M/XPTCz4H+TLvlTcR/xH/3hkRqhOakT41fMJCMzXTu4UvegkZiEoJAWvng==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -8603,7 +8682,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -8615,7 +8694,7 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-dts@3.7.2(@types/node@18.19.4)(rollup@4.9.2)(typescript@5.2.2)(vite@5.0.12):
+  /vite-plugin-dts@3.7.2(@types/node@20.10.6)(rollup@4.9.2)(typescript@5.2.2)(vite@5.0.12):
     resolution: {integrity: sha512-kg//1nDA01b8rufJf4TsvYN8LMkdwv0oBYpiQi6nRwpHyue+wTlhrBiqgipdFpMnW1oOYv6ywmzE5B0vg6vSEA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -8625,13 +8704,13 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@microsoft/api-extractor': 7.39.0(@types/node@18.19.4)
+      '@microsoft/api-extractor': 7.39.0(@types/node@20.10.6)
       '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
       '@vue/language-core': 1.8.27(typescript@5.2.2)
       debug: 4.3.4
       kolorist: 1.8.0
       typescript: 5.2.2
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
       vue-tsc: 1.8.27(typescript@5.2.2)
     transitivePeerDependencies:
       - '@types/node'
@@ -8644,7 +8723,7 @@ packages:
     peerDependencies:
       vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
     dependencies:
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
     dev: true
 
   /vite-plugin-solid@2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.7.12)(vite@5.0.12):
@@ -8664,7 +8743,7 @@ packages:
       merge-anything: 5.1.7
       solid-js: 1.7.12
       solid-refresh: 0.6.3(solid-js@1.7.12)
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
       vitefu: 0.2.5(vite@5.0.12)
     transitivePeerDependencies:
       - supports-color
@@ -8681,13 +8760,13 @@ packages:
       debug: 4.3.4
       globrex: 0.1.2
       tsconfck: 3.0.2(typescript@5.2.2)
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /vite@5.0.12(@types/node@18.19.4):
+  /vite@5.0.12(@types/node@20.10.6):
     resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -8715,7 +8794,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.19.4
+      '@types/node': 20.10.6
       esbuild: 0.19.11
       postcss: 8.4.32
       rollup: 4.9.2
@@ -8731,10 +8810,10 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 5.0.12(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
     dev: true
 
-  /vitest@1.3.1(@types/node@18.19.4)(jsdom@24.0.0):
+  /vitest@1.3.1(@types/node@20.10.6)(jsdom@24.0.0):
     resolution: {integrity: sha512-/1QJqXs8YbCrfv/GPQ05wAZf2eakUPLPa18vkJAKE7RXOKfVHqMZZ1WlTjiwl6Gcn65M5vpNUB6EFLnEdRdEXQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -8759,7 +8838,7 @@ packages:
       jsdom:
         optional: true
     dependencies:
-      '@types/node': 18.19.4
+      '@types/node': 20.10.6
       '@vitest/expect': 1.3.1
       '@vitest/runner': 1.3.1
       '@vitest/snapshot': 1.3.1
@@ -8778,8 +8857,8 @@ packages:
       strip-literal: 2.0.0
       tinybench: 2.5.1
       tinypool: 0.8.2
-      vite: 5.0.12(@types/node@18.19.4)
-      vite-node: 1.3.1(@types/node@18.19.4)
+      vite: 5.0.12(@types/node@20.10.6)
+      vite-node: 1.3.1(@types/node@20.10.6)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 17e81edac..04e406198 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,3 +3,4 @@ packages:
   - 'examples/react/**'
   - 'examples/solid/**'
   - 'examples/vue/**'
+  - 'examples/lit/**'
diff --git a/scripts/config.js b/scripts/config.js
index f45a89235..8c75c9753 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -36,6 +36,10 @@ export const packages = [
     name: '@tanstack/solid-form',
     packageDir: 'packages/solid-form',
   },
+  {
+    name: '@tanstack/lit-form',
+    packageDir: 'packages/lit-form',
+  },
   // {
   //   name: '@tanstack/svelte-form',
   //   packageDir: 'packages/svelte-form',