diff --git a/.github/workflows/codecov.yml b/.github/workflows/codecov.yml
deleted file mode 100644
index 2b5a8a66..00000000
--- a/.github/workflows/codecov.yml
+++ /dev/null
@@ -1,31 +0,0 @@
-name: Run tests and upload coverage
-
-on:
- push:
- branches:
- - develop
- - master
-
-jobs:
- test:
- name: Run tests and collect coverage
- runs-on: ubuntu-latest
- steps:
- - name: Checkout
- uses: actions/checkout@v4
- with:
- fetch-depth: 0
-
- - name: Set up Node
- uses: actions/setup-node@v4
-
- - name: Install dependencies
- run: npm install
-
- - name: Run tests
- run: npx vitest run --coverage
-
- - name: Upload results to Codecov
- uses: codecov/codecov-action@v4
- with:
- token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.github/workflows/ninja_i18n.yml b/.github/workflows/ninja_i18n.yml
new file mode 100644
index 00000000..c0ed0590
--- /dev/null
+++ b/.github/workflows/ninja_i18n.yml
@@ -0,0 +1,23 @@
+
+name: Ninja i18n action
+
+on: pull_request_target
+
+# explicitly configure permissions, in case your GITHUB_TOKEN workflow permissions are set to read-only in repository settings
+permissions:
+ pull-requests: write # Necessary to comment on PRs
+ issues: read # Necessary to read issue comments
+ contents: read # Necessary to access the repo content
+
+jobs:
+ ninja-i18n:
+ name: Ninja i18n - GitHub Lint Action
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Run Ninja i18n
+ # @main ensures that the latest version of the action is used
+ uses: opral/ninja-i18n-action@main
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 2613ba79..246cecff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+test-results
node_modules
# Output
@@ -19,8 +20,3 @@ Thumbs.db
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
-
-# Tests
-/coverage
-coverage
-coverage/*
diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index b6f27f13..00000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-engine-strict=true
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..116d6852
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+ "recommendations": [
+ "inlang.vs-code-extension"
+ ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b6c80d2e..9079b616 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,8 +1,7 @@
{
"i18n-ally.localesPaths": [
- "src/lib/i18n",
- "src/lib/i18n/locales"
- ],
- "i18n-ally.keystyle": "nested",
- "i18n-ally.sourceLanguage": "en"
+ "messages",
+ "src/paraglide/messages",
+ "src/lib/paraglide/messages"
+ ]
}
\ No newline at end of file
diff --git a/README.md b/README.md
index c27df60b..24fe6953 100644
--- a/README.md
+++ b/README.md
@@ -1,80 +1,41 @@
-CropWatch Web UI
-Our PWA Web Application for viewing and controlling your farm from anywhere and everywhere.
-
-
- [](https://github.com/CropWatchDevelopment/CropWatch/actions/workflows/github-code-scanning/codeql)
- [](https://github.com/CropWatchDevelopment/CropWatch/actions/workflows/github-code-scanning/codeql)
- [](https://codecov.io/gh/CropWatchDevelopment/CropWatch)
+# sv
-
-Loved the project? Please visit our Website
-Current Production UI
+```bash
+npm run dev
-# Environments
-- [UAT](https://crop-watch-i2xiyd6mo-crop-watch-team.vercel.app/)
-- [PROD](https://app.cropwatch.io)
-- [QA](https://app-qa.cropwatch.io)
-- [DEV](http://localhost:5173)
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
-## Github README PROFILE CATEGORY
+## Building
-- [x] [Dashboard]()
-- [x] [Locations]()
-- [x] [Location Details]()
-- [ ] [Sensor Details]()
-- [ ] [Sensor Rules]()
-- [ ] [Sensor Settings]()
-- [ ] [Sensor Compare]()
-- [ ] [Many Many Sensor Pages...]()
-- [ ] [Settings Page with notations]()
-- [ ] [Push Notifications]()
-- [ ] [Real-Time Updates]()
+To create a production version of your app:
-# List of Tools & Packages Used:
-- [Svelte-UX](https://github.com/techniq/svelte-ux)
-- [LayerChart](https://github.com/techniq/layerchart)
-- [Supabase](https://github.com/supabase/supabase)
+```bash
+npm run build
+```
-# Chat, collaberate, and learn at our `community pages` Here:
-- CropWatch WIKI
-- CropWatch Forum
-- Join our Discord Server
+You can preview the production build with `npm run preview`.
-# Contribute
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-Contributions are always welcome! Please create a PR to add your GitHub profile.
-
-# Debugging Server Side code using VSCode:
-- Press: Ctrl + Shift + P, Then choose "Debug: JavaScript Debug terminal" from the prompt.
-- In the terminal box that opens, type: pnpm dev
-- Set your breakpoint and run the code!
-
-# Issues
-
-I love knowing when something is wrong, that way I can fix it ASAP! However, please take care when submitting an issue, be clear about what is wrong, what you did to make it happen, and if possible include your device and browser where it happened.
-
-## :pencil: License
-
-This project is licensed under [MIT](https://opensource.org/licenses/MIT) license.
-
-## :man_astronaut: Show your support
-
-Give a ⭐️ if this project helped you!
+Drag and Drop: https://github.com/thisuxhq/SvelteDnD?tab=readme-ov-file
\ No newline at end of file
diff --git a/tests/test.ts b/e2e/demo.test.ts
similarity index 100%
rename from tests/test.ts
rename to e2e/demo.test.ts
diff --git a/eslint.config.js b/eslint.config.js
index 62dbd03c..a5265658 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,11 +1,10 @@
+import prettier from 'eslint-config-prettier';
import js from '@eslint/js';
-import ts from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';
-import prettier from 'eslint-config-prettier';
import globals from 'globals';
+import ts from 'typescript-eslint';
-/** @type {import('eslint').Linter.Config[]} */
-export default [
+export default ts.config(
js.configs.recommended,
...ts.configs.recommended,
...svelte.configs['flat/recommended'],
@@ -21,6 +20,7 @@ export default [
},
{
files: ['**/*.svelte'],
+
languageOptions: {
parserOptions: {
parser: ts.parser
@@ -30,4 +30,4 @@ export default [
{
ignores: ['build/', '.svelte-kit/', 'dist/']
}
-];
+);
diff --git a/llms-full.txt b/llms-full.txt
new file mode 100644
index 00000000..0d3ae859
--- /dev/null
+++ b/llms-full.txt
@@ -0,0 +1,27560 @@
+This is the full developer documentation for Svelte and SvelteKit.
+
+# Start of Svelte documentation
+
+
+# Overview
+
+Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...
+
+```svelte
+
+
+
+click me
+
+
+```
+
+...into lean, tightly optimized JavaScript.
+
+You can use it to build anything on the web, from standalone components to ambitious full stack apps (using Svelte's companion application framework, [SvelteKit](../kit)) and everything in between.
+
+These pages serve as reference documentation. If you're new to Svelte, we recommend starting with the [interactive tutorial](/tutorial) and coming back here when you have questions.
+
+You can also try Svelte online in the [playground](/playground) or, if you need a more fully-featured environment, on [StackBlitz](https://sveltekit.new).
+
+# Getting started
+
+We recommend using [SvelteKit](../kit), the official application framework from the Svelte team powered by [Vite](https://vite.dev/):
+
+```bash
+npx sv create myapp
+cd myapp
+npm install
+npm run dev
+```
+
+Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.
+
+## Alternatives to SvelteKit
+
+You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
+
+There are also plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-svelte), [Webpack](https://github.com/sveltejs/svelte-loader) [and a few others](https://sveltesociety.dev/packages?category=build-plugins), but we recommend Vite.
+
+## Editor tooling
+
+The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.
+
+You can also check your code from the command line using [sv check](https://github.com/sveltejs/cli).
+
+## Getting help
+
+Don't be shy about asking for help in the [Discord chatroom](/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).
+
+# .svelte files
+
+Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
+
+All three sections — script, styles and markup — are optional.
+
+
+```svelte
+/// file: MyComponent.svelte
+
+
+
+
+
+
+
+```
+
+## `
+
+
+```
+
+You can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.
+
+> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, but in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).
+
+> [!LEGACY]
+> In Svelte 4, this script tag was created using `
+```
+
+You can specify a fallback value for a prop. It will be used if the component's consumer doesn't specify the prop on the component when instantiating the component, or if the passed value is `undefined` at some point.
+
+```svelte
+
+```
+
+To get all properties, use rest syntax:
+
+```svelte
+
+```
+
+You can use reserved words as prop names.
+
+```svelte
+
+```
+
+If you're using TypeScript, you can declare the prop types:
+
+```svelte
+
+```
+
+If you're using JavaScript, you can declare the prop types using JSDoc:
+
+```svelte
+
+```
+
+If you export a `const`, `class` or `function`, it is readonly from outside the component.
+
+```svelte
+
+```
+
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](bindings#bind:this).
+
+### Reactive variables
+
+To change component state and trigger a re-render, just assign to a locally declared variable that was declared using the `$state` rune.
+
+Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
+
+```svelte
+
+```
+
+Svelte's `
+```
+
+If you'd like to react to changes to a prop, use the `$derived` or `$effect` runes instead.
+
+```svelte
+
+```
+
+For more information on reactivity, read the documentation around runes.
+
+# Reactivity fundamentals
+
+Reactivity is at the heart of interactive UIs. When you click a button, you expect some kind of response. It's your job as a developer to make this happen. It's Svelte's job to make your job as intuitive as possible, by providing a good API to express reactive systems.
+
+## Runes
+
+Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules.
+
+Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language.
+
+The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
+
+## `$state`
+
+Reactive state is declared with the `$state` rune:
+
+```svelte
+
+
+ count++}>
+ clicks: {count}
+
+```
+
+You can also use `$state` in class fields (whether public or private):
+
+```js
+// @errors: 7006 2554
+class Todo {
+ done = $state(false);
+ text = $state();
+
+ constructor(text) {
+ this.text = text;
+ }
+}
+```
+
+> [!LEGACY]
+> In Svelte 4, state was implicitly reactive if the variable was declared at the top level
+>
+> ```svelte
+>
+>
+> count++}>
+> clicks: {count}
+>
+> ```
+
+## `$derived`
+
+Derived state is declared with the `$derived` rune:
+
+```svelte
+
+
+ count++}>
+ {doubled}
+
+
+{count} doubled is {doubled}
+```
+
+The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
+
+As with `$state`, you can mark class fields as `$derived`.
+
+> [!LEGACY]
+> In Svelte 4, you could use reactive statements for this.
+>
+> ```svelte
+>
+>
+> count++}>
+> {doubled}
+>
+>
+> {count} doubled is {doubled}
+> ```
+>
+> This only worked at the top level of a component.
+
+## `$effect`
+
+To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
+
+```svelte
+
+
+ count++}>
+ clicks: {count}
+
+```
+
+Unlike other frameworks you may have encountered, there is no API for interacting with state — `count` is just a number, rather than an object or a function, and you can update it like you would update any other variable.
+
+### Deep state
+
+If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
+
+> [!NOTE] Classes like `Set` and `Map` will not be proxied, but Svelte provides reactive implementations for various built-ins like these that can be imported from [`svelte/reactivity`](./svelte-reactivity).
+
+State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
+
+```js
+let todos = $state([
+ {
+ done: false,
+ text: 'add more todos'
+ }
+]);
+```
+
+...modifying an individual todo's property will trigger updates to anything in your UI that depends on that specific property:
+
+```js
+let todos = [{ done: false, text: 'add more todos' }];
+// ---cut---
+todos[0].done = !todos[0].done;
+```
+
+If you push a new object to the array, it will also be proxified:
+
+```js
+// @filename: ambient.d.ts
+declare global {
+ const todos: Array<{ done: boolean, text: string }>
+}
+
+// @filename: index.js
+// ---cut---
+todos.push({
+ done: false,
+ text: 'eat lunch'
+});
+```
+
+> [!NOTE] When you update properties of proxies, the original object is _not_ mutated.
+
+Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
+
+```js
+let todos = [{ done: false, text: 'add more todos' }];
+// ---cut---
+let { done, text } = todos[0];
+
+// this will not affect the value of `done`
+todos[0].done = !todos[0].done;
+```
+
+### Classes
+
+You can also use `$state` in class fields (whether public or private):
+
+```js
+// @errors: 7006 2554
+class Todo {
+ done = $state(false);
+ text = $state();
+
+ constructor(text) {
+ this.text = text;
+ }
+
+ reset() {
+ this.text = '';
+ this.done = false;
+ }
+}
+```
+
+> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. This means the properties are not enumerable.
+
+When calling methods in JavaScript, the value of [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) matters. This won't work, because `this` inside the `reset` method will be the `` rather than the `Todo`:
+
+```svelte
+
+ reset
+
+```
+
+You can either use an inline function...
+
+```svelte
+ todo.reset()}>+++
+ reset
+
+```
+
+...or use an arrow function in the class definition:
+
+```js
+// @errors: 7006 2554
+class Todo {
+ done = $state(false);
+ text = $state();
+
+ constructor(text) {
+ this.text = text;
+ }
+
+ +++reset = () => {+++
+ this.text = '';
+ this.done = false;
+ }
+}
+```
+
+## `$state.raw`
+
+In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.
+
+State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
+
+```js
+let person = $state.raw({
+ name: 'Heraclitus',
+ age: 49
+});
+
+// this will have no effect
+person.age += 1;
+
+// this will work, because we're creating a new person
+person = {
+ name: 'Heraclitus',
+ age: 50
+};
+```
+
+This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
+
+## `$state.snapshot`
+
+To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
+
+```svelte
+
+```
+
+This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
+
+## Passing state into functions
+
+JavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {number} a
+ * @param {number} b
+ */
+function add(a, b) {
+ return a + b;
+}
+
+let a = 1;
+let b = 2;
+let total = add(a, b);
+console.log(total); // 3
+
+a = 3;
+b = 4;
+console.log(total); // still 3!
+```
+
+If `add` wanted to have access to the _current_ values of `a` and `b`, and to return the current `total` value, you would need to use functions instead:
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {() => number} getA
+ * @param {() => number} getB
+ */
+function add(+++getA, getB+++) {
+ return +++() => getA() + getB()+++;
+}
+
+let a = 1;
+let b = 2;
+let total = add+++(() => a, () => b)+++;
+console.log(+++total()+++); // 3
+
+a = 3;
+b = 4;
+console.log(+++total()+++); // 7
+```
+
+State in Svelte is no different — when you reference something declared with the `$state` rune...
+
+```js
+let a = +++$state(1)+++;
+let b = +++$state(2)+++;
+```
+
+...you're accessing its _current value_.
+
+Note that 'functions' is broad — it encompasses properties of proxies and [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)/[`set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) properties...
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {{ a: number, b: number }} input
+ */
+function add(input) {
+ return {
+ get value() {
+ return input.a + input.b;
+ }
+ };
+}
+
+let input = $state({ a: 1, b: 2 });
+let total = add(input);
+console.log(total.value); // 3
+
+input.a = 3;
+input.b = 4;
+console.log(total.value); // 7
+```
+
+...though if you find yourself writing code like that, consider using [classes](#Classes) instead.
+
+# $derived
+
+Derived state is declared with the `$derived` rune:
+
+```svelte
+
+
+ count++}>
+ {doubled}
+
+
+{count} doubled is {doubled}
+```
+
+The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
+
+As with `$state`, you can mark class fields as `$derived`.
+
+> [!NOTE] Code in Svelte components is only executed once at creation. Without the `$derived` rune, `doubled` would maintain its original value even when `count` changes.
+
+## `$derived.by`
+
+Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.
+
+```svelte
+
+
+ numbers.push(numbers.length + 1)}>
+ {numbers.join(' + ')} = {total}
+
+```
+
+In essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.
+
+## Understanding dependencies
+
+Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
+
+To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
+
+# $effect
+
+Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
+
+Most of the effects in a Svelte app are created by Svelte itself — they're the bits that update the text in `hello {name}! ` when `name` changes, for example.
+
+But you can also create your own effects with the `$effect` rune, which is useful when you need to synchronize an external system (whether that's a library, or a `` element, or something across a network) with state inside your Svelte app.
+
+> [!NOTE] Avoid overusing `$effect`! When you do too much work in effects, code often becomes difficult to understand and maintain. See [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.
+
+Your effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):
+
+```svelte
+
+
+{count}
+
+ (milliseconds *= 2)}>slower
+ (milliseconds /= 2)}>faster
+```
+
+### Understanding dependencies
+
+`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
+
+Values that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
+
+```ts
+// @filename: index.ts
+declare let canvas: {
+ width: number;
+ height: number;
+ getContext(type: '2d', options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;
+};
+declare let color: string;
+declare let size: number;
+
+// ---cut---
+$effect(() => {
+ const context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height);
+
+ // this will re-run whenever `color` changes...
+ context.fillStyle = color;
+
+ setTimeout(() => {
+ // ...but not when `size` changes
+ context.fillRect(0, 0, size, size);
+ }, 0);
+});
+```
+
+An effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`]($inspect).)
+
+```svelte
+
+
+ (state.value += 1)}>
+ {state.value}
+
+
+{state.value} doubled is {derived.value}
+```
+
+An effect only depends on the values that it read the last time it ran. If `a` is true, changes to `b` will [not cause this effect to rerun](/playground/untitled#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==):
+
+```ts
+let a = false;
+let b = false;
+// ---cut---
+$effect(() => {
+ console.log('running');
+
+ if (a || b) {
+ console.log('inside if block');
+ }
+});
+```
+
+## `$effect.pre`
+
+In rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:
+
+```svelte
+
+
+
+ {#each messages as message}
+
{message}
+ {/each}
+
in template: {$effect.tracking()}
+```
+
+This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects. Here's a `readable` function that listens to changes from a callback function as long as it's inside a tracking context:
+
+```ts
+import { tick } from 'svelte';
+
+export default function readable(
+ initial_value: T,
+ start: (callback: (update: (v: T) => T) => T) => () => void
+) {
+ let value = $state(initial_value);
+
+ let subscribers = 0;
+ let stop: null | (() => void) = null;
+
+ return {
+ get value() {
+ // If in a tracking context ...
+ if ($effect.tracking()) {
+ $effect(() => {
+ // ...and there's no subscribers yet...
+ if (subscribers === 0) {
+ // ...invoke the function and listen to changes to update state
+ stop = start((fn) => (value = fn(value)));
+ }
+
+ subscribers++;
+
+ // The return callback is called once a listener unlistens
+ return () => {
+ tick().then(() => {
+ subscribers--;
+ // If it was the last subscriber...
+ if (subscribers === 0) {
+ // ...stop listening to changes
+ stop?.();
+ stop = null;
+ }
+ });
+ };
+ });
+ }
+
+ return value;
+ }
+ };
+}
+```
+
+## `$effect.root`
+
+The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.
+
+```svelte
+
+```
+
+## When not to use `$effect`
+
+In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
+
+```svelte
+
+```
+
+...do this:
+
+```svelte
+
+```
+
+> [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.
+
+You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA)):
+
+```svelte
+
+
+
+
+
+
+
+```
+
+Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAACo1SMW6EMBD8imWluFMSIEUaDiKlvy5lSOHjlhOSMRZeTiDkv8deMEEJRcqdmZ1ZjzzxqpZgePo5cRw18JQA_sSVaPz0rnVk7iDRYxdhYA8vW4Wg0NnwzJRdrfGtUAVKQIYtCsly9pIkp4AZ7cQOezAoEA7JcWUkVBuCdol0dNWrEutWsV5fHfnhPQ5wZJMnCwyejxCh6G6A0V3IHk4zu_jOxzzPBxBld83PTr7xXrb3rUNw8PbiYJ3FP22oTIoLSComq5XuXTeu8LzgnVA3KDgj13wiQ8taRaJ82rzXskYM-URRlsXktejjgNLoo9e4fyf70_8EnwncySX1GuunX6kGRwnzR_BgaPNaGy3FmLJKwrCUeBM6ZUn0Cs2mOlp3vwthQJ5i14P9st9vZqQlsQIAAA==)):
+
+```svelte
+
+
+
+
+
+
+
+```
+
+If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/playground/untitled#H4sIAAAAAAAACpWRwW6DMBBEf8WyekikFOihFwcq9TvqHkyyQUjGsfCCQMj_XnvBNKpy6Qn2DTOD1wu_tRocF18Lx9kCFwT4iRvVxenT2syNoDGyWjl4xi93g2AwxPDSXfrW4oc0EjUgwzsqzSr2VhTnxJwNHwf24lAhHIpjVDZNwy1KS5wlNoGMSg9wOCYksQccerMlv65p51X0p_Xpdt_4YEy9yTkmV3z4MJT579-bUqsaNB2kbI0dwlnCgirJe2UakJzVrbkKaqkWivasU1O1ULxnOVk3JU-Uxti0p_-vKO4no_enbQ_yXhnZn0aHs4b1jiJMK7q2zmo1C3bTMG3LaZQVrMjeoSPgaUtkDxePMCEX2Ie6b_8D4WyJJEwCAAA=)):
+
+```svelte
+
+
+
+
+
+
+
+```
+
+If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
+
+# $props
+
+The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:
+
+```svelte
+
+
+
+this component is {props.adjective}
+```
+
+...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:
+
+```svelte
+
+
+
+this component is {+++adjective+++}
+```
+
+## Fallback values
+
+Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
+
+```js
+let { adjective = 'happy' } = $props();
+```
+
+> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)
+
+## Renaming props
+
+We can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`:
+
+```js
+let { super: trouper = 'lights are gonna find me' } = $props();
+```
+
+## Rest props
+
+Finally, we can use a _rest property_ to get, well, the rest of the props:
+
+```js
+let { a, b, c, ...others } = $props();
+```
+
+## Updating props
+
+References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
+
+```svelte
+
+
+
+ (count += 1)}>
+ clicks (parent): {count}
+
+
+ (count += 1)}>
+ clicks (child): {count}
+
+```
+
+While you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).
+
+If the prop is a regular object, the mutation will have no effect ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)):
+
+```svelte
+
+
+
+ {
+ // has no effect
+ object.count += 1
+}}>
+ clicks: {object.count}
+
+```
+
+If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==)):
+
+```svelte
+
+
+
+ {
+ // will cause the count below to update,
+ // but with a warning. Don't mutate
+ // objects you don't own!
+ object.count += 1
+}}>
+ clicks: {object.count}
+
+```
+
+The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA))
+
+```svelte
+
+
+
+ {
+ // has no effect if the fallback value is used
+ object.count += 1
+}}>
+ clicks: {object.count}
+
+```
+
+In summary: don't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune.
+
+## Type safety
+
+You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...
+
+```svelte
+
+```
+
+...while in JSDoc you can do this:
+
+```svelte
+
+```
+
+You can, of course, separate the type declaration from the annotation:
+
+```svelte
+
+```
+
+Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.
+
+# $bindable
+
+Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.
+
+In Svelte, component props can be _bound_, which means that data can also flow _up_ from child to parent. This isn't something you should do often, but it can simplify your code if used sparingly and carefully.
+
+It also means that a state proxy can be _mutated_ in the child.
+
+> [!NOTE] Mutation is also possible with normal props, but is strongly discouraged — Svelte will warn you if it detects that a component is mutating state it does not 'own'.
+
+To mark a prop as bindable, we use the `$bindable` rune:
+
+
+```svelte
+/// file: FancyInput.svelte
+
+
+` can add the [`bind:`](bind) directive ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwWrDMBBEf2URBSfg2nfFMZRCoYeecqx6UJx1IyqvhLUONcb_XqSkTUOSk1az7DBvJtEai0HI90nw6FHIJIhckO7i78n7IhzQctS2OuAtvXHESByEFFVoeuO5VqTYdN71DC-amvGV_MDQ9q6DrCjP0skkWymKJxYZOgxBfyKs4SGwZlxke7TWZcuVoqo8-1P1z3lraCcP2g64nk4GM5S1osrXf0JV-lrkgvGbheR-wDm_g30V8JL-1vpOCZFogpQsEsWcemtxscyhKArfOx9gjps0Lq4hzRVfemaYfu-PoIqqwKPFY_XpaIqj4tYRP7a6M3aUkD27zjSw0RTgbZN6Z8WNs66XsEP03tBXUueUJFlelvYx_wCuI3leNwIAAA==)):
+
+
+```svelte
+/// App.svelte
+
+
+{message}
+```
+
+The parent component doesn't _have_ to use `bind:` — it can just pass a normal prop. Some parents don't want to listen to what their children have to say.
+
+In this case, you can specify a fallback value for when no prop is passed at all:
+
+```js
+/// file: FancyInput.svelte
+let { value = $bindable('fallback'), ...props } = $props();
+```
+
+# $inspect
+
+> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.
+
+The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire ([demo](/playground/untitled#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA)):
+
+```svelte
+
+
+ count++}>Increment
+ count++}>Increment
+```
+
+A convenient way to find the origin of some change is to pass `console.trace` to `with`:
+
+```js
+// @errors: 2304
+$inspect(stuff).with(console.trace);
+```
+
+## $inspect.trace(...)
+
+This rune, added in 5.14, causes the surrounding function to be _traced_ in development. Any time the function re-runs as part of an [effect]($effect) or a [derived]($derived), information will be printed to the console about which pieces of reactive state caused the effect to fire.
+
+```svelte
+
+```
+
+`$inspect.trace` takes an optional first argument which will be used as the label.
+
+# $host
+
+When compiling a component as a custom element, the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
+
+
+```svelte
+/// file: Stepper.svelte
+ dispatch('decrement')}>decrement
+ dispatch('increment')}>increment
+```
+
+
+```svelte
+/// file: App.svelte
+
+
+ count -= 1}
+ onincrement={() => count += 1}
+>
+
+count: {count}
+```
+
+# Basic markup
+
+Markup inside a Svelte component can be thought of as HTML++.
+
+## Tags
+
+A lowercase tag, like ``, denotes a regular HTML element. A capitalised tag or a tag that uses dot notation, such as `
` or ``, indicates a _component_.
+
+```svelte
+
+
+
+
+```
+
+## Element attributes
+
+By default, attributes work exactly like their HTML counterparts.
+
+```svelte
+
+ can't touch this
+
+```
+
+As in HTML, values may be unquoted.
+
+
+```svelte
+page {p}
+```
+
+Or they can _be_ JavaScript expressions.
+
+```svelte
+...
+```
+
+Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
+
+All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
+
+```svelte
+This div has no title attribute
+```
+
+> [!NOTE] Quoting a singular expression does not affect how the value is parsed, but in Svelte 6 it will cause the value to be coerced to a string:
+>
+>
+> ```svelte
+> ...
+> ```
+
+When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
+
+```svelte
+...
+
+```
+
+## Component props
+
+By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
+
+As with elements, `name={name}` can be replaced with the `{name}` shorthand.
+
+```svelte
+ console.log('clicked')}>click me
+```
+
+Event attributes are case sensitive. `onclick` listens to the `click` event, `onClick` listens to the `Click` event, which is different. This ensures you can listen to custom events that have uppercase characters in them.
+
+Because events are just attributes, the same rules as for attributes apply:
+
+- you can use the shorthand form: `click me `
+- you can spread them: `click me `
+
+Timing-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_.
+
+When using `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) for better performance. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
+
+In the very rare cases that you need to prevent these event defaults, you should use [`on`](svelte-events#on) instead (for example inside an action).
+
+### Event delegation
+
+To reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path.
+
+There are a few gotchas to be aware of:
+
+- when you manually dispatch an event with a delegated listener, make sure to set the `{ bubbles: true }` option or it won't reach the application root
+- when using `addEventListener` directly, avoid calling `stopPropagation` or the event won't reach the application root and handlers won't be invoked. Similarly, handlers added manually inside the application root will run _before_ handlers added declaratively deeper in the DOM (with e.g. `onclick={...}`), in both capturing and bubbling phases. For these reasons it's better to use the `on` function imported from `svelte/events` rather than `addEventListener`, as it will ensure that order is preserved and `stopPropagation` is handled correctly.
+
+The following event handlers are delegated:
+
+- `beforeinput`
+- `click`
+- `change`
+- `dblclick`
+- `contextmenu`
+- `focusin`
+- `focusout`
+- `input`
+- `keydown`
+- `keyup`
+- `mousedown`
+- `mousemove`
+- `mouseout`
+- `mouseover`
+- `mouseup`
+- `pointerdown`
+- `pointermove`
+- `pointerout`
+- `pointerover`
+- `pointerup`
+- `touchend`
+- `touchmove`
+- `touchstart`
+
+## Text expressions
+
+A JavaScript expression can be included as text by surrounding it with curly braces.
+
+```svelte
+{expression}
+```
+
+Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`.
+
+If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
+
+
+```svelte
+Hello {name}!
+{a} + {b} = {a + b}.
+
+{(/^[A-Za-z ]+$/).test(value) ? x : y}
+```
+
+The expression will be stringified and escaped to prevent code injections. If you want to render HTML, use the `{@html}` tag instead.
+
+```svelte
+{@html potentiallyUnsafeHtmlString}
+```
+
+> [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/)
+
+## Comments
+
+You can use HTML comments inside components.
+
+```svelte
+Hello world
+```
+
+Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
+
+```svelte
+
+
+
+ Hello, {name}
+
+
+````
+
+# {#if ...}
+
+```svelte
+
+{#if expression}...{/if}
+```
+
+```svelte
+
+{#if expression}...{:else if expression}...{/if}
+```
+
+```svelte
+
+{#if expression}...{:else}...{/if}
+```
+
+Content that is conditionally rendered can be wrapped in an if block.
+
+```svelte
+{#if answer === 42}
+ what was the question?
+{/if}
+```
+
+Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
+
+```svelte
+{#if porridge.temperature > 100}
+ too hot!
+{:else if 80 > porridge.temperature}
+ too cold!
+{:else}
+ just right!
+{/if}
+```
+
+(Blocks don't have to wrap elements, they can also wrap text within elements.)
+
+# {#each ...}
+
+```svelte
+
+{#each expression as name}...{/each}
+```
+
+```svelte
+
+{#each expression as name, index}...{/each}
+```
+
+Iterating over values can be done with an each block. The values in question can be arrays, array-like objects (i.e. anything with a `length` property), or iterables like `Map` and `Set` — in other words, anything that can be used with `Array.from`.
+
+```svelte
+Shopping list
+
+ {#each items as item}
+ {item.name} x {item.qty}
+ {/each}
+
+```
+
+An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
+
+```svelte
+{#each items as item, i}
+ {i + 1}: {item.name} x {item.qty}
+{/each}
+```
+
+## Keyed each blocks
+
+```svelte
+
+{#each expression as name (key)}...{/each}
+```
+
+```svelte
+
+{#each expression as name, index (key)}...{/each}
+```
+
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+
+```svelte
+{#each items as item (item.id)}
+ {item.name} x {item.qty}
+{/each}
+
+
+{#each items as item, i (item.id)}
+ {i + 1}: {item.name} x {item.qty}
+{/each}
+```
+
+You can freely use destructuring and rest patterns in each blocks.
+
+```svelte
+{#each items as { id, name, qty }, i (id)}
+ {i + 1}: {name} x {qty}
+{/each}
+
+{#each objects as { id, ...rest }}
+ {id} {id}
+ {#each { length: 8 }, rank}
+ {#each { length: 8 }, file}
+
+ {/each}
+ {/each}
+
{todo.text}
+{:else}
+ No tasks today!
+{/each}
+```
+
+# {#key ...}
+
+```svelte
+
+{#key expression}...{/key}
+```
+
+Key blocks destroy and recreate their contents when the value of an expression changes. When used around components, this will cause them to be reinstantiated and reinitialised:
+
+```svelte
+{#key value}
+ {value}
+{/key}
+```
+
+# {#await ...}
+
+```svelte
+
+{#await expression}...{:then name}...{:catch name}...{/await}
+```
+
+```svelte
+
+{#await expression}...{:then name}...{/await}
+```
+
+```svelte
+
+{#await expression then name}...{/await}
+```
+
+```svelte
+
+{#await expression catch name}...{/await}
+```
+
+Await blocks allow you to branch on the three possible states of a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) — pending, fulfilled or rejected.
+
+```svelte
+{#await promise}
+
+ waiting for the promise to resolve...
+{:then value}
+
+ The value is {value}
+{:catch error}
+
+ Something went wrong: {error.message}
+{/await}
+```
+
+> [!NOTE] During server-side rendering, only the pending branch will be rendered.
+>
+> If the provided expression is not a `Promise`, only the `:then` branch will be rendered, including during server-side rendering.
+
+The `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
+
+```svelte
+{#await promise}
+
+ waiting for the promise to resolve...
+{:then value}
+
+ The value is {value}
+{/await}
+```
+
+If you don't care about the pending state, you can also omit the initial block.
+
+```svelte
+{#await promise then value}
+ The value is {value}
+{/await}
+```
+
+Similarly, if you only want to show the error state, you can omit the `then` block.
+
+```svelte
+{#await promise catch error}
+ The error is {error}
+{/await}
+```
+
+> [!NOTE] You can use `#await` with [`import(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to render components lazily:
+>
+> ```svelte
+> {#await import('./Component.svelte') then { default: Component }}
+>
+
+ {image.caption}
+
+
+ {:else}
+
+ {image.caption}
+
+ {/if}
+{/each}
+```
+
+...you can write [this](/playground/untitled#H4sIAAAAAAAAE5VUYW-bMBD9KxbRlERKY4jWfSA02n5H6QcXDmwVbMs-lnaI_z6D7TTt1moTAnPvzvfenQ_GpBEd2CS_HxPJekjy5IfWyS7BFz0b9id0CM62ajDVjBS2MkLjqZQldoBE9KwFS-7I_YyUOPqlRGuqnKw5orY5pVpUduj3mitUln5LU3pI0_UuBp9FjTwnDr9AHETLMSeHK6xiGoWSLi9yYT034cwSRjohn17zcQPNFTs8s153sK9Uv_Yh0-5_5d7-o9zbD-UqCaRWrllSYZQxLw_HUhb0ta-y4NnJUxfUvc7QuLJSaO0a3oh2MLBZat8u-wsPnXzKQvTtVVF34xK5d69ThFmHEQ4SpzeVRediTG8rjD5vBSeN3E5JyHh6R1DQK9-iml5kjzQUN_lSgVU8DhYLx7wwjSvRkMDvTjiwF4zM1kXZ7DlF1eN3A7IG85e-zRrYEjjm0FkI4Cc7Ripm0pHOChexhcWXzreeZyRMU6Mk3ljxC9w4QH-cQZ_b3T5pjHxk1VNr1CDrnJy5QDh6XLO6FrLNSRb2l9gz0wo3S6m7HErSgLsPGMHkpDZK31jOanXeHPQz-eruLHUP0z6yTbpbrn223V70uMXNSpQSZjpL0y8hcxxpNqA6_ql3BQAxlxvfpQ_uT9GrWjQC6iRHM8D0MP0GQsIi92QEAAA=):
+
+```svelte
+{#snippet figure(image)}
+
+ {image.caption}
+
+{/snippet}
+
+{#each images as image}
+ {#if image.href}
+
+ {@render figure(image)}
+
+ {:else}
+ {@render figure(image)}
+ {/if}
+{/each}
+```
+
+Like function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters, however.
+
+## Snippet scope
+
+Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `
+
+{#snippet hello(name)}
+ hello {name}! {message}!
+{/snippet}
+
+{@render hello('alice')}
+{@render hello('bob')}
+```
+
+...and they are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):
+
+```svelte
+
+ {#snippet x()}
+ {#snippet y()}...{/snippet}
+
+
+ {@render y()}
+ {/snippet}
+
+
+ {@render y()}
+
+
+
+{@render x()}
+```
+
+Snippets can reference themselves and each other ([demo](/playground/untitled#H4sIAAAAAAAAE2WPTQqDMBCFrxLiRqH1Zysi7TlqF1YnENBJSGJLCYGeo5tesUeosfYH3c2bee_jjaWMd6BpfrAU6x5oTvdS0g01V-mFPkNnYNRaDKrxGxto5FKCIaeu1kYwFkauwsoUWtZYPh_3W5FMY4U2mb3egL9kIwY0rbhgiO-sDTgjSEqSTvIDs-jiOP7i_MHuFGAL6p9BtiSbOTl0GtzCuihqE87cqtyam6WRGz_vRcsZh5bmRg3gju4Fptq_kzQBAAA=)):
+
+```svelte
+{#snippet blastoff()}
+ 🚀
+{/snippet}
+
+{#snippet countdown(n)}
+ {#if n > 0}
+ {n}...
+ {@render countdown(n - 1)}
+ {:else}
+ {@render blastoff()}
+ {/if}
+{/snippet}
+
+{@render countdown(10)}
+```
+
+## Passing snippets to components
+
+Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):
+
+```svelte
+
+
+{#snippet header()}
+ fruit
+ qty
+ price
+ total
+{/snippet}
+
+{#snippet row(d)}
+ {d.name}
+ {d.qty}
+ {d.price}
+ {d.qty * d.price}
+{/snippet}
+
+
+```
+
+Think about it like passing content instead of data to a component. The concept is similar to slots in web components.
+
+As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):
+
+```svelte
+
+
+ {#snippet header()}
+ fruit
+ qty
+ price
+ total
+ {/snippet}
+
+ {#snippet row(d)}
+ {d.name}
+ {d.qty}
+ {d.price}
+ {d.qty * d.price}
+ {/snippet}
+
+```
+
+Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):
+
+```svelte
+
+click me
+```
+
+```svelte
+
+
+
+
+{@render children()}
+```
+
+> [!NOTE] Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name
+
+You can declare snippet props as being optional. You can either use optional chaining to not render anything if the snippet isn't set...
+
+```svelte
+
+
+{@render children?.()}
+```
+
+...or use an `#if` block to render fallback content:
+
+```svelte
+
+
+{#if children}
+ {@render children()}
+{:else}
+ fallback content
+{/if}
+```
+
+## Typing snippets
+
+Snippets implement the `Snippet` interface imported from `'svelte'`:
+
+```svelte
+
+```
+
+With this change, red squigglies will appear if you try and use the component without providing a `data` prop and a `row` snippet. Notice that the type argument provided to `Snippet` is a tuple, since snippets can have multiple parameters.
+
+We can tighten things up further by declaring a generic, so that `data` and `row` refer to the same type:
+
+```svelte
+
+```
+
+## Exporting snippets
+
+Snippets declared at the top level of a `.svelte` file can be exported from a `
+
+{#snippet add(a, b)}
+ {a} + {b} = {a + b}
+{/snippet}
+```
+
+> [!NOTE]
+> This requires Svelte 5.5.0 or newer
+
+## Programmatic snippets
+
+Snippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.
+
+## Snippets and slots
+
+In Svelte 4, content can be passed to components using [slots](legacy-slots). Snippets are more powerful and flexible, and as such slots are deprecated in Svelte 5.
+
+# {@render ...}
+
+To render a [snippet](snippet), use a `{@render ...}` tag.
+
+```svelte
+{#snippet sum(a, b)}
+ {a} + {b} = {a + b}
+{/snippet}
+
+{@render sum(1, 2)}
+{@render sum(3, 4)}
+{@render sum(5, 6)}
+```
+
+The expression can be an identifier like `sum`, or an arbitrary JavaScript expression:
+
+```svelte
+{@render (cool ? coolSnippet : lameSnippet)()}
+```
+
+## Optional snippets
+
+If the snippet is potentially undefined — for example, because it's an incoming prop — then you can use optional chaining to only render it when it _is_ defined:
+
+```svelte
+{@render children?.()}
+```
+
+Alternatively, use an [`{#if ...}`](if) block with an `:else` clause to render fallback content:
+
+```svelte
+{#if children}
+ {@render children()}
+{:else}
+ fallback content
+{/if}
+```
+
+# {@html ...}
+
+To inject raw HTML into your component, use the `{@html ...}` tag:
+
+```svelte
+
+ {@html content}
+
+```
+
+> [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/). Never render unsanitized content.
+
+The expression should be valid standalone HTML — this will not work, because ` '}content{@html '
'}
+```
+
+It also will not compile Svelte code.
+
+## Styling
+
+Content rendered this way is 'invisible' to Svelte and as such will not receive [scoped styles](scoped-styles) — in other words, this will not work, and the `a` and `img` styles will be regarded as unused:
+
+
+```svelte
+
+ {@html content}
+
+
+
+```
+
+Instead, use the `:global` modifier to target everything inside the ``:
+
+
+```svelte
+
+```
+
+# {@const ...}
+
+The `{@const ...}` tag defines a local constant.
+
+```svelte
+{#each boxes as box}
+ {@const area = box.width * box.height}
+ {box.width} * {box.height} = {area}
+{/each}
+```
+
+`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — or a `Hello {user.firstname}!
+```
+
+`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
+
+```svelte
+
+{@debug user}
+{@debug user1, user2, user3}
+
+
+{@debug user.firstname}
+{@debug myArray[0]}
+{@debug !isReady}
+{@debug typeof user === 'object'}
+```
+
+The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
+
+# bind:
+
+Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.
+
+The general syntax is `bind:property={expression}`, where `expression` is an _lvalue_ (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
+
+
+```svelte
+...
+```
+
+> [!NOTE]
+> Function bindings are available in Svelte 5.9.0 and newer.
+
+## `{message}
+```
+
+In the case of a numeric input (`type="number"` or `type="range"`), the value will be coerced to a number ([demo](/playground/untitled#H4sIAAAAAAAAE6WPwYoCMQxAfyWEPeyiOOqx2w74Hds9pBql0IllmhGXYf5dKqwiyILsLXnwwsuI-5i4oPkaUX8yo7kCnKNQV7dNzoty4qSVBSr8jG-Poixa0KAt2z5mbb14TaxA4OCtKCm_rz4-f2m403WltrlrYhMFTtcLNkoeFGqZ8yhDF7j3CCHKzpwoDexGmqCL4jwuPUJHZ-dxVcfmyYGe5MAv-La5pbxYFf5Z9Zf_UJXb-sEMquFgJJhBmGyTW5yj8lnRaD_w9D1dAKSSj7zqAQAA)):
+
+```svelte
+
+
+
+
+
+
+
+
+{a} + {b} = {a + b}
+```
+
+If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
+
+Since 5.6.0, if an `
+
+```
+
+Since 5.6.0, if an `Upload a picture:
+clear
+```
+
+`FileList` objects also cannot be modified, so if you want to e.g. delete a single file from the list, you need to create a new `DataTransfer` object and add the files you want to keep.
+
+> [!NOTE] `DataTransfer` may not be available in server-side JS runtimes. Leaving the state that is bound to `files` uninitialized prevents potential errors if components are server-side rendered.
+
+## ``
+
+A `` value binding corresponds to the `value` property on the selected ``, which can be any value (not just strings, as is normally the case in the DOM).
+
+```svelte
+
+ a
+ b
+ c
+
+```
+
+A `` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected ``.
+
+```svelte
+
+ Rice
+ Beans
+ Cheese
+ Guac (extra)
+
+```
+
+When the value of an ` ` matches its text content, the attribute can be omitted.
+
+```svelte
+
+ Rice
+ Beans
+ Cheese
+ Guac (extra)
+
+```
+
+You can give the `` a default value by adding a `selected` attribute to the`` (or options, in the case of ``) that should be initially selected. If the `` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
+
+```svelte
+
+ a
+ b
+ c
+
+```
+
+## ``
+
+`` elements have their own set of bindings — five two-way ones...
+
+- [`currentTime`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime)
+- [`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)
+- [`paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)
+- [`volume`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume)
+- [`muted`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted)
+
+...and seven readonly ones:
+
+- [`duration`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)
+- [`buffered`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered)
+- [`paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)
+- [`seekable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable)
+- [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)
+- [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)
+- [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)
+
+```svelte
+`
+
+`` elements have all the same bindings as [#audio] elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings.
+
+## ``
+
+`` elements support binding to the `open` property.
+
+```svelte
+
+ How do you comfort a JavaScript bug?
+ You console it.
+
+```
+
+## Contenteditable bindings
+
+Elements with the `contenteditable` attribute support the following bindings:
+
+- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
+- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
+- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+
+> [!NOTE] There are [subtle differences between `innerText` and `textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext).
+
+
+
+```svelte
+
+```
+
+## Dimensions
+
+All visible elements have the following readonly bindings, measured with a `ResizeObserver`:
+
+- [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
+- [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
+- [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
+- [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+
+```svelte
+
+
+```
+
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like ``), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.
+
+## bind:this
+
+```svelte
+
+bind:this={dom_node}
+```
+
+To get a reference to a DOM node, use `bind:this`. The value will be `undefined` until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation:
+
+```svelte
+
+
+ cart.empty()}> Empty shopping cart
+```
+
+```svelte
+
+
+```
+
+## bind:_property_ for components
+
+```svelte
+bind:property={variable}
+```
+
+You can bind to component props using the same syntax as for elements.
+
+```svelte
+...
+```
+
+An action can be called with an argument:
+
+```svelte
+
+
+
+...
+```
+
+The action is only called once (but not during server-side rendering) — it will _not_ run again if the argument changes.
+
+> [!LEGACY]
+> Prior to the `$effect` rune, actions could return an object with `update` and `destroy` methods, where `update` would be called with the latest value of the argument if it changed. Using effects is preferred.
+
+## Typing
+
+The `Action` interface receives three optional type arguments — a node type (which can be `Element`, if the action applies to everything), a parameter, and any custom event handlers created by the action:
+
+```svelte
+
+
+
+...
+```
+
+# transition:
+
+A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.
+
+When a block (such as an `{#if ...}` block) is transitioning out, all elements inside it, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.
+
+The `transition:` directive indicates a _bidirectional_ transition, which means it can be smoothly reversed while the transition is in progress.
+
+```svelte
+
+
+ visible = !visible}>toggle
+
+{#if visible}
+ fades in and out
+{/if}
+```
+
+## Built-in transitions
+
+A selection of built-in transitions can be imported from the [`svelte/transition`](svelte-transition) module.
+
+## Local vs global
+
+Transitions are local by default. Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.
+
+```svelte
+{#if x}
+ {#if y}
+ fades in and out only when y changes
+
+ fades in and out when x or y change
+ {/if}
+{/if}
+```
+
+## Transition parameters
+
+Transitions can have parameters.
+
+(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+
+```svelte
+{#if visible}
+ fades in and out over two seconds
+{/if}
+```
+
+## Custom transition functions
+
+```js
+/// copy: false
+// @noErrors
+transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
+ delay?: number,
+ duration?: number,
+ easing?: (t: number) => number,
+ css?: (t: number, u: number) => string,
+ tick?: (t: number, u: number) => void
+}
+```
+
+Transitions can use custom functions. If the returned object has a `css` function, Svelte will generate keyframes for a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+
+The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
+
+The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
+
+```svelte
+
+
+
+{#if visible}
+ whooshes in
+{/if}
+```
+
+A custom transition function can also return a `tick` function, which is called _during_ the transition with the same `t` and `u` arguments.
+
+> [!NOTE] If it's possible to use `css` instead of `tick`, do so — web animations can run off the main thread, preventing jank on slower devices.
+
+```svelte
+
+
+
+{#if visible}
+ The quick brown fox jumps over the lazy dog
+{/if}
+```
+
+If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible.
+
+Transition functions also receive a third argument, `options`, which contains information about the transition.
+
+Available values in the `options` object are:
+
+- `direction` - one of `in`, `out`, or `both` depending on the type of transition
+
+## Transition events
+
+An element with transitions will dispatch the following events in addition to any standard DOM events:
+
+- `introstart`
+- `introend`
+- `outrostart`
+- `outroend`
+
+```svelte
+{#if visible}
+ (status = 'intro started')}
+ onoutrostart={() => (status = 'outro started')}
+ onintroend={() => (status = 'intro ended')}
+ onoutroend={() => (status = 'outro ended')}
+ >
+ Flies in and out
+
+{/if}
+```
+
+# in: and out:
+
+The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
+
+```svelte
+
+
+
+
+
+{#if visible}
+ flies in, fades out
+{/if}
+```
+
+# animate:
+
+An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
+
+Animations can be used with Svelte's [built-in animation functions](svelte-animate) or [custom animation functions](#Custom-animation-functions).
+
+```svelte
+
+{#each list as item, index (item)}
+ {item}
+{/each}
+```
+
+## Animation Parameters
+
+As with actions and transitions, animations can have parameters.
+
+(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+
+```svelte
+{#each list as item, index (item)}
+ {item}
+{/each}
+```
+
+## Custom animation functions
+
+```js
+/// copy: false
+// @noErrors
+animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
+ delay?: number,
+ duration?: number,
+ easing?: (t: number) => number,
+ css?: (t: number, u: number) => string,
+ tick?: (t: number, u: number) => void
+}
+```
+
+Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
+
+If the returned object has a `css` method, Svelte will create a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) that plays on the element.
+
+The `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`.
+
+The function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments.
+
+
+
+```svelte
+
+
+
+{#each list as item, index (item)}
+ {item}
+{/each}
+```
+
+A custom animation function can also return a `tick` function, which is called _during_ the animation with the same `t` and `u` arguments.
+
+> [!NOTE] If it's possible to use `css` instead of `tick`, do so — web animations can run off the main thread, preventing jank on slower devices.
+
+```svelte
+
+
+
+{#each list as item, index (item)}
+ {item}
+{/each}
+```
+
+# style:
+
+The `style:` directive provides a shorthand for setting multiple styles on an element.
+
+```svelte
+
+...
+...
+```
+
+The value can contain arbitrary expressions:
+
+```svelte
+...
+```
+
+The shorthand form is allowed:
+
+```svelte
+...
+```
+
+Multiple styles can be set on a single element:
+
+```svelte
+...
+```
+
+To mark a style as important, use the `|important` modifier:
+
+```svelte
+...
+```
+
+When `style:` directives are combined with `style` attributes, the directives will take precedence:
+
+```svelte
+This will be red
+```
+
+# class
+
+There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.
+
+## Attributes
+
+Primitive values are treated like any other attribute:
+
+```svelte
+...
+```
+
+> [!NOTE]
+> For historical reasons, falsy values (like `false` and `NaN`) are stringified (`class="false"`), though `class={undefined}` (or `null`) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause `class` to be omitted.
+
+### Objects and arrays
+
+Since Svelte 5.16, `class` can be an object or array, and is converted to a string using [clsx](https://github.com/lukeed/clsx).
+
+If the value is an object, the truthy keys are added:
+
+```svelte
+
+
+
+...
+```
+
+If the value is an array, the truthy values are combined:
+
+```svelte
+
+...
+```
+
+Note that whether we're using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you're using things like Tailwind.
+
+Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example:
+
+```svelte
+
+
+
+
+ {@render props.children?.()}
+
+```
+
+The user of this component has the same flexibility to use a mixture of objects, arrays and strings:
+
+```svelte
+
+
+
+ useTailwind = true}
+ class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
+>
+ Accept the inevitability of Tailwind
+
+```
+
+## The `class:` directive
+
+Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.
+
+```svelte
+
+...
+...
+```
+
+As with other directives, we can use a shorthand when the name of the class coincides with the value:
+
+```svelte
+...
+```
+
+> [!NOTE] Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable.
+
+# Control flow
+
+- if
+- each
+- await (or move that into some kind of data loading section?)
+- NOT: key (move into transition section, because that's the common use case)
+
+Svelte augments HTML with control flow blocks to be able to express conditionally rendered content or lists.
+
+The syntax between these blocks is the same:
+
+- `{#` denotes the start of a block
+- `{:` denotes a different branch part of the block. Depending on the block, there can be multiple of these
+- `{/` denotes the end of a block
+
+## {#if ...}
+
+## {#each ...}
+
+```svelte
+
+{#each expression as name}...{/each}
+```
+
+```svelte
+
+{#each expression as name, index}...{/each}
+```
+
+```svelte
+
+{#each expression as name (key)}...{/each}
+```
+
+```svelte
+
+{#each expression as name, index (key)}...{/each}
+```
+
+```svelte
+
+{#each expression as name}...{:else}...{/each}
+```
+
+Iterating over lists of values can be done with an each block.
+
+```svelte
+Shopping list
+
+ {#each items as item}
+ {item.name} x {item.qty}
+ {/each}
+
+```
+
+You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
+
+An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
+
+```svelte
+{#each items as item, i}
+ {i + 1}: {item.name} x {item.qty}
+{/each}
+```
+
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+
+```svelte
+{#each items as item (item.id)}
+ {item.name} x {item.qty}
+{/each}
+
+
+{#each items as item, i (item.id)}
+ {i + 1}: {item.name} x {item.qty}
+{/each}
+```
+
+You can freely use destructuring and rest patterns in each blocks.
+
+```svelte
+{#each items as { id, name, qty }, i (id)}
+ {i + 1}: {name} x {qty}
+{/each}
+
+{#each objects as { id, ...rest }}
+ {id} {id} {todo.text}
+{:else}
+ No tasks today!
+{/each}
+```
+
+It is possible to iterate over iterables like `Map` or `Set`. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using `Array.from` before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
+
+## Other block types
+
+Svelte also provides [`#snippet`](snippets), [`#key`](transitions-and-animations) and [`#await`](data-fetching) blocks. You can find out more about them in their respective sections.
+
+# Data fetching
+
+Fetching data is a fundamental part of apps interacting with the outside world. Svelte is unopinionated with how you fetch your data. The simplest way would be using the built-in `fetch` method:
+
+```svelte
+
+```
+
+While this works, it makes working with promises somewhat unergonomic. Svelte alleviates this problem using the `#await` block.
+
+## {#await ...}
+
+## SvelteKit loaders
+
+Fetching inside your components is great for simple use cases, but it's prone to data loading waterfalls and makes code harder to work with because of the promise handling. SvelteKit solves this problem by providing a opinionated data loading story that is coupled to its router. Learn more about it [in the docs](../kit).
+
+# Scoped styles
+
+Svelte components can include a `
+```
+
+## Specificity
+
+Each scoped selector receives a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) increase of 0-1-0, as a result of the scoping class (e.g. `.svelte-123xyz`) being added to the selector. This means that (for example) a `p` selector defined in a component will take precedence over a `p` selector defined in a global stylesheet, even if the global stylesheet is loaded later.
+
+In some cases, the scoping class must be added to a selector multiple times, but after the first occurrence it is added with `:where(.svelte-xyz123)` in order to not increase specificity further.
+
+## Scoped keyframes
+
+If a component defines `@keyframes`, the name is scoped to the component using the same hashing approach. Any `animation` rules in the component will be similarly adjusted:
+
+```svelte
+
+```
+
+# Global styles
+
+## :global(...)
+
+To apply styles to a single selector globally, use the `:global(...)` modifier:
+
+```svelte
+
+```
+
+If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
+
+The `-global-` part will be removed when compiled, and the keyframe will then be referenced using just `my-animation-name` elsewhere in your code.
+
+```svelte
+
+```
+
+## :global
+
+To apply styles to a group of selectors globally, create a `:global {...}` block:
+
+```svelte
+
+```
+
+> [!NOTE] The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.
+
+# Custom properties
+
+You can pass CSS custom properties — both static and dynamic — to components:
+
+```svelte
+
+
+```
+
+For an SVG element, it would use `` instead:
+
+```svelte
+
+
+```
+
+Inside the component, we can read these custom properties (and provide fallback values) using [`var(...)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):
+
+```svelte
+
+```
+
+You don't _have_ to specify the values directly on the component; as long as the custom properties are defined on a parent element, the component can use them. It's common to define custom properties on the `:root` element in a global stylesheet so that they apply to your entire application.
+
+> [!NOTE] While the extra element will not affect layout, it _will_ affect any CSS selectors that (for example) use the `>` combinator to target an element directly inside the component's container.
+
+# Nested
+
+```
+
+#
+
+```svelte
+...
+```
+
+> [!NOTE]
+> This feature was added in 5.3.0
+
+Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors.
+
+If an error occurs while rendering or updating the children of a ``, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.
+
+Errors occurring outside the rendering process (for example, in event handlers) are _not_ caught by error boundaries.
+
+## Properties
+
+For the boundary to do anything, one or both of `failed` and `onerror` must be provided.
+
+### `failed`
+
+If a `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
+
+```svelte
+
+ oops! try again
+ {/snippet}
+
+```
+
+> [!NOTE]
+> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property...
+>
+> ```svelte
+> ...
+> ```
+>
+> ...or implicitly by declaring it directly inside the boundary, as in the example above.
+
+### `onerror`
+
+If an `onerror` function is provided, it will be called with the same two `error` and `reset` arguments. This is useful for tracking the error with an error reporting service...
+
+```svelte
+ report(e)}>
+ ...
+
+```
+
+...or using `error` and `reset` outside the boundary itself:
+
+```svelte
+
+
+
+
+
+{#if error}
+ {
+ error = null;
+ reset();
+ }}>
+ oops! try again
+
+{/if}
+```
+
+If an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists.
+
+#
+
+```svelte
+` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering.
+
+This element may only appear at the top level of your component — it cannot be inside a block or element.
+
+```svelte
+
+
+
+
+```svelte
+`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](use) on `document`.
+
+As with ``, this element may only appear the top level of your component and must never be inside a block or element.
+
+```svelte
+
+
+```svelte
+`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](use) on the `` element.
+
+As with `` and ``, this element may only appear the top level of your component and must never be inside a block or element.
+
+```svelte
+
+
+```svelte
+...
+```
+
+This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `body` content.
+
+As with ``, `` and ``, this element may only appear at the top level of your component and must never be inside a block or element.
+
+```svelte
+
+ Hello world!
+
+```
+
+#
+
+```svelte
+` element lets you render an element that is unknown at author time, for example because it comes from a CMS. Any properties and event listeners present will be applied to the element.
+
+The only supported binding is `bind:this`, since Svelte's built-in bindings do not work with generic elements.
+
+If `this` has a nullish value, the element and its children will not be rendered.
+
+If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `` has child elements, a runtime error will be thrown in development mode:
+
+```svelte
+
+
+
+ This text cannot appear inside an hr element
+
+```
+
+Svelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute:
+
+```svelte
+
+
+```svelte
+` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](svelte-compiler#compile). The possible options are:
+
+- `runes={true}` — forces a component into _runes mode_ (see the [Legacy APIs](legacy-overview) section)
+- `runes={false}` — forces a component into _legacy mode_
+- `namespace="..."` — the namespace where this component will be used, can be "html" (the default), "svg" or "mathml"
+- `customElement={...}` — the [options](custom-elements#Component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
+- `css="injected"` — the component will inject its styles inline: During server side rendering, it's injected as a `
+```
+
+### element_invalid_self_closing_tag
+
+```
+Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...>` rather than `<%name% ... />`
+```
+
+In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
+
+```html
+
+
+```
+
+...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
+
+```html
+
+ some text!
+
+```
+
+Some templating languages (including Svelte) will 'fix' HTML by turning `hello
world
` will result in `hello
world
` (the `` autoclosed the `
` because `
` cannot contain block-level elements)
+- `option a
option a ` (the `
` is removed)
+- `
` will result in `
` (a `
` is auto-inserted)
+
+This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
+
+### non_reactive_update
+
+```
+`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
+```
+
+This warning is thrown when the compiler detects the following:
+- a variable was declared without `$state` or `$state.raw`
+- the variable is reassigned
+- the variable is read in a reactive context
+
+In this case, changing the value will not correctly trigger updates. Example:
+
+```svelte
+
+
+This value updates: {reactive}
+This value does not update: {stale}
+
+ {
+ stale = 'updated';
+ reactive = 'updated';
+}}>update
+```
+
+To fix this, wrap your variable declaration with `$state`.
+
+### options_deprecated_accessors
+
+```
+The `accessors` option has been deprecated. It will have no effect in runes mode
+```
+
+### options_deprecated_immutable
+
+```
+The `immutable` option has been deprecated. It will have no effect in runes mode
+```
+
+### options_missing_custom_element
+
+```
+The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
+```
+
+### options_removed_enable_sourcemap
+
+```
+The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
+```
+
+### options_removed_hydratable
+
+```
+The `hydratable` option has been removed. Svelte components are always hydratable now
+```
+
+### options_removed_loop_guard_timeout
+
+```
+The `loopGuardTimeout` option has been removed
+```
+
+### options_renamed_ssr_dom
+
+```
+`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
+```
+
+### perf_avoid_inline_class
+
+```
+Avoid 'new class' — instead, declare the class at the top level scope
+```
+
+### perf_avoid_nested_class
+
+```
+Avoid declaring classes below the top level scope
+```
+
+### reactive_declaration_invalid_placement
+
+```
+Reactive declarations only exist at the top level of the instance script
+```
+
+### reactive_declaration_module_script_dependency
+
+```
+Reassignments of module-level declarations will not cause reactive statements to update
+```
+
+### script_context_deprecated
+
+```
+`context="module"` is deprecated, use the `module` attribute instead
+```
+
+```svelte
+
+```
+
+### script_unknown_attribute
+
+```
+Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+```
+
+### slot_element_deprecated
+
+```
+Using `` to render parent content is deprecated. Use `{@render ...}` tags instead
+```
+
+See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info.
+
+### state_referenced_locally
+
+```
+State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+```
+
+This warning is thrown when the compiler detects the following:
+- A reactive variable is declared
+- the variable is reassigned
+- the variable is referenced inside the same scope it is declared and it is a non-reactive context
+
+In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:
+
+```svelte
+
+
+
+ count++}>
+ increment
+
+```
+
+```svelte
+
+
+
+
+The count is {count}
+```
+
+To fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function:
+
+```svelte
+
+
+
+ count++}>
+ increment
+
+```
+
+```svelte
+
+
+
+
+The count is {+++count()+++}
+```
+
+For more info, see [Passing state into functions]($state#Passing-state-into-functions).
+
+### store_rune_conflict
+
+```
+It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
+```
+
+### svelte_component_deprecated
+
+```
+`` is deprecated in runes mode — components are dynamic by default
+```
+
+In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `` to re-render when `X` changed, you would either have to use `` or put the component inside a `{#key X}...{/key}` block.
+
+In Svelte 5 this is no longer true — if `X` changes, `` re-renders.
+
+In some cases `` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.
+
+For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
+
+
+```svelte
+{#each items as item}
+ ---` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
+```
+
+See [the note in the docs](legacy-svelte-self) for more info.
+
+### unknown_code
+
+```
+`%code%` is not a recognised code
+```
+
+```
+`%code%` is not a recognised code (did you mean `%suggestion%`?)
+```
+
+# Runtime errors
+
+## Client errors
+
+
+
+### bind_invalid_checkbox_value
+
+```
+Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
+```
+
+### bind_invalid_export
+
+```
+Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
+```
+
+### bind_not_bindable
+
+```
+A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
+```
+
+### component_api_changed
+
+```
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5
+```
+
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
+### component_api_invalid_new
+
+```
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
+```
+
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
+### derived_references_self
+
+```
+A derived value cannot reference itself recursively
+```
+
+### each_key_duplicate
+
+```
+Keyed each block has duplicate key at indexes %a% and %b%
+```
+
+```
+Keyed each block has duplicate key `%value%` at indexes %a% and %b%
+```
+
+### effect_in_teardown
+
+```
+`%rune%` cannot be used inside an effect cleanup function
+```
+
+### effect_in_unowned_derived
+
+```
+Effect cannot be created inside a `$derived` value that was not itself created inside an effect
+```
+
+### effect_orphan
+
+```
+`%rune%` can only be used inside an effect (e.g. during component initialisation)
+```
+
+### effect_update_depth_exceeded
+
+```
+Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+```
+
+### hydration_failed
+
+```
+Failed to hydrate the application
+```
+
+### invalid_snippet
+
+```
+Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
+```
+
+### lifecycle_legacy_only
+
+```
+`%name%(...)` cannot be used in runes mode
+```
+
+### props_invalid_value
+
+```
+Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
+```
+
+### props_rest_readonly
+
+```
+Rest element properties of `$props()` such as `%property%` are readonly
+```
+
+### rune_outside_svelte
+
+```
+The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
+```
+
+### state_descriptors_fixed
+
+```
+Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
+```
+
+### state_prototype_fixed
+
+```
+Cannot set prototype of `$state` object
+```
+
+### state_unsafe_local_read
+
+```
+Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
+```
+
+### state_unsafe_mutation
+
+```
+Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+```
+
+
+## Server errors
+
+
+
+### lifecycle_function_unavailable
+
+```
+`%name%(...)` is not available on the server
+```
+
+Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.
+
+
+## Shared errors
+
+
+
+### invalid_default_snippet
+
+```
+Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
+```
+
+This error would be thrown in a setup like this:
+
+```svelte
+
+
+ {entry}
+
+```
+
+```svelte
+
+
+
+
+ {#each items as item}
+ {@render children(item)}
+ {/each}
+
+```
+
+Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.
+
+### lifecycle_outside_component
+
+```
+`%name%(...)` can only be used during component initialisation
+```
+
+Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the _top level of the instance script_ of your component.
+
+```svelte
+
+
+click me
+```
+
+### store_invalid_shape
+
+```
+`%name%` is not a store with a `subscribe` method
+```
+
+### svelte_element_invalid_this_value
+
+```
+The `this` prop on `` must be a string, if defined
+```
+
+# Runtime warnings
+
+## Client warnings
+
+
+
+### assignment_value_stale
+
+```
+Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.
+```
+
+Given a case like this...
+
+```svelte
+
+
+add
+items: {JSON.stringify(object.items)}
+```
+
+...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded.
+
+You can fix this by separating it into two statements:
+
+```js
+let object = { array: [0] };
+// ---cut---
+function add() {
+ object.array ??= [];
+ object.array.push(object.array.length);
+}
+```
+
+### binding_property_non_reactive
+
+```
+`%binding%` is binding to a non-reactive property
+```
+
+```
+`%binding%` (%location%) is binding to a non-reactive property
+```
+
+### console_log_state
+
+```
+Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
+```
+
+When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
+
+The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
+
+### event_handler_invalid
+
+```
+%handler% should be a function. Did you mean to %suggestion%?
+```
+
+### hydration_attribute_changed
+
+```
+The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
+```
+
+Certain attributes like `src` on an `