Svelte Documentation

https://svelte.dev/docs
Admin
Svelte is a radical new approach to building user interfaces. It's a compiler that writes efficient,...
Tokens:689,003
Snippets:5,314
Trust Score:9.9
Update:2 days ago
Show doc for...
Tokens:
Raw
### Create a new SvelteKit project

Source: https://svelte.dev/docs/svelte/getting-started

Commands to create a new SvelteKit project, install dependencies, and start the development server.

```bash
npx sv create myapp
cd myapp
npm install
npm run dev
```

--------------------------------

### START record example

Source: https://svelte.dev/docs/cli/sv-check

The first row of machine-readable output is of type START and contains the workspace folder wrapped in quotes.

```plaintext
1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
```

--------------------------------

### Scaffold a new SvelteKit project and start the dev server

Source: https://svelte.dev/docs/kit/creating-a-project

Run these commands in your terminal to create a new SvelteKit app in the `my-app` directory. The first command prompts you to set up basic tooling like TypeScript. `npm run dev` starts the development server on localhost:5173; make sure to install dependencies first if you didn't during creation.

```bash
npx sv create my-app
cd my-app
npm run dev
```

--------------------------------

### Install Cloudflare adapter with npm

Source: https://svelte.dev/docs/kit/adapter-cloudflare

Install the adapter package using npm.

```bash
npm i -D @sveltejs/adapter-cloudflare
```

--------------------------------

### setup()

Source: https://svelte.dev/docs/cli/community

Defines the setup phase of the addon. It receives a workspace object with methods to declare dependencies, mark unsupported, and add dynamic options.

```APIDOC
## setup()

### Description
Defines the setup phase of the addon. It receives a workspace object with methods to declare dependencies, mark unsupported, and add dynamic options.

### Method
setup

### Signature
setup?: (workspace: Workspace) => MaybePromise<void>

### Parameters
- **workspace** (Workspace) - Required - An object with:
  - **dependsOn** (function) - Declares official addon dependencies.
  - **unsupported** (function) - Marks the addon as unsupported with a reason.
  - **runsAfter** (function) - Declares addons that should run after this one.
  - **addOption** (function) - Dynamically adds an option.

### Example
```js
setup({ dependsOn, isKit, unsupported, addOption }) {
  if (!isKit) unsupported('Requires SvelteKit');
  dependsOn('vitest');
  // addOption('key', { question: '...', type: 'boolean', default: true });
}
```
```

--------------------------------

### Setup function with dependencies

Source: https://svelte.dev/docs/cli/community

Shows the setup function for an addon, including checking if SvelteKit is used, declaring dependencies, and adding dynamic options.

```javascript
({ dependsOn, isKit, unsupported, addOption }) => {
		if (!isKit) unsupported('Requires SvelteKit');
		dependsOn('vitest');

		// dynamically add options (e.g. based on workspace state or fetched data)
		// addOption('key', { question: '...', type: 'boolean', default: true });
	}
```

--------------------------------

### Readonly dimension bindings with null get

Source: https://svelte.dev/docs/svelte/bind

For readonly bindings like clientWidth and clientHeight, the get function must be null. This example binds both dimensions to a redraw function.

```svelte
<div
	bind:clientWidth={null, redraw}
	bind:clientHeight={null, redraw}
>...</div>
```

--------------------------------

### GET form for search

Source: https://svelte.dev/docs/kit/form-actions

Example of a form using method="GET" to navigate to /search?q=... without invoking an action. This is suitable for search inputs.

```html
<form action="/search">
	<label>
		Search
		<input name="q">
	</label>
</form>
```

--------------------------------

### Start the Bun server

Source: https://svelte.dev/docs/kit/adapter-bun

The default build is written to 'build'. Start it with this command.

```bash
bun ./build
```

--------------------------------

### normalizeUrl usage example

Source: https://svelte.dev/docs/kit/@sveltejs-kit

