Clipboard API

Browser APIs & BOM

Clipboard access needs user trust and graceful fallback.

navigator.clipboard is available in secure contexts and is usually tied to user gestures and browser permissions.

Writing text is common for copy buttons. Reading the clipboard is more sensitive and should be requested only when clearly needed.

Clipboard code should always provide feedback and fallback because support and permission behavior vary.

Examples

Browser APIs should be used with capability checks, permissions and fallbacks.

try {
  await navigator.clipboard.writeText(value);
  status.textContent = "Copied.";
} catch {
  status.textContent = "Select and copy manually.";
}

const text = await navigator.clipboard.readText();
sendToServer(text);

Code patterns

Reusable examples for quick reference.

These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.

if (!navigator.clipboard) {
  showManualCopyFallback();
}

await navigator.clipboard.writeText(value);

try {
  await navigator.clipboard.writeText(value);
} catch {
  showManualCopyFallback();
}

// Ask only after a clear user action.
const text = await navigator.clipboard.readText();

Rules that matter

Treat the browser as a platform.

Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.

Production thinking

A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.