Clipboard API

Syntax

navigator.clipboard.writeText(text)
navigator.clipboard.readText()

Examples

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log("Copied to clipboard!");
  } catch (error) {
    console.log("Failed to copy:", error.message);
  }
}

document.querySelector("#copyButton").addEventListener("click", () => {
  copyToClipboard("https://example.com/share-link");
});

async function pasteFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log("Clipboard contains:", text);
  } catch (error) {
    console.log("Clipboard access denied or unavailable");
  }
}

Best practices

• Always wrap Clipboard API calls in try/catch - both permissions and browser support can cause them to fail
• Trigger clipboard writes directly from a user gesture (like a click handler) - browsers block clipboard access outside of direct user interaction
• Remember the API requires a secure context (HTTPS or localhost) - it will not work on plain HTTP
• Provide clear visual feedback (like a "Copied!" tooltip) after a successful copy, since there is no built-in browser indication

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation