{pageTitle}

HTML5 Clipboard API Overview

The HTML5 Clipboard API allows web applications to securely read from and write to the user's clipboard using JavaScript. It replaces older techniques such as document.execCommand("copy") with a modern, Promise-based API that is easier to use and more secure.

The Clipboard API is commonly used for copy buttons, paste operations, code snippets, sharing links, password managers, productivity tools, editors, and web applications that interact with copied text or images. Most clipboard operations require a secure HTTPS connection and user interaction.

Basic Clipboard API Example

// Copy text to clipboard

navigator.clipboard
  .writeText("Hello HTML5!")
  .then(() => {
    console.log("Copied successfully.");
  })
  .catch((error) => {
    console.error(error);
  });

The writeText() method copies text to the system clipboard. Since it returns a Promise, it can be handled using .then(), .catch(), or async/await.

Clipboard API Methods

Copy Text Example

async function copyText() {
  try {
    await navigator.clipboard.writeText(
      "https://example.com"
    );

    console.log("Copied!");
  }catch (error) {
    console.error(error);
  }
}

This example copies a URL to the user's clipboard using async/await.

Read Clipboard Text Example

async function pasteText() {
  try {
    const text =
      await navigator.clipboard.readText();

    console.log(text);
  }catch (error) {
    console.error(error);
  }
}

The readText() method retrieves text currently stored in the clipboard. Browsers typically require user permission before allowing clipboard reading.

Clipboard Permissions

Clipboard access is protected to prevent websites from silently reading or modifying clipboard data. Most browsers require HTTPS and a user gesture such as clicking a button before clipboard operations are allowed.

// Check Clipboard permission

navigator.permissions
  .query({
    name: "clipboard-read"
  })
  .then((permission) => {
    console.log(permission.state);
  });

Common Clipboard API Use Cases

Browser Support

Clipboard API Best Practices

• Use the Clipboard API only over HTTPS.
• Trigger clipboard operations from user actions such as clicks.
• Handle Promise rejections gracefully.
• Provide visual feedback after copying or pasting.
• Use feature detection before accessing the API.
• Respect user privacy and avoid unnecessary clipboard access.
• Fallback gracefully for unsupported browsers.
• Use async/await for cleaner asynchronous code.

Common Clipboard API Mistakes

• Using the Clipboard API on non-HTTPS websites.
• Attempting clipboard access without a user gesture.
• Ignoring rejected Promises.
• Not checking browser support.
• Expecting clipboard permissions to be permanently granted.
• Using deprecated document.execCommand("copy") in new applications.
• Reading clipboard data without considering user privacy.
• Not informing users when copy operations succeed or fail.

Key Takeaways

• The Clipboard API replaces older copy and paste techniques.
• navigator.clipboard provides modern clipboard access.
• writeText() copies text, while readText() reads clipboard text.
• The API is Promise-based and works well with async/await.
• Clipboard access generally requires HTTPS and user interaction.
• Always respect permissions, browser support, privacy, and security.