Shows how to use normalizeUrl to normalize a URL pathname and then denormalize it to get the __data.json URL.

```javascript
const url = new URL('/blog/post');
console.log(url.pathname); // /blog/post
const { url: normalizedUrl, denormalize } = normalizeUrl(url);
console.log(normalizedUrl.pathname); // /blog/post/a
console.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json
```

--------------------------------

### Run adapter-node with PROTOCOL_HEADER and HOST_HEADER

Source: https://svelte.dev/docs/kit/adapter-node

Command to start the Node server with environment variables that tell SvelteKit the request protocol and host, typically used behind a reverse proxy.

```bash
PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build
```

--------------------------------

### vite.config.js with adapter-vercel

Source: https://svelte.dev/docs/kit/adapter-vercel

Example configuration for Vercel deployment. Install with `npm i -D @sveltejs/adapter-vercel` and add the adapter to your Vite config.

```javascript
import adapter from '@sveltejs/adapter-vercel';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				// see below for options that can be set here
			})
		})
	]
});
```

--------------------------------

### Create from playground URL: --from-playground

Source: https://svelte.dev/docs/cli/sv-create

Creates a SvelteKit project from a playground URL, downloading all files and setting up the project structure. The URL must be a valid playground link.

```bash
npx sv create --from-playground="https://svelte.dev/playground/hello-world"
```

--------------------------------

### Configure envPrefix with adapter options

Source: https://svelte.dev/docs/kit/adapter-bun

Shows how to set the envPrefix option to 'MY_CUSTOM_' and then run the server with the prefixed environment variables MY_CUSTOM_HOST and MY_CUSTOM_PORT. When a prefix is configured, the server fails at startup if it finds an unknown environment variable with that prefix.

```javascript
adapter(alias) adapter(options?: AdapterOptions): Adapter
import adapter({ envPrefix(property) AdapterOptions.envPrefix?: string | undefinedIf you need to change the name of the environment variables used to configure
the deployment (for example, to deconflict with environment variables you
don't control), you can specify a prefix:

envPrefix: 'MY_CUSTOM_'
MY_CUSTOM_HOST=127.0.0.1 \
MY_CUSTOM_PORT=4000 \
bun ./build
: 'MY_APP_' });
```

```bash
MY_APP_HOST=127.0.0.1 MY_APP_PORT=4000 bun ./build
```

--------------------------------

### load function with route property

Source: https://svelte.dev/docs/kit/load

Example of a load function that accesses the route property to get the current route ID.

```APIDOC
## load function

### Description
A load function that uses the `route` property to access the current route ID.

### Method
N/A (SvelteKit load function)

### Endpoint
N/A (SvelteKit load function)

### Parameters
#### LoadEvent
- **route** (object) - Required - Contains information about the current route.
  - **id** (string | null) - The ID of the current route, e.g. `/blog/[slug]`. `null` when no route is matched.

### Request Example
```js
/** @type {import('./$types').PageLoad} */
export function load({ route }) {
	console.log(route.id); // '/a/[b]/[...c]'
}
```

### Response
N/A (load function returns data or void)
```

--------------------------------

### +server.js

Source: https://svelte.dev/docs/kit/routing

Example of a +server.js file that handles a GET request, validates query parameters, and returns a random number response.

```APIDOC
## +server.js

### Description
A SvelteKit +server.js file that defines a GET handler. It reads query parameters 'min' and 'max', validates them, and returns a random number between them.

### Method
GET

### Endpoint
/+server.js (implicitly defined by the file location)

### Parameters
#### Query Parameters
- **min** (string) - Optional - The minimum value for the random number. Defaults to '1'.
- **max** (string) - Optional - The maximum value for the random number. Defaults to '1'.

### Request Example
GET /?min=1&max=10

### Response
#### Success Response (200)
- Returns a plain text response containing the random number.

#### Response Example
5

### Error Handling
- If 'min' or 'max' are not numbers, or if 'min' is greater than 'max', an error is thrown with status 400 and message 'min and max must be numbers, and min must be less than max'.

### Notes
- The first argument to `Response` can be a `ReadableStream` for streaming large data or server-sent events.
- Use `error` and `redirect` from `@sveltejs/kit` for convenience.
- If an error is thrown, the response will be a JSON representation of the error or a fallback error page, depending on the `Accept` header.
- `+layout` files have no effect on `+server.js` files; use the `handle` hook for pre-request logic.
```

