SOFTWARE / SYSTEMS / AIEngineering news. Technical depth.
NEWS / Developer tools · 2 MIN READ

Svelte 5.56 adds runes-mode declaration tags inside templates

Svelte 5.56 adds runes-mode template declarations, with explicit state and derived runes for values that must update reactively.

Announcement: · From Svelte

Svelte released version 5.56.0 on May 29 with declaration tags inside templates. The official GitHub release identifies the syntax as the minor feature and includes several compiler and runtime performance changes. The merged implementation limits declaration tags to runes-mode components.

Templates gain local declarations

A declaration tag can introduce let or const close to the markup that consumes it. Plain initializers are useful for names scoped to a block, but they do not become reactive calculations merely because they appear in a template. When a local value must be mutable and update the UI, use $state; when it must recompute from reactive dependencies, use $derived.

That distinction should guide adoption. A {const area = box.width * box.height} inside an {#each} block can name a calculation for the current block instance. A value intended to track later dependency changes should instead express that relationship with $derived. Keep longer business rules in ordinary functions that can be tested independently.

The release also changes generated code to use createElement for HTML elements instead of createElementNS, stores current reactive sources in a Set for constant-time membership checks, deduplicates identical hoisted templates within a component, and hoists rest-prop exclusion data. These are implementation optimizations; their effect will depend on component shape and update patterns.

Protect rendering and hydration boundaries

Before upgrading, compile representative runes-mode components and compare client rendering, server output, and hydration. Test declaration tags inside {#each}, {#if}, and asynchronous blocks, including $state bindings and $derived values whose dependencies change during an update.

Do not infer a broad application speedup from compiler-level optimizations. Measure initial render and repeated updates in the components that dominate actual work. Update the compiler and runtime together, run SSR and hydration suites, then introduce the syntax in one component so code-review conventions can settle before wider use.

SOURCES & CONTEXT

See the original announcement for availability and release details.