Svelte If Blocks

An if block shows or hides part of a page based on a condition. Svelte checks the condition and displays the matching section, similar to a light switch turning a bulb on or off.

Basic If Block Syntax

An if block starts with a hash symbol and ends with a slash symbol, wrapping the content that should appear only when the condition holds true.

<script>
  let isLoggedIn = true;
</script>

{#if isLoggedIn}
  <p>Welcome back</p>
{/if}

The paragraph appears only while isLoggedIn holds true. Setting isLoggedIn to false removes the paragraph from the page entirely.

If Block Flow Diagram

isLoggedIn = true                  isLoggedIn = false
--------------------                --------------------
{#if isLoggedIn}                    {#if isLoggedIn}
  Shows "Welcome back"                Nothing shows
{/if}                                {/if}

Adding An Else Branch

An else branch shows alternate content when the condition fails. This pairing covers both outcomes without writing two separate if blocks.

{#if isLoggedIn}
  <p>Welcome back</p>
{:else}
  <p>Please log in</p>
{/if}

A visitor sees exactly one of the two paragraphs at any moment, never both together.

Checking Multiple Conditions

An else if branch checks an additional condition when the first condition fails, useful for handling more than two possible outcomes.

<script>
  let score = 72;
</script>

{#if score >= 90}
  <p>Grade: A</p>
{:else if score >= 70}
  <p>Grade: B</p>
{:else if score >= 50}
  <p>Grade: C</p>
{:else}
  <p>Grade: F</p>
{/if}

Svelte checks each condition from top to bottom and stops at the first one that matches. A score of 72 matches the second condition and shows Grade B, skipping every branch below it.

Decision Path Diagram

score = 72
    |
    v
score >= 90? --No--> score >= 70? --Yes--> Show "Grade: B"

Nesting If Blocks

An if block can sit inside another if block, useful when a decision depends on more than one layer of conditions.

{#if isLoggedIn}
  {#if isAdmin}
    <p>Welcome, Admin</p>
  {:else}
    <p>Welcome, Member</p>
  {/if}
{:else}
  <p>Please log in</p>
{/if}

The outer block checks login status first. The inner block only runs its check once the outer condition already holds true.

If Blocks With Complex Conditions

A condition inside an if block can combine several checks using logical operators, letting one block handle more than one requirement at once.

<script>
  let age = 25;
  let hasTicket = true;
</script>

{#if age >= 18 && hasTicket}
  <p>Entry allowed</p>
{:else}
  <p>Entry denied</p>
{/if}

The double ampersand symbol requires both conditions to hold true before the entry message appears. Changing either age or hasTicket to fail its check switches the page over to the denial message instead.

If Blocks Around Whole Sections

An if block can wrap a large chunk of markup, not only a single line, useful for showing or hiding an entire section of a page such as a settings panel or a confirmation screen.

{#if showSettings}
  <div>
    <h4>Settings</h4>
    <p>Adjust your preferences here.</p>
  </div>
{/if}

Key Points

• An if block shows content only when its condition holds true
• An else branch covers the opposite case in the same block
• Else if branches handle several possible conditions in order
• If blocks can nest inside each other for layered decisions