Pop Up UI component as a Picture-in-Picture window.
Zero config. Live style sync. Built for modern frameworks.
A comprehensive API designed for real-world use cases — from simple pop-outs to route-persistent editor workflows.
Wrap the app in `PipProvider`, drop a `PipAnchor` per route. The PiP window survives navigation — no unmount, no reload.
Video playheads, canvas bitmaps, WebGL contexts and WebRTC streams keep running. The DOM node is moved, never recreated.
`useAutoPip` pops out the moment the tab is hidden, and reports whether a gesture or the browser paid for it.
`useDormancy` and `useAdaptiveInterval` throttle work when content is parked or backgrounded. Zero timers when frozen.
Anchors reserve the exact box the content left behind, in the first painted frame. Nothing jumps when it pops out or returns.
MutationObserver keeps styles, themes, and CSS-in-JS changes synced in real time.
Works both ways — industry-standard API with `open` prop for full state control.
Three DOM strategies. Move preserves state, portal keeps component tree intact.
Windows adapt to content size automatically. Use `isInsidePip` for responsive PiP layouts.
Cmd+S, Cmd+K, and all shortcuts keep working inside the PiP window.
Firefox & Safari fallback to new tab, or your custom handler (e.g. a modal).
Works in Next.js, Remix, and Vite out of the box. No hydration mismatches.
Named registry lets any trigger connect to any wrapper — no shared context needed.
Generic-typed hooks, full IntelliSense, zero type casting needed.
Tiptap, Monaco, CodeMirror — pop out any editor while preserving state, undo history.
We have pre-built examples and detailed recipes for almost every common developer requirement.
Wrap your component, code lines, a trigger — you're done.
import { PipWrapper, PipTrigger } from '@pip-it-up/react';
export function App() { return ( <PipWrapper copyStyles="sync"> <PipTrigger /> <MyEditor /> </PipWrapper> );}Built on the Document PiP API with graceful fallbacks.
| Browser | Version | Status |
|---|---|---|
| Chrome | 116+ | ✓ Full Support |
| Edge | 116+ | ✓ Full Support |
| Firefox | N/A | ⚠ Fallback |
| Safari | N/A | ⚠ Fallback |
* Requires HTTPS and a user gesture (click/keypress) to open. Firefox & Safari fall back or trigger your custom layout handler gracefully.
A complete solution — if your wrapper exceeds browser API.
| Feature | @pip-it-up/react | react-pip | picture-in-picture |
|---|---|---|---|
| Document PiP API | ✓ | ~ | ~ |
| Style sync (live) | ✓ | ✗ | ✗ |
| Portal mode | ✓ | ✗ | ✗ |
| Controlled + uncontrolled | ✓ | ✗ | ✗ |
| Decoupled trigger | ✓ | ✗ | ✗ |
| Keyboard forwarding | ✓ | ✗ | ✗ |
| Fixed-size guard | ✓ | ✗ | ✗ |
| SSR-safe | ✓ | ~ | ~ |
| Framework-agnostic core | ✓ | ✗ | ✗ |
| TypeScript-first | ✓ | ~ | ✗ |