←Back

Conditional rendering

Svelte allows you to conditionally render parts of code with

{#if condition}
	<div>Block of code </div>
{:else} //(optional)
	<div> Other block of code, optional </div>
{/if}

The condition can be a reference to a boolean variable (e.g. ‘open’), or a piece of code like ‘numberOfItems<30’

For each

or render codes for every item in a list with an each block

{#each items as item}
	<li>{item.name}</li>
{/each}

Next up: input elements and binding data