JavaScript Navigator clipboard Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CLIPBOARD

Definition

navigator.clipboard is a read-only property that returns a Clipboard object for reading and writing the system clipboard (MDN) — the entry point to the Clipboard API (copy / paste).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use navigator.clipboard. Start with this line.

JavaScript
navigator.clipboard
CallWhat it does
navigator.clipboardPrimary signature.

Built into the browser. Read navigator.clipboard on Navigator — no import required.

Library declarations
JavaScript
navigator.clipboard

Parameters

ParameterDescription
Secure contextRequired. HTTPS or localhost

Return Value

Return ValueDescription
*Clipboard (read-only property)

JavaScript Examples

Example 1 — Feature Detect

Check the API and secure context before using it.

JavaScript
const hasClip = !!navigator.clipboard;
const secure = window.isSecureContext;

console.log("clipboard:", hasClip);
console.log("secure context:", secure);

if (hasClip && secure) {
  console.log("ready for writeText / readText");
} else {
  console.log("not ready — missing API and/or HTTPS");
}
Try It Yourself

How It Works

  1. Check the property. Missing means no Clipboard API entry point.
  2. Check HTTPS. isSecureContext must be true.
  3. Combine both. Only then call clipboard methods.
  4. No clipboard touch yet. Detection alone does not copy or paste.

Example 2 — writeText()

Copy a string from a user gesture (button click).

JavaScript
async function copyHello() {
  if (!navigator.clipboard) {
    console.log("clipboard missing");
    return;
  }
  try {
    await navigator.clipboard.writeText("Hello from CodeToFun");
    console.log("copied");
  } catch (err) {
    console.log("copy failed:", err.name);
  }
}

// Call copyHello() from a button click.
Try It Yourself

How It Works

  1. Detect first. Skip when clipboard is absent.
  2. Await writeText. Pass the string to copy.
  3. Use a click. User activation improves success rates.
  4. Catch denials. Rejected Promises mean permission or policy blocked the write.

Example 3 — readText()

Read clipboard text (may prompt; handle denial).

JavaScript
async function pasteText() {
  if (!navigator.clipboard) {
    console.log("clipboard missing");
    return;
  }
  try {
    const text = await navigator.clipboard.readText();
    console.log("pasted:", text || "(empty)");
  } catch (err) {
    console.log("paste failed:", err.name);
  }
}

// Call pasteText() from a button click.
Try It Yourself

How It Works

  1. Await readText. Resolves to a string when allowed.
  2. Empty clipboard. MDN: empty / non-text often yields "".
  3. Permission. Browsers may prompt or deny — always catch errors.
  4. User gesture. Prefer a button click for paste actions too.
Compatibility

Browser Support

navigator.clipboard is marked Baseline Widely available on MDN (since March 2020). Secure context is required. Some advanced Clipboard methods still vary.

✓ Baseline · Widely available

Navigator.clipboard

Returns a Clipboard object for async read/write. Prefer writeText/readText; always handle permission failures.

100% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
clipboard Excellent

Bottom line: Safe to use on HTTPS for copy/paste UX. Feature-detect, require a user gesture when possible, and catch denials.

Frequently Asked Questions

It is a read-only Navigator property that returns a Clipboard object — the entry point to the Clipboard API for reading and writing the system clipboard (copy, cut, and paste features).
Yes. The Clipboard API is available only in secure contexts (HTTPS or localhost) in supporting browsers.
Call await navigator.clipboard.writeText("hello"). Prefer running it from a user gesture such as a button click so browsers are more likely to allow the write.
Call await navigator.clipboard.readText(). Reading often requires permission and may prompt the user. Handle promise rejections when access is denied.
No. The property is read-only. You use methods on the returned Clipboard object such as writeText() and readText().
No. MDN marks navigator.clipboard as Baseline Widely available. Some advanced methods (for example reading images via read()) can still vary by browser.

Next: connection

Learn the related Navigator connection property.

connection tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

7 people found this page helpful

JavaScript Navigator buildID Property JavaScript Navigator connection Property