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.