JavaScript Navigator clipboard Property

What You’ll Learn

navigator.clipboard returns a Clipboard object — the modern entry point to copy and paste from JavaScript. Learn secure-context rules, writeText(), readText(), permissions, five examples, and try-it labs.

Introduction

Almost every app needs “Copy” and “Paste.” The Clipboard API gives your page a clean, promise-based way to talk to the system clipboard — without the old document.execCommand("copy") hacks.

Your entry point is navigator.clipboard. That property is read-only and returns a Clipboard object with async methods such as writeText() and readText().

Understanding the clipboard Property

Think of navigator.clipboard as a handle to the system clipboard for this page. You do not assign to it — you call methods on the object it returns.

• writeText(text) — copy a string to the clipboard.
• readText() — read text from the clipboard (may need permission).
• write() / read() — richer data (for example images) via ClipboardItem.
• All methods return Promises and reject if access is denied.

📝 Syntax

General form of the property:

navigator.clipboard

Value

• A Clipboard object used to access the system clipboard.

Common patterns

// Copy (from a click handler):
await navigator.clipboard.writeText("Hello CodeToFun");

// Paste text:
const text = await navigator.clipboard.readText();
console.log(text);

// Feature-detect:
if (navigator.clipboard && window.isSecureContext) {
  // safe to use Clipboard API
}

Examples Gallery

Examples follow MDN Navigator.clipboard / Clipboard API patterns. Prefer Try It Yourself for interactive copy/paste. Use View Output for expected messaging.

const supported = !!navigator.clipboard;
console.log(supported ? "clipboard available" : "clipboard missing");

clipboard available
(on modern browsers in a secure context)

const lines = [
  "isSecureContext: " + window.isSecureContext,
  "clipboard: " + (navigator.clipboard ? "present" : "absent")
];
console.log(lines.join("\n"));

isSecureContext: true
clipboard: present

async function copyCode() {
  if (!navigator.clipboard) {
    return "clipboard unavailable";
  }
  await navigator.clipboard.writeText("const x = 42;");
  return "copied to clipboard";
}

// Call from a button click in Try It

copied to clipboard
(after clicking Copy in Try It)

async function pasteInto(el) {
  if (!navigator.clipboard) {
    el.textContent = "clipboard unavailable";
    return;
  }
  try {
    const clipText = await navigator.clipboard.readText();
    el.textContent = clipText || "(empty clipboard text)";
  } catch (err) {
    el.textContent = "read denied: " + err.name;
  }
}

// Wire to a Paste button in Try It

(clipboard text, empty string message, or NotAllowedError)
after clicking Paste in Try It

async function copyText(text) {
  if (!window.isSecureContext) {
    return { ok: false, reason: "insecure-context" };
  }
  if (!navigator.clipboard) {
    return { ok: false, reason: "unsupported" };
  }
  try {
    await navigator.clipboard.writeText(text);
    return { ok: true, reason: "copied" };
  } catch (err) {
    return { ok: false, reason: err.name };
  }
}

copyText("Hello").then((r) => console.log(JSON.stringify(r)));

{"ok":true,"reason":"copied"}
(or a failure reason after clicking Copy in Try It)

🚀 Common Use Cases

• Copy code / invite links — one-click writeText buttons.
• Share snippets — copy formatted IDs, coupons, or URLs.
• Paste into editors — readText into a canvas or form (with permission).
• Extensions / tools — MDN’s clip-text display pattern.
• Prefer over execCommand — cleaner async API for modern browsers.

📝 Notes

• Baseline Widely available — safe default for modern sites.
• Requires a secure context (HTTPS / localhost).
• Not Deprecated or Experimental on MDN.
• Reading the clipboard is more permission-sensitive than writing text.
• Related: connection, Window, JavaScript hub.

💡 Best Practices