Skip to content

Template Blocks

React renders conditionals and lists entirely in JavaScript: ternaries, &&, and .map() inside JSX. Svelte provides template block syntax — dedicated control-flow tags that live in the markup, closer to how HTML templating languages like Handlebars or Jinja work.

Conditionals: `{#if}` / `{:else}` vs JSX ternary

function Status({ loggedIn }) {
  return (
    <div>
      {loggedIn
        ? <p>Welcome back!</p>
        : <p>Please log in.</p>}
    </div>
  );
}

<script>
  let { loggedIn } = $props();
</script>

{#if loggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please log in.</p>
{/if}

You can also add {:else if condition} branches exactly like else if in JavaScript.

Lists: `{#each}` vs `.map()`

function FruitList({ fruits }) {
  return (
    <ul>
      {fruits.map((fruit, i) => (
        <li key={i}>{fruit}</li>
      ))}
    </ul>
  );
}

<script>
  let { fruits } = $props();
</script>

<ul>
  {#each fruits as fruit, i (i)}
    <li>{fruit}</li>
  {/each}
</ul>

The (i) at the end is the keying expression — equivalent to React’s key prop. Use a stable unique ID when available (not the index).

Async: `{#await}` vs `useEffect` + state

function UserCard({ userId }) {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/users/' + userId)
      .then(r => r.json())
      .then(setUser);
  }, [userId]);
  if (!user) return <p>Loading...</p>;
  return <p>{user.name}</p>;
}

<script>
  let { userId } = $props();
  let promise = fetch('/api/users/' + userId).then(r => r.json());
</script>

{#await promise}
  <p>Loading...</p>
{:then user}
  <p>{user.name}</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

Try it: interactive list with filter

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let items = $state(['Apples', 'Bananas', 'Cherries', 'Dates', 'Elderberries']);
  let query = $state('');
  let filtered = $derived(items.filter(i => i.toLowerCase().includes(query.toLowerCase())));
</script>

<input bind:value={query} placeholder="Filter fruits..." />

{#if filtered.length === 0}
  <p>No matches for "{query}".</p>
{:else}
  <ul>
    {#each filtered as item (item)}
      <li>{item}</li>
    {/each}
  </ul>
{/if}

<style>
  input { margin-bottom: 0.5rem; padding: 0.25rem 0.5rem; width: 100%; box-sizing: border-box; }
  li { padding: 0.15rem 0; }
</style>