Why document.execCommand('copy') Is Deprecated and How to Master the New Clipboard API

“Copy to clipboard” is a common web feature that historically relied on the now‑deprecated document.execCommand('copy') API.

document.execCommand – Why It Was Abandoned

Before embracing new solutions, we need to understand the flaws of the old API, which has three major "sins":

Synchronous Execution : execCommand runs synchronously, blocking the browser’s main thread and causing noticeable UI lag when handling large data or complex pages.

DOM Dependency : execCommand can only act on the currently selected content in the document, forcing developers to use hacky steps such as creating a hidden <textarea> or <input>, inserting the text, selecting it, invoking document.execCommand('copy'), and then removing the temporary element.

Unclear Permission Model : Access to the clipboard is ambiguously controlled, with inconsistent implementations and restrictions across browsers, creating security concerns.

Because of these issues, the W3C deprecated the API and introduced a modern solution.

New Star: The Powerful Clipboard API ( navigator.clipboard )

The Clipboard API is an asynchronous, Promise‑based interface that fundamentally changes how we interact with the clipboard.

Its core advantages are:

Asynchronous Operations : All actions return a Promise, avoiding main‑thread blockage and improving performance.

Secure and Reliable : Integrated with the Permissions API, it requires explicit user consent and works only in secure contexts (HTTPS).

No DOM Dependency : You can write strings, images, and other data directly to the clipboard without any intermediate DOM elements.

More Powerful : Supports richer data types beyond plain text, such as images.

Hands‑On: How to Use the Clipboard API

Below are the most common scenarios.

Scenario 1: Copy Text to Clipboard

Use navigator.clipboard.writeText() for a clean, straightforward solution.

HTML:

<input id="copy-input" type="text" value="This is the text to copy">
<button id="copy-btn">Copy Text</button>

JavaScript:

document.getElementById('copy-btn').addEventListener('click', async () => {
  try {
    const text = document.getElementById('copy-input').value;
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
});

Scenario 2: Read Text from Clipboard

Reading is more sensitive; browsers request permission and the call must occur within a user‑initiated event.

HTML:

<button id="paste-btn">Paste Content</button>
<div id="paste-area" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;"></div>

JavaScript:

Scenario 3: Copy an Image to Clipboard

The old execCommand cannot copy images directly. The Clipboard API’s write() method together with ClipboardItem enables this.

async function copyImageToClipboard(imageUrl) {
  try {
    // 1. Fetch the image data
    const response = await fetch(imageUrl);
    const blob = await response.blob(); // Convert to Blob
    // 2. Create a ClipboardItem
    const item = new ClipboardItem({ [blob.type]: blob });
    // 3. Write to the clipboard
    await navigator.clipboard.write([item]);
    console.log('Image copied to clipboard');
  } catch (err) {
    console.error('Failed to copy image: ', err);
  }
}
// Example usage:
// copyImageToClipboard('path/to/your/image.png');

As of now, all major modern browsers (Chrome, Firefox, Edge, Safari) support the core features of the Clipboard API.