Using clipboard.js for Lightweight Clipboard Operations in Frontend Development

clipboard.js provides a simple, lightweight way to copy and cut text to the clipboard without requiring Flash or large frameworks, with a gzipped size of only 3 KB.

Why Choose clipboard.js

It avoids complex configuration steps and heavy payloads, offering a straightforward API that works across modern browsers.

Installation

Install via npm:

npm install clipboard --save

Or download the compressed package from the GitHub repository.

Configuration

If installed with npm, import the library:

import ClipboardJS from "clipboard";

Otherwise include the script directly or use a CDN:

<script src="dist/clipboard.min.js"></script>

Create a Clipboard instance by passing a selector, element, or array of elements:

new ClipboardJS('.btn');

The library uses event delegation to minimize memory usage.

Usage

Copy from Another Element

Add data-clipboard-target to the trigger element, pointing to the element to copy:

Cut Content

Set data-clipboard-action="cut" (default is copy ) on the trigger element:

Mussum ipsum ...
Cut to clipboard

Note: the cut action only works on <input> or <textarea> elements.

Copy Direct Text

Use data-clipboard-text to copy a literal string:

Copy to clipboard

Event Handling

Listen for success or error events to run custom logic after a copy/cut operation:

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
  e.clearSelection();
});
clipboard.on('error', function(e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});

Advanced Options

You can provide functions for text or target to return dynamic values, set a custom container for focus‑related libraries, or destroy the instance when it is no longer needed:

new ClipboardJS('.btn', {
  text: function(trigger) { return trigger.getAttribute('aria-label'); }
});
new ClipboardJS('.btn', { container: document.getElementById('modal') });
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

Vue 3 Example

Create a Vue 3 project and install clipboard.js with Yarn:

// create vue project
vue create clipboard
// install
yarn add clipboard

In App.vue , add a button with data-clipboard-target and initialize ClipboardJS in the setup function:

The button now copies or cuts the input value, and a success alert is shown.

Browser Support

clipboard.js works in all modern browsers that support the Clipboard API; a compatibility chart is provided in the original documentation.