From e60c60dce99c29b0895df24bbc6e133a70371cd4 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <github-actions[bot]@users.noreply.github.com>
Date: Fri, 25 Jul 2025 21:59:28 +0000
Subject: [PATCH] sync docs

---
 .../20-core-concepts/60-remote-functions.md   | 471 ++++++++++++++++++
 .../content/docs/kit/30-advanced/20-hooks.md  |  31 ++
 .../docs/kit/98-reference/10-@sveltejs-kit.md | 346 ++++++++++++-
 .../kit/98-reference/20-$app-navigation.md    |  22 +
 .../docs/kit/98-reference/20-$app-server.md   | 251 +++++++++-
 .../docs/kit/98-reference/50-configuration.md |  34 ++
 6 files changed, 1148 insertions(+), 7 deletions(-)
 create mode 100644 apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md

diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md
new file mode 100644
index 0000000000..0e744641a7
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md
@@ -0,0 +1,471 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: Remote Functions
+---
+
+Remote functions are a new concept in SvelteKit since version 2.27 that allow you to declare functions inside a `.remote.ts` file, import them inside Svelte components and call them like regular functions. On the server they work like regular functions (and can access environment variables and database clients and so on), while on the client they become wrappers around `fetch`. Combined with Svelte's [experimental async feature](/docs/svelte/await-expressions) it allows you to load and manipulate date directly inside your components. If you're familiar with RPC and 'server functions', this is basically our take on the concept.
+
+This feature is currently experimental, and you must opt in by adding the `kit.experimental.remoteFunctions` option in your `svelte.config.js`:
+
+```js
+/// file: svelte.config.js
+export default {
+	kit: {
+		experimental: {
+			remoteFunctions: true
+		}
+    }
+};
+```
+
+## Overview
+
+Remote functions are declared inside a `.remote.ts` file. You can import them inside Svelte components and call them like regular async functions. On the server you import them directly; on the client, the module is transformed into a collection of functions that request data from the server. 
+
+As of now there exist four types of remote function: `query`, `form`, `command` and `prerender`.
+
+## query
+
+Queries are for reading dynamic data from the server. They can have zero or one arguments. If they have an argument, you're encouraged to validate the input via a schema which you can create with libraries like `Zod` (more details in the upcoming [Validation](#Validation) section). The argument is serialized with [devalue](https://github.com/rich-harris/devalue), which handles types like `Date` and `Map` in addition to JSON, and takes the [transport hook](https://svelte.dev/docs/kit/hooks#Universal-hooks-transport) into account.
+
+```ts
+/// file: likes.remote.ts
+import z from 'zod';
+import { query } from '$app/server';
+import * as db from '$lib/server/db';
+
+export const getLikes = query(z.string(), async (id) => {
+  const [row] = await db.sql`select likes from item where id = ${id}`;
+  return row.likes;
+});
+```
+
+When called during server-rendering, the result is serialized into the HTML payload so that the data isn't requested again during hydration.
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+  import { getLikes } from './likes.remote';
+  
+  let { item } = $props();
+</script>
+
+<p>likes: {await getLikes(item.id)}</p>
+```
+
+> Async SSR isn’t yet implemented in Svelte, which means this will only load in the client for now. Once SSR is supported, this will be able to hydrate correctly, not refetching data
+
+Queries are *thenable*, meaning they can be awaited. But they're not just promises, they also provide properties like `status` and `current` (which contains the most recent value, but is initially `undefined`) and methods like `withOverride(...)` (see the section on [optimistic UI](#Optimistic-updates), below) and `refresh()`, which fetches new data from the server. We’ll see an example of that in a moment.
+
+Query objects are cached in memory for as long as they are actively used, using the serialized arguments as a key — in other words `myQuery(id) === myQuery(id)`. Refreshing or overriding a query will update every occurrence of it on the page. We use Svelte's reactivity system to intelligently clear the cache to avoid memory leaks.
+
+## form
+
+Forms are the preferred way to write data to the server. Use the remote `form` function to achieve this:
+
+```ts
+/// file: likes.remote.ts
+import z from 'zod';
+import { query, form } from '$app/server';
+import * as db from '$lib/server/db';
+
+export const getLikes = query(z.string(), async (id) => {/*...*/});
+
+export const addLike = form(async (data: FormData) => {
+  const id = data.get('id') as string;
+
+  await sql`
+    update item
+    set likes = likes + 1
+    where id = ${id}
+  `;
+
+  // we can return arbitrary data from a form function
+  return { success: true };
+});
+```
+
+A form object such as `addLike` has enumerable properties — `method`, `action` and `onsubmit` — that can be spread onto a `<form>` element. This allows the form to work without JavaScript (i.e. it submits data and reloads the page), but it will also automatically progressively enhance the form, submitting data *without* reloading the entire page.
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+  import { getLikes, addLike } from './likes.remote';
+  
+  let { item } = $props();
+</script>
+
+<form {...addLike}>
+  <input type="hidden" name="id" value={item.id} />
+  <button>add like</button>
+</form>
+
+<p>likes: {await getLikes(item.id)}</p>
+```
+
+By default, all queries used on the page (along with any `load` functions) are automatically refreshed following a form submission, meaning `getLikes(...)` in the example above will show updated data.
+
+In addition to the enumerable properties, remote forms (`addLike` in our example) have non-enumerable properties. One of them is `result` which contains the return value. Use it to display something in response to the submission.
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+  import { getLikes, addLike } from './likes.remote';
+  
+  let { item } = $props();
+</script>
+
++++{#if addLike.result?.success}
+  <p>success!</p>
+{/if}+++
+
+<form {...addLike}>
+  <input type="hidden" name="id" value={item.id} />
+  <button>add like</button>
+</form>
+
+<p>likes: {await getLikes(item.id)}</p>
+```
+
+### enhance
+
+The remote form property `enhance` allows us to customize how the form is progressively enhanced. We can use this to indicate that *only* `getLikes(...)` should be refreshed and through that also enable *single-flight mutations*  — meaning that the updated data for `getLikes(...)` is sent back from the server along with the form result. Additionally we provide nicer behaviour in the case that the submission fails (by default, an error page will be shown): 
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+  import { getLikes, addLike } from './likes.remote';
+  
+  let { item } = $props();
+</script>
+
+{#if addLike.result?.success}
+  <p>success!</p>
+{/if}
+
+<form {...addLike.enhance(async ({ submit }) => {
+  try {
+    // by passing queries to `.updates(...)` we will prevent a global refresh and the
+    // refreshed data is sent together with the submission response (single flight mutation)
+    await submit().updates(getLikes(item.id));
+  } catch (error) {
+    // instead of showing an error page,
+    // present a demure notification
+    showToast(error.message);
+  }
+}}>
+  <input type="hidden" name="id" value={item.id} />
+  <button>add like</button>
+</form>
+
+<p>likes: {await getLikes(item.id)}</p>
+```
+
+> `form.result` need not indicate success — it can also contain validation errors along with any data that should repopulate the form on page reload, [much as happens today with form actions](form-actions).
+
+Alternatively we can also enable single-flight mutations by adding the `refresh` call to the server, which means _all_ calls to `addLike` will leverage single-flight mutations compared to only those who use `submit.updates(...)`:
+
+```ts
+/// file: likes.remote.ts
+import { query, form } from '$app/server';
+import * as db from '$lib/server/db';
+
+export const getLikes = query(async (id: string) => {
+  const [row] = await sql`select likes from item where id = ${id}`;
+  return row.likes;
+});
+
+export const addLike = form(async (data: FormData) => {
+  const id = data.get('id') as string;
+
+  await sql`
+    update item
+    set likes = likes + 1
+    where id = ${id}
+  `;
+
++++ await getLikes(id).refresh();+++
+
+  // we can return arbitrary data from a form function
+  return { success: true };
+});
+```
+
+### Forms in a list
+
+Sometimes you may have form submissions of the same type in a list, and each form action should be independently managed. Use the `for` method to create separate instances of the same form submission. In the following example, each todo item gets a separate `toggleTodo` form instance, which means you can toggle many in quick succession, with the submission results staying independent of each other:
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+  import { getTodos, toggleTodo } from './todos.remote';
+</script>
+
+{#each await getTodos() as todo (todo.id)}
+  {@const toggle = toggleTodo.for(todo.id)}
+  <form {...toggle}>
+    <input type="hidden" name="id" value={item.id} />
+    <input type="checkbox" checked={todo.checked} />
+    <button>toggle</button>
+    {#if toggle.result?.error}
+      <span class="error">Something went wrong</span>
+    {/if}
+  </form>
+{/each}
+```
+
+### formAction
+
+Forms allow you to have more than one button that kicks up a form submission. The non-primary buttons must have a `formaction` property in that case. The remote form provides a `formAction` property that allows you to do just that:
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+  import { addLike, removeLike } from './likes.remote';
+  
+  let { item } = $props();
+</script>
+
+<form {...addLike}>
+  <input type="hidden" name="id" value={item.id} />
+  <button>add like</button>
+  <button {...removeLike.formAction}>remove like</button>
+  <!--- removeLike.formAction.enhance(...) also exists --->
+</form>
+```
+
+## command
+
+For cases where serving no-JS users via the remote `form` function is impractical or undesirable, `command` offers an alternative way to write data to the server.
+
+```ts
+/// file: likes.remote.ts
+import z from 'zod';
+import { query, command } from '$app/server';
+import * as db from '$lib/server/db';
+
+export const getLikes = query(z.string(), async (id) => {
+  const [row] = await sql`select likes from item where id = ${id}`;
+  return row.likes;
+});
+
+export const addLike = command(z.string(), async (id) => {
+  await sql`
+    update item
+    set likes = likes + 1
+    where id = ${id}
+  `;
+  
+  getLikes(id).refresh();
+
+  // we can return arbitrary data from a command
+  return { success: true };
+});
+```
+
+Now simply call `addLike`, from (for example) an event handler:
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+  import { getLikes, addLike } from './likes.remote';
+  
+  let { item } = $props();
+</script>
+
+<button
+  onclick={async () => {
+    try {
+      await addLike();
+    } catch (error) {
+      showToast(error.message);
+    }
+  }}
+>
+  add like
+</button>
+
+<p>likes: {await getLikes(item.id)}</p>
+```
+
+> Commands cannot be called during render.
+
+As with forms, we can refresh associated queries on the server during the command or via `.updates(...)` on the client for a single-flight mutation, otherwise all queries will automatically be refreshed.
+
+## prerender
+
+This function is like `query` except that it will be invoked at build time to prerender the result. Use this for data that changes at most once per redeployment.
+
+```ts
+/// file: blog.remote.ts
+import z from 'zod';
+import { prerender } from '$app/server';
+
+export const getBlogPost = prerender(z.string(), (slug) => {
+  // ...
+});
+```
+
+You can use `prerender` functions on pages that are otherwise dynamic, allowing for partial prerendering of your data. This results in very fast navigation, since prerendered data can live on a CDN along with your other static assets, and will be put into the user's browser cache using the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) which even survives page reloads.
+
+> When the entire page has `export const prerender = true`, you cannot use queries, as they are dynamic.
+
+Prerendering is automatic, driven by SvelteKit's crawler, but  you can also provide an `entries` option to control what gets prerendered, in case some pages cannot be reached by the crawler:
+
+```ts
+/// file: blog.remote.ts
+import z from 'zod';
+import { prerender } from '$app/server';
+
+export const getBlogPost = prerender(
+  z.string(),
+  (slug) => {
+    // ...
+  },
+  {
+    entries: () => ['first-post', 'second-post', 'third-post']
+  }
+);
+```
+
+If the function is called at runtime with arguments that were not prerendered it will error by default, as the code will not have been included in the server bundle. You can set `dynamic: true` to change this behaviour:
+
+```ts
+/// file: blog.remote.ts
+import z from 'zod';
+import { prerender } from '$app/server';
+
+export const getBlogPost = prerender(
+  z.string(),
+  (slug) => {
+    // ...
+  },
+  {
++++   dynamic: true,+++
+    entries: () => ['first-post', 'second-post', 'third-post']
+  }
+);
+```
+
+## Optimistic updates
+
+Queries have an `withOverride` method, which is useful for optimistic updates. It receives a function that transforms the query, and must be passed to `submit().updates(...)` or `myCommand.updates(...)`:
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+  import { getLikes, addLike } from './likes.remote';
+  
+  let { item } = $props();
+</script>
+
+<button
+  onclick={async () => {
+    try {
+---      await addLike();---
++++      await addLike().updates(getLikes(item.id).withOverride((n) => n + 1));+++
+    } catch (error) {
+      showToast(error.message);
+    }
+  }}
+>
+  add like
+</button>
+
+<p>likes: {await getLikes(item.id)}</p>
+```
+
+> You can also do `const likes = $derived(getLikes(item.id))` in your `<script>` and then do `likes.withOverride(...)` and `{await likes}` if you prefer, but since `getLikes(item.id)` returns the same object in both cases, this is optional
+
+Multiple overrides can be applied simultaneously — if you click the button multiple times, the number of likes will increment accordingly. If `addLike()` fails, the override releases and will decrement it again, otherwise the updated data (sans override) will match the optimistic update.
+
+## Validation
+
+Data validation is an important part of remote functions. They look like regular JavaScript functions but they are actually auto-generated public endpoints. For that reason we strongly encourage you to validate the input using a [Standard Schema](https://standardschema.dev/) object, which you create for example through `Zod`:
+
+```ts
+/// file: data.remote.ts
+import { query } from '$app/server';
+import { z } from 'zod';
+
+const schema = z.object({
+  id: z.string()
+});
+
+export const getStuff = query(schema, async ({ id }) => {
+    // `id` is typed correctly. if the function
+    // was called with bad arguments, it will
+    // result in a 400 Bad Request response
+});
+```
+
+By default a failed schema validation will result in a generic `400` response with just the text `Bad Request`. You can adjust the returned shape by implementing the `handleValidationError` hook in `hooks.server.js`. The returned shape must adhere to the shape of `App.Error`.
+
+```ts
+/// file: src/hooks.server.ts
+import z from 'zod';
+
+export function handleValidationError({ issues }) {
+  return { validationErrors: z.prettifyError({ isses })}
+}
+```
+
+If you wish to opt out of validation (for example because you validate through other means, or just know this isn't a problem), you can do so by passing `'unchecked'` as the first argument instead:
+
+```ts
+/// file: data.remote.ts
+import { query } from '$app/server';
+
+export const getStuff = query('unchecked', async ({ id }: { id: string }) => {
+    // the shape might not actually be what TypeScript thinks
+    // since bad actors might call this function with other arguments
+});
+```
+
+In case your `query` does not accept arguments you don't need to pass a schema or `'unchecked'` - validation is added under the hood on your behalf to check that no arguments are passed to this function:
+
+```ts
+/// file: data.remote.ts
+import { query } from '$app/server';
+
+export const getStuff = query(() => {
+    // ...
+});
+```
+
+The same applies to `prerender` and `command`. `form` does not accept a schema since you are always passed a `FormData` object which you need to parse and validate yourself.
+
+## Accessing the current request event
+
+SvelteKit exposes a function called [`getRequestEvent`](https://svelte.dev/docs/kit/$app-server#getRequestEvent) which allows you to get details of the current request inside hooks, `load`, actions, server endpoints, and the functions they call.
+
+This function can now also be used in `query`, `form` and `command`, allowing us to do things like reading and writing cookies:
+
+```ts
+/// file: user.remote.ts
+import { getRequestEvent, query } from '$app/server';
+import { findUser } from '$lib/server/db';
+
+export const getProfile = query(async () => {
+  const user = await getUser();
+  
+  return {
+    name: user.name,
+    avatar: user.avatar
+  };
+});
+
+// this function could be called from multiple places
+function getUser() {
+  const { cookies, locals } = getRequestEvent();
+  
+  locals.userPromise ??= findUser(cookies.get('session_id'));
+  return await locals.userPromise;
+}
+```
+
+Note that some properties of `RequestEvent` are different in remote functions. There are no `params` or `route.id`, and you cannot set headers (other than writing cookies, and then only inside `form` and `command` functions), and `url.pathname` is always `/` (since the path that’s actually being requested by the client is purely an implementation detail).
+
+## Redirects
+
+Inside `query`, `form` and `prerender` functions it is possible to use the [`redirect(...)`](https://svelte.dev/docs/kit/@sveltejs-kit#redirect) function. It is *not* possible inside `command` functions, as you should avoid redirecting here. (If you absolutely have to, you can return a `{ redirect: location }` object and deal with it in the client.)
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
index 8b2f95cee7..0530672749 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -144,6 +144,37 @@ export async function handleFetch({ event, request, fetch }) {
 }
 ```
 
+### handleValidationError
+
+This hook is called when a remote function is called with an argument that does not match its schema. It must return an object matching the shape of [`App.Error`](types#Error).
+
+Say you have a remote function that expects a string as its argument ...
+
+```js
+/// file: todos.remote.js
+import z from 'zod';
+import { query } from '$app/server';
+
+export getTodo = query(z.string(), (id) => {
+	// implementation...
+});
+```
+
+...but it is called with something that doesn't match the schema — such as a number (e.g `await getTodos(1)`) — then validation will fail, the server will respond with a [400 status code](https://http.dog/400), and the function will throw with the message 'Bad Request'.
+
+To customise this message and add additional properties to the error object, implement `handleValidationError`:
+
+```js
+/// file: src/hooks.server.js
+import z from 'zod';
+
+/** @type {import('@sveltejs/kit').HandleValidationError} */
+export const handleValidationError = ({ issues }) => {
+  // @ts-expect-error The types are too strict and disallow this but it's perfectly valid
+  return { message: 'Schema Error', validationErrors: z.treeifyError({ issues })};
+}
+```
+
 ## Shared hooks
 
 The following can be added to `src/hooks.server.js` _and_ `src/hooks.client.js`:
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 2f31f06f44..95a0854827 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -118,9 +118,10 @@ function fail(status: number): ActionFailure<undefined>;
 <div class="ts-block">
 
 ```dts
-function fail<
-	T extends Record<string, unknown> | undefined = undefined
->(status: number, data: T): ActionFailure<T>;
+function fail<T = undefined>(
+	status: number,
+	data: T
+): ActionFailure<T>;
 ```
 
 </div>
@@ -305,9 +306,7 @@ type Action<
 <div class="ts-block">
 
 ```dts
-interface ActionFailure<
-	T extends Record<string, unknown> | undefined = undefined
-> {/*…*/}
+interface ActionFailure<T = undefined> {/*…*/}
 ```
 
 <div class="ts-block-property">
@@ -1142,6 +1141,26 @@ type HandleServerError = (input: {
 
 </div>
 
+## HandleValidationError
+
+The [`handleValidationError`](/docs/kit/hooks#Server-hooks-handleValidationError) hook runs when the argument to a remote function fails validation.
+
+It will be called with the validation issues and the event, and must return an object shape that matches `App.Error`.
+
+<div class="ts-block">
+
+```dts
+type HandleValidationError<
+	Issue extends
+		StandardSchemaV1.Issue = StandardSchemaV1.Issue
+> = (input: {
+	issues: Issue[];
+	event: RequestEvent;
+}) => MaybePromise<App.Error>;
+```
+
+</div>
+
 ## HttpError
 
 The object returned by the [`error`](/docs/kit/@sveltejs-kit#error) function.
@@ -1908,6 +1927,295 @@ The location to redirect to.
 </div>
 </div></div>
 
+## RemoteCommand
+
+The return value of a remote `command` function.
+Call it with the input arguments to execute the command.
+
+Note: Prefer remote `form` functions when possible, as they
+work without JavaScript enabled.
+
+```svelte
+<script>
+	import { createTodo } from './todos.remote.js';
+
+	let text = $state('');
+</script>
+
+<input bind:value={text} />
+<button onclick={async () => {
+	await createTodo({ text });
+}}>
+	Create Todo
+</button>
+```
+Use the `updates` method to specify which queries to update in response to the command.
+```svelte
+<script>
+	import { getTodos, createTodo } from './todos.remote.js';
+
+	let text = $state('');
+</script>
+
+<input bind:value={text} />
+<button onclick={async () => {
+	await createTodo({ text }).updates(
+		getTodos.withOverride((todos) => [...todos, { text, done: false }])
+	);
+}}>
+	Create Todo
+</button>
+
+<ul>
+	{#each await getTodos() as todo}
+		<li>{todo.text}</li>
+	{/each}
+</ul>
+```
+
+<div class="ts-block">
+
+```dts
+type RemoteCommand<Input, Output> = (arg: Input) => Promise<
+	Awaited<Output>
+> & {
+	updates: (
+		...queries: Array<
+			| RemoteQuery<any>
+			| ReturnType<RemoteQuery<any>['withOverride']>
+		>
+	) => Promise<Awaited<Output>>;
+};
+```
+
+</div>
+
+## RemoteForm
+
+The return value of a remote `form` function.
+Spread it onto a `<form>` element to connect the element to the remote function.
+
+```svelte
+<script>
+	import { createTodo } from './todos.remote.js';
+</script>
+
+<form {...createTodo}>
+	<input name="text" />
+	<!-- ... -->
+</form>
+```
+Use the `enhance` method to influence what happens when the form is submitted.
+```svelte
+<script>
+	import { getTodos, createTodo } from './todos.remote.js';
+</script>
+
+<form {...myFormAction.enhance(async ({ data, submit }) => {
+	// `data` is an instance of FormData (https://developer.mozilla.org/en-US/docs/Web/API/FormData)
+	const text = data.get('text');
+	const todo = { text, done: false };
+
+	// `updates` and `withOverride` enable optimistic UI updates
+	await submit().updates(
+		getTodos().withOverride((todos) => [...todos, todo])
+	);
+})}>
+	<input name="text" />
+	<!-- ... -->
+</form>
+
+<ul>
+	{#each await getTodos() as todo}
+		<li>{todo.text}</li>
+	{/each}
+</ul>
+```
+
+<div class="ts-block">
+
+```dts
+type RemoteForm<Result> = {
+	method: 'POST';
+	/** The URL to send the form to. */
+	action: string;
+	/** Event handler that intercepts the form submission on the client to prevent a full page reload */
+	onsubmit: (event: SubmitEvent) => void;
+	/** Use the `enhance` method to influence what happens when the form is submitted. */
+	enhance: (
+		callback: (opts: {
+			form: HTMLFormElement;
+			data: FormData;
+			submit: () => Promise<void> & {
+				updates: (
+					...queries: Array<
+						| RemoteQuery<any>
+						| ReturnType<RemoteQuery<any>['withOverride']>
+					>
+				) => Promise<void>;
+			};
+		}) => void
+	) => {
+		method: 'POST';
+		action: string;
+		onsubmit: (event: SubmitEvent) => void;
+	};
+	/**
+	 * Create an instance of the form for the given key.
+	 * The key is stringified and used for deduplication to potentially reuse existing instances.
+	 * Useful when you have multiple forms that use the same remote form action, for example in a loop.
+	 * ```svelte
+	 * {#each todos as todo}
+	 *	{@const todoForm = updateTodo.for(todo.id)}
+	 *	<form {...todoForm}>
+	 *		{#if todoForm.result?.invalid}<p>Invalid data</p>{/if}
+	 *		...
+	 *	</form>
+	 *	{/each}
+	 * ```
+	 */
+	for: (
+		key: string | number | boolean
+	) => Omit<RemoteForm<Result>, 'for'>;
+	/** The result of the form submission */
+	get result(): Result | undefined;
+	/** When there's an error during form submission, it appears on this property */
+	get error(): App.Error | undefined;
+	/** Spread this onto a `<button>` or `<input type="submit">` */
+	formAction: {
+		type: 'submit';
+		formaction: string;
+		onclick: (event: Event) => void;
+		/** Use the `enhance` method to influence what happens when the form is submitted. */
+		enhance: (
+			callback: (opts: {
+				form: HTMLFormElement;
+				data: FormData;
+				submit: () => Promise<void> & {
+					updates: (
+						...queries: Array<
+							| RemoteQuery<any>
+							| ReturnType<RemoteQuery<any>['withOverride']>
+						>
+					) => Promise<void>;
+				};
+			}) => void
+		) => {
+			type: 'submit';
+			formaction: string;
+			onclick: (event: Event) => void;
+		};
+	};
+};
+```
+
+</div>
+
+## RemotePrerenderFunction
+
+The return value of a remote `prerender` function.
+Call it with the input arguments to retrieve the value.
+On the server, this will directly call the underlying function.
+On the client, this will `fetch` data from the server.
+
+<div class="ts-block">
+
+```dts
+type RemotePrerenderFunction<Input, Output> = (
+	arg: Input
+) => RemoteResource<Output>;
+```
+
+</div>
+
+## RemoteQuery
+
+<div class="ts-block">
+
+```dts
+type RemoteQuery<T> = RemoteResource<T> & {
+	/**
+	 * On the client, this function will re-fetch the query from the server.
+	 *
+	 * On the server, this can be called in the context of a `command` or `form` remote function. It will then
+	 * transport the updated data to the client along with the response, if the action was successful.
+	 */
+	refresh: () => Promise<void>;
+	/**
+	 * Temporarily override the value of a query. Useful for optimistic UI updates.
+	 * `withOverride` expects a function that takes the current value and returns the new value.
+	 * In other words this works like `override`, but is specifically for use as part of the `updates` method of a remote `command` or `form` submit
+	 * in order to coordinate query refreshes and override releases at once, without causing e.g. flickering in the UI.
+	 *
+	 * ```svelte
+	 * <script>
+	 *   import { getTodos, addTodo } from './todos.remote.js';
+	 *   const todos = getTodos();
+	 * </script>
+	 *
+	 * <form {...addTodo.enhance(async ({ data, submit }) => {
+	 *   await submit().updates(todos.withOverride((todos) => [...todos, { text: data.get('text') }]));
+	 * }}>
+	 *   <input type="text" name="text" />
+	 *   <button type="submit">Add Todo</button>
+	 * </form>
+	 * ```
+	 */
+	withOverride: (
+		update: (current: Awaited<T>) => Awaited<T>
+	) => {
+		_key: string;
+		release: () => void;
+	};
+};
+```
+
+</div>
+
+## RemoteQueryFunction
+
+The return value of a remote `query` function.
+Call it with the input arguments to retrieve the value.
+On the server, this will directly call the underlying function.
+On the client, this will `fetch` data from the server.
+When the query is called in a reactive context on the client, it will update its dependencies with a new value whenever `refresh()` or `override()` are called.
+
+<div class="ts-block">
+
+```dts
+type RemoteQueryFunction<Input, Output> = (
+	arg: Input
+) => RemoteQuery<Output>;
+```
+
+</div>
+
+## RemoteResource
+
+<div class="ts-block">
+
+```dts
+type RemoteResource<T> = Promise<Awaited<T>> & {
+	/** The error in case the query fails. Most often this is a [`HttpError`](https://svelte.dev/docs/kit/@sveltejs-kit#HttpError) but it isn't guaranteed to be. */
+	get error(): any;
+	/** `true` before the first result is available and during refreshes */
+	get loading(): boolean;
+} & (
+		| {
+				/** The current value of the query. Undefined as long as there's no value yet */
+				get current(): undefined;
+				ready: false;
+		  }
+		| {
+				/** The current value of the query. Undefined as long as there's no value yet */
+				get current(): Awaited<T>;
+				ready: true;
+		  }
+	);
+```
+
+</div>
+
 ## RequestEvent
 
 <div class="ts-block">
@@ -2115,6 +2423,20 @@ isSubRequest: boolean;
 
 `true` for `+server.js` calls coming from SvelteKit without the overhead of actually making an HTTP request. This happens when you make same-origin `fetch` requests on the server.
 
+</div>
+</div>
+
+<div class="ts-block-property">
+
+```dts
+isRemoteRequest: boolean;
+```
+
+<div class="ts-block-property-details">
+
+`true` if the request comes from the client via a remote function. The `url` property will be stripped of the internal information
+related to the data request in this case. Use this property instead if the distinction is important to you.
+
 </div>
 </div></div>
 
@@ -2389,6 +2711,18 @@ nodes: SSRNodeLoader[];
 </div>
 <div class="ts-block-property">
 
+```dts
+remotes: Record<string, () => Promise<any>>;
+```
+
+<div class="ts-block-property-details">
+
+hashed filename -> import to that file
+
+</div>
+</div>
+<div class="ts-block-property">
+
 ```dts
 routes: SSRRoute[];
 ```
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
index ac29666d00..57163c4dcc 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-navigation.md
@@ -18,6 +18,7 @@ import {
 	preloadCode,
 	preloadData,
 	pushState,
+	refreshAll,
 	replaceState
 } from '$app/navigation';
 ```
@@ -248,6 +249,27 @@ function pushState(
 
 
 
+## refreshAll
+
+Causes all currently active remote functions to refresh, and all `load` functions belonging to the currently active page to re-run (unless disabled via the option argument).
+Returns a `Promise` that resolves when the page is subsequently updated.
+
+<div class="ts-block">
+
+```dts
+function refreshAll({
+	includeLoadFunctions
+}?:
+	| {
+			includeLoadFunctions?: boolean;
+	  }
+	| undefined): Promise<void>;
+```
+
+</div>
+
+
+
 ## replaceState
 
 Programmatically replace the current history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
index 6307f34fe5..12f137007c 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/20-$app-server.md
@@ -7,9 +7,120 @@ title: $app/server
 
 ```js
 // @noErrors
-import { getRequestEvent, read } from '$app/server';
+import {
+	command,
+	form,
+	getRequestEvent,
+	prerender,
+	query,
+	read
+} from '$app/server';
 ```
 
+## command
+
+Creates a remote command. The given function is invoked directly on the server and via a fetch call on the client.
+
+```ts
+import { blogPosts } from '$lib/server/db';
+
+export interface BlogPost {
+	id: string;
+	title: string;
+	content: string;
+}
+
+export const like = command((postId: string) => {
+	blogPosts.get(postId).like();
+});
+```
+
+```svelte
+<script lang="ts">
+	import { like } from './blog.remote.js';
+
+	let post: BlogPost = $props();
+</script>
+
+<h1>{post.title}</h1>
+<p>{post.content}</p>
+<button onclick={() => like(post.id)}>♡</button>
+```
+
+<div class="ts-block">
+
+```dts
+function command<Output>(
+	fn: () => Output
+): RemoteCommand<void, Output>;
+```
+
+</div>
+
+<div class="ts-block">
+
+```dts
+function command<Input, Output>(
+	validate: 'unchecked',
+	fn: (arg: Input) => Output
+): RemoteCommand<Input, Output>;
+```
+
+</div>
+
+<div class="ts-block">
+
+```dts
+function command<Schema extends StandardSchemaV1, Output>(
+	validate: Schema,
+	fn: (arg: StandardSchemaV1.InferOutput<Schema>) => Output
+): RemoteCommand<
+	StandardSchemaV1.InferOutput<Schema>,
+	Output
+>;
+```
+
+</div>
+
+
+
+## form
+
+Creates a form action. The passed function will be called when the form is submitted.
+Returns an object that can be spread onto a form element to connect it to the function.
+```ts
+import * as db from '$lib/server/db';
+
+export const createPost = form((formData) => {
+	const title = formData.get('title');
+	const content = formData.get('content');
+	return db.createPost({ title, content });
+});
+```
+```svelte
+<script>
+	import { createPost } from './blog.remote.js';
+</script>
+
+<form {...createPost}>
+	<input type="text" name="title" />
+	<textarea name="content" />
+	<button type="submit">Create</button>
+</form>
+```
+
+<div class="ts-block">
+
+```dts
+function form<T, U = never>(
+	fn: (formData: FormData) => MaybePromise<T>
+): RemoteForm<T, U>;
+```
+
+</div>
+
+
+
 ## getRequestEvent
 
 <blockquote class="since note">
@@ -35,6 +146,144 @@ function getRequestEvent(): RequestEvent<
 
 
 
+## prerender
+
+Creates a prerendered remote function. The given function is invoked at build time and the result is stored to disk.
+```ts
+import { blogPosts } from '$lib/server/db';
+
+export const blogPosts = prerender(() => blogPosts.getAll());
+```
+
+In case your function has an argument, you need to provide an `inputs` function that returns a list representing the arguments to be used for prerendering.
+```ts
+import z from 'zod';
+import { blogPosts } from '$lib/server/db';
+
+export const blogPost = prerender(
+ z.string(),
+	(id) => blogPosts.get(id),
+	{ inputs: () => blogPosts.getAll().map((post) => post.id) }
+);
+```
+
+<div class="ts-block">
+
+```dts
+function prerender<Output>(
+	fn: () => MaybePromise<Output>,
+	options?:
+		| {
+				inputs?: RemotePrerenderInputsGenerator<void>;
+				dynamic?: boolean;
+		  }
+		| undefined
+): RemotePrerenderFunction<void, Output>;
+```
+
+</div>
+
+<div class="ts-block">
+
+```dts
+function prerender<Input, Output>(
+	validate: 'unchecked',
+	fn: (arg: Input) => MaybePromise<Output>,
+	options?:
+		| {
+				inputs?: RemotePrerenderInputsGenerator<Input>;
+				dynamic?: boolean;
+		  }
+		| undefined
+): RemotePrerenderFunction<Input, Output>;
+```
+
+</div>
+
+<div class="ts-block">
+
+```dts
+function prerender<Schema extends StandardSchemaV1, Output>(
+	schema: Schema,
+	fn: (
+		arg: StandardSchemaV1.InferOutput<Schema>
+	) => MaybePromise<Output>,
+	options?:
+		| {
+				inputs?: RemotePrerenderInputsGenerator<
+					StandardSchemaV1.InferOutput<Schema>
+				>;
+				dynamic?: boolean;
+		  }
+		| undefined
+): RemotePrerenderFunction<
+	StandardSchemaV1.InferOutput<Schema>,
+	Output
+>;
+```
+
+</div>
+
+
+
+## query
+
+Creates a remote function that can be invoked like a regular function within components.
+The given function is invoked directly on the backend and via a fetch call on the client.
+```ts
+import { blogPosts } from '$lib/server/db';
+
+export const blogPosts = query(() => blogPosts.getAll());
+```
+```svelte
+<script>
+	import { blogPosts } from './blog.remote.js';
+</script>
+
+{#await blogPosts() then posts}
+	<!-- ... -->
+{/await}
+```
+
+<div class="ts-block">
+
+```dts
+function query<Output>(
+	fn: () => MaybePromise<Output>
+): RemoteQueryFunction<void, Output>;
+```
+
+</div>
+
+<div class="ts-block">
+
+```dts
+function query<Input, Output>(
+	validate: 'unchecked',
+	fn: (arg: Input) => MaybePromise<Output>
+): RemoteQueryFunction<Input, Output>;
+```
+
+</div>
+
+<div class="ts-block">
+
+```dts
+function query<Schema extends StandardSchemaV1, Output>(
+	schema: Schema,
+	fn: (
+		arg: StandardSchemaV1.InferOutput<Schema>
+	) => MaybePromise<Output>
+): RemoteQueryFunction<
+	StandardSchemaV1.InferOutput<Schema>,
+	Output
+>;
+```
+
+</div>
+
+
+
 ## read
 
 <blockquote class="since note">
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index f84f417d4f..dc6bf1552d 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -359,6 +359,40 @@ A prefix that signals that an environment variable is unsafe to expose to client
 
 </div>
 
+## experimental
+
+<div class="ts-block-property-bullets">
+
+
+
+</div>
+
+Experimental features which are exempt from semantic versioning. These features may be changed or removed at any time.
+
+<div class="ts-block-property-children">
+
+<div class="ts-block-property">
+
+```ts
+// @noErrors
+remoteFunctions?: boolean;
+```
+
+<div class="ts-block-property-details">
+
+<div class="ts-block-property-bullets">
+
+- <span class="tag">default</span> `false`
+
+</div>
+
+Whether to enable the experimental remote functions feature. This feature is not yet stable and may be changed or removed at any time.
+
+</div>
+</div>
+
+</div>
+
 ## files
 
 <div class="ts-block-property-bullets">

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/sveltejs/svelte.dev/compare/main...preview-kit-13986.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/sveltejs/svelte.dev/compare/main...preview-kit-13986.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/sveltejs/svelte.dev/compare/main...preview-kit-13986.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/sveltejs/svelte.dev/compare/main...preview-kit-13986.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>