Web Clipboard Notes

These are short notes from the article:
https://alexharri.com/blog/clipboard
Read the original article for full details.

Clipboard Basics

• Clipboard does not store just one format
• It stores multiple formats of the same data
• Example formats:
  • text/plain
  • text/html
  • image/png
• When pasting, the application chooses the format it supports

Clipboard APIs

Async Clipboard API

• navigator.clipboard.write()
• Only allows:
  • text
  • HTML
  • PNG
• Restricted for security reasons

Clipboard Events API

• Used during copy/paste events
• Allows custom data formats
• Only works during trusted user copy events

Trusted Copy Events

Clipboard can only be modified during trusted events.

Important detail:

• Manually triggering copy events → Not trusted
• User pressing Ctrl+C → Trusted
• execCommand("copy") → Also triggers a trusted copy event

This is why many web apps still use execCommand.

Google Docs Clipboard Handling

Google Docs uses: document.execCommand("copy")

Why?

Because it:

• Programmatically triggers a trusted copy event
• Gives access to clipboardData
• Allows writing multiple formats
• Allows writing custom Google Docs data

What Google Docs writes to clipboard

• Plain text
• HTML
• Custom Google Docs format

Result

• Paste into Google Docs → Full formatting & structure preserved
• Paste into other apps → HTML or plain text used

Figma Clipboard Handling

Figma needs to copy complex design objects.

What Figma does

1. Serialize design data to JSON
2. Encode JSON as base64
3. Embed base64 inside HTML
4. Copy the HTML to clipboard

When pasting

• Figma reads HTML
• Extracts hidden base64 data
• Decodes it
• Reconstructs design objects

Figma uses fig-kiwi

Why this approach

Because:

• Browsers don’t support custom clipboard formats reliably
• HTML is supported everywhere
• HTML can store hidden data
• Works across browsers

So Figma uses HTML as a container for its own clipboard data.

Key Takeaways

• Clipboard stores multiple formats at once
• Apps paste the format they understand
• Async Clipboard API → limited formats
• Clipboard Events API → allows custom formats
• execCommand("copy") → triggers trusted copy event
• Google Docs → writes plain text + HTML + custom format
• Figma → stores base64 data inside HTML
• Both use these methods to preserve complex data when copying inside their apps