# 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.

Canonical URL: https://www.devobs.io/news/news-svelte-5-56-template-declarations/
By: Nina Patel
Published: 2026-09-06T11:58:54.648Z
Updated: 2026-09-06T11:58:54.648Z
Event date: 2026-05-29
Section: Developer tools

Svelte released version 5.56.0 on May 29 with declaration tags inside templates. The [official GitHub release](https://github.com/sveltejs/svelte/releases/tag/svelte%405.56.0) 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.

## Source references

- <https://github.com/sveltejs/svelte/releases/tag/svelte%405.56.0>
- <https://svelte.dev/docs/svelte/declaration-tags>
- <https://github.com/sveltejs/svelte/pull/18282>
