Your browser does not support ResizeObserver.

ResizeObserver Patterns Playground

Explore element resize observation, breakpoint detection, and responsive component patterns

📂 Basic Resize Observation

Drag the corner of the box below to resize it. The observer reports contentBoxSize, borderBoxSize, and devicePixelContentBoxSize.

Drag to resize
contentBox W
0
contentBox H
0
borderBox W
0
borderBox H
0
Resize the box to see entries...

📊 Observation Statistics

0
Callbacks Fired
0
Total Entries
--
Callbacks/sec
0
Observed Elements
Idle

📌 Breakpoint Detection (No Media Queries)

ResizeObserver enables element-level breakpoints. Drag to resize the container and watch the breakpoint change. This is the core pattern behind CSS Container Queries, implemented in JavaScript.

400 x 100
MEDIUM (400-600px)
SM <200 MD 200-400 LG 400-600 XL >600

🎨 Responsive Component Pattern

A card that switches between horizontal and vertical layout based on its own width. Drag the right edge to resize.

Component Title

This card adapts its layout based on its own width, not the viewport.

Current width: 350px | Layout: horizontal

🔄 Observe/Unobserve Lifecycle

Toggle observation on individual elements. When unobserved, resizing generates no callbacks.

Box 1
Box 2
Box 3
Box 4
Toggle observation and resize boxes...

⚠ Performance: Avoiding Infinite Loops

A common pitfall: resizing an observed element inside its own callback creates an infinite loop. The browser detects this and delivers a single "error" event. Here we demonstrate safe vs unsafe patterns.

Unsafe: Resize in Callback

// This triggers a ResizeObserver loop! const observer = new ResizeObserver((entries) => { for (const entry of entries) { // Setting style triggers another resize entry.target.style.width = entry.contentRect.width + 10 + 'px'; } });

Safe: Use requestAnimationFrame

// Break the synchronous loop const observer = new ResizeObserver((entries) => { requestAnimationFrame(() => { for (const entry of entries) { // Safe: deferred to next frame updateLayout(entry); } }); });

📑 Multi-Element Observation

A single ResizeObserver can watch multiple elements. Add elements dynamically and observe them all.

Click "Add Element" to begin
Resize events from all observed elements appear here...