Resize Observer Playground - Online Watch Element Size

ResizeObserver is a modern browser API that allows you to observe and respond to changes in the size of DOM elements. Unlike the window.resize event (which only fires when the viewport changes), ResizeObserver can monitor any element for dimension changes — whether caused by CSS, JavaScript, content changes, or user interaction. It's perfect for responsive components, canvas resizing, and layout adaptations.

window.onresize only fires when the browser viewport changes size. ResizeObserver, on the other hand, can watch individual elements and detect size changes caused by any reason — content reflow, CSS changes, JavaScript manipulation, flex/grid layout adjustments, or even animations. This gives you much finer control and is more performant for component-level responsive design.

The box option specifies which CSS box model to observe. 'content-box' (default) watches only the content area. 'border-box' watches the entire box including padding and border. 'device-pixel-content-box' provides dimensions in device pixels (useful for canvas rendering on high-DPI screens). Try switching modes in this playground to see the difference!

ResizeObserver is supported in all modern browsers: Chrome 64+, Firefox 69+, Safari 13.1+, and Edge 79+. It covers approximately 97%+ of global web traffic. For older browsers, a polyfill is available (resize-observer-polyfill on npm). Always check caniuse.com/resizeobserver for the latest data.

Yes! A single ResizeObserver instance can observe multiple elements simultaneously by calling observer.observe(element) for each target. The callback receives an array of entries, one per changed element. This is more efficient than creating separate observers for each element.

Use observer.unobserve(element) to stop watching a specific element, or observer.disconnect() to stop observing all elements at once. It's good practice to disconnect observers when they're no longer needed (e.g., in component cleanup) to prevent memory leaks.

Common use cases include: responsive chart/canvas resizing, dynamic layout adjustments, responsive typography, sticky element behavior, container queries polyfill, adaptive UI components, scroll-linked animations, and monitoring third-party content size changes. Any scenario where you need to react to element size changes benefits from ResizeObserver.

Yes, ResizeObserver fires its callback immediately after observe() is called, providing the current dimensions of the element. This is useful because you always get an initial size reading without needing separate measurement code. You can see this behavior in the playground — logs appear as soon as observation starts.

ResizeObserver is designed for performance. It batches notifications and delivers them before the next repaint, avoiding layout thrashing. The callback runs asynchronously, so rapid consecutive changes are coalesced. However, you should still avoid heavy computations inside the callback — use requestAnimationFrame or debouncing if needed for expensive operations.