Copy Text to the Clipboard/Pasteboard with bitty

November 2025

This is how I make copy buttons to grab the text of elements with bitty

Output

Text to copy

HTML

<bitty-4-0 data-connect="TextCopierExample">
  <div data-receive="copyElementText">Text to copy</div>
  <button data-send="copyElementText">Copy Text</button>
</bitty-4-0>

JavaScript

window.TextCopierExample = class {
  #copyTimeout = null;

  async copyElementText(event, el) {
    try {
      await navigator.clipboard.writeText(el.innerText);
      event.target.innerHTML = "Copied";
      if (this.#copyTimeout !== null) {
        clearTimeout(this.#copyTimeout);
      } 
      this.#copyTimeout = setTimeout(() => {
        event.target.innerHTML = "Copy";
      }, 1500);
    } catch (error) {
      event.target.innerHTML = "Could not copy";
      console.error(`Could not copy selection to clipboard: ${error}`)
    }
  }
}

end of line