Svelte

https://svelte.dev/docs/svelte
Admin
Svelte is a framework for building user interfaces on the web that compiles declarative components...
Tokens:353,467
Snippets:3,482
Trust Score:9.9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### createSubscriber usage example

Source: https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt

Example implementation of MediaQuery using createSubscriber. Shows how to integrate event-based APIs, with start callback and cleanup. The getter becomes reactive when read in an effect.

```js
// @errors: 7031
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		// This makes the getter reactive, if read in an effect
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
```

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

### Install Vitest

Source: https://svelte.dev/docs/svelte/testing/llms.txt

Install Vitest as a dev dependency to set up testing manually.

```sh
npm install -D vitest
```

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

### unmount Usage Example

Source: https://svelte.dev/docs/svelte/svelte/llms.txt

JavaScript example showing how to use unmount to remove a component mounted with mount. The example imports mount and unmount from 'svelte', mounts an App component, and later unmounts it with the outro option.

```javascript
// @errors: 7031
import { mount, unmount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { target: document.body });

// later...
unmount(app, { outro: true });
```

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

### Writable store with start and stop functions

Source: https://svelte.dev/docs/svelte/stores/llms.txt

Creates a writable store with a start function as the second argument. The start function runs when the subscriber count goes from zero to one, and its returned stop function runs when the count returns to zero. Setting the value before any subscriber has no effect.

```js
import { writable } from 'svelte/store';

const count = writable(0, () => {
	console.log('got a subscriber');
	return () => console.log('no more subscribers');
});

count.set(1); // does nothing

const unsubscribe = count.subscribe((value) => {
	console.log(value);
}); // logs 'got a subscriber', then '1'

unsubscribe(); // logs 'no more subscribers'
```

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

### Console class example

Source: https://svelte.dev/docs/svelte/legacy-component-api

Example using the Console class. Creates a Console instance with custom output streams and demonstrates log, error, and warn methods.

```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
```

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

### Keyed each block example

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

Keyed each block example using item.id as the key. The second block shows the keyed form with an index.

```svelte
{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

<!-- or with additional index value -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}
```

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

### Example of process.env object

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

Example of the `process.env` object structure in Node.js, showing typical environment variables and their values.

```javascript
{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'maciej',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/maciej',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/maciej',
  LOGNAME: 'maciej',
  _: '/usr/local/bin/node'
}
```

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

### SvelteURLSearchParams usage example

Source: https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt

Shows how to use SvelteURLSearchParams in a Svelte component. Reading params via iteration or get()/getAll() triggers reactivity. The example appends key-value pairs from inputs and displays the params.

```svelte
<script>
	import { SvelteURLSearchParams } from 'svelte/reactivity';

	const params = new SvelteURLSearchParams('message=hello');

	let key = $state('key');
	let value = $state('value');
</script>

<input bind:value={key} />
<input bind:value={value} />
<button onclick={() => params.append(key, value)}>append</button>

<p>?{params.toString()}</p>

{#each params as [key, value]}
	<p>{key}: {value}</p>
{/each}
```

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

### $set example with answer prop

Source: https://svelte.dev/docs/svelte/legacy-component-api/llms.txt

Example of calling $set with a specific prop value. In Svelte 5+, use $state instead.

```ts
// @noErrors
component.$set({ answer: 42 });
```

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

### Install jsdom for component testing

Source: https://svelte.dev/docs/svelte/testing/llms.txt

Install the jsdom library to shim DOM APIs for component testing.

```sh
npm install -D jsdom
```

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

### Snippet scope example (TypeScript)

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

Same as the JavaScript example but with TypeScript syntax.

```svelte
<script lang="ts">
	let { message = `it's great to see you!` } = $props();
</script>

