@svelte-put/resize GitHub

svelte action that wraps for ResizeObserver

@svelte-put/resize @svelte-put/resize @svelte-put/resize changelog

Prior Art



npm install --save-dev @svelte-put/resize

Quick start

Use the resized event (named so to avoid conflict with window's resize event) as the callback for ResizeObserver

quick start

  import { resize } from '@svelte-put/resize';

<div use:resize on:resized />


This example is ported from MDN Docs , where border-radius will scale in proportion to the size of the box.


Resize box (dragging bottom right corner) to see change

on:resize - example source

<script lang="ts">
  import { resize } from '@svelte-put/resize';
  import type { ResizeDetail } from '@svelte-put/resize';

  let enabled = true;

  function calcBorderRadius(size1: number, size2: number) {
    return `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  function onResized(e: CustomEvent<ResizeDetail>) {
    const { entry } = e.detail;

    const target = entry.target as HTMLElement;
    if (entry.borderBoxSize?.length > 0) {
      target.style.borderRadius = calcBorderRadius(
    } else {
      target.style.borderRadius = calcBorderRadius(

  let box: HTMLDivElement;
  $: if (!enabled) box.style.borderRadius = '8px';

<div class="flex flex-col items-center space-y-4">
  <p>Resize box (dragging bottom right corner) to see change</p>
    class="h-24 w-24 resize overflow-auto bg-blue-500"
    use:resize={{ enabled }}
  <div class="flex items-center space-x-2">
    <label for="resize-enable">Check to {enabled ? 'disable' : 'enable'} action:</label>
      class="h-5 w-5 accent-primary"

Action Usage Notice

As with any svelte action , resize should be use with element and not component.

use:action is an element directive

<-- correct usage-->
<div use:resize />

<-- incorrect usage-->
<Component use:resize />

Browser Support & Polyfill

As seen on caniuse , ResizeObserver is supported by all major browsers, but not IE11.

resize stays minimal with no polyfill. If one is needed, use resize-observer-polyfill

Typescript Support

Ambient types for custom events should be available automatically where resize is imported.

automatically typed - example source

If the above is not working, fall back to this:

src/app.d.ts - fallback typescript support

API Reference

The best documentation is no documentation!

It is recommended to utilize editor intellisense & explore in-code documentation while using the package (and use typescript if possible 😉) .

See the extracted API Reference on github.

API extraction is powered by @microsoft/api-extractor and @microsoft/api-documenter ).

Happy resizing! 👨‍💻

Edit this page on GitHub