demo · v144

Format Inspector

The event hands you a fresh ClipboardItem snapshot. Tap subscribe, then copy a paragraph from this page, a screenshot, or an image from another tab — the inspector shows every MIME type the system is offering and previews the richest one.

clipboardchange: checking…

MIME types offered

(empty)

richest preview

—

event timeline

the API

navigator.clipboard.addEventListener("clipboardchange", async () => {
  // event tells you the types are available, no payload until you read
  const items = await navigator.clipboard.read();
  for (const item of items) {
    for (const type of item.types) {
      if (type.startsWith("image/")) {
        const blob = await item.getType(type);
        previewImage(URL.createObjectURL(blob));
      } else if (type === "text/html") {
        renderRich(await (await item.getType(type)).text());
      }
    }
  }
});

see also