Resize Observer API Demo

The Resize Observer API provides a way to observe changes to the size of elements, enabling responsive layouts without relying solely on media queries.

Resize Observer: checking...

Resizable Element

Drag the bottom-right corner to resize this element:

Drag to resize me!

Width: -- | Height: --

Responsive Component

This component changes based on its container size (not viewport):

Small
< 300px

Medium
300-500px

Large
> 500px

Resize the window to see me change

--

Aspect Ratio Monitor

This box displays its current aspect ratio:

--

Responsive Chart

This chart redraws when its container resizes:

Resize Events Log

Resize events will appear here...