Pop any UI component into a floating
Picture-in-Picture window.
Zero config. Auto-sizing. Framework-agnostic core.
⚠️ Your browser doesn't support Document PiP. Try Chrome 116+ or Edge 116+.
A comprehensive API designed for real-world use cases — from simple pop-outs to complex editor workflows.
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.
Rich text — formatting, lists, and blockquotes all survive the pop-out.
Code editor — onPipWindowReady triggers editor.layout()
Wrap your component, drop in 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 Picture-in-Picture 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 or keypress) to open the PiP window.
A complete solution — not just a wrapper around the 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 | ✓ | ~ | ✗ |
We are actively iterating towards our stable v1.0 release. Here is what we are building.
DOM node identity preserved across open/close. Keep WebRTC streams, canvas animations, and video playheads perfectly running without restarts.
Provide native `@pip-it-up/vue` and `@pip-it-up/svelte` bindings with standard ref controllers, hooks, and slots for full ecosystem support.
Provide native `@pip-it-up/angular` directive and service architecture for complete support across enterprise Angular applications.
API freeze, full browser matrix automated integration testing, accessibility compliance audits, and production-grade optimization.
Have a feature request or want to contribute? Open an issue on GitHub →