{#snippet hello(name)}
	<p>hello {name}! {message}!</p>
{/snippet}

{@render hello('alice')}
{@render hello('bob')}
```

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

### $on usage example

Source: https://svelte.dev/docs/svelte/legacy-component-api

Example of registering an event listener for the 'selected' event and then removing it using the returned off function.

```javascript
const off = component.$on('selected', (event) => {
	console.log(event.detail.selection);
});
off();
```

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

### Example with title and meta description

Source: https://svelte.dev/docs/svelte/svelte-head

Example usage of <svelte:head> to set the page title and a meta description for SEO. This content is inserted into document.head.

```svelte
<svelte:head>
	<title>Hello world!</title>
	<meta name="description" content="This is where the description goes for SEO" />
</svelte:head>
```

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

### svelte:window onkeydown example

Source: https://svelte.dev/docs/svelte/svelte-window/llms.txt

Example of adding a keydown event listener to the window object. The handler function is defined in a script tag and passed to the onkeydown directive.

```svelte
<script>
	function handleKeydown(event) {
		alert(`pressed the ${event.key} key`);
	}
</script>

<svelte:window onkeydown={handleKeydown} />
```

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

### Global console example

Source: https://svelte.dev/docs/svelte/legacy-component-api

Example using the global console object. Shows console.log, console.error, and console.warn with output comments. The global console writes to process.stdout and process.stderr.

```javascript
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

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

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

### Create a new SvelteKit project

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

Creates a new SvelteKit project and starts the development server. Run these commands in order from your terminal.

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

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

### Readonly binding with null get

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

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

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

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

### Migrating from new App to mount with $state

Source: https://svelte.dev/docs/svelte/v5-migration-guide/llms.txt

Shows the migration from `new App()` to `mount()` in runes mode. The `+++` and `---` markers indicate additions and removals respectively. Use `$state` to create reactive props and `mount` to instantiate the component.

```js
+++import { mount } from 'svelte';+++
import App from './App.svelte'

---const app = new App({ target: document.getElementById("app"), props: { foo: 'bar' } });
app.foo = 'baz'---
+++const props = $state({ foo: 'bar' });
const app = mount(App, { target: document.getElementById("app"), props });
props.foo = 'baz';+++
```

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

### state_referenced_locally fix example (Child.svelte)

Source: https://svelte.dev/docs/svelte/compiler-warnings/llms.txt

Child component that calls the function from context to get the current count, which updates correctly.

```svelte
<!--- file: Child.svelte --->
<script>
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- This will update -->
<p>The count is {+++count()+++}</p>
```

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

### Context example: App.svelte, Parent.svelte, Child.svelte, and context.ts

Source: https://svelte.dev/docs/svelte/context/llms.txt

Complete example showing how to set and get context in Svelte. Parent.svelte sets the context using setUserContext, Child.svelte retrieves it with getUserContext, and context.ts defines the createContext triplet. Requires Svelte 5.40 or later; use setContext/getContext for earlier versions.

```svelte
<!--- file: App.svelte --->
<script>
	import Parent from './Parent.svelte';
	import Child from './Child.svelte';
</script>

<Parent>
	<Child />
</Parent>
```

```svelte
<!--- file: Parent.svelte --->
<script>
	import { setUserContext } from './context';

	let { children } = $props();

	setUserContext({ name: 'world' });
</script>

{@render children()}
```

```svelte
<!--- file: Child.svelte --->
<script>
	import { getUserContext } from './context';

	const user = getUserContext();
</script>

<h1>hello {user.name}, inside Child.svelte</h1>
```

```ts
/// file: context.ts
import { createContext } from 'svelte';

interface User {
	name: string;
}

export const [getUserContext, setUserContext] = createContext<User>();
```

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

### SvelteMap usage example

Source: https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt

Shows how to use SvelteMap in a Svelte component for a tic-tac-toe game. Reading the map (iterating, size, get, has) causes re-evaluation when the map updates. Values are not deeply reactive.

```svelte
<script>
	import { SvelteMap } from 'svelte/reactivity';
	import { result } from './game.js';

	let board = new SvelteMap();
	let player = $state('x');
	let winner = $derived(result(board));

	function reset() {
		player = 'x';
		board.clear();
	}
</script>

<div class="board">
	{#each Array(9), i}
		<button
			disabled={board.has(i) || winner}
			onclick={() => {
				board.set(i, player);
				player = player === 'x' ? 'o' : 'x';
			}}
		>{board.get(i)}</button>
	{/each}
</div>

{#if winner}
	<p>{winner} wins!</p>
	<button onclick={reset}>reset</button>
{:else}
	<p>{player} is next</p>
{/if}
```

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

### mount

Source: https://svelte.dev/docs/svelte/imperative-component-api

Instantiates a component and mounts it to the given target. Returns the exports and potentially the props (if compiled with accessors: true) of the component. Transitions will play during the initial render unless the intro option is set to false.

```APIDOC
## mount

### Description
Instantiates a component and mounts it to the given target. Returns the exports and potentially the props (if compiled with accessors: true) of the component. Transitions will play during the initial render unless the intro option is set to false.

### Method
mount

### Signature
```typescript
function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(
  component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>,
  options: MountOptions<Props>
): Exports
```

### Parameters
- **component** (ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>) - Required - The component to mount.
- **options** (MountOptions<Props>) - Required - Options for mounting, including the target element and component properties.

### Options
- **target** (Document | Element | ShadowRoot) - Required - Target element where the component will be mounted.
- **props** (Record<string, any>) - Optional - Component properties.

### Returns
- **Exports** - The exports of the component, and potentially the props if compiled with accessors: true.

### Example
```javascript
import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
  target: document.querySelector('#app'),
  props: { some: 'property' }
});
```

### Notes
- Effects (including onMount callbacks and action functions) will not run during mount. Use flushSync() to force pending effects to run.
- You can mount multiple components per page, and mount from within your application.
```

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

