ResizeObserver for responsive components, cards, and layouts

ResizeObserver watches an element and tells you when that element changes size. Instead of checking the whole browser window, you can watch one specific card, sidebar, widget, chart container, or layout block.

A page can change in many ways without the browser window changing. A sidebar can open, a grid can resize, an ad slot can collapse, a chart container can shrink, or a card can move into a narrower column. ResizeObserver helps JavaScript react to those actual element-size changes.

This example watches one card and stores a size value in a data-size attribute.

<div class="demo-card">
  Resize me
</div>

<script>
const card = document.querySelector('.demo-card');

const observer = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    const width = entry.contentRect.width;

    card.dataset.size =
      width < 320 ? 'small' :
      width < 600 ? 'medium' :
      'large';
  });
});

observer.observe(card);
</script>

Once the card has a size value, CSS can style it differently based on the size detected by JavaScript.

<div class="demo-card" data-size="medium">
  <h3>Responsive card</h3>
  <p>This card reacts to its own width.</p>
</div>

<style>
.demo-card{
  border:2px solid #111;
  border-radius:14px;
  padding:16px;
}

.demo-card[data-size="small"]{
  background:#fff3ec;
}

.demo-card[data-size="medium"]{
  background:#f4f6ff;
}

.demo-card[data-size="large"]{
  background:#f2fff6;
}
</style>

<script>
const card = document.querySelector('.demo-card');

const cardObserver = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    const width = entry.contentRect.width;

    if (width < 320) {
      entry.target.dataset.size = 'small';
    } else if (width < 600) {
      entry.target.dataset.size = 'medium';
    } else {
      entry.target.dataset.size = 'large';
    }
  });
});

cardObserver.observe(card);
</script>

ResizeObserver is useful when a chart, canvas, or visual widget needs to redraw after its container changes size.

<div id="chartWrap">
  <canvas id="chartCanvas"></canvas>
</div>

<script>
const chartWrap = document.getElementById('chartWrap');
const canvas = document.getElementById('chartCanvas');

const chartObserver = new ResizeObserver((entries) => {
  const entry = entries[0];
  const width = Math.round(entry.contentRect.width);
  const height = Math.round(entry.contentRect.height);

  canvas.width = width;
  canvas.height = height;

  // redraw your chart here
});

chartObserver.observe(chartWrap);
</script>

A practical use is switching text or interface behavior when a component becomes narrow.

<button id="saveButton">Save changes</button>

<script>
const button = document.getElementById('saveButton');

const buttonObserver = new ResizeObserver((entries) => {
  const width = entries[0].contentRect.width;

  button.textContent = width < 120 ? 'Save' : 'Save changes';
});

buttonObserver.observe(button);
</script>

Responsive cards, chart resizing, canvas resizing, dashboard widgets, ad containers, sidebars, embedded tools, split panels, responsive labels, drag-resizable boxes, and components that need JavaScript behavior based on their own width.

The resize event runs when the browser viewport changes. ResizeObserver runs when a specific element changes size. That makes it better for components that can resize because of grids, sidebars, tabs, content changes, embeds, or parent container changes.

CSS container queries are usually better for visual styling. ResizeObserver is better when JavaScript needs the size value, such as redrawing a chart, resizing a canvas, changing behavior, updating text, or triggering logic based on an element’s width.

Use ResizeObserver when JavaScript needs to react to the size of an actual element. It is especially helpful when the component size can change without the full window changing.

It solves a real layout problem without a framework. For VibeScriptz-style pages and tools, ResizeObserver is a practical browser feature because it helps components behave smarter while keeping the code small.

ResizeObserver watches size changes. Intersection Observer watches whether something is visible in the viewport or a scroll container. MutationObserver watches DOM changes like added, removed, or updated elements.

If you want to detect when elements enter or leave the viewport, read the Intersection Observer guide.

Read the full API reference on MDN Web Docs.

Mutation Observer, CSS Container Queries, content visibility, responsive images, canvas resizing, and lightweight chart resizing would all connect well to this topic.