DEV Community: keni

How I implemented Picture-in-Picture in React (with full code + tips)

keni — Sun, 05 Oct 2025 01:46:32 +0000

Hey everyone 👋

I recently added Picture-in-Picture (PiP) support to my React app — and honestly, it was way easier than I expected.

So, this post is both a memo for my future self and a beginner-friendly guide for anyone who wants to add PiP to their web app.

Let’s dive in 🚀

🎬 What is Document Picture-in-Picture?

Normally, Picture-in-Picture is used for videos —

like when you pop out a YouTube video and keep it on the corner of your screen.

But now, Chrome 116+ (and other Chromium browsers like Edge) added

👉 Document Picture-in-Picture API,

which allows you to open any HTML/React component inside a small floating window that stays on top.

That means you can show:

A timer that stays visible while switching tabs 🕒
A chat box or mini UI
A floating widget (music, notes, weather, etc.)

⚙️ Features and Limitations

Item	Description
✅ Supported browsers	Chrome / Edge 116+
🚫 Not supported	Safari, Firefox
🪟 Only one PiP window	You can’t open multiple windows
🎮 Interaction	You can use click / keyboard inside the PiP window
🧱 Size	Small window — keep your UI minimal

💻 React + Vite Example

Here’s how I implemented it in my project.

/src/hooks/useDocumentPiP.tsx

import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
import { createRoot, Root } from 'react-dom/client';

declare global {
  interface Window {
    documentPictureInPicture?: {
      requestWindow: (options?: { width?: number; height?: number }) => Promise<Window>;
    };
  }
}

// Copy CSS styles from main document to PiP window
const copyStyles = (source: Document, target: Document) => {
  Array.from(source.styleSheets).forEach((styleSheet) => {
    try {
      const rules = styleSheet.cssRules;
      const style = target.createElement('style');
      style.textContent = Array.from(rules)
        .map((rule) => rule.cssText)
        .join('\n');
      target.head.appendChild(style);
    } catch (error) {
      const ownerNode = styleSheet.ownerNode as HTMLLinkElement | null;
      if (ownerNode?.tagName === 'LINK' && ownerNode.href) {
        const link = target.createElement('link');
        link.rel = 'stylesheet';
        link.href = ownerNode.href;
        target.head.appendChild(link);
      }
    }
  });
};

export const useDocumentPiP = () => {
  const pipWindowRef = useRef<Window | null>(null);
  const pipRootRef = useRef<Root | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  const isSupported = useMemo(
    () => typeof window !== 'undefined' && 'documentPictureInPicture' in window,
    []
  );

  const cleanup = useCallback(() => {
    if (pipRootRef.current) {
      pipRootRef.current.unmount();
      pipRootRef.current = null;
    }
    pipWindowRef.current = null;
    setIsOpen(false);
  }, []);

  const openPiP = useCallback(
    async (content: ReactNode, options?: { width?: number; height?: number }) => {
      if (!isSupported || !window.documentPictureInPicture) {
        throw new Error('Document Picture-in-Picture is not supported.');
      }

      cleanup();

      const pipWindow = await window.documentPictureInPicture.requestWindow(options);
      pipWindowRef.current = pipWindow;

      pipWindow.document.body.innerHTML = '';
      pipWindow.document.body.style.margin = '0';
      pipWindow.document.body.style.display = 'flex';
      pipWindow.document.body.style.alignItems = 'center';
      pipWindow.document.body.style.justifyContent = 'center';

      copyStyles(document, pipWindow.document);

      const container = pipWindow.document.createElement('div');
      container.style.width = '100%';
      container.style.height = '100%';
      pipWindow.document.body.appendChild(container);

      const root = createRoot(container);
      root.render(content);
      pipRootRef.current = root;
      setIsOpen(true);

      const handleClose = () => cleanup();
      pipWindow.addEventListener('pagehide', handleClose, { once: true });
      pipWindow.addEventListener('beforeunload', handleClose, { once: true });
    },
    [cleanup, isSupported]
  );

  const closePiP = useCallback(() => {
    pipWindowRef.current?.close();
    cleanup();
  }, [cleanup]);

  return { isSupported, isOpen, openPiP, closePiP };
};