--------------------------------

### Complete add-on definition with setup

Source: https://svelte.dev/docs/cli/sv

Shows a complete add-on definition using `defineAddon` with id, options, and a setup function that declares dependencies and environment requirements.

```javascript
export default defineAddon({
	id: 'my-addon',
	options: defineAddonOptions()
  .add('demo', {
    question: `demo? ${color.optional('(a cool one!)')}`
    type: string | boolean | number | select | multiselect,
    default: true,
  })
  .build(),

	// called before run - declare dependencies, environment requirements, and dynamic options
	setup: ({ dependsOn, unsupported, runsAfter, addOption }) => {
    // ...
  },
});
```

--------------------------------

### Reactive attachment example

Source: https://svelte.dev/docs/svelte/@attach

Shows a reactive attachment function that runs expensive setup work and updates on every change to its argument.

```svelte
function foo(bar: any): (node: any) => void {
	return (node: any) => {
		veryExpensiveSetupWork(node: any);
		update(node: any, bar: any);
	};
}
```

--------------------------------

### Install the Svelte plugin

Source: https://svelte.dev/docs/ai/claude-plugin

After adding the marketplace, run this command to install the Svelte plugin.

```text
/plugin install svelte
```

--------------------------------

### Each block with index example

Source: https://svelte.dev/docs/svelte/each

An each block that uses the index to display a numbered list. The index starts at 0, so i + 1 is used for display.

```svelte
{#each items as item, i}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}
```

--------------------------------

### Add marketplace and install Svelte plugin via Copilot CLI

Source: https://svelte.dev/docs/ai/copilot-plugin

Run these commands in the Copilot CLI to add the sveltejs/ai-tools marketplace and install the svelte plugin. The first command adds the marketplace, the second installs the plugin.

```bash
copilot plugin marketplace add sveltejs/ai-tools
```

```bash
copilot plugin install svelte@ai-tools
```

--------------------------------

### defineAddon with type parameter

Source: https://svelte.dev/docs/cli/sv

Shows how to pass a type parameter to defineAddon to get strong typing for dynamic options added in setup.

```APIDOC
## defineAddon<{ theme: string }>()

### Description
Pass a type parameter to `defineAddon` to get strong typing for options added dynamically in `setup` (e.g. from a fetch). The type parameter maps value types (`boolean`, `string`, `number`) to question definitions.

### Method
Function call

### Signature
`defineAddon<{ theme: string }>()`

### Parameters
#### Type Parameters
- **T** (object) - Required - An object mapping option keys to value types (e.g. `{ theme: string }`).

### Usage Example
```ts
const addon = defineAddon<{ theme: string }>()({
  id: 'my-addon',
  options: defineAddonOptions().build(),
  setup: ({ addOption }) => {
    addOption('theme', {
      question: 'Which theme?',
      type: 'string',
      default: 'dark'
    });
  },
  run: ({ options }) => {
    options.theme; // string
  }
});
```

### Notes
- Note the extra call: `defineAddon<{ theme: string }>()({ ... })` - this works around TypeScript's lack of partial type arguments.
- Without the type parameter, `defineAddon` stays strict and only allows statically defined options.
```

--------------------------------

### Get CLI help and version

Source: https://svelte.dev/docs/ai/cli

Displays help for the CLI, help for a specific command, and the version.

