Css Tricks iconCss TricksAug 27, 2026

Creating Web Widgets Using the Document Picture-in-Picture API

The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it.

Creating Web Widgets Using the Document Picture-in-Picture API

Share this story

Send the public story page.

Useful takeaways from this story.

The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it.

Building the complete brief

The page is ready to read now. The fuller skim-friendly version will appear here automatically.

The useful part

The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it.

Keep reading in the app

Open the app view to save this story, compare related coverage, and continue from the same source.

Open in app