What is the correct syntax for a conditional block in Svelte?

{% if condition %}...{% endif %}

Why do we use a key in an {#each} block?

So Svelte can track the identity of items during updates

Svelte and SvelteKit course · Module 6: Template Logic

The Norns - Template Logic

2 min read · Updated August 13, 2026

In this lesson4

Welcome to the Well of Urd, where the Norns weave the threads of fate! Just as they decide the future, logic blocks decide what will be rendered.

{#if} - Conditional Rendering

<script>
  let isViking = $state(true);
  let health = $state(75);
</script>

{#if isViking}
  <p>Welcome, warrior!</p>
{/if}

{#if health > 50}
  <p class="healthy">Healthy</p>
{:else if health > 20}
  <p class="wounded">Wounded</p>
{:else}
  <p class="critical">Critical condition!</p>
{/if}

{#each} - Iteration

<script>
  let warriors = $state([
    { id: 1, name: 'Ragnar', rank: 'Jarl' },
    { id: 2, name: 'Bjorn', rank: 'Drengr' },
    { id: 3, name: 'Ivar', rank: 'Drengr' }
  ]);
</script>

<ul>
  {#each warriors as warrior}
    <li>{warrior.name} - {warrior.rank}</li>
  {/each}
</ul>

<!-- With index -->
{#each warriors as warrior, index}
  <p>{index + 1}. {warrior.name}</p>
{/each}

<!-- With key (important for animations and state!) -->
{#each warriors as warrior (warrior.id)}
  <WarriorCard {warrior} />
{/each}

Destructuring in each

{#each warriors as { name, rank, health }}
  <div class="warrior">
    <h3>{name}</h3>
    <p>Rank: {rank}</p>
    <p>Health: {health}</p>
  </div>
{/each}

{#each} with else

{#each warriors as warrior}
  <WarriorCard {warrior} />
{:else}
  <p>No warriors in the camp.</p>
{/each}

The Norns weave fate - logic blocks weave the interface!

Code for this lesson: App.svelte

<script>
  // Norns - Three sisters weaving destiny
  // {#if}, {#each}, {#await} - weaving fate

  let isLoggedIn = $state(false);
  let userRole = $state('warrior');
</script>

<main class="norns">
  <h1>Norns - Template Logic</h1>
  <p class="subtitle">Urd, Verdandi, Skuld weave destiny</p>

  <section>
    <h2>{"{#if}"} - Conditional rendering</h2>

    <div class="controls">
      <button onclick={() => isLoggedIn = !isLoggedIn}>
        {isLoggedIn ? 'Log out' : 'Log in'}
      </button>

      <select bind:value={userRole}>
        <option value="warrior">Warrior</option>
        <option value="jarl">Jarl</option>
        <option value="skald">Skald</option>
      </select>
    </div>

    <div class="result">
      {#if isLoggedIn}
        <div class="logged-in">
          <p>Welcome to Valhalla!</p>

          {#if userRole === 'jarl'}
            <p class="role">You have access to the Jarl's chamber</p>
          {:else if userRole === 'skald'}
            <p class="role">You may sing the songs</p>
          {:else}
            <p class="role">Ready for battle!</p>
          {/if}
        </div>
      {:else}
        <p class="logged-out">You must log in</p>
      {/if}
    </div>
  </section>
</main>

<style>
  .norns {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0a2e 0%, #0d0d1a 100%);
    color: #e8d5f7;
    min-height: 100vh;
  }

  h1 {
    color: #b19cd9;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: #8b7ca8;
  }

  section {
    background: rgba(177, 156, 217, 0.1);
    border: 1px solid #b19cd9;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
  }

  h2 {
    color: #b19cd9;
    font-size: 1.1rem;
    margin-top: 0;
  }

  .controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  button {
    padding: 0.5rem 1rem;
    background: #4a2c7a;
    color: white;
    border: 1px solid #b19cd9;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background: #5a3c8a;
  }

  select {
    padding: 0.5rem;
    background: #2c1810;
    color: #e8d5f7;
    border: 1px solid #b19cd9;
    border-radius: 4px;
  }

  .result {
    padding: 1rem;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
  }

  .logged-in {
    color: #90ee90;
  }

  .logged-out {
    color: #ff6b6b;
  }

  .role {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(177, 156, 217, 0.2);
    border-radius: 4px;
  }
</style>

Docs entries used in this lesson

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

1. What is the correct syntax for a conditional block in Svelte?
2. Why do we use a key in an {#each} block?

Hands-on tasks in the game

Code editor
Complete the code to display the list of warriors