Logic

HTML does not have a way for expressing logic for conditionals or loops, but Svelte does. That is what will be discussed here. This will be useful for conditionally rendering blocks of code.

Template syntax

The syntax for the markup template is covered below.

Conditionals

To conditionally render some markup, we wrap it in an if block.
ex.

{#if count > 10}
	<p>{count} is greater than 10.</p>
{:else if count < 5}
    <p>{count} is less than 5.</p>
{:else}
    <p>{count} is between 5 and 10.</p>
{/if}

We can also add an else or an else if block as seen above.
Note that {#...} opens a block, {/...} closes a block, and continues a block.

Loops

For working with lists of data, or anything that is an iterable or an array-like object, we use the each block. The second argument gives you the current index.
ex.

<script>
	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
	let selected = $state(colors[0]);
</script>
 
<h1 style="color: {selected}">Pick a colour</h1>
 
<div>
	{#each colors as color, idx}
	<button
		style="background: {color}"
		aria-label={color}
		aria-current={selected === color}
		onclick={() => selected = color}
	>{idx+1}</button>
	{/each}
</div>

By default when we update a value (like state), an each block will add or remove DOM nodes at the end of a block if the size changes, and update the remaining DOM. The entire component does not re-render when state changes in Svelte. The component ‘runs’ once and subsequent updates are fine-grained. This gives you more control and makes things faster.
Anyways, to “fix” that behavior described above we use a unique key for each iteration of the each block. You can use any object as the key, as Svelte uses a Map internally. Using a string or number is safer because it means that the identity persists when updating data from an API server for example.
ex.

{#each things as thing (thing.id)}
	<Thing name={thing.name} />
{/each}

Await blocks

To await the value of promises directly in your markup, you can use an await block.
ex.

{#await promise}
    <p>...rolling</p>
{:then number}
    <p>You rolled a {number}!</p>
{:catch error}
    <p style-"color: red">{error.message}</p>
{/await}

If you know that you promise can’t reject you can omit the catch block entirely.
For more info on promises, refer Asynchronous JavaScript.