```bash
npx -y @sveltejs/mcp --help
npx -y @sveltejs/mcp <command> --help
npx -y @sveltejs/mcp --version
```

--------------------------------

### RouteParams usage example

Source: https://svelte.dev/docs/kit/$app-types

Shows how to use RouteParams to get the parameters for a specific route, e.g., /blog/[slug] yields { slug: string }.

```typescript
type BlogParams = RouteParams<"/blog/[slug]">; // { slug: string }
```

--------------------------------

### Bun.build compile examples

Source: https://svelte.dev/docs/kit/adapter-bun

Three Bun.build examples showing how to create executables for the current platform, cross-compile for Linux x64, and produce self-contained HTML. These are part of the compile property documentation.

```javascript
// Create executable for current platform
await Bun.build({
  entrypoints: ['./app.js'],
  compile: {
    target: 'linux-x64',
  },
  outfile: './my-app'
});
```

```javascript
// Cross-compile for Linux x64
await Bun.build({
  entrypoints: ['./app.js'],
  compile: 'linux-x64',
  outfile: './my-app'
});
```

```javascript
// Produce self-contained HTML
await Bun.build({
  entrypoints: ['./index.html'],
  target: 'browser',
  compile: true,
});
```

--------------------------------

### handleFetch hook example: rewrite API URL

Source: https://svelte.dev/docs/kit/hooks

Example of a handleFetch hook that clones the request and replaces the API URL with a local development server URL when the request URL starts with 'https://api.yourapp.com/'. The hook then calls the original fetch with the modified request.

```typescript
import type { HandleFetch } from '@sveltejs/kit/hooks';

export const handleFetch: HandleFetch = async ({ request, fetch }) => {
	if (request.url.startsWith('https://api.yourapp.com/')) {
		// clone the original request, but change the URL
		request = new Request(
			request.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),
			request
		);
	}

	return fetch(request);
};
```

--------------------------------

### SvelteKit handle hook example

Source: https://svelte.dev/docs/kit/hooks

Example of a handle hook that checks if the request URL starts with '/custom' and returns a custom response, otherwise resolves the event normally. The hook runs on every request and can modify headers or bodies, or bypass SvelteKit entirely.

```typescript
import type { Handle } from '@sveltejs/kit/hooks';

export const handle: Handle = async ({ event, resolve }) => {
	if (event.url.pathname.startsWith('/custom')) {
		return new Response('custom response');
	}

	const response = await resolve(event);
	return response;
};
```

--------------------------------

### Node.js command line example that does not work

Source: https://svelte.dev/docs/kit/adapter-node

Shows a command line example that does not work because changes to process.env are not reflected outside the Node.js process.

```bash
node -e 'process.env.foo = "bar"' && echo $foo
```

--------------------------------

### Define environment variables with defineEnvVars and custom validator

Source: https://svelte.dev/docs/kit/environment-variables

Alternative example using defineEnvVars with a custom validator for GOOGLE_ANALYTICS_ID. The schema checks that the value starts with 'G-' and throws an error otherwise. This is a separate example from the valibot one, showing a different validation approach.

```typescript
import { defineEnvVars } from '@sveltejs/kit/env';

export const variables = defineEnvVars({
	GOOGLE_ANALYTICS_ID: {
		public: true,
		schema: (value) => {
			if (!value?.startsWith('G-')) throw new Error('expected a Google Analytics ID');
			return value;
		}
	}
});
```

--------------------------------

### Wrangler configuration file example

Source: https://svelte.dev/docs/kit/adapter-cloudflare-workers

Example Wrangler configuration file for the adapter. It specifies the service name, account ID, main worker script, static assets bucket, build command, and compatibility date. Replace placeholders with your own values.

```json
{
	"name": "<your-service-name>",
	"account_id": "<your-account-id>",
	"main": "./.cloudflare/worker.js",
	"site": {
		"bucket": "./.cloudflare/public"
	},
	"build": {
		"command": "npm run build"
	},
	"compatibility_date": "2021-11-12"
}
```

