Skip to content
mountly

Devtools panel

createDevtoolsPanel mounts a floating overlay on the page that shows what every feature is doing, in real time. Use it during development; 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. Tree-shake it out of production builds.