JavaScript ClipBoard API

The JavaScript clipboard API provide the ability to programmatically interface with the devices clipboard, enabling cutting, copying, and pasting without user input.

Checking for clipboard access

The first step in using any navigator feature is to make sure you have the correct permissions to use the feature. To check the clipboard feature use navigator.permissions.query and pass an object with the key of write-on-clipboard. This will return granted if the user has granted permission.

navigator.permissions.query({ name: "write-on-clipboard" }).then((result) => {
    if (result.state == "granted" || result.state == "prompt") {
    alert("Write access granted!");

Reading from the clipboard

Reading from the clipboard uses the readText method which return a promise with the resulting values.


Writing to the clipboard

Writing to the clip board is the same as reading from the clipboard. Use the writeText method and pass the text you want to be written.


The clipboard API is an awesome tool to use to improve the user experience of your application and reduce the friction a user has to go through. DECODE uses this function for code copying and pasting. If you want to learn how we do it read the post below, we use CSS pseudo-element to render the COPY text in the right-hand corner and listen for a click event, then code the code to the clipboard.



Be the first to comment!

Read More

Node JS Logo
Node JS Logo

Setting up Node.JS for production

Node.js is a popular JavaScript runtime that allows developers to build server-side applications with JavaScript. PM2 is a process manager for Node.js applications that helps to keep your applications running smoothly and automatically restart th...

Nginx Logo
Nginx Logo

How to setup Nginx server blocks for multiple sites - Ubuntu

Setting up nginx server blocks is a process that allows you to host multiple websites on a single server. It is a useful technique for those who want to host multiple websites or applications on a single machine, as it allows you to use a single IP address and port to host mult...

Building SvelteKit for Node JS

SvelteKit is a powerful tool that is great for making all types of websites, with out of the box support for services like Vercel. In this tu...