demo · v140

Format Watcher

The clipboard isn't a single string — it's a payload with several MIME types in parallel. Each clipboardchange tells you which types the new contents advertise. Copy a screenshot vs. a paragraph and watch the type chips flip.

Type chips reflect navigator.clipboard.read() after each event. Green = present.

text/plain text/html image/png image/jpeg web text/uri-list
awaiting event
navigator.clipboard.addEventListener("clipboardchange", async () => {
  const items = await navigator.clipboard.read();
  for (const item of items) {
    for (const type of item.types) {
      const blob = await item.getType(type);
      reactToFormat(type, blob);
    }
  }
});

real use cases

An online doc editor wants to switch its paste handler depending on what's on the clipboard: text → keep formatting, HTML → strip tags from another app's CSS, image → upload and embed. Without the event you have to wait for the user to actually press paste — and then look. With the event you can show "paste as image" / "paste as text" UI proactively the moment the user copies.

see also