Script, markup, and style sections in Svelte - Step-by-Step Execution

Concept Flow - Script, markup, and style sections

Start Svelte File

↓

Parse <script> Section

↓

Parse Markup Section

↓

Parse <style> Section

↓

Combine All Sections

↓

Render Component in Browser

Svelte reads the script first to get logic, then the markup for structure, then styles for look, and finally combines all to show the component.

Execution Sample

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Clicked {count} times
</button>

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

A simple Svelte component with a script for logic, markup for button, and style for button color.

Execution Table

Step	Section Parsed	Action	State/Value	Effect
1	<script>	Declare variable count	count = 0	Logic ready for use in markup
2	Markup	Create button element	button element created	Button appears on page
3	Markup	Bind click event to increment count	click event attached	Button click updates count
4	Markup	Display count inside button	count displayed as 0	User sees 'Clicked 0 times'
5	<style>	Apply CSS to button	button color set to blue	Button text color is blue
6	Render	Combine all sections	Component ready	Interactive blue button shown
7	User clicks button	count increments	count = 1	Button text updates to 'Clicked 1 times'

💡 User stops clicking; component remains interactive with updated count

Variable Tracker

Variable	Start	After Click 1	After Click 2	Final
count	0	1	2	2

Key Moments - 3 Insights

Why does the count variable update the button text automatically?

Because Svelte tracks reactive variables declared in <script> and updates the markup when they change, as shown in execution_table step 7.

What happens if the <style> section is missing?

The component still works but the button will have default styles, no blue color applied (see execution_table step 5).

Can the markup access variables declared in <script>?

Yes, markup uses variables from <script> directly, like count in the button text (execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after the first click?

A 2

B 0

C 1

D undefined

💡 Hint

Check execution_table row 7 where count increments after click

At which step is the button's color set to blue?

A Step 5

B Step 2

C Step 4

D Step 7

💡 Hint

Look at execution_table step describing