Svelte Template Syntax Explained — Expressions and Logic Blocks

In this tutorial, you will learn about Svelte Template Syntax Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte template syntax extends HTML with curly braces for expressions and logic blocks ({#if}, {#each}, {#await}) that compile directly to DOM operations.

What You'll Learn

• Expression interpolation
• {#if} conditional blocks
• {#each} iteration blocks
• {#await} async blocks
• HTML rendering with @html

Why It Matters

Svelte's template syntax is intuitive and compiles to direct DOM manipulation. Logic blocks handle conditionals, lists, and async data without runtime library overhead.

<script>
  let items = ["Apple", "Banana", "Cherry"];
  let isLoading = true;
  let promise = new Promise((resolve) => setTimeout(() => resolve("Data loaded!"), 2000));
  let htmlContent = "<strong>Bold text</strong>";
</script>

<h2>Fruit List</h2>
{#if items.length > 0}
  <ul>
    {#each items as item, i}
      <li>{i + 1}: {item}</li>
    {/each}
  </ul>
{:else}
  <p>No items</p>
{/if}

<h2>Async Data</h2>
{#await promise}
  <p>Loading...</p>
{:then value}
  <p>{value}</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

<p>{@html htmlContent}</p>

Expected output: A list renders from the array, a loading message shows then resolves to "Data loaded!", and HTML content is rendered as raw HTML.