---
order: 3
title: Resize
description: An Alpine convenience wrapper for the Resize Observer API that allows you to easily react when an element is resized.
graph_image: https://alpinejs.dev/social_resize.jpg
---
# Resize Plugin
Alpine's Resize plugin is a convenience wrapper for the [Resize Observer](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API) that allows you to easily react when an element changes size.
This is useful for: custom size-based animations, intelligent sticky positioning, conditionally adding attributes based on the element's size, etc.
## Installation
You can use this plugin by either including it from a `
```
### Via NPM
You can install Resize from NPM for use inside your bundle like so:
```shell
npm install @alpinejs/resize
```
Then initialize it from your bundle:
```js
import Alpine from 'alpinejs'
import resize from '@alpinejs/resize'
Alpine.plugin(resize)
...
```
## x-resize
The primary API for using this plugin is `x-resize`. You can add `x-resize` to any element within an Alpine component, and when that element is resized for any reason, the provided expression will execute with two magic properties: `$width` and `$height`.
For example, here's a simple example of using `x-resize` to display the width and height of an element as it changes size.
```alpine
```
Resize your browser window to see the width and height values change.
## Modifiers
### .document
It's often useful to observe the entire document's size, rather than a specific element. To do this, you can add the `.document` modifier to `x-resize`:
```alpine
```
Resize your browser window to see the document width and height values change.