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:

<!-- Target --><input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
<!-- Trigger --><button class="btn" data-clipboard-target="#foo"><img src="assets/clippy.svg" alt="Copy to clipboard" /></button>

Cut Content

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

<!-- Target --><textarea id="bar">Mussum ipsum ...</textarea>
<!-- Trigger --><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut to clipboard</button>

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

Copy Direct Text

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

<!-- Trigger --><button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>

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:

<!-- App.vue -->
<template>
  <div class="wrapper">
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
    <button class="btn" data-clipboard-target="#foo" data-clipboard-action="cut">Copy to clipboard</button>
  </div>
</template>
<script>
import ClipboardJS from "clipboard";
export default {
  setup() {
    const clipboard = new ClipboardJS('.btn');
    clipboard.on('success', e => {
      alert(`Copy succeeded: ${e.text}`);
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);
      e.clearSelection();
    });
    return {};
  }
};
</script>

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.