Resize Observer API

Published on May 12, 2021

← Back to tips

Allows to listen to size changes for specific elements in the DOM, instead of entire page.

Useful for changing how element behaves based on it’s own size

How to use:

  1. Create an Observer
  2. Define the callback
  3. Start Observing

Create resize observer


  • Window managers for the web
  • Canvas element
  • Responsive components


  • JS solution, not usually preferred for performance reasons if the side-effect is huge (checkout new CSS container queries instead)
  • Doesn’t support all unit formats, only pixels

More reading:

▶️ Demo:,css,js,output

▶️ Spec:

🎉 Interested in Frontend or Indie-hacking?

I talk about the latest in frontend, along with my experience in building various (Indie) side-projects