Svelte Each Blocks

An each block repeats a piece of markup once for every item in a list. Svelte reads through the list and builds one copy of the markup per item, similar to a printer stamping the same template onto every page of a stack.

Basic Each Block Syntax

An each block starts with a hash symbol followed by the word each, a list name, and a temporary name for a single item inside that list.

<script>
  let fruits = ["Apple", "Banana", "Mango"];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

The page shows three list items, one for each fruit in the array. Adding a fourth fruit to the array produces a fourth list item automatically.

Each Block Flow Diagram

fruits = ["Apple", "Banana", "Mango"]
              |
              v
{#each fruits as fruit}
              |
   -----------------------
   |          |          |
   v          v          v
<li>Apple</li> <li>Banana</li> <li>Mango</li>

Accessing The Item Index

A second temporary name after a comma holds the position number of each item, starting from zero.

{#each fruits as fruit, index}
  <li>{index}: {fruit}</li>
{/each}

The list now shows "0: Apple", "1: Banana", and "2: Mango", pairing each fruit with its position in the array.

Using A Key For Each Item

A key tells Svelte how to track each item individually, useful when the list order changes or items get removed. Without a key, Svelte tracks items by their position, which can cause mismatched updates during reordering.

<script>
  let users = [
    { id: 1, name: "Meera" },
    { id: 2, name: "Kabir" }
  ];
</script>

<ul>
  {#each users as user (user.id)}
    <li>{user.name}</li>
  {/each}
</ul>

The parentheses after user hold the key, in this case the unique id field. Svelte now tracks each list item by its id rather than its position, keeping updates accurate even after sorting or filtering.

Handling An Empty List

An each block pairs with an else branch to show a fallback message when the list holds no items at all.

{#each fruits as fruit}
  <li>{fruit}</li>
{:else}
  <li>No fruits available</li>
{/each}

This fallback avoids showing an empty, confusing gap on the page when a list happens to be empty.

Common Use Cases

• Displaying a list of products in a shop
• Showing comments under a blog post
• Building a table of rows from a dataset
• Rendering navigation menu items from a list of page names

Nesting Each Blocks

An each block can sit inside another each block, useful for displaying grouped data such as categories that each hold their own list of items.

<script>
  let categories = [
    { name: "Fruits", items: ["Apple", "Banana"] },
    { name: "Vegetables", items: ["Carrot", "Peas"] }
  ];
</script>

{#each categories as category}
  <h4>{category.name}</h4>
  <ul>
    {#each category.items as item}
      <li>{item}</li>
    {/each}
  </ul>
{/each}

The outer block loops through each category, and the inner block loops through the items belonging to that specific category, producing a neatly grouped list on the page.

Key Points

• An each block repeats markup once for every list item
• A second variable after a comma gives access to the item index
• A key inside parentheses keeps item tracking accurate during reordering
• An else branch shows fallback content for an empty list