Clipboard.js — Modern Copy to Clipboard with No Flash

Introduction

Clipboard.js removes the pain of implementing copy-to-clipboard in the browser. Before it existed, developers relied on Flash-based solutions or fragile hacks. At just 3KB gzipped, it uses the Selection API and execCommand under the hood and works across all modern browsers without any framework dependency.

What Clipboard.js Does

• Copies text, HTML, or input values to the system clipboard on click
• Works with any trigger element using data-clipboard-* attributes
• Supports programmatic usage with a clean constructor API
• Fires success and error events for custom feedback UIs
• Requires zero dependencies and no Flash plugins

Architecture Overview

Clipboard.js listens for click events on elements matching a given selector. When triggered, it creates a temporary, off-screen textarea, populates it with the target content, executes document.execCommand('copy'), and removes the element. Modern browsers that support the Clipboard API can be leveraged as well. The library is written in vanilla JavaScript and distributed as a UMD module.

Self-Hosting & Configuration

• Install via npm (clipboard) or include the CDN script tag
• Instantiate with new ClipboardJS(selector) or new ClipboardJS(selector, options)
• Use data-clipboard-target to copy content from another element by CSS selector
• Use data-clipboard-action to choose between copy (default) and cut
• Call .destroy() to remove all event listeners when done

Key Features

• Tiny footprint at 3KB gzipped with zero dependencies
• Declarative API through data attributes for no-JS-needed setup
• Programmatic control via text and target option functions
• Event-based feedback with success and error callbacks
• Works in all modern browsers including IE9+ via graceful degradation

Comparison with Similar Tools

• Navigator.clipboard API — native but requires HTTPS, user gesture, and permissions; Clipboard.js abstracts these concerns
• document.execCommand — the raw API Clipboard.js wraps; using it directly requires boilerplate textarea management
• copy-to-clipboard — similar npm package but Clipboard.js offers richer declarative attributes
• react-copy-to-clipboard — React-specific wrapper; Clipboard.js is framework-agnostic

FAQ

Q: Does it work without HTTPS? A: Yes. Unlike the native Clipboard API, Clipboard.js uses execCommand which works on HTTP pages in most browsers.

Q: Can I use it with React or Vue? A: Absolutely. Instantiate it in a lifecycle hook or useEffect, passing a ref or selector. Community wrappers also exist for both frameworks.

Q: What happens if copying fails? A: The error event fires, letting you show a fallback message like "Press Ctrl+C to copy." The selected text remains highlighted for manual copying.

Q: Is Flash required? A: No. Clipboard.js was created specifically to eliminate Flash-based clipboard solutions like ZeroClipboard.

Sources

• https://github.com/zenorocha/clipboard.js
• https://clipboardjs.com