pip-it-up
A lightweight React toolkit to float any component in an always-on-top desktop window without losing state or styles.
The Origin & Problem
Browser Picture-in-Picture used to be video-only. If you wanted a floating checklist, mini music player, timer, or chat window while working in other tabs, you were out of luck.
Chrome shipped the Document Picture-in-Picture API in 2023, allowing blank floating windows for any HTML. But the raw API is tricky. You have to manually copy styles, re-bind events, and figure out how to avoid losing component state.
I built pip-it-up (live at pipitup.dev) to handle all that tedious plumbing. You wrap your component in a simple React tag, and it pops out cleanly without breaking state or styles.
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
How It Works Under the Hood
Auto-Sizing via ResizeObserver
PiP windows require fixed dimensions when they open. If your component content grows or shrinks, you get scrollbars or wasted space. pip-it-up attaches a ResizeObserver to track height changes and resizes the window on the fly.
Style Sync via MutationObserver
Because the PiP window has its own document, styles don't carry over by default. pip-it-up copies existing style and link tags over, and watches document.head so dark mode toggles or runtime CSS updates sync immediately.
State Preservation via DOM Detach
If you re-mount a component from scratch, users lose input focus, form draft text, and scroll position. Instead of re-rendering, pip-it-up moves the existing DOM nodes directly into the new window, keeping state untouched.
Graceful Browser Fallbacks
Safari and Firefox don't support Document PiP yet. When a user is on those browsers, pip-it-up falls back to a floating in-page overlay so nothing breaks.
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;