### state_referenced_locally fix with lazy function

Source: https://svelte.dev/docs/svelte/compiler-warnings

Fixed version of the `state_referenced_locally` example. The parent wraps `count` in a function passed to `setContext`, and the child calls `count()` to get the current value, so updates propagate.

```svelte
<script>
	import { setContext } from 'svelte';

	let count = $state(0);
	setContext('count', () => count);
</script>

<button onclick={() => count++}>
	increment
</button>
```

```svelte
<script lang="ts">
	import { setContext } from 'svelte';

	let count = $state(0);
	setContext('count', () => count);
</script>

<button onclick={() => count++}>
	increment
</button>
```

```svelte
<script>
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- This will update -->
<p>The count is {count()}</p>
```

```svelte
<script lang="ts">
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- This will update -->
<p>The count is {count()}</p>
```

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

### Basic component test with Svelte mount API

Source: https://svelte.dev/docs/svelte/testing/llms.txt

Create a test file that imports a component, mounts it with Svelte's mount API, interacts with it, and writes expectations.

```js
/// file: component.test.js
import { flushSync, mount, unmount } from 'svelte';
import { expect, test } from 'vitest';
import Component from './Component.svelte';

test('Component', () => {
	// Instantiate the component using Svelte's `mount` API
	const component = mount(Component, {
		target: document.body, // `document` exists because of jsdom
		props: { initial: 0 }
	});

	expect(document.body.innerHTML).toBe('<button>0</button>');

	// Click the button, then flush the changes so you can synchronously write expectations
	document.body.querySelector('button')?.click();
	flushSync();

	expect(document.body.innerHTML).toBe('<button>1</button>');

	// Remove the component from the DOM
	unmount(component);
});
```

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

### get

Source: https://svelte.dev/docs/svelte-store

Get the current value from a store by subscribing and immediately unsubscribing.

```APIDOC
## get

### Description
Get the current value from a store by subscribing and immediately unsubscribing.

### Signature
```typescript
function get<T>(store: Readable<T>): T;
```

### Parameters
- `store` (Readable<T>) - Required - The store to get the value from.

### Returns
- `T` - The current value of the store.
```

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

### mount

Source: https://svelte.dev/docs/svelte/imperative-component-api/llms.txt

Instantiates a component and mounts it to a given target element.

```APIDOC
## `mount`

### Description
Instantiates a component and mounts it to the given target. You can mount multiple components per page, and you can also mount from within your application, for example when creating a tooltip component and attaching it to the hovered element. Note that unlike calling `new App(...)` in Svelte 4, things like effects (including `onMount` callbacks, and action functions) will not run during `mount`. If you need to force pending effects to run (in the context of a test, for example) you can do so with `flushSync()`.

### Method
`mount`

### Parameters
- **component** (Component) - Required - The component to mount.
- **options** (Object) - Required - Options for mounting.
  - **target** (Element) - Required - The DOM element to mount the component to.
  - **props** (Object) - Optional - Props to pass to the component.

### Request Example
```js
import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
	target: document.querySelector('#app'),
	props: { some: 'property' }
});
```

### Response
Returns the mounted component instance.
```

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

### Fork async work with fork()

Source: https://svelte.dev/docs/svelte/await-expressions/llms.txt

Use the `fork` API (added in Svelte 5.42) to preload async work before it is needed, typically for navigation preloading. The example shows a menu that forks on focus/pointer enter, discards on leave, and commits on click. The `pending` fork is created with `fork(() => { open = true; })` and can be discarded or committed; any async work inside the forked component starts as soon as the fork is created.

