Showing code conditionally in Svelte

In Svelte it's possible to only show elements based on certain conditions.

If-statement

{#if condition}
    <!-- code here ->
{/if}
---
<script>
    let isEnabled = true;
<script>
{#if isEnabled}
    <p>This text is now visible<p>
{/if}

If-else statement

{#if condition}
   <!-- code here ->
{:else if condition}
    <!-- code here ->
{/if}
---
<script>
    let isEnabled = true;
<script>
{#if isEnabled}
    <p>This text is now visible<p>
{:else if}
    <p>This text is now visible, but not enabled</p>
{/if}

Else statement

{#if condition}
   <!-- code here ->
{:else if condition}
    <!-- code here ->
{:else}
{/if}
---
<script>
    let isEnabled = true;
<script>
{#if isEnabled}
    <p>This text is now visible<p>
{:else if}
    <p>This text is now visible, but not enabled</p>
{:else}
    <p>Sorry, coe is not enabled</p>
{/if}

Last updated