The JavaScript clipboard.writeText() method

Q: How do I copy text to the clipboard in JavaScript?

Use await navigator.clipboard.writeText(text) inside a click handler. It returns a promise.

Q: What replaced document.execCommand("copy")?

The Clipboard API — navigator.clipboard.writeText() — which is promise-based and is the modern, recommended approach.

Q: How do I read from the clipboard?

Use navigator.clipboard.readText(), which prompts the user for permission and returns a promise with the text.

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

The navigator.clipboard.writeText() method copies a string to the system clipboard. It returns a promise, so await navigator.clipboard.writeText(text). It must be triggered by a user gesture (like a click) and only works in a secure context (HTTPS or localhost). It's the modern replacement for the deprecated document.execCommand("copy").

Overview

navigator.clipboard.writeText() is the modern Clipboard API for copying text. Pass it a string and it writes that to the user's clipboard, returning a promise that resolves when the copy succeeds. The typical use is a "copy to clipboard" button next to a code snippet, a share link, or a coupon code: await navigator.clipboard.writeText(code), then show a "Copied!" confirmation.

There are firm requirements for security and privacy. It must be called in response to a user gesture (a click or key press) — you can't silently copy on page load — and the page must be in a secure context (HTTPS, or localhost during development). Because it returns a promise that can reject (permission denied, not focused), wrap it in try...catch with async/await and handle failure gracefully.

It replaced the old document.execCommand("copy"), which was synchronous, clunky (it required selecting a hidden element) and is now deprecated. The Clipboard API also has readText() for pasting (which prompts for permission) and a lower-level write()/read() for images and other formats, but writeText() covers the overwhelmingly common copy-text case.

Syntax

await navigator.clipboard.writeText(text);

button.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText("Hello!");
    // show "Copied!"
  } catch (err) {
    // copy failed (permission / not focused)
  }
});

Parameters

The clipboard.writeText() method accepts the following parameters.

Parameter	Description
`text`	The string to write to the clipboard.

Example

Live example

// a copy-to-clipboard button
const btn = document.querySelector('#copy');

btn.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('https://codeshack.io');
    btn.textContent = 'Copied!';
    setTimeout(() => { btn.textContent = 'Copy link'; }, 1500);
  } catch (err) {
    btn.textContent = 'Copy failed';
  }
});

Best practices

Call it from a user gesture (a click) — it won't work on page load.
It needs a secure context (HTTPS or localhost).
Wrap it in try...catch with await and confirm success in the UI.
Use it instead of the deprecated document.execCommand("copy").

Frequently asked questions

How do I copy text to the clipboard in JavaScript?

Use await navigator.clipboard.writeText(text) inside a click handler. It returns a promise.

Why does clipboard.writeText() fail?

It must be triggered by a user gesture and run in a secure context (HTTPS/localhost). Outside those, or without permission, the promise rejects.

What replaced document.execCommand("copy")?

The Clipboard API — navigator.clipboard.writeText() — which is promise-based and is the modern, recommended approach.

How do I read from the clipboard?

Use navigator.clipboard.readText(), which prompts the user for permission and returns a promise with the text.

classList cloneNode()

References