Skip to content
mountly

Devtools panel

createDevtoolsPanel mounts a floating overlay on the page that shows what each feature is doing, in real time. Use it during development and gate it behind your own dev flag for production.

Wire it up

Section titled “Wire it up”
import { createDevtoolsPanel } from "mountly";


if (import.meta.env.DEV) {
  createDevtoolsPanel({
    features: [signupFeature, paymentFeature, lightboxFeature],
    position: "bottom-right",
    collapsed: true,
  });
}

The panel adds itself to <body> and unsubscribes from analytics events when removed.

What it shows

Section titled “What it shows”

For each registered feature:

  • Current state (idle / preloading / preloaded / activating / activated / mounted / aborted).
  • Phase timings from the last lifecycle (preload, activate, mount durations in ms).
  • Module cache hit/miss for the last load.
  • Active mount containers.

It also shows a rolling log of analytics events (the same events onAnalyticsEvent exposes) and the contents of the module + data caches.

Options

Section titled “Options”
Option Type Default Notes
features OnDemandFeature[] required Features to inspect.
position "top-left" · "top-right" · "bottom-left" · "bottom-right" "bottom-right" Anchor on screen.
collapsed boolean false Start collapsed.
theme "auto" · "light" · "dark" "auto" Match the page or override.
maxLogEntries number 100 Trim the analytics ring buffer.

Don’t ship it

Section titled “Don’t ship it”

The panel is a development aid, not a runtime feature. Gate it with import.meta.env.DEV, process.env.NODE_ENV !== "production", or whatever your bundler uses, and tree-shake it out of production builds.