v149 · Clipboard · demo

Format Picker

Write three MIME types simultaneously using ClipboardItem.delayed(). Paste into a plain text, HTML, or custom target and observe that only the consumed format's callback fires — the others remain silent.

⟳ Checking Clipboard API…
then paste into one of the boxes below
text/plain
CB calls 0
Plain text renderer — fast, low cost
text/html
CB calls 0
HTML serializer — moderate cost
image/png
CB calls 0
Canvas render → PNG — expensive

Paste into one of the targets below (Ctrl/Cmd+V while focused):

Plain text target
Click & paste here…
Rich text (HTML) target
Click & paste here…
Image target
Click & paste here (image shown if pasted)…
Event log
—Waiting for copy & paste events…
// Register three deferred callbacks at copy time.
// Only the format the paste target accepts will fire its callback.
const item = ClipboardItem.delayed({
  'text/plain': async () => {
    console.log('[text/plain] callback — generating plain text');
    return new Blob(['Hello, world!'], { type: 'text/plain' });
  },
  'text/html': async () => {
    console.log('[text/html] callback — serializing HTML');
    return new Blob(['Hello, world!'], { type: 'text/html' });
  },
  'image/png': async () => {
    console.log('[image/png] callback — rendering canvas → PNG');
    const canvas = document.createElement('canvas');
    // ... render ...
    return new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
  },
});
await navigator.clipboard.write([item]);

see also