# Clipboard API

The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. It replaces the older, synchronous `document.execCommand()` method.

## 1. Writing to the Clipboard

The most common operation is copying text to the clipboard. This is done using `navigator.clipboard.writeText()`.

```javascript
async function copyTextToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

const copyBtn = document.querySelector('#copy');
copyBtn.addEventListener('click', () => {
  copyTextToClipboard('Hello World');
});
```

## 2. Reading from the Clipboard

You can read text from the clipboard using `navigator.clipboard.readText()`. This usually requires the user to grant permission.

```javascript
async function getClipboardText() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Clipboard text:', text);
  } catch (err) {
    console.error('Failed to read clipboard: ', err);
  }
}
```

## 3. Handling Images and Other Data

The API also supports arbitrary data (like images) using `write()` and `read()`. These methods work with `ClipboardItem` objects.

### Copying an Image (Blob)

```javascript
async function copyImage(blob) {
  try {
    const item = new ClipboardItem({ [blob.type]: blob });
    await navigator.clipboard.write([item]);
    console.log('Image copied!');
  } catch (err) {
    console.error(err);
  }
}

// Example: Fetch an image and copy it
fetch('image.png')
  .then(response => response.blob())
  .then(copyImage);
```

## 4. Permissions

The Clipboard API is gated by the Permissions API.
*   **Writing:** Usually allowed automatically when triggered by a user gesture (like a click).
*   **Reading:** Requires explicit permission (`clipboard-read`). The browser will prompt the user.

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/events]]
[[programming/javascript/vanilla/promises-async-await]]