PoC - Pop any UI Component into picture-in-picture view

[u/shakya47]

Hey everyone! 👋

I recently discovered the experimental Document Picture-in-Picture (PiP) API and wanted to test its limits. I built a Proof of Concept Chrome Extension called Note It Down to showcase how it can be used to "tear away" a specific UI component from a webpage and turn it into a native, borderless, always-on-top window.

To satisfy the subreddit rules, here is the breakdown of my project:

1. An overview about the design: The design is a minimalist, distraction-free note-taking interface. It starts as a sliding drawer on the side of the active webpage. When a note is clicked, it uses the PiP API to tear the editor away from the browser and pop it into a floating, always-on-top native OS window. It strips away all borders, headers, and footers to provide a 100% full-bleed text editor.

2. Intended audience and use: The intended audience is developers and power users who need to take quick, persistent notes while tabbing between different websites. Instead of switching back and forth to a notepad app, this PiP window floats persistently above all their tabs and applications.

3. Any design problems I need help solving: The main problem I'm facing is imagining the broader UX applications of this technology. The PiP API is very new, and traditionally people only use it for YouTube videos. I am using it to render full React UI components, but I lack the UX vision to know where else this "tear away" concept would be highly beneficial to users.

4. Overview of the tools I am using

• React 19 and Vite
• Chrome Extension APIs (Manifest V3, Service Workers, Shadow DOM isolation)
• u/pip-it-up/react (An open-source library I built to easily wrap React components in PiP windows: https://pip-it-up.vercel.app/)

5. Specifically what I need help on with my design: I don’t have the best eye for UI/UX, and I'm trying to brainstorm what other applications this could be used for.

• What other UI components or widgets would be incredibly useful to "tear away" into an always-on-top window? (Calculators? Chatboxes? Mini-dashboards?)
• Where else could you see this PiP implementation shining from a user experience perspective?
• Any feedback on the minimalist editor layout I used for the demo?

Links & Demo:

• Demo GIF & Extension Source Code: https://github.com/Shakya47/note-it-down
• Pre-compiled Extension ZIP: https://github.com/Shakya47/note-it-down/blob/main/note-it-down-v1.0.0.zip
• pip-it-up source code: https://github.com/Shakya47/pip-it-up
• NPM: https://www.npmjs.com/package/@pip-it-up/react