Displaying Data with Curly Braces

One of the most important features of Svelte is the ability to display dynamic data directly inside the user interface. Instead of hardcoding values into HTML, you can connect the interface to JavaScript variables and update content automatically.

Svelte uses curly braces { } to render JavaScript values inside components.

Rendering Dynamic Values

Open the App.svelte file and add the following code:

<script>
  let title = "Learning Svelte";
  let lessons = 12;
</script>

<h1>{title}</h1>

<p>Total lessons: {lessons}</p>

The values stored inside the variables appear directly inside the interface.

How Curly Braces Work

Curly braces allow Svelte to insert JavaScript expressions into HTML.

For example:

<p>{lessons}</p>

Svelte reads the value of the lessons variable and displays it inside the paragraph element.

This works with:

• Strings;
• Numbers;
• Variables;
• Expressions;
• Function results.

Using Expressions

You can also place simple JavaScript expressions inside curly braces.

<script>
  let price = 20;
</script>

<p>Total: ${price * 2}</p>

Svelte evaluates the expression and displays the result inside the interface.

Updating the UI Automatically

One of the biggest advantages of Svelte is automatic UI updates.

If the value of a variable changes, the displayed content updates automatically without manually editing the DOM.

This behavior is part of Svelte's reactive system.