```svelte
<script>
	import { fork } from 'svelte';
	import Menu from './Menu.svelte';

	let open = $state(false);

	/** @type {import('svelte').Fork | null} */
	let pending = null;

	function preload() {
		pending ??= fork(() => {
			open = true;
		});
	}

	function discard() {
		pending?.discard();
		pending = null;
	}
</script>

<button
	onfocusin={preload}
	onfocusout={discard}
	onpointerenter={preload}
	onpointerleave={discard}
	onclick={() => {
		pending?.commit();
		pending = null;

		// in case `pending` didn't exist
		// (if it did, this is a no-op)
		open = true;
	}}
>open menu</button>

{#if open}
	<!-- any async work inside this component will start
	     as soon as the fork is created -->
	<Menu onclose={() => open = false} />
{/if}
```

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

### Mounting and unmounting a component

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

Demonstrates how to import and use the mount and unmount functions from 'svelte' to mount a component to the DOM and later unmount it. The example shows the required imports and the mount call.

```javascript
import { mount, unmount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { target: document.body });
```

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

### new Component(options)

Source: https://svelte.dev/docs/svelte/legacy-component-api/llms.txt

Documentation for creating a Svelte 3/4 client-side component instance using the `new Component(options)` constructor.

```APIDOC
## [CONSTRUCTOR] new Component(options)

### Description
Creates a new client-side component instance. The component must be compiled with `generate: 'dom'` (or the `generate` option left unspecified).

### Constructor
`new Component(options)`

### Parameters
#### Options
- **target** (`HTMLElement` or `ShadowRoot`) - Required - An `HTMLElement` or `ShadowRoot` to render to.
- **anchor** (`HTMLElement` or `ShadowRoot` child) - Optional (default `null`) - A child of `target` to render the component immediately before.
- **props** (`object`) - Optional (default `{}`) - An object of properties to supply to the component.
- **context** (`Map`) - Optional (default `new Map()`) - A `Map` of root-level context key-value pairs to supply to the component.
- **hydrate** (`boolean`) - Optional (default `false`) - If `true`, will upgrade existing DOM (usually from server-side rendering) rather than creating new elements. Only works if the component was compiled with the `hydratable: true` option.
- **intro** (`boolean`) - Optional (default `false`) - If `true`, will play transitions on initial render, rather than waiting for subsequent state changes.

### Request Example
```js
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// assuming App.svelte contains something like
		// `export let answer`:
		answer: 42
	}
});
```

### Notes
- Existing children of `target` are left where they are.
- The `hydrate` option will cause any children of `target` to be removed, and the `anchor` option cannot be used alongside `hydrate: true`.
- The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.
- In Svelte 5+, use `mount` instead.
```

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

### Replace `new App()` and `$set` with `mount()` and `$state`

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

Shows the old class-based instantiation with `$set` and the new `mount()` function with a `$state` object for reactive properties. Use this when migrating from Svelte 4 to Svelte 5.

```javascript
import App from './App.svelte'

const app = new App({ target: document.getElementById("app"), props: { foo: 'bar' } });
app.$set({ foo: 'baz' });
```

```javascript
import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { target: document.body });
```

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

### Avoiding re-runs with $effect for expensive setup

Source: https://svelte.dev/docs/svelte/%40attach

Alternative pattern for expensive setup: pass data via a getter function and read it inside a `$effect` so the setup work runs only once while updates still react to changes.

```typescript
function foo(getBar: any): (node: any) => void {
	return (node: any) => {
		veryExpensiveSetupWork(node: any);

		$effect(() => {
			update(node: any, getBar: any);
		});
	};
}
```

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

### Module script and instance script

Source: https://svelte.dev/docs/svelte/svelte-files/llms.txt

Demonstrates a module-level script that runs once per module, and an instance script that runs per component instance. The module script can be referenced in the instance script, but not vice versa.

```svelte
<script module>
	let total = 0;
</script>

<script>
	total += 1;
	console.log(`instantiated ${total} times`);
</script>
```

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

### Console.log with substitution values

Source: https://svelte.dev/docs/svelte/custom-elements

Demonstrates console.log with a printf-style format string and multiple arguments. Both examples print 'count: 5' to stdout.

```javascript
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
```

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

### Custom element example

Source: https://svelte.dev/docs/svelte/svelte-options/llms.txt

Example of using the customElement option to compile the component as a custom element with the tag 'my-custom-element'.

```svelte
<svelte:options customElement="my-custom-element" />
```

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

