---
title: useWindowSize
description: "Tracks the browser window dimensions as reactive `Observable<number>` values for width and height. Supports `inner`, `outer`, and `visual` viewport modes, and updates on resize and orientation change. SSR-safe: returns `initialWidth`/`initialHeight` (default `0`) when `window` is not available."
category: Elements
type-table:
  import: "@usels/web"
  name: "UseWindowSize"
  params:
    children:
      - UseWindowSizeOptions
---

## Demo

## Usage

<CodeTabs>
  <Fragment slot="hook">
    ```tsx twoslash
    // @noErrors
    import { useWindowSize } from "@usels/web";

    function Component() {
      const size$ = useWindowSize();

      return (
        <p>
          {size$.width.get()} × {size$.height.get()}
        </p>
      );
    }
    ```

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    import { createWindowSize } from "@usels/web";

    function Component() {
      "use scope";
      const size$ = createWindowSize();

      return (
        <p>
          {size$.width.get()} × {size$.height.get()}
        </p>
      );
    }
    ```

  </Fragment>
</CodeTabs>

### Excluding scrollbar width

<CodeTabs>
  <Fragment slot="hook">
    ```tsx
    const size$ = useWindowSize({ includeScrollbar: false });
    ```
  </Fragment>
  <Fragment slot="scope">
    ```tsx
    function Component() {
      "use scope";
      const size$ = createWindowSize({ includeScrollbar: false });
    }
    ```
  </Fragment>
</CodeTabs>

### Outer window size

<CodeTabs>
  <Fragment slot="hook">
    ```tsx
    const size$ = useWindowSize({ type: "outer" });
    ```
  </Fragment>
  <Fragment slot="scope">
    ```tsx
    function Component() {
      "use scope";
      const size$ = createWindowSize({ type: "outer" });
    }
    ```
  </Fragment>
</CodeTabs>

### Visual viewport (pinch-zoom aware)

<CodeTabs>
  <Fragment slot="hook">
    ```tsx
    const size$ = useWindowSize({ type: "visual" });
    ```
  </Fragment>
  <Fragment slot="scope">
    ```tsx
    function Component() {
      "use scope";
      const size$ = createWindowSize({ type: "visual" });
    }
    ```
  </Fragment>
</CodeTabs>

### Custom initial size for SSR

<CodeTabs>
  <Fragment slot="hook">
    ```tsx
    const size$ = useWindowSize({ initialWidth: 1280, initialHeight: 800 });
    ```
  </Fragment>
  <Fragment slot="scope">
    ```tsx
    function Component() {
      "use scope";
      const size$ = createWindowSize({ initialWidth: 1280, initialHeight: 800 });
    }
    ```
  </Fragment>
</CodeTabs>