v149 · Clipboard · demo

Deferred Copy Demo

Copy the same text via eager (new ClipboardItem({...})) and deferred (ClipboardItem.delayed({...})). The callback counter shows the eager copy runs immediately; the deferred callback fires only when you paste.

⟳ Checking Clipboard API…
Eager copy ClipboardItem
Callback invocations 0
Fired at —
Deferred copy ClipboardItem.delayed()
Callback invocations 0
Fired at —
Paste target (click here, then Ctrl/Cmd+V)
Click here to focus, then paste to trigger the deferred callback…
Event timeline
—Events will appear here
// Eager: data generation runs NOW at copy time
const eagerItem = new ClipboardItem({
  'text/plain': new Blob(['Hello world'], { type: 'text/plain' }),
});
await navigator.clipboard.write([eagerItem]);

// Deferred: callback only runs when the user pastes
const deferredItem = ClipboardItem.delayed({
  'text/plain': async () => {
    console.log('callback invoked — user is pasting!');
    return new Blob(['Hello world'], { type: 'text/plain' });
  },
});
await navigator.clipboard.write([deferredItem]);

see also