/src/components/PictureInPictureButton.tsx

import { useCallback, useState } from 'react';
import { MdPictureInPictureAlt } from 'react-icons/md';
import { Timer } from './Timer';
import { useDocumentPiP } from '../hooks/useDocumentPiP';

export const PictureInPictureButton = () => {
  const { isSupported, isOpen, openPiP, closePiP } = useDocumentPiP();
  const [isPending, setIsPending] = useState(false);

  const handleClick = useCallback(async () => {
    if (isPending) return;
    if (isOpen) {
      closePiP();
      return;
    }

    try {
      setIsPending(true);
      await openPiP(
        <div className="bg-base-100 text-base-content w-full h-full flex flex-col items-center justify-center gap-4 p-4">
          <Timer />
          <span className="text-sm font-medium">Picture in Picture</span>
        </div>,
        { width: 360, height: 220 }
      );
    } catch (error) {
      console.error('Failed to open PiP', error);
    } finally {
      setIsPending(false);
    }
  }, [closePiP, isOpen, isPending, openPiP]);

  if (!isSupported) return null; // Hide button if PiP is unsupported

  return (
    <button
      type="button"
      className="btn btn-outline btn-sm"
      onClick={handleClick}
      disabled={isPending}
      title="Open Picture-in-Picture"
    >
      <MdPictureInPictureAlt size={16} className="mr-1" />
      {isOpen ? 'Close PiP' : 'Open PiP'}
    </button>
  );
};

🧱 Common Pitfalls

Issue	Cause	Fix
CSS not applied	Cross-origin stylesheet error	Re-insert using `<link>` fallback
Blank screen	`<body>` rendered before ready	Use `await` properly or React 18’s `createRoot`
Can’t open two windows	API limitation	Use `isOpen` state to toggle

🧪 Testing Checklist

Open chrome://flags/#document-picture-in-picture-api → Make sure it’s Default or Enabled (not Disabled)
Run npm run dev
Click the PiP button → Small window should appear
Switch tabs — the PiP window should stay visible
Press Esc or close it manually — should return to normal

☕ Final Thoughts (and a Small Plug)

Implementing PiP in React was way easier than I expected.

It’s still limited to Chrome/Edge, but for timers, widgets, or chat tools, it’s surprisingly practical.

I’ve already added this feature to my own app —

👉 Pomodoro Flow 🍅

A minimal Pomodoro timer you can keep floating while working.

If you want to stay focused, check it out!

🔗 References

🧭 Outro

If this post helped you, drop a ❤️ or a comment below — it really motivates me 🙌

Building Pomodoro Flow: How I Made a YouTube-Integrated Pomodoro Timer with React, Zustand, and TypeScript

keni — Mon, 25 Aug 2025 05:46:07 +0000

Introduction

Hi everyone, I’m Keni (@keni_solopreneur).

This is my first post on DEV, and I’d like to share the journey of creating my side project: Pomodoro Flow 🍅 — a minimalist Pomodoro timer that integrates YouTube directly.

I’m not a professional software engineer by trade. I actually started this project simply because I wanted a focus timer that could play my favorite YouTube music without having to constantly switch tabs. What started as a small frustration turned into a real project where I learned React, TypeScript, Zustand, and a lot about building in public.

In this post, I’ll go through:

Why I decided to build this tool in the first place
The stack I chose (React, Vite, TypeScript, Zustand) and why
How I integrated YouTube with react-youtube and the IFrame API
How Zustand made state management so much simpler
The challenges I faced and lessons I learned along the way
What I’m planning next for this project

The Problem: Timer + YouTube = Too Many Tabs

I’ve always liked the Pomodoro Technique: 25 minutes of focused work, followed by a short break. It helps me stay on track, especially when working on personal projects after my day job.

But there was always a catch. Most Pomodoro apps provide built-in music or ambient sounds. And while that works for some people, it never worked for me. Some days I need lo-fi hip hop, other days it’s rain sounds, and sometimes it’s even game commentary running in the background. The music of the day matters a lot for my focus.

At first, my workflow looked like this:

One tab open for the timer
Another tab open for YouTube
Constant switching back and forth

It was distracting and killed my flow.

