Rendering Lists with {#each}

Modern frontend applications often display collections of data such as products, users, messages, or notifications. Instead of manually writing repeated HTML for every item, Svelte allows developers to generate UI elements dynamically using loops.

Svelte uses the {#each} block to render lists of data.

Creating an Array

Open App.svelte and add the following code:

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

The fruits array contains multiple values that can be displayed inside the interface.

Rendering the List

Use the {#each} block to loop through the array:

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

Svelte creates a new <li> element for every item inside the array.

How {#each} Works

The {#each} block loops through a collection of data and gives access to each item individually.

In this example:

{#each fruits as fruit}

• fruits is the array being looped through;
• fruit represents the current item during each iteration.

Rendering Objects

The {#each} block also works with arrays of objects.

<script>
  let users = [
    { name: "Alex", role: "Developer" },
    { name: "Emma", role: "Designer" }
  ];
</script>

{#each users as user}
  <p>{user.name} - {user.role}</p>
{/each}

This pattern is extremely common in modern frontend development.