Chapter 29: Framework Adapters

Core Idea

Every non-React framework adapter exposes the same form-instance-plus-field-render shape as React, with the only real variation being the idiomatic way each framework does reactive templating (a hook, a composable, a directive, or a controller class) and its own template-binding syntax.

Reference Tables

Framework	Package	Form-creation call	Field mechanism
React	@tanstack/react-form	useForm(...)	form.Field render-prop
Preact	@tanstack/preact-form	useForm(...) (identical signature to React)	form.Field render-prop
Vue	@tanstack/vue-form	useForm(...) (composable)	form.Field with a scoped slot (<template v-slot="{ field }">)
Solid	@tanstack/solid-form	createForm(...)	form.Field with a children function
Svelte	@tanstack/svelte-form	createForm(() => ({...}))	form.Field with a {#snippet children(field)} block
Angular	@tanstack/angular-form	injectForm(...)	TanStackField structural directive ([tanstackField])
Lit	@tanstack/lit-form	new TanStackFormController(this, {...})	this.#form.field({ name }, renderCallback) returning an html template

Key Concepts

• Preact is API-identical to React — same useForm/form.Field signatures, just imported from @tanstack/preact-form; migrating between the two is close to a find-and-replace on the import path.
• Vue and Svelte use their native templating idioms (scoped slots, snippets) to expose the same field object React gets via a render prop — the underlying field.state/field.handleChange/field.handleBlur API is unchanged.
• Solid's createForm mirrors React's useForm closely (same form.Field children-function pattern) but is named differently to match Solid's own primitive-naming convention (createX instead of useX).
• Angular is the most structurally different: injectForm() (Angular's DI-based composition API) pairs with a TanStackField directive applied in the template, rather than a component with a children function.
• Lit is the most structurally different of all: there's no hook/composable equivalent — a TanStackFormController class instance is created against this (the LitElement), and each field is registered imperatively via .field({ name }, callback), with the callback returning a lit-html template. Lit's docs explicitly note you are responsible for updating the element and form yourself, unlike the more automatic reactivity in the other adapters.

Key Takeaways

1. Validators, listeners, arrays, form groups, and the SSR/devtools patterns from every earlier chapter apply identically across all seven frameworks — only form creation and field-template binding differ.
2. If migrating React↔Preact, expect almost no API changes; migrating to/from Vue/Svelte changes template syntax but not the field object's shape; migrating to/from Angular or Lit is the largest structural jump.
3. This skill's chapters (ch001–ch028) go deep on the React adapter specifically because it's this project's stack — for Vue/Solid/Angular/Lit/Svelte-specific guides and API references beyond this comparison table, fetch the framework's own docs pages directly (see the URLs in https://tanstack.com/form/latest/llms.txt).

Connects To

• Ch006 React Quick Start: the React baseline every row in the table above is compared against.
• Ch025 React API Reference: the depth of documentation available for React specifically, not mirrored here for other frameworks.