---
title: ClipboardItem
slug: Web/API/ClipboardItem
tags:
  - API
  - Clipboard
  - Clipboard API
  - ClipboardItem
  - Cut
  - Interface
  - NeedsTranslation
  - Reference
  - TopicStub
  - copy
  - paste
translation_of: Web/API/ClipboardItem
---
<div>{{draft}}{{DefaultAPISidebar("Clipboard API")}}</div>

<p class="summary"><span class="seoSummary">The <strong><code>ClipboardItem</code></strong> interface of the {{domxref('Clipboard API')}} represents a single item format, used when reading or writing data via the {{domxref('Clipboard API')}}. That is {{domxref("clipboard.read()")}} and {{domxref("clipboard.write()")}} respectively.</span></p>

<p>The benefit of having the <strong><code>ClipboardItem</code></strong> interface to represent data, is that it enables developers to cope with the varying scope of file types and data easily.</p>

<p>Access to the contents of the clipboard is gated behind the <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>: The <code>clipboard-write</code> permission is granted automatically to pages when they are in the active tab. The <code>clipboard-read</code> permission must be requested, which you can do by trying to read data from the clipboard.</p>

<div class="note">
<p><strong>Note</strong>: To work with text see the {{domxref("Clipboard.readText()")}} and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}} interface.</p>
</div>

<div class="note">
<p><strong>Note</strong>: You can only pass in one clipboard item at a time.</p>
</div>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("ClipboardItem.ClipboardItem()")}}</dt>
 <dd>Creates a new <strong><code>ClipboardItem</code></strong> object, with the {{Glossary("MIME type")}} as the key and {{domxref("Blob")}} as the value</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p><em>This interface provides the following properties.</em></p>

<dl>
 <dt>{{domxref("ClipboardItem.types", "types")}} {{ReadOnlyInline}}</dt>
 <dd>Returns an {{jsxref("Array")}} of MIME types available within the <strong><code>ClipboardItem</code></strong>.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>This interface defines the following methods.</em></p>

<dl>
 <dt>{{domxref("ClipboardItem.getType", "getType()")}}</dt>
 <dd>Returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested {{Glossary("MIME type")}}, or an error if the MIME type is not found.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Writing_To_Clipboard">Writing To Clipboard</h3>

<p>Here we're writing a new {{domxref("ClipboardItem.ClipboardItem()")}} to the {{domxref("Clipboard API", "clipboard")}} by requesting a png image using the {{domxref("Fetch API")}}, and in turn, the {{domxref("Body.blob()", "responses' blob()")}} method, to create the new {{domxref("ClipboardItem")}}.</p>

<pre class="brush: js notranslate">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.name, err.message);
  }
}
</pre>

<h3 id="Reading_From_The_Clipboard">Reading From The Clipboard</h3>

<p>Here we're returning all items on the clipboard via the {{domxref("clipboard.read()")}} method. Then utilizing the {{domxref("ClipboardItem.types")}} property to set the {{domxref("ClipboardItem.getType", "getType()")}} argument and return the corresponding blob object.</p>

<pre class="brush: js notranslate">async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {

      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }

    }

  } catch (err) {
    console.error(err.name, err.message);
  }
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Clipboard API','#clipboarditem','ClipboardItem')}}</td>
   <td>{{Spec2('Clipboard API')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.ClipboardItem")}}</p>

<div class="note">
<p><strong>Note</strong>: Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface.</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li>
 <li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on Glitch</a></li>
 <li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async Clipboard article</a></li>
</ul>