### Import Svelte Reactivity Utilities

Source: https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt

Imports reactive built-ins and utilities from 'svelte/reactivity'. Use this to access MediaQuery, SvelteDate, SvelteMap, SvelteSet, SvelteURL, SvelteURLSearchParams, and createSubscriber.

```js
// @noErrors
import {
	MediaQuery,
	SvelteDate,
	SvelteMap,
	SvelteSet,
	SvelteURL,
	SvelteURLSearchParams,
	createSubscriber
} from 'svelte/reactivity';
```

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

### $set usage example

Source: https://svelte.dev/docs/svelte/legacy-component-api

Example of calling $set with an object containing the answer property. Note the update is asynchronous.

```javascript
component.$set({ answer: 42 });
```

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

### a11y_accesskey warning example

Source: https://svelte.dev/docs/svelte/compiler-warnings/llms.txt

Example that triggers the a11y_accesskey warning. Access keys create accessibility complications and should not be used.

```svelte
<!-- A11y: Avoid using accesskey -->
<div accesskey="z"></div>
```

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

### Each block argument reassignment: legacy vs runes mode

Source: https://svelte.dev/docs/svelte/compiler-errors/llms.txt

Legacy mode example reassigning/binding to each block argument, and the runes mode equivalent using the index.

```svelte
<script>
	let array = [1, 2, 3];
</script>

{#each array as entry}
	<!-- reassignment -->
	<button on:click={() => entry = 4}>change</button>

	<!-- binding -->
	<input bind:value={entry}>
{/each}
```

```svelte
<script>
	let array = $state([1, 2, 3]);
</script>

{#each array as entry, i}
	<!-- reassignment -->
	<button onclick={() => array[i] = 4}>change</button>

	<!-- binding -->
	<input bind:value={array[i]}>
{/each}
```

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

### a11y_distracting_elements warning example

Source: https://svelte.dev/docs/svelte/compiler-warnings/llms.txt

Example that triggers the a11y_distracting_elements warning. Distracting elements like marquee and blink are deprecated and should be avoided.

```svelte
<!-- A11y: Avoid <marquee> elements -->
<marquee></marquee>
```

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

### Chat window autoscroll example (beforeUpdate vs $effect.pre)

Source: https://svelte.dev/docs/svelte/lifecycle-hooks

Chat window example showing the flawed beforeUpdate approach in Svelte 4, requiring checks like updatingMessages to avoid messing with scroll position when toggling dark mode. The runes version uses $effect.pre with explicit messages reference to run only when messages change.

```svelte
<script>
	import { beforeUpdate, afterUpdate, tick } from 'svelte';

	let updatingMessages = false;
	let theme = $state('dark');
	let messages = $state([]);

	let viewport;

	beforeUpdate(() => {
	$effect.pre(() => {
		if (!updatingMessages) return;
		messages;
		const autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;

		if (autoscroll) {
			tick().then(() => {
				viewport.scrollTo(0, viewport.scrollHeight);
			});
		}

		updatingMessages = false;
	});

	function handleKeydown(event) {
		if (event.key === 'Enter') {
			const text = event.target.value;
			if (!text) return;

			updatingMessages = true;
			messages = [...messages, text];
			event.target.value = '';
		}
	}

	function toggle() {
		theme = theme === 'dark' ? 'light' : 'dark';
	}
</script>

<div class:dark={theme === 'dark'}>
	<div bind:this={viewport}>
		{#each messages as message}
			<p>{message}</p>
		{/each}
	</div>

	<input onkeydown={handleKeydown} />

	<button onclick={toggle}> Toggle dark mode </button>
</div>
```

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

### a11y_autofocus warning example

Source: https://svelte.dev/docs/svelte/compiler-warnings/llms.txt

Example that triggers the a11y_autofocus warning. Autofocusing elements can cause usability issues for sighted and non-sighted users.

```svelte
<!-- A11y: Avoid using autofocus -->
<input autofocus />
```

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

### Migrating from new App to mount in Svelte 5

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

Shows the old class-based instantiation with `new App(...)` and the new functional approach using `mount` from 'svelte'. Use this when manually mounting a component in a main.js file or similar. The `mount` function returns the component's exports and props, and transitions play during initial render unless `intro: false` is set.

```javascript
import { mount } from 'svelte';
import App from './App.svelte'

const app = new App({ target: document.getElementById("app") });

const app = mount(App, { target: document.getElementById("app") });

export default app;
```

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

