Conditional rendering (If)

{#if user.loggedIn}
	<button on:click={toggle}> Log out </button>
{/if}

{#if !user.loggedIn}
	<button on:click={toggle}> Log in </button>
{/if}

(Else)

{#if user.loggedIn}
	<button on:click={toggle}> Log out </button>
{:else}
	<button on:click={toggle}> Log in </button>
{/if}

(Else if)

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

Looping over lists of data

<script>
	let cats = [
		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
		{ id: 'z_AbfPXTKms', name: 'Maru' },
		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
	];
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
	{#each cats as cat}
	<li>
		<a target="_blank" href="<https://www.youtube.com/watch?v={cat.id}>" rel="noreferrer">
			{cat.name}
		</a>
	</li>
{/each}
</ul>

// you can use destructuring — each cats as { id, name }
// and replace cat.id and cat.name with id and name.

And you can get current index as well:

{#each cats as cat, i}
	<li>
	{i + 1}: {cat.name}
		<a target="_blank" href="<https://www.youtube.com/watch?v={cat.id}>" rel="noreferrer">
		</a>
	</li>
{/each}

Destructuring

<ul>
	{#each cats as {id, name}, i}
	<li>
		{i + 1}:
		<a target="_blank" href="<https://www.youtube.com/watch?v={id}>" rel="noreferrer">
			 {name}
		</a>
	</li>
	{/each}
</ul>

Remove the right item from a block

https://svelte.dev/tutorial/keyed-each-blocks