Component file (.svelte) anatomy - Step-by-Step Execution

Concept Flow - Component file (.svelte) anatomy

Start .svelte file

↓

<script> block

↓

Declare variables, functions

↓

<style> block

↓

Write CSS for component

↓

HTML markup block

↓

Use variables/functions in markup

↓

Component ready to render

A .svelte file has three main parts: script for logic, style for CSS, and markup for HTML. They work together to create a component.

Execution Sample

Svelte

<script>
  let count = 0;
  function increment() { count += 1; }
</script>

<style>
  button { color: blue; }
</style>

<button on:click={increment}>Clicked {count} times</button>

This component shows a button that counts clicks using script, styles it blue, and updates the displayed count.

Execution Table

Step	Action	Evaluation	Result
1	Read <script> block	Declare count=0 and increment function	Variables and functions ready
2	Read <style> block	Parse CSS for button color	Button styled blue
3	Read markup	Create button element with click handler	Button displays 'Clicked 0 times'
4	User clicks button	Call increment(), count=0+1	count updated to 1
5	Re-render markup	Update displayed count	Button shows 'Clicked 1 times'
6	User clicks button again	Call increment(), count=1+1	count updated to 2
7	Re-render markup	Update displayed count	Button shows 'Clicked 2 times'

💡 User stops clicking, component stays with latest count

Variable Tracker

Variable	Start	After 1 click	After 2 clicks	Final
count	0	1	2	2

Key Moments - 3 Insights

Why does the count update on the button when I click it?

Because the increment function changes the count variable (see steps 4 and 6), which triggers Svelte to update the displayed count in the markup (steps 5 and 7).

What happens if I remove the <style> block?

The button will still work but lose the blue color styling applied in step 2, so it will show default button colors.

Can I put variables outside the <script> block?

No, variables and functions must be inside <script> so Svelte knows to track and update them (see step 1).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 4?

A 2

B 0

C 1

D undefined

💡 Hint

Check the 'Result' column at step 4 in the execution_table

At which step does the button text update to show the new count?

A Step 3

B Step 5

C Step 6

D Step 1

💡 Hint

Look for 'Re-render markup' action in the execution_table

If the <style> block is removed, what changes in the component?

A The button loses blue color styling

B The button text won't update

C The button stops working

D The count variable resets

💡 Hint

Refer to the key_moments about the