MutationLens

Interactive Playground

Mutation Lab

Six mutation types. One page.
Pick any target, hit Record, and watch every DOM change appear in the panel.

  1. 1
    Install MutationLens from Chrome Web Store
  2. 2
    Pick a target click any marked container
  3. 3
    Hit Record in the MutationLens panel
  4. 4
    Interact below every mutation appears instantly
01

Click Mutations

Add, complete, and delete tasks to generate childList and characterData mutations.

Task Queue 2/5 done
  • Design the MutationLens side panel HIGH
  • Write Vitest integration tests MED
  • Submit Chrome Web Store listing LOW
  • Record the demo GIF for the landing page HIGH
  • Set up Cloudflare Pages deployment MED
Pick #tm-list as your MutationLens target
02
02

Hover Mutations

Move your cursor over the cards to fire attributes mutations on class and data attributes.

99.98%
API Gateway
us-east-1
Operational
99.99%
Database Cluster
us-east-1
Operational
100.0%
CDN · Edge
global
Operational
99.97%
Auth Service
us-east-1
Operational
99.91%
Build Pipeline
us-west-2
Operational
99.99%
Object Storage
us-east-1
Operational
Pick #hc-grid or any individual card — hover to trigger mutations
03
03

Timer Mutations

Start the metrics feed to generate continuous characterData and attributes mutations on a 2-second interval.

System Metrics not started
Requests / sec
—
req/s
Error Rate
—
%
P99 Latency
—
ms
Pick #lm-metrics — then hit Start to generate continuous mutations
04
04

Background Tab

Switch to another tab — this component keeps firing mutations every 3 s. Come back and see every one tracked in the MutationLens timeline.

TAB ACTIVE
Mutations are tracked in this tab.
Mutations generated
0

Try it: Pick #bm-card and hit Record in MutationLens, then switch to another tab for 10 seconds and come back. Every mutation that fired while you were away will be in the timeline.

Pick #bm-card or #bm-log — then switch tabs
05
05

Attribute Mutations

Toggle, slide, and expand controls to fire ARIA and data-* attribute mutations. Watch the live inspector for raw before/after values.

Dark mode
aria-pressed · data-active
CPU threshold
aria-valuenow · data-value
42%
Advanced config
aria-expanded · data-open
Deploy target
aria-selected · data-tab
Pick #ap-controls — interact above to trigger attribute mutations
Live Attribute Inspector
Updates as you interact ↑
06
06

Scroll · Viewport Exit

Scroll through the deployment feed. New entries auto-append and older entries change state as they age — MutationLens tracks everything, even off-screen.

Deployment Activity LIVE
  • ✓
    Deploy v1.2.4 → production
    main · 3 min ago
    deployed
  • ✓
    Run database migrations
    main · 4 min ago
    done
  • ⟳
    Load test → staging
    infra/load-test · running
    running
  • ✗
    Integration test suite
    feat/payments · 22 min ago · 4 failures
    failed
  • ✓
    Build Docker image
    main · 25 min ago
    done
  • ✓
    Lint + type-check
    main · 27 min ago
    done
  • ✓
    Deploy v1.2.3 → staging
    main · 1 h ago
    deployed
  • ✓
    Security audit
    main · 1 h 5 min ago · 0 issues
    done
  • ✓
    Unit test suite (247 tests)
    main · 1 h 8 min ago
    done
  • ✓
    Deploy v1.2.2 → production
    main · 2 h ago
    deployed
  • ✓
    Generate changelog
    main · 2 h 2 min ago
    done
  • ✓
    E2E test suite (Playwright)
    main · 2 h 10 min ago
    done
↓ New entries auto-append every 5 s — elements that scroll out of view still generate tracked mutations
Pick #af-feed — scroll down and watch entries appear