Browser Hub Demo
Document Picture-in-Picture API
This is one of the clearest examples of the browser acting like a real operating-system surface instead of a single trapped tab.
Multiwindow UX
What this unlocks
Pop a mini always-on-top window for controls, timers, notes, or monitoring panels. Experimental and mainly Chromium-based for now. Unsupported browsers should keep the panel inline in the main page.
Document Picture-in-Picture API
Pop a mini always-on-top window for controls, timers, notes, or monitoring panels.
This API can pin a mini document above other apps for timers, notes, controls, or dashboards.
Mini-window use cases
- Keep a meeting timer visible while you work in other tabs.
- Pin a checklist or AI prompt while editing elsewhere.
- Float playback, moderation, or monitoring controls.
Open the floating panel to test document picture-in-picture.
Use cases
Real product scenarios
These are the kinds of workflows where the API earns its complexity.
Floating meeting notes or prompt cheat sheets.
Document Picture-in-Picture API helps when the browser needs to move beyond plain navigation and forms.
Pinned timers during workflows or focus sessions.
Document Picture-in-Picture API helps when the browser needs to move beyond plain navigation and forms.
Always-visible dashboards during longer tasks.
Document Picture-in-Picture API helps when the browser needs to move beyond plain navigation and forms.
Shipping notes
Progressive enhancement rules
Browser capability work is product design work. Support levels, permissions, secure context requirements, and fallback behavior matter as much as the demo itself.
The compact window should complement the main page, not replace it.
Experimental and mainly Chromium-based for now. Unsupported browsers should keep the panel inline in the main page.
You need explicit open and close controls plus graceful cleanup.
Experimental and mainly Chromium-based for now. Unsupported browsers should keep the panel inline in the main page.
More demos
Related browser capabilities
Continue through the hub to see how other modern APIs can reshape UX, device integration, and workflow design.
Native utilities
Web Share API
Hand off links, text, and sometimes files to the device’s native share sheet.
Open Web Share APIPerception APIs
Barcode Detection API
Detect QR codes and barcodes directly in-browser from uploaded or camera-captured images.
Open Barcode Detection API