clipboard.js

clipboard.js is a small JavaScript library that adds copy-to-clipboard and cut-to-clipboard behavior to any DOM element without relying on Flash or requiring inline onclick handlers. It works declaratively by attaching a data-clipboard-target or data-clipboard-text attribute to a trigger element, and internally uses the browser’s execCommand/Clipboard APIs behind a small event-emitter-based API.

The library ships no framework dependency and is commonly embedded in documentation sites, code-snippet blocks, and share/link buttons where a single click needs to copy specific text without a page reload or plugin.

What You Get

• Declarative copy/cut triggers via data-clipboard-target or data-clipboard-text attributes
• No Flash dependency — pure JavaScript wrapping native browser clipboard APIs
• A small event emitter API (success/error events) for custom UI feedback (e.g. “Copied!” tooltips)
• Framework-agnostic usage, plus TypeScript type definitions bundled in the package
• A tiny bundle size (a few kilobytes gzipped) suitable for documentation and marketing sites

Common Use Cases

• “Copy code” buttons on documentation sites and code-snippet blocks
• “Copy link” or “copy referral code” buttons on marketing and account pages
• Copying generated values (API keys, invite codes, share URLs) to the clipboard with one click
• Adding clipboard support to static sites or CMS-driven pages without a full JS framework

Under The Hood

Architecture: The core (src/clipboard.js, ~165 lines) is a class extending a small tiny-emitter-based event emitter, delegating actual clipboard mutation to two action modules under src/actions/ (copy and cut), and using the good-listener and select helper packages for event delegation and text selection respectively. This separation keeps the core class focused on wiring DOM events to the appropriate action rather than implementing selection/copy logic inline.

Tech Stack: Plain JavaScript (ES5-targeted output) with three small first-party-maintained dependencies (good-listener, select, tiny-emitter) rather than a large dependency tree; built via Webpack for the distributable bundle and tested with Karma across real browsers.

Code Quality: The test/ directory mirrors the src/ structure (actions/, common/), indicating unit coverage per module rather than only integration tests. TypeScript definitions (clipboard.d.ts) and a .test-d.ts type-test file show attention to consumer type safety despite the library itself being plain JS.

API Design: The declarative data-clipboard-target/data-clipboard-text attribute API is the library’s signature ergonomic choice — it lets developers add copy behavior without writing any imperative JS beyond instantiating new ClipboardJS(selector), making the learning curve very shallow for the common case.