Clipboard API Snippets — Free HTML CSS JS Copy-to-Clipboard Examples

Copying a value is a two-second interaction that people notice only when it goes wrong. These snippets use navigator.clipboard.writeText and pair it with the feedback that makes it feel finished: a label that switches to "Copied", a tick that fades back after a moment, a toast for a longer confirmation.

They also cover the failure paths — an insecure context where the API is unavailable, a rejected permission, and the older execCommand fallback that still matters on legacy embedded browsers.

Feedback is the actual feature

The copy call itself is one line; every snippet's real content is what happens around it. A button's label swapping to "Copied" and back, an inline tick that fades in and out, a toast that stacks and auto-dismisses — these confirm the action completed, because a silent clipboard write leaves the user unsure whether anything happened at all and prone to clicking twice.

Timed reset, done correctly

A "Copied" state that never reverts reads as broken the next time the button is looked at. These snippets reset the label after a short timeout, and clear any previous pending timeout before starting a new one — otherwise clicking the button twice in quick succession leaves it stuck in the confirmed state indefinitely, or reverts early mid-way through the second click's window.

Why the write has to happen inside the gesture

navigator.clipboard.writeText only succeeds when called synchronously inside a user gesture such as a click handler. Awaiting a slow operation — formatting the text, fetching a value — before making the call moves it outside that gesture window in some browsers, and the write silently fails. The fix is to prepare the string first and make the clipboard call the very next synchronous step in the handler.

Fallbacks that still matter

The Clipboard API requires a secure context and is unavailable on plain HTTP or in some embedded webviews. The older document.execCommand("copy") path — create a hidden textarea, select its contents, run the command, remove it — is deprecated but still functions everywhere, which is why a try/catch around the modern call with this as the fallback covers effectively every environment a copy button might run in.