Each Blocks in Svelte

From the Svelte cheat sheet ยท Control Flow ยท verified Jul 2026

Each Blocks

Rendering lists and arrays

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

{#each items as item, index}
  <li>{index + 1}. {item.name}</li>
{/each}

{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}
๐Ÿ”„ {#each} for rendering lists and arrays
๐Ÿ”‘ (key) for keyed updates and animations
๐Ÿ“ {:else} for empty state handling
โšก Efficient list reconciliation with keys

Continue with Svelte

Save the full cheat sheet or work through every related task.

More Svelte tasks

Back to the full Svelte cheat sheet