Using data in pages in Svelte - Step-by-Step Execution

Concept Flow - Using data in pages

Start Page Load

↓

Define Data in <script>

↓

Use Data in Markup

↓

Render Page with Data

↓

User Sees Data Displayed

↓

Optional: Data Changes -> Reactive Update

↓

Page Updates Automatically

The page loads, data is defined in the script, then used in the markup to render content. If data changes, the page updates reactively.

Execution Sample

Svelte

<script>
  let name = "Alice";
</script>

<h1>Hello {name}!</h1>

This code defines a variable 'name' and displays it inside an <h1> tag on the page.

Execution Table

Step	Action	Variable 'name'	Markup Rendered	Output Visible
1	Page starts loading	undefined	No markup yet	Blank page
2	Script runs, 'name' set to 'Alice'	"Alice"	Prepare <h1>Hello Alice!</h1>	Still loading
3	Markup rendered with 'name'	"Alice"	<h1>Hello Alice!</h1>	Shows: Hello Alice!
4	User sees page	"Alice"	<h1>Hello Alice!</h1>	Hello Alice! visible
5	If 'name' changes to 'Bob'	"Bob"	<h1>Hello Bob!</h1>	Page updates to Hello Bob!

💡 Page fully rendered with data; reactive updates happen if data changes.

Variable Tracker

Variable	Start	After Step 2	After Step 5
name	undefined	"Alice"	"Bob"

Key Moments - 2 Insights

Why does the page show 'Hello Alice!' instead of the variable name itself?

Because Svelte replaces {name} in the markup with the current value of the variable 'name' during rendering, as shown in execution_table step 3.

What happens if we change the variable 'name' after the page loads?

Svelte automatically updates the displayed content to match the new value, as seen in execution_table step 5 where 'name' changes to 'Bob' and the page updates.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'name' at step 3?

A undefined

B "Bob"

C "Alice"

D "name"

💡 Hint

Check the 'Variable 'name'' column at step 3 in the execution_table.

At which step does the page first display 'Hello Alice!'?

A Step 3

B Step 2

C Step 1

D Step 5

💡 Hint

Look at the 'Output Visible' column to see when 'Hello Alice!' appears.

If we change 'name' to 'Charlie' instead of 'Bob' at step 5, what changes in the execution table?

A Nothing changes because the page does not update after load.

B The 'Variable 'name'' value at step 5 becomes "Charlie" and markup updates accordingly.

C The markup at step 3 changes to 'Hello Charlie!'

D The page reloads completely.

💡 Hint

Refer to step 5 in execution_table and variable_tracker for how data changes update the page.

Concept Snapshot

Svelte pages use <script> to define data variables.
Use curly braces {variable} in markup to show data.
When data changes, Svelte updates the page automatically.
This makes pages reactive and dynamic.
No extra code needed for updates.

Full Transcript

When a Svelte page loads, it first runs the script section where variables like 'name' are set. Then, the markup uses these variables inside curly braces to display their values. For example, if 'name' is 'Alice', the page shows 'Hello Alice!'. If the variable changes later, Svelte updates the displayed text automatically without reloading the page. This reactive behavior makes it easy to use data in pages and keep the UI in sync with the data.

Practice

1. In Svelte, how do you display a variable's value inside the HTML of a page?

easy

A. Use parentheses like (variable) inside the HTML.

B. Use curly braces like {variable} inside the HTML.

C. Use angle brackets like <variable> inside the HTML.

D. Use quotes like "variable" inside the HTML.

Solution

1. Step 1: Understand Svelte's data binding syntax

   Svelte uses curly braces {} to insert JavaScript expressions or variables into HTML.

2. Step 2: Identify correct syntax for variable display

   Using {variable} inside HTML shows the variable's value dynamically.

3. Final Answer:

   Use curly braces like {variable} inside the HTML. -> Option B

4. Quick Check:

   Display variable = {variable} [OK]

Hint: Remember: curly braces show variables in HTML [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Trying to use angle brackets for variables
• Putting variable names inside quotes

2. Which of the following is the correct way to declare a variable in a Svelte page's <script> block?

easy

A. const name 'Svelte';

B. var name = 'Svelte';

C. let name = 'Svelte';

D. name = 'Svelte';

Solution

1. Step 1: Recall JavaScript variable declaration in Svelte

   Svelte uses standard JavaScript inside <script>, so let is the preferred way to declare variables that can change.

2. Step 2: Check syntax correctness

   let name = 'Svelte'; correctly declares a variable with a string value.

3. Final Answer:

   let name = 'Svelte'; -> Option C

4. Quick Check:

   Variable declaration = let [OK]

Hint: Use 'let' for variables inside <script> [OK]

Common Mistakes:

• Missing '=' sign in declaration
• Using 'var' which is outdated
• Not declaring variable with let/const

3. Given this Svelte code snippet, what will be rendered on the page?

<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

medium

A. AppleBananaCherry

B. fruits

C. Apple, Banana, Cherry (plain text, no list)

D. Syntax error, nothing renders

Solution

1. Step 1: Understand the {#each} block

   The {#each} block loops over the array fruits and creates an <li> for each item.

2. Step 2: Check the output structure

   Each fruit name is inserted inside <li>, so the output is a list with three items.

3. Final Answer:

   <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul> -> Option A

4. Quick Check:

   Loop over fruits = list items [OK]

Hint: {#each} creates list items for array elements [OK]

Common Mistakes:

• Expecting plain text instead of list
• Misunderstanding {#each} syntax
• Thinking it outputs variable name instead of values

4. What is wrong with this Svelte code snippet?

<script>
  let count = 0
</script>

<button on:click={count++}>Click me</button>
<p>Clicked {count} times</p>

medium

A. The variable count should be declared with const, not let.

B. The event handler syntax is incorrect; it should be a function.

C. The <p> tag cannot use curly braces for variables.

D. There is no problem; the code works fine.

Solution

1. Step 1: Check event handler syntax

   In Svelte, the expression count++ inside on:click is valid and works as an event handler that increments count.

2. Step 2: Confirm no syntax errors

   The code correctly updates count and displays the updated value.

3. Final Answer:

   There is no problem; the code works fine. -> Option D

4. Quick Check:

   Event handler with expression increment works [OK]

Hint: Direct expressions like count++ work as event handlers in Svelte [OK]

Common Mistakes:

• Writing expressions directly in event handlers is invalid
• Using const for variables that change
• Thinking curly braces can't be used in HTML

5. You want to display a list of users with their names and ages on a Svelte page. The data is:

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 35 }
];

Which code snippet correctly shows each user's name and age inside a <div> using {#each}?

hard

A. {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div>{/each}

B. {#each users} <div>{name} is {age} years old</div>{/each}

C. {#each users as user} <div>{name} is {age} years old</div>{/each}

D. {#each users as user} <div>{user} is {age} years old</div>{/each}

Solution

1. Step 1: Understand {#each} syntax with index

   The syntax {#each users as user, index} correctly loops over users and provides both user object and index.

2. Step 2: Check variable usage inside loop

   Inside the loop, {user.name} and {user.age} correctly access properties. Including index shows user number.

3. Final Answer:

   {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div> {/each} -> Option A

4. Quick Check:

   Loop with index and user properties = {#each users as user, index}
<div>User {index}: {user.name} ({user.age})</div>
{/each} [OK]

Hint: Use 'as item, index' to get position and data in {#each} [OK]

Common Mistakes:

• Omitting 'as' keyword in {#each}
• Trying to access properties without user prefix
• Using undefined variables like 'age' alone