--------------------------------

### Basic usage: npx sv create [options] [path]

Source: https://svelte.dev/docs/cli/sv-create

The general command syntax for creating a new SvelteKit project. The `path` argument is optional and specifies where to create the project.

```bash
npx sv create [options] [path]
```

--------------------------------

### JSDoc RequestHandler in +server.js

Source: https://svelte.dev/docs/kit/types

Example of using the generated RequestHandler type via JSDoc in a +server.js file. The GET function receives params from the route.

```javascript
/** @type {import('./$types').RequestHandler} */
export async function GETfunction GET(event: RequestEvent<RouteParams, string | null>): MaybePromise<Response>{import('./$types').RequestHandler}

({ params(parameter) params: RouteParamsThe parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.

Inside query functions (including query.batch and query.live), accessing this property throws an error.
Pass values from the page as arguments to the query instead. Inside form and command functions it relates to the page
the remote function was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use it
to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.

 }) {
	// ...
}
```

--------------------------------

### handleFetch hook example in src/hooks.server

Source: https://svelte.dev/docs/kit/hooks

This example shows how to use the handleFetch hook to modify fetch requests during SSR. It checks if the request URL starts with 'https://api.yourapp.com/' and if so, clones the request with the URL replaced to 'http://localhost:9999/'. The modified request is then passed to the original fetch function.

```javascript
/** @type {import('@sveltejs/kit/hooks').HandleFetch} */
export async function handleFetch({ request, fetch }) {
	if (request.url.startsWith('https://api.yourapp.com/')) {
		// clone the original request, but change the URL
		request = new Request(
			request.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),
			request
		);
	}

	return fetch(request);
}
```

--------------------------------

### Add marketplace and install Svelte plugin via interactive Copilot CLI session

Source: https://svelte.dev/docs/ai/copilot-plugin

Run these commands in an interactive Copilot CLI session to add the marketplace and install the plugin. The first command adds the marketplace, the second installs the plugin.

```bash
/plugin marketplace add sveltejs/ai-tools
```

```bash
/plugin install svelte@ai-tools
```

--------------------------------

### GET / - Headers Example

Source: https://svelte.dev/docs/kit/web-standards

A SvelteKit server endpoint that logs all request headers, retrieves the 'user-agent' header, and returns a JSON response with a custom header set.

```APIDOC
## [GET] / (SvelteKit Server Endpoint)

### Description
This endpoint demonstrates how to use the Fetch API `Headers` interface within a SvelteKit server endpoint. It logs all incoming request headers, retrieves the `user-agent` header, and returns a JSON response with a custom header set.

### Method
GET

### Endpoint
/ (SvelteKit server route)

### Parameters
#### Request Headers
- **user-agent** (string) - Optional - The user agent string of the client making the request. Retrieved via `request.headers.get('user-agent')`.

### Request Example
No request body is required for this GET endpoint.

### Response
#### Success Response (200)
- **userAgent** (string | null) - The value of the `user-agent` header from the request.

#### Response Headers
- **x-custom-header** (string) - Set to `'potato'` in the response.

#### Response Example
```json
{
  "userAgent": "Mozilla/5.0 ..."
}
```

### Code Example
```ts
import type { RequestHandler } from './$types';

export const GET: RequestHandler = ({ request }) => {
	// log all headers
	console.log(...request.headers);

	// create a JSON Response using a header we received
	return Response.json({
		// retrieve a specific header
		userAgent: request.headers.get('user-agent')
	}, {
		// set a header on the response
		headers: { 'x-custom-header': 'potato' }
	});
};
```
```

--------------------------------

### Configure demo pages with better-auth options

Source: https://svelte.dev/docs/cli/better-auth

Use these commands to specify which demo pages to include. The default is 'password' (Email & Password). Options are 'password', 'github', or both separated by a comma.

