[Go Make Things] How to copy stuff to a user's clipboard with vanilla JavaScript

Wednesday, May 28, 2025

Need front-end help but don't need a full-time employee? I now offer subscription front-end engineering. Ship faster and build better systems. Pause or cancel any time.

Today, we're going to look at how to copy stuff to a user's clipboard with vanilla JavaScript… which you probably already knew because that's the title of the article.

Let's dig in!

The basics

This technique uses the navigator.clipboard API, which works basically everywhere except Node.js.

Let's create a copyToClipboard() function.

This navigator.clipboard methods are asynchronous, so we'll use the async operator with this one. That will let us use await inside our function.

We'll also accept the text to copy to the clipboard as an argument.

/**   * Copy text to the user's clipboard   * @param  {String} text The text to copy   */  async function copyToClipboard (text) {  	// ...  }

Inside our function, we'll use the navigator.clipboard.writeText() to actually save the text to the user's clipboard.

This is an asynchronous function, so we'll await it before continuing.

/**   * Copy text to the user's clipboard   * @param  {String} text The text to copy   */  async function copyToClipboard (text) {    	// Copy the text  	await navigator.clipboard.writeText(text);    }

Of course, something could go wrong, so we'll also want to try...catch() our code and log the error.

/**   * Copy text to the user's clipboard   * @param  {String} text The text to copy   */  async function copyToClipboard (text) {  	try {    		// Copy the text  		await navigator.clipboard.writeText(text);    	} catch (error) {  		console.warn('Unable to copy.', error);  	}  }

You would run it like this…

copyToClipboard('👋 Hey there, friend!');

And generally, it has to be done in response to a user interaction like clicking something.

Here's a demo.

Making this a Web Component

The challenge with our current code is that it doesn't really notify the user that anything has happened.

In an ideal world, you'll want to display a status notification of some kind that tells the user the text has been copied. You also probably want to have some sort of button that the user can interact with and makes it clear what will happen when they do.

Tomorrow, we'll look at how to do exactly that with an HTML Web Component!

Learn more about subscription front-end engineering. Ship faster and build better systems.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

.