Stop 06 · Browser APIsTopics · 7/13

Resize Observer

In short

Media queries react to the screen size. But what if a card needs to react to its own size, like inside a sidebar? Resize Observer tells you when an element's size changes.

An API that notifies you when an element's size changes — more efficient and accurate than listening to the window's `resize` event for element-level responsiveness. Component-level observation is valuable for reusable interfaces because a component's available space can change even when the browser window itself does not.

The jaadu mascot as a tailor measures a smaller customer standing on a little platform.

Think of it like this

A tailor with a measuring tape

A good tailor doesn't care how big the shop is. He measures you, and re-measures if you've grown since last Diwali. Resize Observer measures one element and tells you whenever its size changes, whatever the window is doing.

Watch it happen

The sidebar collapses

Sidebar

#chart box

ResizeObserver

Canvas

observe(chartBox)

1/5You ask to be told whenever the chart's container changes size.

The big ideas

What you need to know

Watches one element

It fires when an element's size changes, whether from a window resize, new content or a collapsing sidebar.

Great for charts and canvas

Charts and canvases often need exact pixel sizes. Redraw them when their box changes.

Use contentBoxSize

entry.contentBoxSize gives the inner width (inlineSize) and height (blockSize) of the element.

CSS first

For pure styling, CSS container queries can do this without JavaScript. Use the observer when code must react.

See it in code

Walk through the code

1const chartBox = document.querySelector("#chart");2const canvas = chartBox.querySelector("canvas");3 4const ro = new ResizeObserver((entries) => {5  for (const entry of entries) {6    const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];7    canvas.width = Math.round(width);8    canvas.height = Math.round(height);9    drawChart(canvas);10  }11});12 13ro.observe(chartBox);

1/4Grab the container you'll watch and the canvas inside it.

contentBoxSize is an array (for multi-column layouts), so take the first item. The canvas now redraws whenever its box changes.

Save yourself the pain

Common mistakes

Oops

Using window resize events to resize a chart inside a sidebar.

Do this instead

The window may not change when the sidebar collapses. Observe the chart's container directly.

Oops

Changing the observed element's size inside the callback.

Do this instead

That can loop, and the browser warns 'ResizeObserver loop completed'. Resize children, not the observed box.

Your mission

A card that adapts

~20 min

Quick check

A sidebar collapses and your chart's container gets wider, but the window size stays the same. Which tool notices?

Go deeper

1Use it to adjust a component's layout when its container (not the window) resizes. Verify the behavior with realistic data and handle the failure or empty state as well.
2Compare it to `window.addEventListener('resize', ...)` and note the difference in scope. Write down when you would choose each option and what trade-off drives that choice.
3Build a chart or card that re-flows its content based on its own measured width.