Modulon Popout SDK

Detach panes, refresh popouts, and try opener-less fallback (copy the popout URL into a new tab). This page uses createModulonHost() + the popout uses createModulonPopout(), plus a synced-state primitive.

View product Hub: …

Desktop recommended

This demo relies on popouts (window.open) and multi-window behaviors. Mobile browsers often block popouts or behave differently.

Shared state

Move the slider in any window. All panes stay in sync via the bus.

Intensity: …%

Tip: detach panes, then refresh the popout. The host should not incorrectly “reattach” on refresh.

The wiring (high-level)

This is the “minimal boilerplate” path the SDK ships for onboarding.

// Host:
const { bus, syncState } = createModulonHost({
  appId: "myapp",
  namespace: NS,
  syncedState: { id: "app", initial: { intensity: 50 } },
});

// Popout:
const { syncState } = createModulonPopout({
  appId: "myapp",
  syncedState: { id: "app" },
});