{#if} {#else if} {#else}
Conditionally render markup based on JavaScript expressions.
{#if} {#else if} {#else} is a free Sveltejs Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Conditional Blocks
Svelte conditionals look like Handlebars: {#if}, {:else if}, {:else}, closed with {/if}.
Basic Example
Show one branch or another based on a boolean expression.
{#if loggedIn}
<p>Welcome back!</p>
{:else}
<p>Please sign in.</p>
{/if}Multiple Branches
Chain with {:else if} for multiple conditions.
{#if score > 90}
<p>A</p>
{:else if score > 75}
<p>B</p>
{:else}
<p>C</p>
{/if}Expressions Are JavaScript
The condition can be any valid JavaScript expression.
{#if items.length > 0 && !isLoading}Closing Tag
Always close with {/if}. Missing closes are compile errors.
Nested if
Conditionals nest freely inside other Svelte blocks and HTML.
{#if user}
{#if user.admin}
<Admin />
{/if}
{/if}No Switch
Svelte has no built-in switch block. Use chained {:else if} or compute a variable.
Combining with each
You can wrap a list in a conditional to render only when items exist.
{#if items.length}
{#each items as item}<li>{item}</li>{/each}
{/if}Reactivity Inside
The condition is reactive: whenever its dependencies change, Svelte re-evaluates and swaps branches.
Animations on if
You can attach transition: directives to elements inside if blocks to animate entry and exit.
Empty Branches
You may have an if block with no else. The else is optional.
Quick Check
How is a Svelte if block closed?
Recap
Use {#if}/{:else if}/{:else}/{/if} for conditional rendering. The expression is plain JS.
Frequently asked questions
Is the “{#if} {#else if} {#else}” lesson free?
Yes — the full text of “{#if} {#else if} {#else}” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “{#if} {#else if} {#else}”?
Conditionally render markup based on JavaScript expressions. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “{#if} {#else if} {#else}” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- {#if} {#else if} {#else}
- {#each} with Index and Key
- {#key} for Forcing Re-render
- Nested {#each} and Keyed Updates