How to Use Clipboard API in JavaScript: Copy and Paste Text

Use the navigator.clipboard.writeText() method to copy text to the clipboard and navigator.clipboard.readText() to read text from it. These methods return promises and require user interaction or permissions to work securely in browsers.

Syntax

The Clipboard API provides two main methods for text:

• navigator.clipboard.writeText(text): Copies the given text string to the clipboard.
• navigator.clipboard.readText(): Reads text from the clipboard and returns a promise with the string.

Both methods return promises, so use async/await or .then() to handle results.

javascript

await navigator.clipboard.writeText('Hello world');
const text = await navigator.clipboard.readText();

Example

This example shows how to copy text to the clipboard when a button is clicked and then read it back to display on the page.

javascript

const copyButton = document.getElementById('copy');
const pasteButton = document.getElementById('paste');
const output = document.getElementById('output');

copyButton.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('Hello Clipboard!');
    output.textContent = 'Text copied to clipboard!';
  } catch (err) {
    output.textContent = 'Failed to copy text: ' + err;
  }
});

pasteButton.addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText();
    output.textContent = 'Pasted text: ' + text;
  } catch (err) {
    output.textContent = 'Failed to read clipboard: ' + err;
  }
});

Output

Text copied to clipboard! (after clicking copy)
Pasted text: Hello Clipboard! (after clicking paste)

Common Pitfalls

• Permissions: Clipboard access requires user interaction (like a button click) and may be blocked by browser security if used without it.
• HTTPS Only: Clipboard API works only on secure contexts (HTTPS or localhost).
• Browser Support: Some older browsers do not support the Clipboard API fully.
• Async Handling: Forgetting to use await or .then() causes unexpected behavior.

javascript

/* Wrong: Trying to copy without user action */
navigator.clipboard.writeText('No user click'); // May fail silently

/* Right: Copy inside a click event */
document.querySelector('button').addEventListener('click', async () => {
  await navigator.clipboard.writeText('User clicked');
});

Quick Reference

Method	Description	Returns
navigator.clipboard.writeText(text)	Copies text to clipboard	Promise
navigator.clipboard.readText()	Reads text from clipboard	Promise

Key Takeaways

Use navigator.clipboard.writeText() to copy text and navigator.clipboard.readText() to paste text.

Clipboard API methods return promises and must be used with async/await or .then().

Clipboard access requires user interaction and works only on secure (HTTPS) sites.

Handle errors gracefully as clipboard access can be denied by the browser.

Test browser support before relying on Clipboard API in production.