🎁 Unwrapping the First of Our Festive Releases: `clipboard-write` Access!

'Tis the season to be coding! We’ve got some exciting news to share as we gear up for the holiday season – get ready for a week of Christmas releases, starting with the first one today :wrapped_gift:!

I copy pasted the above intro from ChatGPT, and now your app’s users can copy too.

We’ve heard from you that having access to the clipboard would improve the UX of your apps, so we’re officially enabling support for Clipboard write access via the web’s clipboard.writeText API (Shoutout to those using document.execCommand as a workaround!).

How to guide:

To copy something to the user’s clipboard, refer to the following code snippet.

const textToCopy = "Happy Holidays 🎄!";
await navigator.clipboard.writeText(textToCopy);

Alternative web clipboard APIs:

  • clipboard.write will remain disabled to ensure cross-browser compatibility
  • document.execCommand will continue to work for now, but we recommend migrating to clipboard.writeText
  • clipboard read will remain disabled

We hope this helps open up some new use-cases for your apps and tidy up your code workarounds!

This is just the first present in our festive series. Stay tuned as we unwrap more surprises this week :eyes:

12 Likes

:gift::link: Excellent! Thank you Team Canva. This will be great :gift::link: … my Christmas wish is the design-id

const textToCopy = “Happy Holidays :christmas_tree:!”;
await navigator.clipboard.writeText(textToCopy);

Hi Anto,

Can I confirm that we are still unable to read from a user’s clipboard?

My app allows a user to put a link inside the search box. The user is likely to copy the link from Instagram (share profile link). It would be great if they are able to paste it into the search box rather than having to type.

@shivaskanthan the ability to paste into any input fields is unimpacted.

It’s just that your app cannot programmatically read what’s in a user’s clipboard (via clipboard.readText) until they paste it in themselves.

You can try this out by copying any text, and pasting it into your search box :+1:

1 Like