IconVault logoIconVault
Sign in

Document PiP - Interactive Lab | IconVault

Open a real Document Picture-in-Picture window with live HTML: stopwatch, mirrored note, themes. Free, runs fully in your browser.

All tools

Document PiP

Custom HTML picture-in-picture windows

5 of 5 free uses left

Document Picture-in-Picture is not supported in this browser.

It needs Chrome or Edge 116 and later on desktop. Firefox and Safari do not implement it yet, so the demo below cannot run here.

Window width360px
Window height240px

5 of 5 free PiP windows left.

Note that mirrors into PiP

Every keystroke is written into the live PiP document. The PiP window is a real separate window with its own document, styles and scripts.

How it works: documentPictureInPicture.requestWindow() opens a blank always-on-top window and hands you its document. You build any HTML inside it, like this lab does with the stopwatch and the mirrored note.

Unlike video PiP, document PiP keeps full interactivity: forms, buttons and live updates all keep working while the main tab is in the background.

About this tool

IconVault's Document PiP playground calls the real `documentPictureInPicture.requestWindow()` API: a floating always-on-top window opens with live HTML inside it, a running stopwatch, and a note that mirrors every keystroke you type on the main page. You control the window size and theme, and everything is built with the actual PiP document object. It is free and runs fully in your browser.

You will learn how document PiP differs from video PiP (full interactive HTML instead of one video element), how to inject styles into the PiP document, how to keep it updated from timers and events, and how `pagehide` tells you when the user closes it. Where the API is missing (Firefox, Safari), the tool says so plainly instead of faking a window.

Frequently asked questions

Popular searches

document picture in picturedocumentpictureinpicturedocument pip apirequestwindowpicture in picture htmlpip window javascriptdocument pip exampledocument pip chromepip custom htmlfloating window web apialways on top window browservideo pip vs document pipdocumentpictureinpicture tutorialhow to use document pippip stopwatchmini player webpip note appdocument pip browser supportcaniuse document picture in picturedocument pip firefoxdocument pip safaripagehide pip windowpip window stylespip window close eventmultiple pip windowsdocument pip reactdocument pip typescriptmdn document picture in picturetest document pip onlinedocument pip demopip api javascriptcustom pip playerfloating video player webpip controls customdocument pip width heightrequestwindow optionspip window documentis documentpictureinpicture supporteddocument pip 2024picture in picture web apppip productivityfloating widget browserdocument pip use casespip api example codeopen pip window javascriptclose pip windowpip window eventsdocument pip securitypip window focusfloating pip windowdocument pip example code

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →