Dimension bindings (clientWidth, clientHeight) in Svelte

Introduction

Dimension bindings let you easily get the width and height of an HTML element in your Svelte app. This helps you react to size changes without extra code.

When you want to adjust layout or styles based on an element's size.

When you need to trigger animations or effects depending on container width or height.

When building responsive components that adapt to their own size, not just the window size.

When you want to show or hide content based on how much space is available.

When you want to measure an element's size for custom drawing or positioning.

Syntax

Svelte

<div bind:clientWidth={width} bind:clientHeight={height}></div>

You bind clientWidth and clientHeight directly to variables.

These variables update automatically when the element's size changes.

Examples

This example shows how to bind both width and height to variables and display them inside the box.

Svelte

<script>
  let width;
  let height;
</script>

<div bind:clientWidth={width} bind:clientHeight={height} style="background: lightblue;">
  Width: {width}px, Height: {height}px
</div>

Here we bind only clientWidth to track the width of a section element.

Svelte

<script>
  let width;
</script>

<section bind:clientWidth={width} style="border: 2px solid black; padding: 1rem;">
  The width of this section is {width}px.
</section>

This example binds only clientHeight to get the height of an article element.

Svelte

<script>
  let height;
</script>

<article bind:clientHeight={height} style="background: #f0f0f0;">
  The height of this article is {height}px.
</article>

Sample Program

This component creates a resizable box. The clientWidth and clientHeight bindings update the width and height variables automatically as you resize the box. The current size is shown inside the box.

It uses CSS resize: both so you can drag the corner to change size. The ARIA label helps screen readers understand the box is interactive.

Svelte

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

<style>
  .box {
    resize: both;
    overflow: auto;
    border: 2px solid #007acc;
    padding: 1rem;
    width: 200px;
    height: 150px;
    background-color: #e0f7ff;
  }
</style>

<div class="box" bind:clientWidth={width} bind:clientHeight={height} aria-label="Resizable box">
  <p>Resize this box by dragging its corner.</p>
  <p>Width: {width}px</p>
  <p>Height: {height}px</p>
</div>

Important Notes

Dimension bindings update reactively when the element size changes, no extra event listeners needed.

They work only on elements that can have size (not on void elements like <br>).

Use CSS resize property to allow manual resizing for testing or user control.

Summary

Dimension bindings let you track element width and height easily in Svelte.

They update automatically when the element changes size.

Use them to build responsive and interactive UI components that adapt to their own size.