DEV Community

Yiğit Kaan Korkmaz
Yiğit Kaan Korkmaz

Posted on

JavaScript Clipboard API

Hello everyone! In today's article i will talk about the Clipboard API in JavaScript.

So, what does this Clipboard API do?

As the name suggests, it responds to clipboard commands, such as cut, copy, paste!

Let me show you an example, then i will explain it to you!

Check the example below:

navigator.clipboard.writeText("Hello").then(res => {
  alert("Copied to clipboard!");
}, rej => {
  alert("Could not copy to clipboard");
});

navigator.clipboard.readText().then(text => {
  console.log(text);
})
Enter fullscreen mode Exit fullscreen mode

The code below copies the string "Hello" to the clipboard, then it logs the text in the clipboard to the console. We can use this API to write and read from the Clipboard, which makes the whole "Copied to clipboard!" buttons incredibly easy.

Obviously that is not the only thing we can do. Clipboards can be used to do a lot of stuff, even copy images.

But on some browsers that functionality is not that great, so i suggest you check the compatibility table as always: Clipboard API Browser Compatibility

We can use the Clipboard API to get data other than strings, as i said before, and this is done like the example below:

const copyImageToClipboard = async () => {
  const response = await fetch("path/to/the/image");
  const blob = await response.blob();
  await navigator.clipboard.write([
    new ClipboardItem({"image/png": blob})
  ]);
};
Enter fullscreen mode Exit fullscreen mode

In the example above we fetched the image from the path of wherever the image is, then we made it into a blob, and we wrote it to the clipboard as a new ClipboardItem instance.

And obviously then we can read those items by writing the code below:

const readClipboard = async () => {
  const items = await navigator.clipboard.read();

  return items;
}
Enter fullscreen mode Exit fullscreen mode

But like i said, the browser support for this API can still be a problem. So always check MDN for the browser compatibility issues!

That's it for today's article, if there are any problems and issues in my post, please don't forget to tell me about them in the comments!

Have a great day everyone!

Discussion (2)

Collapse
raddevus profile image
raddevus

Thanks for sharing this. I'm always interested in Browser clipboard functionality, because it has changed over time & it's always been very tricky.
I wrote my emoji manager web app (SPA) and had to do some special trickery to get the emojis copied to the clipboard no matter which browser the user has.
Take a look at it at my site newlibre.com/mojiWriter and let me know what you think.
emoji manager
It's a simple little app, but kind of interesting because you can save any new emojis to your custom ones.

I wrote up how to build this app in my book, Learn HTML5, JavaScript & CSS : Launch Your Dev Career, Vol 2.
Let me know if you want a free copy and I'll give you a link to PDF or Kindle file. 😊

Collapse
kaankorkmaz profile image
Yiğit Kaan Korkmaz Author

I think your website is great! Getting it to work on all browsers is surely tricky as well!