Skip to content

docs(svelte): remove runes references #1894

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
crutchcorn merged 2 commits into from
Dec 1, 2025
+17 −17
Merged

docs(svelte): remove runes references #1894

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e1d8160
docs(svelte): remove runes references
crutchcorn Dec 1, 2025
9579871
ci: apply automated fixes and generate docs
autofix-ci[bot] Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions docs/framework/svelte/guides/form-composition.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ A common criticism of TanStack Form is its verbosity out-of-the-box. While this

As a result, while `form.Field` enables the most powerful and flexible usage of TanStack Form, we provide APIs that wrap it and make your application code less verbose.

## Custom Form Runes
## Custom Form Methods

The most powerful way to compose forms is to create custom form runes. This allows you to create a form rune that is tailored to your application's needs, including pre-bound custom UI components and more.
The most powerful way to compose forms is to create custom form methods. This allows you to create a form method that is tailored to your application's needs, including pre-bound custom UI components and more.

At its most basic, `createFormCreator` is a function that returns a `createAppForm` rune.
At its most basic, `createFormCreator` is a function that returns a `createAppForm` method.

> This un-customized `createAppForm` rune is identical to `createForm`, but that will quickly change as we add more options to `createFormCreator`.
> This un-customized `createAppForm` method is identical to `createForm`, but that will quickly change as we add more options to `createFormCreator`.

```ts
// form-context.ts
Expand Down Expand Up @@ -55,7 +55,7 @@ export const { createAppForm } = createFormCreator({

### Pre-bound Field Components

Once this scaffolding is in place, you can start adding custom field and form components to your form rune.
Once this scaffolding is in place, you can start adding custom field and form components to your form method.

> Note: the `useFieldContext` must be the same one exported from your custom form context

Expand All @@ -79,7 +79,7 @@ Once this scaffolding is in place, you can start adding custom field and form co
</label>
```

You're then able to register this component with your form rune.
You're then able to register this component with your form method.

```ts
import { createFormCreator } from '@tanstack/svelte-form'
Expand Down Expand Up @@ -327,12 +327,12 @@ We can now use these grouped fields in any form that implements the required fie
## Tree-shaking form and field components

While the above examples are great for getting started, they're not ideal for certain use-cases where you might have hundreds of form and field components.
In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form rune.
In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form method.

To solve this, you can use dynamic imports with Svelte's component loading:

```ts
// src/runes/form-context.ts
// src/utils/form-context.ts
import { createFormCreatorContexts } from '@tanstack/svelte-form'

export const { useFieldContext, useFormContext } = createFormCreatorContexts()
Expand All @@ -341,7 +341,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
```svelte
<!-- src/components/text-field.svelte -->
<script lang="ts">
import { useFieldContext } from '../runes/form-context.js'
import { useFieldContext } from '../utils/form-context.js'

const field = useFieldContext<string>()

Expand All @@ -358,7 +358,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
```

```ts
// src/runes/form.ts
// src/utils/form.ts
import { createFormCreator } from '@tanstack/svelte-form'
import TextField from '../components/text-field.svelte'
import SubscribeButton from '../components/subscribe-button.svelte'
Expand All @@ -384,10 +384,10 @@ export const { createAppForm } = createFormCreator({

## Putting it all together

Now that we've covered the basics of creating custom form runes, let's put it all together in a single example.
Now that we've covered the basics of creating custom form methods, let's put it all together in a single example.

```ts
// /src/runes/form-context.ts, to be used across the entire app
// /src/utils/form-context.ts, to be used across the entire app
import { createFormCreatorContexts } from '@tanstack/svelte-form'

export const { useFieldContext, useFormContext } = createFormCreatorContexts()
Expand All @@ -396,7 +396,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
```svelte
<!-- /src/components/text-field.svelte -->
<script lang="ts">
import { useFieldContext } from '../runes/form-context.js'
import { useFieldContext } from '../utils/form-context.js'

const field = useFieldContext<string>()

Expand All @@ -415,7 +415,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
```svelte
<!-- /src/components/subscribe-button.svelte -->
<script lang="ts">
import { useFormContext } from '../runes/form-context.js'
import { useFormContext } from '../utils/form-context.js'

const form = useFormContext()

Expand All @@ -432,7 +432,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
```

```ts
// /src/runes/form.ts
// /src/utils/form.ts
import { createFormCreator } from '@tanstack/svelte-form'
import TextField from '../components/text-field.svelte'
import SubscribeButton from '../components/subscribe-button.svelte'
Expand Down Expand Up @@ -462,7 +462,7 @@ export const peopleFormOpts = formOptions({
```svelte
<!-- /src/features/people/child-form.svelte, to be used in the `people` page -->
<script lang="ts">
import type { createAppForm } from '../../runes/form.js'
import type { createAppForm } from '../../utils/form.js'
import { peopleFormOpts } from './shared-form.js'

type AppForm = ReturnType<typeof createAppForm<typeof peopleFormOpts.defaultValues>>
Expand All @@ -488,7 +488,7 @@ export const peopleFormOpts = formOptions({
```svelte
<!-- /src/features/people/page.svelte -->
<script lang="ts">
import { createAppForm } from '../../runes/form.js'
import { createAppForm } from '../../utils/form.js'
import { peopleFormOpts } from './shared-form.js'
import ChildForm from './child-form.svelte'

Expand Down