What is svelte:window in Svelte: Explained with Examples

svelte:window is a special Svelte element that lets you listen to events or bind properties on the browser's window object directly inside your component. It works like a bridge to the global window, enabling you to react to things like resizing or scrolling without extra setup.

How It Works

Think of svelte:window as a way to talk directly to the browser's window, which is like the big frame around your webpage. Normally, if you want to know when the window changes size or when the user scrolls, you have to add event listeners manually. But with svelte:window, Svelte handles that for you behind the scenes.

It acts like a special tag where you can attach event handlers or bind window properties just like you do with regular HTML elements. This means you can easily react to global events such as resize, scroll, or bind to properties like innerWidth and scrollY. It’s like having a direct line to the window without extra code clutter.

Example

This example shows how to track the window width and update the text whenever the window is resized.

svelte

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

<svelte:window bind:innerWidth={width} />

<p>The window width is {width}px.</p>

Output

The window width is 1024px.

When to Use

Use svelte:window when you need to respond to global browser events or properties that belong to the window, such as:

• Detecting window size changes to make your layout responsive.
• Tracking scroll position to show or hide elements based on how far the user has scrolled.
• Listening for keyboard events at the window level.
• Binding to window properties like innerHeight, scrollX, or online status.

This helps keep your component code clean and reactive without manually adding or removing event listeners.

Key Points

• svelte:window connects your component to the browser's global window object.
• You can bind window properties or listen to window events easily.
• Svelte automatically manages event listeners for you.
• It simplifies handling global events like resize, scroll, and keyboard input.

Key Takeaways

svelte:window lets you bind to window properties and listen to window events inside Svelte components.

It automatically manages event listeners, reducing boilerplate code.

Use it for responsive layouts, scroll tracking, and global keyboard events.

It provides a simple, reactive way to interact with the browser window.