v149 · Clipboard · Async Clipboard API

Paste Router

A paste router checks ClipboardItem.types to see which formats are available for free, then calls getType() only for the format the current drop target accepts. Formats that don't match are never fetched from the OS.

Checking Clipboard API support…

Copy some content (text, HTML, or an image). Then click a drop zone — or press Ctrl+V / ⌘V anywhere on the page — to paste it into a typed target.

0type checks (free)
0formats fetched
0fetches avoided

Text Target

Accepts plain text. Ignores images and HTML without fetching them.

text/plain
Pasted content:

HTML Target

Prefers HTML; falls back to plain text. Never fetches images.

text/html text/plain
Pasted content:

Image Target

Accepts only images. Never reads text formats.

image/png image/jpeg
Pasted image:

Smart Any-Format Target

Picks best available: HTML → image → text. Fetches only the winner.

text/html image/png text/plain
Pasted content:

// Paste router log — paste something to see the routing decisions

the routing pattern

// Route paste — only fetch the format the target needs
async function pasteIntoTarget(target, clipboardItems) {
  for (const item of clipboardItems) {
    // types check is free — no OS read
    const hasHtml  = item.types.includes('text/html');
    const hasText  = item.types.includes('text/plain');
    const hasImage = item.types.includes('image/png');

    if (target === 'html-editor' && hasHtml) {
      const blob = await item.getType('text/html'); // 1 OS read
      // use html content
    } else if (target === 'text-field' && hasText) {
      const blob = await item.getType('text/plain'); // 1 OS read
      // use plain text
    }
    // image never fetched for text targets
  }
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