Svelte.js 3 if, else if, else Conditional Rendering Tutorial

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

Lesson Project

If you want to follow along with the examples in this lesson, you’ll need a Svelte app that was cloned with degit or scaffolded with Vite

If you already have an app from previous lessons, you can use that instead.

What is Conditional Rendering in Svelte?

When building applications, you will often have to show or not show HTML elements based on a certain condition.

Svelte makes conditional rendering easy by providing us with the following condition blocks.

• #if conditional block
• :else if ladder block
• :else fallback block

These condition blocks accept regular Javascript expressions that return true or false. Based on that result, Svelte will either render the element or not.

How to use the 'if' condition block in Svelte

The if condition block works similar to those in other languages in that it evaluates a truthy expression. If that condition proves true, the element(s) we specify will be rendered.

An if block is made up of open-and-close blocks. Between the blocks we specify the element(s) we want to render.

The opening block uses #if , followed by the condition we want to evaluate wrapped in curly braces. The closing block is just /if wrapped in curly braces.

{#if condition}
  <!-- element to render -->
{/if}

To demonstrate, let’s test if a number is 0 and render a paragraph if it is.

<script>
  const num = 0
</script>

{#if num === 0}
  <p>The number is 0</p>
{/if}

Because the condition proves true, the paragraph element will show in the browser. If we change num to anything else, the expression becomes false and the paragraph doesn’t render.

How to use the 'else if' ladder block in Svelte

Any additional evaluations that the if block doesn’t cover is expressed in the else if ladder.

An else if ladder only has an opening block with a condition and is written as :else if . It must go inside the if block, below the elements that should be rendered when the condition proves true.

{#if condition}
  <!-- element to render -->
{:else if condition}
  <!-- element to render -->
{/if}

To demonstrate, let’s add two checks to our previous example to determine whether the number is positive or negative.

<script>
  const num = 5
</script>

{#if num === 0}
  <p>The number is 0</p>
{:else if num < 0}
  <p>The number is less than 0</p>
{:else if num > 0}
  <p>The number is greater than 0</p>
{/if}

When we run the example in the browser, it renders the paragraph that’s greater than 0.

You can try experimenting with different positive and negative values to see which of the paragraphs render.

How to use the 'else' fallback block in Svelte

The else block is a catch-all fallback for any expressions that are not covered by the if or else if blocks.

An else fallback only has an opening block and is written as :else . It must go inside the if block, below the elements that should be rendered for the if or else if blocks.

{#if condition}
  <!-- element to render -->
{:else}
  <!-- element to render -->
{/if}

To demonstrate, let’s add a check to our earlier example to see if the number is actually a number.

We don’t have to do a data type check, we can just use the else to catch anything that’s not a number.

<script>
  const num = 'not a number'
</script>

{#if num === 0}
  <p>The number is 0</p>
{:else if num < 0}
  <p>The number is less than 0</p>
{:else if num > 0}
  <p>The number is greater than 0</p>
{:else}
  <p>The value is not a number</p>
{/if}

If we run the example in the browser, it will render the paragraph connected to the else block.