The ClipboardItem() constructor of the Clipboard API creates a new ClipboardItem object which represents data to be stored or retrieved via the Clipboard API, that is clipboard.write() and respectively.

Note: Image format support varies by browser. See the browser compatibility table for the Clipboard interface.


var ClipboardItem = new ClipboardItem(ClipboardItemData);



An Object with the MIME type as the key and data as the value. The data can be represented as a Blob, a String or a Promise which resolves to either a blob or string.

ClipboardItemOptions Optional

An Object with the following properties:

  • presentationStyle: One of "unspecified", "inline" or "attachment". The default is "unspecified".

Note: You can also work with text via the Clipboard.readText() and Clipboard.writeText() methods of the Clipboard interface.


The below example requests a png image using the Fetch API, and in turn, the responses' blob() method, to create a new ClipboardItem. This item is then written to the clipboard, using the Clipboard.write() method.

Note: You can only pass in one clipboard item at a time.

async function writeClipImg() {
  try {
    const imgURL = '/myimage.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
    console.log('Fetched image copied.');
  } catch(err) {
    console.error(, err.message);


Clipboard API and events
# dom-clipboarditem-clipboarditem

Browser compatibility

BCD tables only load in the browser

See also