Creating Web Widgets Using the Document Picture-in-Picture API
With the release of Firefox 151, Mozilla shipped the Document Picture‑in‑Picture API, a new interface that expands the traditional video‑only PiP model to arbitrary web documents. Developers can call window.documentPictureInPicture.requestWindow() with explicit dimensions (e.g., 600 × 400 px) and options such as preferInitialWindowPlacement to control placement, then clone DOM nodes—including stylesheets and scripts—into the new off‑screen document. The API is gated behind a simple feature test (“documentPictureInPicture” in window) because CSS @supports cannot yet query the @media (display-mode: picture-in-picture) rule, a gap that Safari’s upcoming Technology Preview may close. The demo in the CSS‑Tricks article shows a stock‑ticker widget that toggles on a button click, handling the fact that DPIP windows replace existing ones and automatically receive focus.
The move reflects a broader push to make browsers a platform for persistent UI elements that traditionally required native code or browser extensions. Chrome already supports a similar capability, and Apple’s Safari is expected to follow once its preview adds at‑rule detection. By allowing any web component to live outside the main tab, DPIP blurs the line between web apps and desktop widgets, potentially challenging OS‑level widget frameworks and giving developers a lightweight alternative to Electron‑style containers. However, the feature remains desktop‑only, and the need to manually copy styles and scripts underscores the fragility of extracting components from their original context.
Looking ahead, adoption will hinge on cross‑browser parity and developer tooling that abstracts the cloning boiler‑plate. Security reviewers will scrutinize the ability to spawn independent windows that can persist after the originating tab is closed, especially regarding data leakage and click‑jacking. Watch for Safari’s implementation timeline, for Chrome’s possible standardization of the @supports at‑rule syntax, and for libraries that package DPIP‑ready components to reduce the manual cloning steps demonstrated in the article.
Key Takeaways
Firefox 151 introduces a DPIP API that lets any HTML fragment be displayed in a floating desktop window, expanding PiP beyond video.
Because CSS cannot yet detect DPIP support, developers must fall back to JavaScript feature checks and manually hide UI elements when unsupported.
The API requires explicit cloning of stylesheets and scripts, highlighting the challenge of moving components out of their original document context.
Cross‑browser support, especially Safari’s pending implementation, will determine whether DPIP becomes a mainstream method for web‑based desktop widgets.
About the Source
This analysis is based on reporting by CSS-Tricks. Here is a short excerpt for context:
The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it. Creating Web Widgets Using the Document Picture-in-Picture API originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.Read the original at CSS-Tricks
