svelte:window for window events - Step-by-Step Execution

Concept Flow - svelte:window for window events

Start Component

↓

Add <svelte:window> listener

↓

User triggers window event

↓

Event handler runs

↓

Update component state

↓

Component re-renders

↓

Wait for next event or unmount

The component adds a listener to the window using <svelte:window>. When the user triggers a window event, the handler updates state and the component re-renders.

Execution Sample

Svelte

<script>
  let width = 0;
  function updateWidth() {
    width = window.innerWidth;
  }
</script>
<svelte:window on:resize={updateWidth} />
<p>Width: {width}</p>

This code listens for window resize events and updates the width variable shown on screen.

Execution Table

Step	Event Triggered	Handler Called	State Before	State After	Rendered Output
1	No event yet	No	width = 0	width = 0	Width: 0
2	User resizes window to 800px	Yes	width = 0	width = 800	Width: 800
3	User resizes window to 1024px	Yes	width = 800	width = 1024	Width: 1024
4	User resizes window to 640px	Yes	width = 1024	width = 640	Width: 640
5	No more events	No	width = 640	width = 640	Width: 640

💡 No more window resize events, so handler is not called and state stays the same.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
width	0	800	1024	640	640

Key Moments - 3 Insights

Why does the width variable update only after a window resize event?

Because the <svelte:window> listener calls the updateWidth function only when the resize event happens, as shown in execution_table rows 2-4.

What happens if the window is not resized after the component loads?

The width stays at its initial value 0, since no resize event triggers the handler (see execution_table row 1).

Can multiple window events be handled with <svelte:window>?

Yes, you can add multiple event listeners on <svelte:window> for different events, each with their own handler.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of width after step 3?

A 640

B 800

C 1024

D 0

💡 Hint

Check the 'State After' column in row 3 of the execution_table.

At which step does the handler NOT run?

A Step 5

B Step 2

C Step 3

D Step 4

💡 Hint

Look for 'Handler Called' column showing 'No' in the execution_table.

If the initial width was set to 500 instead of 0, how would the output at step 1 change?

A Width: 0

B Width: 500

C Width: 800

D Width: undefined

💡 Hint

Refer to variable_tracker 'Start' value and rendered output in execution_table row 1.

Concept Snapshot

Use <svelte:window> to listen to window events.
Syntax: <svelte:window on:event={handler} />
Handler runs when event fires, updating component state.
Component re-renders with new state.
Useful for resize, scroll, keydown, and more.
Always update reactive variables inside handlers.

Full Transcript

This example shows how to use <svelte:window> to listen for window resize events. The component starts with width set to 0. When the user resizes the window, the updateWidth function runs, setting width to the new window.innerWidth. The component then re-renders to show the updated width. If no resize happens, the width stays the same. Multiple window events can be handled by adding more <svelte:window> listeners. This pattern helps react to global browser events easily inside Svelte components.