Async Clipboard API
The Async Clipboard API, allows web application to read and write into the system's clipboard.
Note that the Async Clipboard API replaces the deprecated document.execCommand() API to access the clipboard.
Both read and write access to the clipboard is available on modern versions
of Chrome, Edge, and Safari. Firefox only supports writeText().
Write Access
A list of the mandatory data types a browser must support by the Clipboards API specification exists; see this list by the W3C. Unfortunately, not all vendors support the complete list; check browser-specific documentation when possible.
In order to write data into the clipboard, there are the writeText() and write() methods. The writeText() method takes a String argument and
returns a Promise, while write() takes an array of ClipboardItem objects and also returns a Promise. ClipboardItem objects can
hold arbitrary data, such as images.
Write Access Example
1
2
3
4
5
6
7
export default function ClipboardWriteButton() {
const onClick = async () => {
await navigator.clipboard.writeText(new Date().toDateString());
};
return <button onClick={onClick}>Click me to copy date</button>;
}
Read Access
In order to read data from the clipboard, there are the readText() and read() methods. Both methods return a Promise which will resolve with data from
the clipboard. The readText() method resolves as a String while
read() resolves as an array of ClipboardItem
objects.
Read Access Example
1
2
3
4
5
6
7
8
export default function ClipboardReadButton() {
const onClick = async () => {
const text = await navigator.clipboard.readText();
alert(text);
};
return <button onClick={onClick}>Click me to see what's in your clipboard</button>;
}
Usage
Description of Figure 1
The Async Clipboard API grew in usage from 8.91% in 2021 to 10.10% in 2022 on desktop. On mobile, usage grew from 8.25% in 2021 to 9.27% in 2022.
The Async Clipboard API saw growth in usage from 8.91% in 2021 to 10.10% in 2022 on desktop. On mobile, there was also growth from 8.25% in 2021 to 9.27% in 2022. As a result, this year, the Async Clipboard API was the most used API on both desktop and mobile, beating the Web Share API (2021's most used API).