How To: Copy Text to Clipboard

How To: Build a Dark Mode Toggle »Next »

Build a production-ready, one-click "Copy Code" button using the modern asynchronous Clipboard API with visual user feedback and fallback support.

The Modern Async Clipboard API vs. Legacy execCommand

Historically, developers relied on document.execCommand("copy") to programmatically copy text. This legacy approach required creating a hidden <textarea>, appending it to the DOM, focusing it, selecting its text, executing the command synchronously, and then removing the element. It was clunky, prone to focus-stealing bugs, and has been formally deprecated by the W3C.

The modern standard is the asynchronous Clipboard API exposed via navigator.clipboard. It returns a native JavaScript Promise, resolving when the clipboard has been updated and rejecting if permissions are denied or if the document is not in focus.

navigator.clipboard.writeText(string): Writes plain UTF-8 text to the system clipboard.

navigator.clipboard.write([ClipboardItem]): Writes arbitrary data formats, including formatted HTML or binary PNG images.

navigator.clipboard.readText(): Reads plain text from the clipboard (requires explicit user permission prompt).

Pro Tip

The Clipboard API is only available in secure contexts (HTTPS) or on localhost. Calls in insecure HTTP will throw a TypeError: Cannot read properties of undefined (reading "writeText").

Building a Copy Button with Animated Feedback

A great user experience does not leave the user guessing. When they click "Copy", the button should immediately provide visual confirmation (e.g., swapping the icon or text to "Copied! ✓" and changing color), and then gracefully reset after 2 seconds.

Here is the complete, production-tested JavaScript function:

Async Copy Button with Visual Status Revert

Try It Yourself »

async function copySnippet(textToCopy, buttonElement) {
  try {
    // 1. Write text to clipboard
    await navigator.clipboard.writeText(textToCopy);

    // 2. Cache original button state
    const originalText = buttonElement.innerHTML;

    // 3. Update UI to success state
    buttonElement.innerHTML = "<span>Copied! ✓</span>";
    buttonElement.style.backgroundColor = "#10b981"; // Emerald green
    buttonElement.style.color = "#ffffff";
    buttonElement.setAttribute("aria-live", "polite");

    // 4. Automatically revert state after 2 seconds
    setTimeout(() => {
      buttonElement.innerHTML = originalText;
      buttonElement.style.backgroundColor = "";
      buttonElement.style.color = "";
    }, 2000);
  } catch (err) {
    console.error("Failed to copy text to clipboard:", err);
    // Fallback or user notification
    buttonElement.innerText = "Error copying!";
  }
}

Browser Security Constraints & Permissions

Browsers enforce strict security policies to protect user privacy from malicious background scripts:

Active User Gesture Required: You cannot trigger writeText() inside a background timer or unsolicited script; it MUST originate from an explicit user interaction (such as a click or keydown event).

Document Must Have Focus: If the user switches tabs or if an iframe does not have focus, the write promise will reject.

Permissions API: In modern browsers, writing to clipboard is automatically granted when initiated by user gesture, but reading requires the user to click "Allow" on a browser permission dialog.

Warning / Pitfall

Never write unvalidated or untrusted remote strings directly to the user clipboard, as this can expose users to terminal paste-jacking vulnerabilities.

Method	Input Type	Return Type	Permission Required
writeText()	string	Promise<void>	User Gesture Only (HTTPS)
write()	ClipboardItem[]	Promise<void>	User Gesture Only (HTTPS)
readText()	None	Promise<string>	Explicit User Permission Prompt
read()	None	Promise<ClipboardItem[]>	Explicit User Permission Prompt

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which modern Promise-based browser API method is the web standard for copying plain text to the clipboard?

Next: How To: Build a Dark Mode Toggle »