How I Use MutationObserver to Track and Update CMS Stats

When building dynamic websites in Webflow, especially those powered by CMS collections, you may encounter situations where elements are loaded after the page is rendered, often via Webflow CMS bindings or JavaScript animations.

‍

If you’ve ever tried to manipulate or monitor CMS items using custom JavaScript, you’ve probably noticed that your script sometimes runs before the elements actually appear on the page. That’s where MutationObserver comes in as a native JavaScript tool that allows you to “monitor” the DOM for changes.

‍

In this post, I’ll share how I use MutationObserver in Webflow projects to monitor CMS items and update statistics such as counters, likes, or dynamic data in real time.

‍

What is MutationObserver?

‍

MutationObserver is a browser API that allows you to detect changes in the DOM, such as adding, removing, or modifying new elements.

It’s perfect for Webflow because:

• CMS lists are often loaded dynamically
• Webflow interactions can change the DOM
• Need to run code after elements appear

‍

My use case

Tracking CMS items and updating statistics

On a recent project, I wanted to:

• Count the number of CMS items displayed on a page
• Update a visible counter in the header when the CMS list is filtered
• Automatically detect when CMS content has changed (e.g., Jetboost filtering)
• Using MutationObserver, I was able to make this active and seamless.

‍

Code I used

document.addEventListener("DOMContentLoaded", function() {
// Select CMS wrapper element
const cmsWrapper = document.querySelector('.cms-collection-wrapper');
// Counter update function
function updateCounter() {
const items = cmsWrapper.querySelectorAll('.cms-item');
document.querySelector('.cms-counter').textContent = items.length;
}
// Run once on page load
updateCounter();
// Set MutationObserver
const observer = new MutationObserver(function(mutationsList, observer) {
updateCounter(); // Update every time the DOM changes inside the CMS wrapper
});
observer.observe(cmsWrapper, { childList: true, subtree: true });
});

‍

How this works?

• cmsWrapper is a parent div that contains all your CMS items
• updateCounter() counts visible CMS items and updates the counter element
• MutationObserver tracks all changes inside cmsWrapper (like when Jetboost filters a list)
• The counter updates automatically no need to reload or manually trigger

‍

Where this is useful?

• CMS collection lists with filters (Jetboost, Finsweet’s CMS filter)
• Real-time counters for products, blog posts, or search results
• Live updates when items are added/removed by user actions

‍

Don’t forget to style your counter

<div class="cms-counter">0</div>

‍

Style it in Webflow to match your design works just like any other text element!

‍

If you work with Webflow CMS and dynamic content, MutationObserver can make your scripts smarter and more reliable.
It is especially powerful when combined with filtering plugins or custom JavaScript that manipulates CMS items.

With a few lines of code, you can create interactive counters, live updates, and dynamic statistics that automatically respond to page changes.