Clipboard.js
A lightweight JavaScript library for copying text to the clipboard without Flash, using modern web APIs.
What is Clipboard.js?
clipboard.js is a lightweight JavaScript library that enables copying text to the clipboard in web applications without requiring Flash. It solves the problem of implementing copy functionality with a simple, modern API that works across browsers. The library uses HTML5 data attributes for declarative setup and provides events for handling success and error cases.
Frontend developers and web designers who need to add copy-to-clipboard functionality to websites or web applications. It's especially useful for those prioritizing lightweight solutions and modern browser APIs.
Developers choose clipboard.js because it's dependency-free, extremely lightweight, and easy to implement with its declarative API. It replaces older Flash-based solutions with a modern approach that works across all major browsers.
Overview
:scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:
Use Cases
Best For
- Adding copy buttons to code snippets on documentation sites
- Implementing 'Copy link' functionality in web applications
- Creating user-friendly forms with copy-to-clipboard features
- Building dashboards where users need to copy generated values
- Enhancing accessibility by providing programmatic copy functionality
- Replacing Flash-based clipboard solutions with modern JavaScript
Not Ideal For
- Applications requiring copy of rich content like HTML or images, as it only handles plain text
- Projects built with modern frameworks like React or Vue that prefer the native Clipboard API for better integration and security
- Environments needing to support very old browsers without JavaScript execution or where graceful degradation isn't acceptable
- Use cases requiring advanced clipboard interactions such as reading from the clipboard or handling multiple data types
Pros & Cons
Pros
Eliminates dependency on outdated Flash by using the Selection and execCommand APIs, providing a secure and native approach to clipboard operations.
At only 3kb gzipped, it minimizes impact on page load performance, making it ideal for performance-conscious web projects.
Leverages HTML5 data attributes for simple implementation without writing JavaScript, as shown in examples for copy-from-element functionality.
Uses event delegation to attach a single listener for multiple elements, reducing memory usage for large numbers of buttons, as highlighted in the README.
Offers advanced options for dynamic target selection and text setting, allowing customization beyond declarative attributes for complex use cases.
Cons
Depends on the execCommand API, which is deprecated and may not be supported in future browser versions, posing long-term compatibility risks.
Lacks CSS or tooltip solutions, forcing developers to implement user feedback from scratch, as noted in the Tooltips section of the README.
Requires manual destruction of events with destroy() in single-page apps, adding complexity compared to more integrated or framework-specific solutions.
Frequently Asked Questions
Related Projects
VueThis is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
BootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.