Everything you need for PiP

A comprehensive API designed for real-world use cases — from simple pop-outs to complex editor workflows.

Live Style Sync

MutationObserver keeps styles, themes, and CSS-in-JS changes synced in real time.

Controlled & Uncontrolled

Works both ways — industry-standard API with `open` prop for full state control.

Move / Clone / Portal

Three DOM strategies. Move preserves state, portal keeps component tree intact.

Auto-sizing & Responsive

Windows adapt to content size automatically. Use `isInsidePip` for responsive PiP layouts.

Keyboard Forwarding

Cmd+S, Cmd+K, and all shortcuts keep working inside the PiP window.

Graceful Fallbacks

Firefox & Safari fallback to new tab, or your custom handler (e.g. a modal).

SSR-Safe

Works in Next.js, Remix, and Vite out of the box. No hydration mismatches.

Decoupled Triggers

Named registry lets any trigger connect to any wrapper — no shared context needed.

TypeScript-First

Generic-typed hooks, full IntelliSense, zero type casting needed.

Works with real editors

Tiptap, Monaco, CodeMirror — pop out any editor while preserving state, undo history.

RECIPES

Want to see more recipes?

We have pre-built examples and detailed recipes for almost every common developer requirement.

Fixed-size PiPPortal modeTheme syncKeyboard shortcutsFallbacksControlled mode

Explore recipes

Dead simple integration

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>
  );
}

Browser Support

Built on the Document PiP API with graceful fallbacks.

COMPATIBILITY

SECURE

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.

How it compares

A complete solution — if your wrapper exceeds browser API.

VS OTHERS

FEATURES

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	✓	~	✗

Roadmap

Follow our dotted trail to the future of Picture-in-Picture.

TREASURE MAP

TypeScript Support

Done

TypeScript-first core, full IntelliSense, generic-typed hooks out of the box.

React Wrapper