
Why is Picture-in-Picture only for <video>? I built pip-it-up to pop any React component into a native floating window
Hey r/reactjs,
Video PiP floats a player over your desktop. But why should video be the only thing that gets that?
I wanted to tear away small, interactive parts of a web app, a code editor, a checklist, a chat widget and keep them floating on top of my IDE while I work. Single-screen focus, no tab juggling.
The browser's Document PiP API makes this possible, but using it raw in React is a mess:
- Tailwind/CSS-in-JS styles vanish instantly (new document context)
- Moving DOM nodes wipes React state, focus, and cursor positions
- Safari and Firefox don't support it at all
So I built pip-it-up https://pip-it-up.vercel.app/ to handle all of this:
- Real-time style syncing (Tailwind, Emotion, CSS Modules)
- Portal Mode preserves React state, cursor, and focus perfectly
- Auto-sizing via ResizeObserver (no hardcoded dimensions)
- Graceful fallbacks for Firefox/Safari
Live demos include a floating Monaco editor that keeps your cursor focus while you switch to your IDE.
GitHub (MIT): https://github.com/Shakya47/pip-it-up
npm: https://www.npmjs.com/package/@pip-it-up/react
Browser API: https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API
Would love feedbacks.