The ClipboardItem.supports() function is now Baseline Newly available

Stay organized with collections Save and categorize content based on your preferences.

Thomas Steiner

Published: April 30, 2025

Celebration: This web feature is now available in all three major browser engines, and becomes Baseline Newly available as of March 30, 2025.

The Async Clipboard API has made working with the clipboard a lot easier than it used to be in the past. In lieu of previous methods for managing the clipboard, you can now call navigator.clipboard.writeText() for plain text content or navigator.clipboard.write() for "almost" everything else like images, textual content, or HTML.

One missing piece so far, though, was quantifying the "almost". For example, you couldn't know if the API supported SVG until you tried, and then, in case of non-support, caught the exception that was thrown. This wasn't a very ergonomic way to determine support, which is why the static ClipboardItem.supports() function was specified.

The function has now reached Baseline Newly available status, which means working with the clipboard becomes even better. To know if a browser supports a given format, pass the MIME type of the format you're interested in to the function.

const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."

Before, I wrote "almost" everything else, and this is where it gets really interesting. Web custom formats allow you to work with formats the browser doesn't natively support. For example, by default, the browser doesn't support AVIF images.

const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."

But by using web custom formats, you can work with AVIF images and copy and paste them around freely, as long as the receiving party also knows how to deal with the web custom format.

const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."

Thanks to the ClipboardItem.supports() function, you can now properly detect the clipboard support situation for web custom format as well and be sure it works.

if (ClipboardItem.supports('web image/avif')) {
  // Fetch remote AVIF image and obtain its blob representation.
  const blob = await fetch('image.avif').then((response) => response.blob());

  try {
    // Write the image data to the clipboard, prepending the blob's actual
    // type (`"image/avif"` with the string `"web "`, so it becomes
    // `"web image/avif"`.
    const clipboardItem = new ClipboardItem({
      'web image/avif': blob,
    });
    await navigator.clipboard.write([clipboardItem]);
  } catch (err) {
    console.error(err.name, err.message);
  }
}

With the ClipboardItem.supports() function now Baseline Newly available, web developers can reliably detect clipboard support for various MIME types, including web custom formats. This enhancement makes working with the clipboard more robust and predictable, improving the user experience across all browsers.