See what changed during a LiveView update

Phoenix LiveView is great at only updating the parts of the browser UI that have changed.

Sometimes things don’t work exactly as expected and it’s nice to visually see what changes as you work on your app.

This little Javascript snippet will watch for changes and highilight them for 1 second with a red outline.
The script will only highlight additions to the DOM, not removals.

// Mutation observer to highlight changed elements
new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          node.style.transition = 'outline 0.3s ease-in-out';
          node.style.outline = '2px solid red';
          setTimeout(() => {
            node.style.outline = 'none';
            node.style.transition = '';
          }, 1000);
        }
      });
    }
  });
}).observe(document.body, {
  childList: true,
  subtree: true,
});

Here’s a video of the script in action on Mailcast.