Skip to content
Get packs

clipboard.js

A small JavaScript library that copies text to the clipboard from a button click.

GitHub Download v2.0.11
Stars
34.1k
Forks
3.9k
Licence
MIT
Language
JavaScript
Last update
9 months ago
Type
Library

What it is

clipboard.js is a small JavaScript library for websites that adds copy-to-clipboard buttons. You mark a button with HTML data attributes, or set the text in JavaScript, and clicking it copies the content. The README says it avoids Flash and large frameworks and is about 3kb gzipped.

  • Add a copy button next to a code snippet or install command on a documentation page
  • Copy the value of an input or textarea with a single button
  • Copy a fixed string from an attribute, such as a share link or citation
  • Show a 'Copied!' message after a success event fires

Great for

  • Web developers adding a copy button to a site or docs page
  • Teams that want copy buttons without a large dependency
  • Developers who prefer declaring behavior with HTML data attributes
  • Single page app builders who need to clean up listeners when components unmount

Not ideal for

  • Non-developers looking for a finished app, since it is a code library with no interface of its own
  • Projects that need the cut action on non-input elements, since the README says cut only works on input or textarea elements
  • Sites needing tooltips out of the box, since the README says it includes no CSS or tooltip solution
Step-by-step guide: how to use clipboard.jsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    Install from npm

    npm install clipboard --save
  2. 2

    Run it

    • Install the package with npm or download the ZIP from the repository.
    • Include the script from the dist folder with a script tag.
    • Add a button with a data-clipboard-text or data-clipboard-target attribute.
    • Create the instance with new ClipboardJS('.btn') and test the button in a browser.
  3. 3

    Get the most out of it

    • Use data-clipboard-action="cut" on a button that targets an input or textarea.
    • Pass target or text functions in the options to set values dynamically from the trigger element.
    • Set a container element when using Bootstrap modals or other libraries that change focus.
    • Listen for the success and error events to show user feedback.
    • Call ClipboardJS.isSupported() to hide copy buttons in unsupported browsers.

Downloads

Source code (.zip)master branch · straight from GitHubRelease v2.0.11Release notes and sourceOfficial website & docsclipboardjs.com

Strengths

  • Small footprint, which the README states as about 3kb gzipped
  • Simple setup using HTML data attributes or a short JavaScript call
  • Uses event delegation with one listener instead of one per button, per the README

Trade-offs

  • Browser support depends on the execCommand API, which the README lists with version minimums for some browsers
  • Provides no styling or tooltips, so you must build the feedback UI yourself
  • The README is truncated here, so details on newer browser behavior and maintenance status are not confirmed

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.