$state.snapshot browser support
$state.snapshot is supported in Chrome/Edge 98 and above, Firefox 94 and above, and Safari 15.4 and above.
Svelte · Language · all subjects
core/runes
108 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
$inspect.trace for debugging reactivity
$inspect.trace is a debugging tool for reactivity. If something is not updating properly or running more than it should, you can add $inspect.trace(label) as the first line of an $effect or $derived.by (or any function they call) to trace their dependencies and discover which one triggered an update.
Replace export let with $props
Use $props instead of export let, $$props and $$restProps.
Replace $: assignments and statements with $derived and $effect
Use $derived and $effect instead of $: assignments and statements, but only use effects when there is no better solution.
Replace implicit reactivity with $state
Always use runes mode for new code. Use $state instead of implicit reactivity (e.g., let count = 0; count += 1).
$props treat as though they will change
Treat props as though they will change. For example, values that depend on props should usually use $derived. A simple assignment like let color = type === 'danger' ? 'red' : 'green' will not update if type changes.
$effect does not run on the server
Never wrap the contents of an effect in if (browser) {...} or similar — effects do not run on the server.
$effect escape hatch: avoid when better alternatives exist
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects. If you need to sync state to an external library such as D3, use {@attach ...}. If you need to run code in response to user interaction, put the code directly in an event handler or use a function binding. If you need to log values for debugging, use $inspect. If you need to observe something external to Svelte, use createSubscriber.
$derived with object or array results not deeply reactive
If the derived expression is an object or array, it will be returned as-is and is not made deeply reactive. You can, however, use $state inside $derived.by in the rare cases that you need deep reactivity.
$derived preferred over $effect for computed values
To compute something from state, use $derived rather than $effect. $derived is given an expression, not a function. If you need to use a function because the expression is complex, use $derived.by. Deriveds are writable — you can assign to them like $state, except that they will re-evaluate when their expression changes.
$state deep reactivity with proxies vs $state.raw
Objects and arrays using $state({...}) or $state([...]) are made deeply reactive, meaning mutation will trigger updates. This has performance overhead due to proxying. In cases where you're dealing with large objects that are only ever reassigned (rather than mutated), use $state.raw instead. This is often the case with API responses.
$state: use only for reactive variables
Only use the $state rune for variables that should be reactive — in other words, variables that cause an $effect, $derived or template expression to update. Everything else can be a normal variable.
Snippet type import
The Snippet type is imported from 'svelte'. It is used to type snippet properties in $props: Snippet<[string]> for a snippet that receives a string argument.
Generic $props with generics attribute
Components can declare generic relationships between properties using the generics attribute on the script tag. The generics attribute contains what would go between the <...> tags of a generic function. This allows for multiple generics, extends constraints, and fallback types: <script lang="ts" generics="Item extends { text: string }">.
Typing $props with interface
Type $props by defining an interface with properties matching the component props. Properties can be required, optional (using ?), or include Snippet types and event handlers. Use $props() destructuring to extract props: let { prop1, prop2 }: Props = $props().
$state.snapshot feature requires higher browser version
The $state.snapshot feature requires Chrome/Edge 98 or later, Firefox 94 or later, or Safari 15.4 or later. This is a higher minimum than the baseline Svelte support.
$host rune for accessing custom element host
Within a custom element, you can access the host element via the `$host` rune.
accessors option is ignored in runes mode
Setting accessors: true has no effect in runes mode. Use component exports instead to expose values. Example: export const getName = () => name;
Bindings to component exports are not allowed in runes mode
In runes mode, you cannot use bind:exportName on components. Use bind:this instead to access the component instance and then access exports as instance properties.
$state rune replaces let for reactive variables
In Svelte 5, reactive variables are created using the $state rune instead of implicit reactivity from top-level let declarations. The variable is still the value itself and is read and written directly without a wrapper. Example: let count = $state(0);
$derived rune replaces $: for computed state
In Svelte 5, computed state that is entirely defined through a computation of other state is declared using the $derived rune instead of $: statements. The derived value is still read directly without a wrapper. Example: const double = $derived(count * 2);
$effect rune replaces $: for side effects
In Svelte 5, side effects are created using the $effect rune instead of $: statements. The $effect rune wraps a function that runs when its dependencies change. Note that $effect runs differently than $: did in Svelte 4.
$props rune replaces export let for component properties
In Svelte 5, component properties are declared using the $props rune with destructuring instead of export let declarations. Example: let { optional = 'unset', required } = $props();
$props supports renaming properties with destructuring
Property renaming with $props uses standard JavaScript destructuring syntax. Example: let { class: klass } = $props(); renames the class property to klass to avoid reserved identifier conflicts.
$props without destructuring captures all properties
When $props is not destructured, it returns an object containing all properties passed to the component. Example: let props = $props();
$props supports spreading rest properties
The $props rune supports spreading rest properties using standard JavaScript spread syntax. Example: let { foo, bar, ...rest } = $props(); captures unmapped properties in rest.
$bindable rune makes props bindable
In runes mode, properties are not bindable by default. Use the $bindable rune to mark properties as bindable. Example: let { foo = $bindable('bar') } = $props();
$bindable props must receive non-undefined values when binding
If a bindable property has a default value, you must pass a non-undefined value to that property when binding to it. This prevents ambiguous behavior and improves performance.
immutable option is ignored in runes mode
The immutable compiler option has no effect in runes mode. Reactivity behavior is determined by how $state and its variations work.
Runes are compiler instructions starting with dollar-sign
Runes are compiler instructions that inform Svelte about reactivity. Syntactically, they are functions that start with a dollar-sign ($).
props_rest_readonly error: rest properties readonly
Rest element properties of $props() (like ...rest) are readonly and cannot be modified.
effect_orphan error: rune only in effect
Runes like $effect can only be used inside another effect (for example, during component initialization). They cannot be created inside event handlers or after an await expression (unless the await occurs directly inside a component's <script> tag, not inside an async function). In rare cases, use $effect.root() to create effects outside the normal component lifecycle.
effect_in_teardown error: runes in cleanup function
Runes cannot be used inside an effect cleanup function (the function returned by $effect).
bind_not_bindable error: property not marked as bindable
A component cannot bind to a non-bindable property. To mark a property as bindable, declare it with $bindable() inside $props() like: let { propertyName = $bindable() } = $props().
derived_references_self error
A derived value cannot reference itself recursively. $derived() values must not depend on themselves.
rune_outside_svelte error
Runes are only available inside .svelte and .svelte.js/.svelte.ts files, not in regular JavaScript files.
props_invalid_value error: bind undefined with fallback
Cannot bind a property to undefined (bind:key={undefined}) when that key has a fallback value in $props().
$state.snapshot cloning behavior with uncloneable values
$state.snapshot tries to clone the given value to return a reference that no longer changes. Certain objects may not be cloneable. When a value cannot be cloned, the original value is returned instead. DOM elements and objects like window are examples of uncloneable values. If an object contains both cloneable and uncloneable properties, the cloneable ones are cloned while the uncloneable ones contain the originals in the return value.
untrack excludes state from derived/effect dependencies
untrack is used inside a $derived or $effect to prevent state read inside the fn from being treated as a dependency. This allows accessing state without triggering reruns when that state changes.
$state rune replaces reactive let/var declarations in runes mode
In runes mode, reactive state is explicitly declared with the $state rune, replacing the legacy mode pattern of automatically reactive variables declared at the top level of a component.
rune_invalid_usage error
Cannot use a rune in non-runes mode. Runes like `$state`, `$derived`, `$effect`, `$props` require runes mode to be enabled.
legacy_reactive_statement_invalid in runes mode
The `$:` reactive statement syntax is not allowed in runes mode. Use `$derived` or `$effect` instead.
$props rune replaces $$props and $$restProps
In runes mode, the $props rune replaces the legacy $$props and $$restProps behavior, providing an easy way to get an object containing all the props that were passed in.
$$restProps usage for spreading props
$$restProps can be used with the spread syntax to pass all undeclared props to child elements. For example, {...$$restProps} on a button element will pass all props except those individually declared with export.
Accessing specific props from $$props
In legacy mode, specific props can be accessed from $$props using dot notation or bracket notation, such as $$props.class to get the class prop that was passed in.
$$restProps in legacy mode
In legacy mode (Svelte 3/4), $$restProps is an object containing all the props that were passed to the component except the ones that were individually declared with the export keyword.
$$props in legacy mode
In legacy mode (Svelte 3/4), $$props is an object containing all the props that were passed to the component, including ones that are not individually declared with the export keyword.
Performance penalty of $$props and $$restProps
In Svelte 3/4, using $$props and $$restProps creates a modest performance penalty, so they should only be used when needed.