Template Syntax

expression

{expression} ใด ๆ ใน markup จะฝังค่า JavaScript ลงไป เพราะ Svelte track reactivity ผ่าน runes เมื่อ expression ขึ้นกับ reactive state compiler จะอัปเดตจุดนั้นให้อัตโนมัติ

<script>
  let user = $state({ name: 'Ada', points: 42 });
</script>

<p>{user.name} has {user.points} points</p>
<p>{user.points > 40 ? 'VIP' : 'member'}</p>   <!-- any JS expression -->
<img src={user.avatar} alt={user.name} />       <!-- in attributes too -->

logic block

ไม่เหมือน JSX (ที่ใช้ && และ .map() ของ JavaScript) Svelte มี block syntax เฉพาะสำหรับ control flow block พวกนี้อ่านเหมือน HTML และ compiler optimize ได้ตรง ๆ

conditional — {#if}:

{#if loggedIn}
  <p>Welcome back</p>
{:else if guest}
  <p>Browsing as guest</p>
{:else}
  <button onclick={login}>Log in</button>
{/if}

list — {#each} (มี keyed identity ผ่าน expression (item.id) เพื่อให้ compiler track item ข้าม reorder ได้):

{#each todos as todo (todo.id)}
  <li>{todo.text}</li>
{:else}
  <li>No todos yet</li>   <!-- rendered when the list is empty -->
{/each}

async — {#await} จัดการ pending, resolved และ rejected ของ promise แบบ inline:

{#await fetchUser()}
  <p>Loading…</p>
{:then user}
  <p>Hello {user.name}</p>
{:catch error}
  <p>Failed: {error.message}</p>
{/await}

flowchart TB
  tmpl["Svelte markup"] --> ifb["{#if} conditional branches"]
  tmpl --> each["{#each} lists (keyed by id)"]
  tmpl --> awaitb["{#await} promise states"]
  tmpl --> key["{#key} destroy and recreate on change"]

template block และสิ่งที่แต่ละอันแสดง

block {#key expression} จะ destroy และสร้างเนื้อหาข้างในใหม่ทุกครั้งที่ expression เปลี่ยน — มีประโยชน์เมื่อต้องการบังคับ re-mount (reset state หรือเล่น transition ซ้ำ)

render raw HTML และ snippet

{@html string} inject raw HTML string (ข้ามการ escape) ใช้เฉพาะกับเนื้อหาที่เชื่อถือได้/sanitize แล้ว — ไม่งั้นนี่คือช่องโหว่ XSS
{@render snippet()} render snippet — block markup ที่ใช้ซ้ำได้ของ Svelte 5 ซึ่งมาแทนกลไก <slot> เดิม snippet มีบทเรียนเต็มทีหลัง ตอนนี้แค่รู้ว่า {@render …} คือวิธีที่เนื้อหา snippet ลงมาใน markup

{@html sanitizedMarkdown}

{#snippet greeting(name)}
  <p>Hello {name}</p>
{/snippet}
{@render greeting('world')}