pip-it-up
A toolkit designed to pop any interactive UI component from a web application into a native, floating, always-on-top Picture-in-Picture window.
The Origin & Problem
Standard browser Picture-in-Picture is restricted entirely to HTML5 `<video>` elements. For developers building rich, interactive dashboard panels, floating checklists, chat controllers, or video editors, keeping components visible while users multi-task was impossible.
In mid-2023, Chrome introduced the experimental Document Picture-in-Picture API, which allows opening a blank floating window that can be populated with arbitrary HTML content. However, the raw API is complex to manage, requiring manuals styles cloning, event listener bindings, and state preservation.
pip-it-up (documented with live previews at pipitup.dev) was created to solve these exact hurdles. It provides a simple React wrapper that abstracts the low-level DOM detaches, style mirrors, and auto-sizing observers, enabling standard component trees to be popped out with zero extra configuration.
Specs & Info
- Published packages:@pip-it-up/core, @pip-it-up/react
- Total Downloads:12K+ total downloads
- Main Tech:TypeScript, React, ResizeObserver
- License:MIT
Live Interactive Demonstration
Modify lists, complete tasks, and float the panel
Technical Deep Dive
Auto-Sizing via ResizeObserver
A native Document PiP window must be opened with hardcoded dimensions. To prevent truncated content or large empty gaps, `pip-it-up` runs a `ResizeObserver` on the target component, dynamically resizing the floating window in real time whenever internal element heights change.
Style Sync via MutationObserver
Since the floating PiP window uses a separate browser document, standard stylesheet references are lost. `pip-it-up` automatically copies all `style` and `link` tags into the PiP window, and uses a `MutationObserver` on the parent document's head to copy styling updates (like Tailwind theme swaps) dynamically.
State Preservation via DOM Detach
Traditional popup windows re-render from scratch, losing input cursor focus, undo stacks, and transient component state. `pip-it-up` dynamically moves the active DOM nodes into the PiP window frame rather than duplicating them, keeping state and references intact.
Graceful Browser Fallbacks
For browser engines that do not natively implement `documentPictureInPicture` (such as Safari and Firefox), the library falls back gracefully to a customizable simulated floating overlay or a modal portal, maintaining identical logic and interfaces.
Usage & Code Sample
import React from 'react';
import { PipWrapper, PipTrigger } from '@pip-it-up/react';
function App() {
return (
<PipWrapper>
<div className="p-4 bg-white dark:bg-zinc-900">
<h3>Floating Dashboard Component</h3>
<p>Interactive inputs, charts, checklists...</p>
{/* Trigger button inside wrapper */}
<PipTrigger>
<button className="px-4 py-2 bg-blue-600 text-white">
Pop out to PiP Window
</button>
</PipTrigger>
</div>
</PipWrapper>
);
}
export default App;