mountly

1. Core Feature — Payment Breakdown

Hover to preload, click to activate and mount. Click again to dismiss.

1b. Multi-instance — same feature, different data

Two triggers wired to the same feature with different paymentId contexts. Each loads its own data; the module is loaded once.

1d. Live props update

Click Mount, then Update props. The widget re-renders in place via feature.update() — no remount, no re-fetch.

1c. Reserved space + host skeleton

The mount div has min-width/min-height and a host-authored skeleton inside. mountly clears the skeleton on mount; reserved space prevents layout shift.

2. Custom Element

Declarative usage via <mountly-feature> web component.

3. Predictive Prefetch

Staggered prefetching during browser idle time, scored by interaction history.

4. Scroll-Based Prefetch

Preloads when the target enters the viewport (with margin).

5. Trigger Plugins

Swipe, long-press, and keyboard triggers via the plugin system.

5b. Second widget — Image Lightbox

A widget with a completely different aesthetic (dark / cinematic) and its own CSS-variable theme, proving the distribution pattern scales beyond the bootstrap widget.

6. Analytics

Real-time interaction timing tracking.

7. Devtools Panel

Floating debug panel showing feature states, cache stats, and recent events.

Open by default in the bottom-right — click its header to collapse, click again to expand. As you interact with the demo above, watch the cache hits and lifecycle events update live.