{"id":171,"date":"2025-07-02T12:54:50","date_gmt":"2025-07-02T10:54:50","guid":{"rendered":"https:\/\/www.contentecontent.com\/blog\/?p=171"},"modified":"2025-07-02T12:54:50","modified_gmt":"2025-07-02T10:54:50","slug":"navigator-clipboard-write-and-html","status":"publish","type":"post","link":"https:\/\/www.contentecontent.com\/blog\/2025\/07\/navigator-clipboard-write-and-html\/","title":{"rendered":"navigator.clipboard.write and HTML"},"content":{"rendered":"

Tried to write a bit of rich-text HTML to the user’s clipboard like this:<\/p>\n

const html = \"<p>Hello <strong>world!<\/strong><\/p>\";\nconst clipboardItemData = {\n    [\"text\/html\"]: html\n};\nconst clipboardItem = new ClipboardItem(clipboardItemData);\nawait navigator.clipboard.write([clipboardItem]);\n<\/code><\/pre>\n
That worked fine in Firefox but in Chrome the page simply crashed. STATUS_ACCESS_VIOLATION was all it said. Debugging showed that navigator.clipboard.write()<\/code> caused the crash. There were no issues with creating the ClipboardItem<\/code>.<\/p>\n
It turns out that for Chrome it’s really necessary to first create a blob from the HTML string:<\/p>\n
const html = \"<p>Hello <strong>world!<\/strong><\/p>\";\nconst blobHtml = new Blob([html], { type: \"text\/html\" });\nconst clipboardItemData = {\n    [\"text\/html\"]: blobHtml\n};\nconst clipboardItem = new ClipboardItem(clipboardItemData);\nawait navigator.clipboard.write([clipboardItem]);\n<\/code><\/pre>\n
Et voil\u00e0<\/em>, the rich text will be on the clipboard.<\/p>\n
Please note that copying to clipboard is only possible when initiated by a user, i.e. in the handler of a click event.<\/p>\n","protected":false},"excerpt":{"rendered":"
Tried to write a bit of rich-text HTML to the user’s clipboard like this: const html = “<p>Hello <strong>world!<\/strong><\/p>”; const clipboardItemData = { [“text\/html”]: html }; const clipboardItem = new ClipboardItem(clipboardItemData); await navigator.clipboard.write([clipboardItem]); That worked fine in Firefox but in Chrome the page simply crashed. STATUS_ACCESS_VIOLATION was all it said. Debugging showed that navigator.clipboard.write() caused … Continue reading navigator.clipboard.write and HTML<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[22],"class_list":["post-171","post","type-post","status-publish","format-standard","hentry","category-misc","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/posts\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":4,"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.contentecontent.com\/blog\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}