JavaScript Clipboard API

#javascript #webdev #programming #tutorial

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);
})

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})
  ]);
};

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;
}

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!

Top comments (2)

raddevus • Jun 21 '22

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.

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. 😊