Writing

Writing to Clipboard

Introduction

The Clipboard API lets you programmatically copy text and other data to the system clipboard.

Copy Text

// Write text to clipboard
await navigator.clipboard.writeText('Text to copy');
console.log('Text copied to clipboard');

Copy Rich Data

// Write multiple formats
await navigator.clipboard.write([
  new ClipboardItem({
    'text/plain': new Blob(['Hello'], { type: 'text/plain' }),
    'text/html': new Blob(['<b>Hello</b>'], { type: 'text/html' })
  })
]);

Button Implementation

copyButton.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(textToCopy);
    copyButton.textContent = 'Copied!';
    setTimeout(() => { copyButton.textContent = 'Copy'; }, 2000);
  } catch (err) {
    console.error('Failed to copy:', err);
  }
});

Summary

navigator.clipboard.writeText(text) — copy text
navigator.clipboard.write(items) — copy rich data
Returns a Promise
Requires HTTPS and user interaction

Writing

Writing to Clipboard

Introduction

Copy Text

Copy Rich Data

Button Implementation

Summary

Further Reading