← Lessons

quiz vs the machine

Gold1320

Frontend

The Clipboard API

Read and write the system clipboard asynchronously with permission.

4 min read · core · beat Gold to climb

Modern copy and paste

The async Clipboard API, on navigator clipboard, replaces the old document execCommand approach with a promise based, permission aware interface.

  • writeText copies a string to the clipboard
  • readText reads text from the clipboard
  • write and read handle rich data like images via ClipboardItem
  • All methods return promises

Permissions and trust

Reading the clipboard is sensitive, so browsers require a secure context and usually a user gesture like a click. Reading may prompt for permission, while writing is generally allowed during a gesture.

Graceful fallbacks

Not every browser supports the full API, especially rich read. Feature detect navigator clipboard before use, and consider a fallback for older environments. Always wrap calls in try catch since rejection is common when focus or permission is missing.

Key idea

The async Clipboard API copies and pastes via navigator clipboard promises, but requires a secure context and usually a user gesture, so always handle rejection.

Check yourself

Answer to earn rating on the learn ladder.

1. Why might a call to navigator clipboard writeText reject?

2. What does the async Clipboard API replace?