This is based on/copied from maplibre/maplibre-gl-js#6964. I had a band-aid fix in #621 but maplibre/maplibre-gl-js#6969 fixed it in a cleaner way, so I figured I would replicate it here.
User Story
As a web developer, I can render a PixiJS canvas into a popup window while keeping the JavaScript context in the main window, so that I can build "pop-out" features with shared application state.
Rationale
Why is this feature needed?
Modern web applications implement "pop-out" features that allow users to open content in separate windows while maintaining shared state. This is achieved using window.open('about:blank') combined with ReactDOM.createPortal() or direct DOM manipulation, where JS runs in the main window but UI renders into the popup's DOM.
Currently, pixi-react fails in this scenario because it uses window-scoped globals (instanceof HTMLElement, instanceof HTMLCanvasElement) that don't work across window contexts.
Example use cases
- Multi-window web applications: Trading platforms, analytics dashboards, or collaboration tools where users can pop out widgets to secondary monitors
- Electron/Tauri/WebView-based desktop apps: Desktop applications built with web technologies often need to support multiple windows sharing the same JS context
- Picture-in-picture style features: Detachable panels that float independently while staying connected to the main application
- Kiosk and digital signage: Multi-display setups where a single application drives content across multiple screens/windows
Can it be done today? Is there a workaround?
No viable workaround exists.
The only alternative is to load pixi-react separately in the popup window, but this:
- Breaks shared state with the main application
- Requires duplicating the library and styles
- Prevents React portal patterns that many apps rely on
- Adds complexity for cross-window communication (postMessage, etc.)
Impact
What if we do nothing?
Developers building multi-window web applications cannot use pixi-react for pop-out features. They must either:
- Abandon the pop-out pattern for pixi-containing components
- Maintain a custom fork of pixi-react with cross-window fixes
This limits pixi-react's adoption in enterprise web applications and Electron/WebView-based desktop apps where multi-window support is a common requirement.
Proposed Implementation
See maplibre/maplibre-gl-js#6969
This is based on/copied from maplibre/maplibre-gl-js#6964. I had a band-aid fix in #621 but maplibre/maplibre-gl-js#6969 fixed it in a cleaner way, so I figured I would replicate it here.
User Story
As a web developer, I can render a PixiJS canvas into a popup window while keeping the JavaScript context in the main window, so that I can build "pop-out" features with shared application state.
Rationale
Why is this feature needed?
Modern web applications implement "pop-out" features that allow users to open content in separate windows while maintaining shared state. This is achieved using
window.open('about:blank')combined withReactDOM.createPortal()or direct DOM manipulation, where JS runs in the main window but UI renders into the popup's DOM.Currently, pixi-react fails in this scenario because it uses window-scoped globals (
instanceof HTMLElement,instanceof HTMLCanvasElement) that don't work across window contexts.Example use cases
Can it be done today? Is there a workaround?
No viable workaround exists.
The only alternative is to load pixi-react separately in the popup window, but this:
Impact
What if we do nothing?
Developers building multi-window web applications cannot use pixi-react for pop-out features. They must either:
This limits pixi-react's adoption in enterprise web applications and Electron/WebView-based desktop apps where multi-window support is a common requirement.
Proposed Implementation
See maplibre/maplibre-gl-js#6969