### a11y_aria_activedescendant_has_tabindex warning example

Source: https://svelte.dev/docs/svelte/compiler-warnings/llms.txt

Example that triggers the a11y_aria_activedescendant_has_tabindex warning. The element must be tabbable, either inherently or via a tabindex attribute.

```svelte
<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
<div aria-activedescendant="some-id"></div>
```

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

### Render with props and context options

Source: https://svelte.dev/docs/svelte/legacy-component-api/llms.txt

Shows how to pass props and options to the render method. The options object can include a context Map for root-level context key-value pairs.

```js
// @noErrors
const { head, html, css } = App.render(
	// props
	{ answer: 42 },
	// options
	{
		context: new Map([['context-key', 'context-value']])
	}
);
```

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

### Console logging with myConsole

Source: https://svelte.dev/docs/svelte/custom-elements

Shows how to use myConsole.log, error, and warn methods. The log and warn methods support printf-style formatting with substitution values. Output goes to 'out' for log and 'err' for error and warn.

```javascript
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
```

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

### $bindable type declaration example

Source: https://svelte.dev/docs/svelte/%24bindable

Example of declaring a bindable prop with TypeScript types, showing the optional and required props pattern.

```typescript
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
```

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

### Spring constructor

Source: https://svelte.dev/docs/svelte/svelte-motion/llms.txt

Creates a new Spring instance with an initial value and optional spring options.

```APIDOC
## Spring constructor

### Description
Creates a new Spring instance with an initial value and optional spring options.

### Method
constructor

### Signature
`constructor(value: T, options?: SpringOptions)`

### Parameters
- `value` (T) - Required - The initial value of the spring.
- `options` (SpringOptions) - Optional - Configuration options for the spring.

### Example
```js
const spring = new Spring(0);
```
```

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

### onMount basic usage

Source: https://svelte.dev/docs/svelte/lifecycle-hooks

Schedules a callback to run when the component mounts. Must be called during component initialization. Does not run on the server.

```svelte
<script>
	import { onMount } from 'svelte';

	onMount(() => {
		console.log('the component has mounted');
	});
</script>
```

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

### Each block with else example

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

Example of an each block with an else clause. If the todos array is empty, the else block renders 'No tasks today!'.

```svelte
{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>No tasks today!</p>
{/each}
```

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

### Basic svelte:options syntax

Source: https://svelte.dev/docs/svelte/svelte-options/llms.txt

Shows the general syntax for the <svelte:options> element with an option and value placeholder.

```svelte
<svelte:options option={value} />
```

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

### createContext function signature

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

Returns a [get, set, has] triplet for type-safe context. get throws if set not called in current component or ancestors.

```typescript
function createContext<T>(): [
	() => T,
	(context: T) => T,
	() => boolean
];
```

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

### Pending snippet example

Source: https://svelte.dev/docs/svelte/svelte-boundary/llms.txt

Displays a loading message while await expressions inside the boundary are resolving.

```svelte
<svelte:boundary>
	<p>{await delayed('hello!')}</p>

	{#snippet pending()}
		<p>loading...</p>
	{/snippet}
</svelte:boundary>
```

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

### $state.eager usage example

Source: https://svelte.dev/docs/svelte/%24state/llms.txt

Shows how to use $state.eager to force immediate UI updates when state changes, useful for providing feedback during user actions like navigation. Use sparingly; in general, letting Svelte coordinate updates provides a better user experience.

```svelte
<nav>
	<a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
	<a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>
</nav>
```

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

### a11y_aria_attributes warning example

Source: https://svelte.dev/docs/svelte/compiler-warnings/llms.txt

Example that triggers the a11y_aria_attributes warning. Reserved DOM elements like meta do not support ARIA roles, states, or properties.

```svelte
<!-- A11y: <meta> should not have aria-* attributes -->
<meta aria-hidden="false" />
```

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

### $on example with off function

Source: https://svelte.dev/docs/svelte/legacy-component-api/llms.txt

Example of using $on to listen for a 'selected' event and then removing the listener with the returned off function. In Svelte 5+, pass callback props instead.

```ts
// @noErrors
const off = component.$on('selected', (event) => {
	console.log(event.detail.selection);
});

off();
```

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

### Console class with custom streams

Source: https://svelte.dev/docs/svelte/%24state

Example using the Console class. Creates a Console instance with custom output and error streams, then uses log() and error() methods.

```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
```
Tokens:
Raw