Les balises de déclaration définissent des variables locales au sein du markup, à l'aide de `const`
ou `let` :

<!-- codeblock:start {"title":"Declaration tags"} -->
```svelte
<!--- file: App.svelte --->
<script>
	let boxes = [{ width: 10, height: 10 }, { width: 15, height: 15 }];
</script>

{#each boxes as box}
	{const area = box.width * box.height}
	{const label = `${box.width} ⨉ ${box.height} = ${area}`}

	<p>{label}</p>
{/each}
```
<!-- codeblock:end -->

> [!NOTE] La syntaxe [`{@const ...}`](@const) est considérée comme dépréciée — utilisez plutôt les
> balises de déclaration

Lorsque des valeurs devraient être réactives, vous pouvez utiliser `$state` et `$derived` :

<!-- codeblock:start {"title":"Reactive declaration tags"} -->
```svelte
<!--- file: App.svelte --->
<script>
	let user = $state({ name: 'Svelte' });
	let editing = $state(false);
</script>

<p>Bonjour {user.name}</p>
<button onclick={() => editing = true}>modifier le nom</button>

{#if editing}
	{let name = $state(user.name)}
	{const greeting = $derived(`Bonjour ${name}`)}

	<hr>
	<input bind:value={name} />
	<p>{greeting}</p>

	<button onclick={() => {
		user.name = name;
		editing = false;
	}}>enregistrer</button>
{/if}
```
<!-- codeblock:end -->

Les balises de déclarations peuvent être utilisées n'importe où dans un composant. Elles peuvent
référencer des valeurs déclarées en dehors d'elles-mêmes (par exemple dans la balise `<script>` ou
dans des blocs `{#each ...}`) et seont "visibles" depuis le même scope lexical (c-à-d les éléments
frères, ainsi que les enfants de ces frères) :

<!-- codeblock:start {"title":"Declaration tag scope"} -->
```svelte
<!--- file: App.svelte --->
{const hello = 'bonjour'}
{hello} <!-- 'bonjour' -->
<div>
	{const hello = 'salut'}
	{hello} <!-- 'salut' -->
	<div>
		{hello} <!-- 'salut' -->
	</div>
</div>
{hello} <!-- 'bonjour' -->
```
<!-- codeblock:end -->