v149 · Clipboard · Async Clipboard API

Clipboard Spy

ClipboardItem.delayed() registers a data callback that only runs on paste. This spy visualises the timeline: copy → nothing rendered yet → paste → callback fires and generates data. Contrast with eager rendering that fires at copy time.

A canvas snapshot has to be rendered into a PNG blob. With eager copy, that rendering work happens when you press Copy. With deferred copy, it happens only if the clipboard item is actually read on paste.

0copy operations
0renders fired
0paste operations
0renders avoided
Copy something to see the render area…
lifecycle timeline 0 events
No events yet.

the deferred copy pattern

// ❌ Eager: expensive render fires at copy time, always
navigator.clipboard.write([
  new ClipboardItem({
    'image/png': expensiveRender() // runs NOW
  })
]);

// ✓ Deferred: render only runs if the user pastes
navigator.clipboard.write([
  ClipboardItem.delayed({
    'image/png': async () => {
      // Only called if navigator.clipboard.read() is called for this item
      return await expensiveRender();
    }
  })
]);

see also