IconVault logoIconVault
Sign in

MutationObserver Playground - Interactive Lab | IconVault

Watch the DOM mutate live: configure observer options, trigger mutations, and read every record. Free, runs fully in your browser.

All tools

MutationObserver Playground

Watch DOM mutations live with log and code export

5 of 5 free uses left
Observer is idleMutations: 0 actions taken, 0 records logged

Observer options

Changing these re-attaches the observer live.

Mutate the sandbox

Each button performs a real DOM operation.

Live sandbox #demo

This paragraph is text you can change.

Nested level

deep node (subtree target)

Try: disable subtree then hit "Edit deep node" - the mutation stops being reported. Or set an attributeFilter of class and toggle the class.

Mutation log

Start observing, then press a mutate button. Every mutation record lands here.

Generated observer code

// Observe mutations on any element
const target = document.querySelector("#demo");

const observer = new MutationObserver((records) => {
  for (const r of records) {
    console.log(r.type, r.target);
    if (r.type === "attributes") console.log("attr:", r.attributeName, "was:", r.oldValue);
    if (r.type === "childList")
      console.log("added:", r.addedNodes.length, "removed:", r.removedNodes.length);
    if (r.type === "characterData") console.log("text was:", r.oldValue);
  }
});

observer.observe(target, {
  childList: true,
  attributes: true,
  subtree: true,
  characterData: true,
  attributeOldValue: true,
  characterDataOldValue: true,
});

// Later: observer.disconnect();

5 of 5 free copies left.

About this tool

IconVault's MutationObserver Playground lets you watch DOM mutations fire in real time. Configure the observer options (childList, attributes, subtree, characterData and old-value recording), press action buttons that perform real DOM operations, and read every mutation record with its type, target and details. It is free to use and runs fully in your browser with nothing uploaded.

How to use: start the observer, append or remove nodes, edit text, toggle classes and set attributes, then inspect the live log. Perfect for developers learning the DOM API, debugging frameworks, or building autosave, validation and third-party script integrations that must react to page changes.

Frequently asked questions

Popular searches

mutationobserver playgroundmutation observer demojavascript mutationobserver examplemutationobserver tutorialdom mutation observermutationobserver childlistmutationobserver attributesmutationobserver subtree exampleobserve dom changes javascriptdetect dom changes jsmutationobserver code examplelearn mutationobservermutationobserver options explainedmutationobserver characterdatamutationobserver attributeoldvaluemutationobserver disconnect examplehow to use mutationobservermutationobserver callbackwatch for dom changeslisten for element changes javascriptmutationobserver takerecordsmutationobserver vs event listenermutationobserver performance tipsdom observer javascriptmutationobserver addednodesmutationobserver removednodesmutationobserver attribute filtermutationobserver example codepenfrontend dom observerjavascript dom mutationmutationobserver mdn examplemutationobserver typescriptmutationobserver react exampledetect class change javascriptdetect attribute change jsobserve text change javascriptmutationobserver interview questionsweb api mutationobservermutationobserver use casesmutationobserver debounceobserve child nodes addedmutationobserver browser supportmutationobserver polyfillmutation records explainedmutationobserver init objectdom tree watcher jsmutationobserver best practiceslearn dom apisjavascript observer pattern dommutationobserver shadow dommutationobserver async callback

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →