DEV Community

Cover image for Copy rich HTML with the native Clipboard API 📋
Ste Griffiths
Ste Griffiths

Posted on • Originally published at stegriff.co.uk on

6 1

Copy rich HTML with the native Clipboard API 📋

The relatively new Clipboard API in browsers lets you load up the user’s clipboard as though they’d copied something themselves.

Copying text or images is fairly well documented, but examples writing rich text (as HTML) are harder to come by.

At time of writing, this is implemented in Chrome 86+ and in Safari. I got the content for this post from the Glitch project created by dsleeps at Google.

How to copy rich text HTML onto the Clipboard API

This sample assumes you have a <div class="js-output"></div> which contains your HTML to copy.

I’ll cut right to it:

try {
  const content = document.getElementsByClassName('js-output')[0].innerHTML;
  const blobInput = new Blob([content], {type: 'text/html'});
  const clipboardItemInput = new ClipboardItem({'text/html' : blobInput});
  navigator.clipboard.write([clipboardItemInput]);
} catch(e) {
  // Handle error with user feedback - "Copy failed!" kind of thing
  console.log(e);
}

Enter fullscreen mode Exit fullscreen mode

Key things:

  • Get the HTML string (I’m using innerHTML of an element for this)
  • Create a new Blob.
    • Param one must be an Array-like or a USVString value. So we wrap our HTML content in an array.
    • Param two is an options object, where we set the MIME type.
  • Create a ClipboardItem around the blob, specifying MIME type again
  • Finally, write the ClipboardItem to the clipboard API.

Demo

I have a quickly-made Vue app with a ‘Copy to Clipboard’ button at https://stegriff.github.io/deployment-complete/. Source repo at https://github.com/stegriff/deployment-complete.

I hope this tutorial helps you! What will you make? 📋

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay