The Chrome team has recently extended the support of the Clipboard API. One improvement is the ability to easily copy text not present in the DOM:

let textToCopy = 'Copy me' 

async function copyToClipboard() {
  try {
    // 1) Copy text
    await navigator.clipboard.writeText(textToCopy);

    // 2) Catch errors
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

The new method navigator.clipboard.writeText is indeed much easier to use than the commonly used document.execCommand('copy') method:

let textToCopy = 'Copy me' 

function copyToClipboard() {
  // 1) Add the text to the DOM (usually achieved with a hidden input field)
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.value = textToCopy;

  // 2) Select the text
  input.focus();
  input.select();

  // 3) Copy text to clipboard
  const isSuccessful = document.execCommand('copy');

  // 4) Catch errors
  if (!isSuccessful) {
    console.error('Failed to copy text.');
  }
}

So what's the catch?

Well, navigator.clipboard is currently only available in Chrome 😢
It may take quite some time before browsers fully support this clipboard API. Allowing read & write access to the user's clipboard come with great security issues and browser vendors need time to do it right.

So for now, we're stuck with document.execCommand. Fortunately there are libraries like clipboard.js that save us the trouble.

More information and codepen

If you want to learn more about accessing the clipboard using Vanilla JavaScript, I recommend reading this informative post from alligator.io.

Inspired by that post, I also made a codepen showcasing a complete example using the new navigator.clipboard.