Why template syntax renders dynamic content in Svelte

Introduction

Template syntax lets you show changing information on the page easily. It updates the content automatically when your data changes.

Showing a user's name that can change after login

Displaying live data like a clock or stock price

Updating a list when items are added or removed

Reacting to user input and showing results instantly

Syntax

Svelte

{variable} or {expression}

Use curly braces { } to insert JavaScript variables or expressions inside your HTML.

Svelte automatically updates the page when these variables change.

Examples

Shows the value of the variable name inside a paragraph.

Svelte

<p>Hello, {name}!</p>

Calculates and displays the sum of a and b dynamically.

Svelte

<p>The sum is {a + b}</p>

Uses a simple condition to show different text based on count.

Svelte

<p>{count > 0 ? 'You have items' : 'No items yet'}</p>

Sample Program

This Svelte component shows a welcome message with a name and the number of new messages. When you click the button, the message count increases and the page updates automatically.

Svelte

<script>
  let name = 'Alice';
  let count = 3;
</script>

<h1>Welcome, {name}!</h1>
<p>You have {count} new messages.</p>

<button on:click={() => count++} aria-label="Add message">Add Message</button>

Important Notes

Svelte tracks variables used inside { } and updates only those parts of the page when the variables change.

Always use let for variables you want to update so Svelte can react to changes.

Summary

Template syntax uses { } to insert dynamic data into HTML.

Svelte updates the page automatically when data changes.

This makes it easy to build interactive and live-updating interfaces.