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

DevFeed: [Creating Web Widgets Using the Document Picture-in-Picture API](<https://devfeed.tech/articles/creating-web-widgets-using-the-document-picture-in-picture-api-4258.md>)

Original publisher: [Read original article](<https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/>)

Author: Daniel Schwarz

Published: 2026-08-27T14:41:06Z

Content type: tutorial

Language: en

Sources: [CSS-Tricks](<https://devfeed.tech/sources/css-tricks.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [interactive website](<https://devfeed.tech/topics/interactive-website.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [articles](<https://devfeed.tech/tags/articles.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [picture-in-picture](<https://devfeed.tech/tags/picture-in-picture.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

A tutorial on using the Document Picture-in-Picture API to create persistent web widgets, including a cloned stock ticker. It covers HTML, CSS, JavaScript, browser support checks, and styling considerations for content moved into a DPIP window.

## Source excerpt

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 originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.