Svelte Svelte
search ⌘K

Svelte • Template syntax

{let/const ...}

Declaration tags define local variables inside markup with const or let:

<script lang="ts">
	let 
let boxes: {
    width: number;
    height: number;
}[]
boxes = [{ width: numberwidth: 10, height: numberheight: 10 }, { width: numberwidth: 15, height: numberheight: 15 }];
</script>

{#each 
let boxes: {
    width: number;
    height: number;
}[]
boxes as 
let box: {
    width: number;
    height: number;
}
box}
	{const const area: numberarea = 
let box: {
    width: number;
    height: number;
}
box.width: numberwidth * 
let box: {
    width: number;
    height: number;
}
box.height: numberheight}
	{const const label: stringlabel = `${
let box: {
    width: number;
    height: number;
}
box.width: numberwidth} ⨉ ${
let box: {
    width: number;
    height: number;
}
box.height: numberheight} = ${const area: numberarea}`}

	<p>{const label: stringlabel}</p>
{/each}
<script>
	let 
let boxes: {
    width: number;
    height: number;
}[]
boxes = [{ width: numberwidth: 10, height: numberheight: 10 }, { width: numberwidth: 15, height: numberheight: 15 }];
</script>

{#each 
let boxes: {
    width: number;
    height: number;
}[]
boxes as 
let box: {
    width: number;
    height: number;
}
box}
	{const const area: numberarea = 
let box: {
    width: number;
    height: number;
}
box.width: numberwidth * 
let box: {
    width: number;
    height: number;
}
box.height: numberheight}
	{const const label: stringlabel = `${
let box: {
    width: number;
    height: number;
}
box.width: numberwidth} ⨉ ${
let box: {
    width: number;
    height: number;
}
box.height: numberheight} = ${const area: numberarea}`}

	<p>{const label: stringlabel}</p>
{/each}

Declaration tags are available since Svelte 5.56.

The {@const ...} syntax is considered legacy — use declaration tags instead.

When values should be reactive, you can use $state and $derived:

<script lang="ts">
	let 
let user: {
    name: string;
}
user = 
function $state<{
    name: string;
}>(initial: {
    name: string;
}): {
    name: string;
} (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<{
    name: string;
}>(initial: {
    name: string;
}): {
    name: string;
} (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state({ name: stringname: 'Svelte' });
	let let editing: booleanediting = 
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(false);
</script>

<p>Hello {
let user: {
    name: string;
}
user.name: stringname}</p>
<button onclick={() => let editing: booleanediting = true}>edit name</button>

{#if let editing: booleanediting}
	{let let name: stringname = 
function $state<string>(initial: string): string (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<string>(initial: string): string (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(
let user: {
    name: string;
}
user.name: stringname)}
	{const const greeting: stringgreeting = 
function $derived<string>(expression: string): string
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression
$
function $derived<string>(expression: string): string
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression
derived(`Hello ${let name: stringname}`)}

	<hr>
	<input bind:value={let name: stringname} />
	<p>{const greeting: stringgreeting}</p>

	<button onclick={() => {
		
let user: {
    name: string;
}
user.name: stringname = let name: stringname;
		let editing: booleanediting = false;
	}}>save</button>
{/if}
<script>
	let 
let user: {
    name: string;
}
user = 
function $state<{
    name: string;
}>(initial: {
    name: string;
}): {
    name: string;
} (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<{
    name: string;
}>(initial: {
    name: string;
}): {
    name: string;
} (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state({ name: stringname: 'Svelte' });
	let let editing: booleanediting = 
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(false);
</script>

<p>Hello {
let user: {
    name: string;
}
user.name: stringname}</p>
<button onclick={() => let editing: booleanediting = true}>edit name</button>

{#if let editing: booleanediting}
	{let let name: stringname = 
function $state<string>(initial: string): string (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<string>(initial: string): string (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(
let user: {
    name: string;
}
user.name: stringname)}
	{const const greeting: stringgreeting = 
function $derived<string>(expression: string): string
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression
$
function $derived<string>(expression: string): string
namespace $derived
Declares derived state, i.e. one that depends on other state variables.
The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
@see{@link https://svelte.dev/docs/svelte/$derived Documentation}@paramexpression The derived state expression
derived(`Hello ${let name: stringname}`)}

	<hr>
	<input bind:value={let name: stringname} />
	<p>{const greeting: stringgreeting}</p>

	<button onclick={() => {
		
let user: {
    name: string;
}
user.name: stringname = let name: stringname;
		let editing: booleanediting = false;
	}}>save</button>
{/if}

Declaration tags can be used anywhere inside the component. They can reference values declared outside themselves (for example in the <script> tag or in {#each ...} blocks) and are ‘visible’ to everything in the same lexical scope (i.e. siblings, and children of those siblings):

{const const hello: "hello"hello = 'hello'}
const hello: "hello"{hello} <!-- 'hello' -->
<div>
	{const const hello: "hi"hello = 'hi'}
	{const hello: "hi"hello} <!-- 'hi' -->
	<div>
		{const hello: "hi"hello} <!-- 'hi' -->
	</div>
</div>
const hello: "hello"{hello} <!-- 'hello' -->
Edit this page on GitHub llms.txt