| Syntax | Use For |
|---|---|
<script>let count = 0;</script> | Browser-side state and functions. |
{{ count }} | Print a known Svelte value, or a server value when count is not Svelte-owned. |
{count} | Print a Svelte value with native Svelte syntax. |
onclick="{{ add }}" | Call a script function on click. |
onclick="{{ add('small') }}" | Call a function with arguments. |
onclick="{{ activeTab = 2 }}" | Run an event expression. |
onclick={() => activeTab = 2} | Native Svelte event syntax. |
onhover="{{ preview }}" | Convenience hover event shorthand. |
bind="{{ quantity }}" | Bind an input value. |
bind="quantity" | Bind an input value with the shorter name form. |
bind:checked="{{ enabled }}" | Bind a specific property. |
bind:value={quantity} | Native Svelte binding syntax. |
{{ if open }} | Browser-side conditional when open is Svelte state. |
{#if open} | Native Svelte conditional. |
{#each tabs as tab} | Native Svelte loop. |
class:active={active} | Native Svelte class directive. |
{{ query:posts }}...{{ /query:posts }} | Server-rendered WordPress query inside or outside an island. |
{{ cards }}...{{ /cards }} | Server-rendered TemplateX collection loop. |
const data = fetch("..."); | Browser JSON fetch with data, data_loading, and data_error. |
const data = fetch.static("..."); | Server-cached JSON passed into the island. |
Use the guide pages before this reference when learning the feature. The table is for quick recall after the ownership rules are clear.