v145 · Web APIs · Clipboard · demo
Paste Preview
A text editor that listens for clipboardchange and shows a "Paste ready" preview banner when new text is detected. Click the editor first (sticky activation), then copy any text outside the page — the banner appears immediately with a one-click paste action, without polling.
Chrome 145+ —
window.addEventListener('clipboardchange', ...). Requires a recent user gesture on the page (sticky activation) to receive clipboard change events. In other browsers the banner won't appear on external copy, but manual paste (Ctrl+V) still works.
Click inside the editor below (sticky activation) · copy text anywhere on your system · watch the paste preview banner appear
Click here, then copy any text elsewhere to see the paste preview…
Clipboard events
—Waiting for clipboardchange events…
// clipboardchange event — Chrome 145
// Shows a paste-preview banner when clipboard changes externally.
window.addEventListener('clipboardchange', async () => {
// Event fires (no permission needed)
// To READ the value, check/request clipboard-read:
const { state } = await navigator.permissions.query({ name: 'clipboard-read' });
if (state === 'granted') {
const text = await navigator.clipboard.readText();
showPasteBanner(text); // show preview, let user click to insert
} else if (state === 'prompt') {
// Inside the event handler — browser may show permission UI
const text = await navigator.clipboard.readText();
showPasteBanner(text);
} else {
// Denied: show generic "clipboard updated" badge without value
showChangeBadge();
}
});
// Sticky activation: the user must have recently interacted with the page
// for clipboardchange to fire. No workaround — it's a security requirement.