Svelte's Reactive Assignments with `$: `

Why it exists

In UI development, state often depends on other state, like a fullName derived from firstName and lastName. Manually keeping these in sync is tedious and error-prone. Svelte was designed to make reactivity a core language feature, and the $: syntax is its original, compiler-driven solution to remove this boilerplate.

The mental model

Think of the $: label as making a statement "live". It's a contract with the Svelte compiler: "Watch the variables I use in this line. If any of them change, run this line again for me." It turns a simple assignment like sum = a + b into a self-updating declaration, $: sum = a + b.

How it works

During compilation, Svelte scans your <script> block for any top-level statements prefixed with $: . For each one, it identifies the variables that are read (the dependencies). It then generates code that re-executes that statement whenever any of its dependency variables are updated. This happens after the script's initial run but before the component renders. Svelte also topologically sorts these statements, so if : c = b and : b = a, it knows to update b before c when a changes.

When to use it

Use : for simple derived values, like calculating a total from an array of items. It's also used for triggering side effects that depend on state, such as logging a value when it changes (: console.log(count)). You can group multiple statements in a block ($: { ... }) to run them all when a dependency changes. This syntax is the idiomatic way to handle reactivity in Svelte projects not using Svelte 5's newer Runes feature.

When not to use it

Avoid : when dependencies are not immediately visible to the compiler. For example, : doubled = getDouble() will not re-run if a variable inside the getDouble function changes, because the compiler only sees the function call, not its contents. Also, for browser-specific APIs like document, you must wrap the reactive statement in an if (browser) block to prevent errors during server-side rendering. For new Svelte 5+ projects, prefer using derived and effect runes.

One canonical example

To keep a sum variable automatically updated whenever a or b changes, you declare the relationship directly. In your script, you'd have: let a = 1; let b = 2; and then the reactive assignment: $: sum = a + b; In your template, you could display '{a} + {b} = {sum}'. If you later change 'a' or 'b', the displayed sum updates automatically without any extra wiring.