```bash
# Email & Password only (default)
npx sv add better-auth="demo:password"
```

```bash
# GitHub OAuth only
npx sv add better-auth="demo:github"
```

```bash
# Both Email & Password and GitHub OAuth
npx sv add better-auth="demo:password,github"
```

--------------------------------

### GET / - Headers Example

Source: https://svelte.dev/docs/kit/web-standards

A SvelteKit request handler that logs all request headers, retrieves the 'user-agent' header, and returns a JSON response with a custom header set.

```APIDOC
## [GET] / (SvelteKit Request Handler)

### Description
This is a SvelteKit request handler that demonstrates how to use the Fetch API Headers object. It logs all request headers, retrieves the 'user-agent' header, and returns a JSON response with a custom header set.

### Method
GET

### Endpoint
/ (SvelteKit route handler)

### Parameters
#### Request Object
- **request** (Request) - Required - The original request object. Contains the `headers` property (Headers object).

### Request Example
No request body is used. The request headers are accessed via `request.headers`.

### Response
#### Success Response (200)
- **body** (object) - Contains the `userAgent` field, which is the value of the 'user-agent' header from the request.
- **headers** (object) - Contains a custom header `x-custom-header` set to 'potato'.

#### Response Example
```json
{
  "userAgent": "Mozilla/5.0 ..."
}
```

### Code Example
```javascript
/** @type {import('./$types').RequestHandler} */
export function GET({ request }) {
	// log all headers
	console.log(...request.headers);

	// create a JSON Response using a header we received
	return Response.json({
		// retrieve a specific header
		userAgent: request.headers.get('user-agent')
	}, {
		// set a header on the response
		headers: { 'x-custom-header': 'potato' }
	});
}
```
```

--------------------------------

### Using the Console class for logging

Source: https://svelte.dev/docs/kit/faq

Shows how to create a Console instance with custom output streams and use its methods. The example uses getStreamSomehow() to obtain streams.

```javascript
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```

--------------------------------

### Preprocessor configuration with vitePreprocess and mdsvex

Source: https://svelte.dev/docs/svelte/v4-migration-guide

Example configuration showing the order of preprocessors, with vitePreprocess before mdsvex. Note that each preprocessor must have a name.

```javascript
preprocess: [
	vitePreprocess(),
	mdsvex(mdsvexConfig)
	mdsvexany(mdsvexConfigany),
	vitePreprocessany()
]
```

--------------------------------

### $effect.tracking JavaScript example

Source: https://svelte.dev/docs/svelte/$effect

Shows that $effect.tracking() returns false in component setup and true inside an effect or in the template. Useful for implementing reactive abstractions like createSubscriber.

```svelte
<script>
	console.log('in component setup:', $effect.tracking()); // false

	$effect(() => {
		console.log('in effect:', $effect.tracking()); // true
	});
</script>

<p>in template: {$effect.tracking()}</p> <!-- true -->
```

--------------------------------

### TypeScript RequestHandler in +server.ts

Source: https://svelte.dev/docs/kit/types

Example of using the generated RequestHandler type via TypeScript import in a +server.ts file. The GET constant is typed as RequestHandler and receives params.

```typescript
import type { RequestHandler(alias) type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>
import RequestHandler } from './$types';

export const GETconst GET: RequestHandler: RequestHandler(alias) type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>
import RequestHandler = async ({ params(parameter) params: RouteParamsThe parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.

Inside query functions (including query.batch and query.live), accessing this property throws an error.
Pass values from the page as arguments to the query instead. Inside form and command functions it relates to the page
the remote function was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use it
to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.

 }) => {
	// ...
};
```

--------------------------------

### Run server with custom environment variables

Source: https://svelte.dev/docs/kit/adapter-node

Shows how to start the server with custom environment variables using the MY_CUSTOM_ prefix. The variables MY_CUSTOM_HOST and MY_CUSTOM_PORT are set to 127.0.0.1 and 4000 respectively, and the server is started with 'node build'.

