BrowserPopout (Multi-Window Popouts)

An instance of BrowserPopout represents a detached native operating system browser window holding an active layout fragment. Popouts enable true multi-monitor workflows in desktop web applications, maintaining synchronized state and bidirectional event communication via layout.eventHub. 

// 1. Pop out a specific content item or active stack
const popout = contentItem.popout();

// 2. Access the child layout instance running inside the popup window
const childLayout = popout.getStrelitInstance();

// 3. Access native DOM Window
const popupWin = popout.getWindow();
popupWin.document.title = 'Detached Monitor Window';

// 4. Return to main window layout
popout.popIn();

Lifecycle & Features

  • Zero Framework Portals Leak: When used with VirtualLayout or portals, component instances can be bound across window boundaries.
  • Automatic Pop-In: Users can click the dock/pop-in button in the child window header to seamlessly return the panel to its original position in the master window.
  • State Serialization: layout.saveLayout() captures all active popouts under openPopouts: PopoutLayoutConfig[], enabling restoration on subsequent page reloads.

getStrelitInstance()

Returns the child LayoutManager instance initialized inside the newly opened window.

getWindow()

Returns the native browser Window reference backing this popout.

popIn()

Closes the auxiliary window and re-inserts its hosted content item back into its original position within the primary window layout hierarchy.

close()

Closes the popout window without returning its contents to the parent window layout.

toConfig()

Returns a ResolvedPopoutLayoutConfig containing window dimensions (width, height, left, top), item configuration, and parent restoration identifiers.

Community & Support

Need help or have architectural questions?

Whether you are building complex multi-screen trading terminals, enterprise data workspaces, or migrating from legacy layout engines, the Strelit UI Kit engineering team and community are here to help.

Open an Issue on GitHub →