So I thought: what if I just build the tool I need myself?

Learning React in 3 Weeks (as a Non-Engineer)

Here’s the honest part: I had zero web development experience before this.

I’m a full-time automation engineer, but my work is more about Python and PLCs than frontend. So, starting with React and TypeScript felt intimidating.

To get started, I did a few things:

Watched YouTube tutorials on React basics
Took a Udemy course to understand component-based development
Used ChatGPT and Cline (AI coding assistant) to accelerate learning
Built small test components before putting them into my app

Three weeks later, I had my MVP: a Pomodoro timer with a working YouTube embed.

After another three weeks of refining the UI, fixing bugs, and polishing the UX, I had something that I felt confident enough to share: Pomodoro Flow.

Tech Stack

React (with Vite) → Fast, modern, and great DX
TypeScript → Type safety made me more confident, especially as a beginner
Zustand → Lightweight and intuitive state management
react-youtube → A simple wrapper around the YouTube IFrame Player API

I chose these tools because I wanted something minimal but reliable. Redux felt like overkill for this project, and Context API alone wasn’t enough for the level of state management I needed.

Key Feature: Syncing Timer and YouTube Playback

The core of Pomodoro Flow is simple:

When the timer starts → play the YouTube video
When the timer pauses → pause the video

Here’s the simplified implementation:

import YouTube from 'react-youtube';
import { useTimerStore } from './stores/timerStore';
import { useYouTubeStore } from './stores/youtubeStore';
import { useEffect } from 'react';

const YouTubePlayer = () => {
  const { isRunning } = useTimerStore();
  const { player, setPlayer } = useYouTubeStore();

  useEffect(() => {
    if (!player) return;
    isRunning ? player.playVideo() : player.pauseVideo();
  }, [isRunning, player]);

  const onReady = (event: any) => {
    setPlayer(event.target);
  };

  return <YouTube videoId="YOUR_VIDEO_ID" onReady={onReady} />;
};

Why Zustand?

I briefly considered Redux, Context API, and even Recoil. In the end, Zustand won because:

It’s lightweight (no boilerplate, just functions and hooks)
State slices make it easy to subscribe only to what you need
It plays nicely with TypeScript

Here’s a simple example of the timer store:

// src/stores/timerStore.ts
import { create } from 'zustand';

type TimerState = {
  isRunning: boolean;
  start: () => void;
  stop: () => void;
};

export const useTimerStore = create<TimerState>((set) => ({
  isRunning: false,
  start: () => set({ isRunning: true }),
  stop: () => set({ isRunning: false }),
}));

Challenges and Solutions

YouTube Player Load Timing

One issue I faced was that sometimes the YouTube player wasn’t fully ready when the timer state changed.

✅ Solution: Only control playback once onReady sets the player instance in Zustand.

Avoiding Unnecessary Re-renders

Another problem was re-rendering too many components when state changed.

✅ Solution: With Zustand, I could subscribe only to the specific state slice (isRunning) that I needed, preventing unrelated UI updates.

TypeScript with Third-Party Libraries

The react-youtube package didn’t provide perfect type support.

✅ Solution: I wrote wrapper types and interfaces to ensure type safety across my codebase.

The Result: Pomodoro Flow

After about 6 weeks of learning and building, the result is Pomodoro Flow — a minimal Pomodoro timer that integrates directly with YouTube.

👉 Try it here: pomodoro-flow.com

Key features include:

Paste any YouTube link you want
Play your favorite music, ASMR, or ambient sounds while working
No more switching tabs — just one clean space to focus

What’s Next?

This is still just an MVP, but I already have a roadmap in mind:

Spotify and other music service integrations
Simple task management features
Analytics to visualize productivity sessions

I’ll continue building in public and sharing progress here on Dev.to. 🚀

Final Thoughts

This project started from a small personal frustration, but it became a great learning journey with React, TypeScript, Zustand, and the YouTube API.

If you’re considering starting your own side project, my advice is simple: just start.

You’ll learn far more than you expect.

👉 Try Pomodoro Flow: https://pomodoro-flow.com

👉 Follow me here on Dev.to — I’ll be sharing more updates and lessons learned.

Thanks for reading, and happy focusing! 🍅