```bash
MY_CUSTOM_HOST=127.0.0.1 \
MY_CUSTOM_PORT=4000 \
node build
```

--------------------------------

### handleFetch hook example: forwarding cookies to api.my-domain.com

Source: https://svelte.dev/docs/kit/hooks

Use this hook to modify fetch requests made on the server or during prerendering. The example checks if the request URL starts with 'https://api.my-domain.com/' and copies the 'cookie' header from the original request to the outgoing request. This is useful for maintaining authentication when calling an external API.

```typescript
import type { HandleFetch } from '@sveltejs/kit/hooks';

export const handleFetch: HandleFetch = async ({ event, request, fetch }) => {
	if (request.url.startsWith('https://api.my-domain.com/')) {
		request.headers.set('cookie', event.request.headers.get('cookie'));
	}

	return fetch(request);
};
```

--------------------------------

### Run sv with Deno: deno run npm:sv create

Source: https://svelte.dev/docs/cli/faq

Use this command to run the Svelte CLI with Deno.

```bash
deno run npm:sv create
```

--------------------------------

### Get documentation with npx @sveltejs/mcp get-documentation

Source: https://svelte.dev/docs/ai/skills

Retrieves full documentation for specified sections. Use after list-sections to fetch relevant docs. The example fetches documentation for $state, $derived, and $effect.

```bash
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."
```

```bash
npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
```

--------------------------------

### Vite preprocessor setup in svelte.config

Source: https://svelte.dev/docs/svelte/typescript

Use vitePreprocess from @sveltejs/vite-plugin-svelte in the svelte.config file. The example shows the configuration with the script option set to true, which is noted as not needed for TypeScript since Svelte 5.

```javascript
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
	// Note the additional `{ script: true }`
	preprocess: vitePreprocess({ script: true })
};

export default config;
```

--------------------------------

### Enable demo page

Source: https://svelte.dev/docs/cli/paraglide

Generate an optional demo page showing how to use paraglide.

```bash
npx sv add paraglide="demo:yes"
```

--------------------------------

### GET / (Request Handler with Platform API)

Source: https://svelte.dev/docs/kit/adapter-bun

Example of a SvelteKit request handler that uses the `platform` property to access the Bun server instance. It demonstrates retrieving the client address and server information.

```APIDOC
## GET /

### Description
Example request handler that uses the `platform` property to access the Bun server instance.

### Method
GET

### Endpoint
/

### Parameters
#### Request Event Properties
- **getClientAddress** (function) - Required - Returns the client's IP address.
- **platform** (object) - Required - The Bun server instance.

### Request Example
No request body required.

### Response
#### Success Response (200)
- **address** (string) - The client's IP address.
- **serverId** (string) - The server's ID.
- **pendingRequests** (number) - Number of pending requests.
- **pendingWebSockets** (number) - Number of pending WebSocket connections.

#### Response Example
{
  "address": "127.0.0.1",
  "serverId": "server-1",
  "pendingRequests": 0,
  "pendingWebSockets": 0
}
```

--------------------------------

### vite.config.js with adapter-bun options

Source: https://svelte.dev/docs/kit/adapter-bun

Example configuration for SvelteKit using the adapter-bun. The adapter is configured with out, envPrefix, and serverOptions. The serverOptions are passed to Bun.serve and must be JSON-serializable; environment variables take precedence over these options.

```javascript
import adapter from '@sveltejs/adapter-bun';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				out: 'build',
				envPrefix: '',
				serverOptions: {
					idleTimeout: 30
				}
			})
		})
	]
});
```

--------------------------------

### Start production server with node build

Source: https://svelte.dev/docs/kit/adapter-node

Run this command after building your app with `npm run build` to start the production server. The output directory defaults to `build`.

```bash
node build
```
Tokens:
Raw