Bookmarklet that lets you render a full HTML page with any included css and javascript that is currently copied to your clipboard. Also works for SVG code. Useful with ChatGPT Canvas

ChatGPT Canvas HTML Renderer from Clipboard.url

javascript:(function(){try{navigator.clipboard.readText().then(function(t){if(t){var e=window.open("","_blank","width=800,height=600");e.document.open(),e.document.write(t),e.document.close()}else alert("Clipboard is empty. Please copy some text to the clipboard first.")}).catch(function(t){console.error("Failed to read clipboard contents: ",t),alert("An error occurred while trying to access the clipboard. Please ensure your browser allows clipboard access.")})}catch(t){console.error("An error occurred:",t),alert("An error occurred while trying to open the new window with the clipboard content.")}})();//bookmarklet_title: HTML Preview from Clipboard

mentioned this gist on my project after I developed a front page with both the js minifier & the bookmark adder
just wanted to let you know

I would like to use that with Firefox, but the readText() method from clipboard is implemented for Firefox only after v125.

Do you know another method for older browsers, like Firefox ESR v116?

I would like to use that with Firefox, but the readText() method from clipboard is implemented for Firefox only after v125.

Do you know another method for older browsers, like Firefox ESR v116?

In fact it was a well known issue, I found that for Firefox the method was hidden in prior versions, you just need to enable 2 preferences in about:config:

dom.events.testing.asyncClipboard
dom.events.asyncClipboard.readText

Also, if you are testing the code in the console, disable any popup blocker, or the newWindow will return null.

Thanks for the snippet.

mentioned this gist on my project after I developed a front page with both the js minifier & the bookmark adder just wanted to let you know

I'm honored! Great work, man. You're very creative. Keep it up!

I would like to use that with Firefox, but the readText() method from clipboard is implemented for Firefox only after v125.

Do you know another method for older browsers, like Firefox ESR v116?

Hmm...

For older versions of Firefox, like Firefox ESR v116, which do not support navigator.clipboard.readText() in non-secure contexts or via JavaScript alone, we can try to use a workaround that prompts you to manually paste the clipboard content into a prompt() or a textarea for processing.

Here’s a modified version of the bookmarklet that may be compatible with older browsers.
This version opens a new window with a textarea, where the user is prompted to paste their content manually:

javascript:(function(){try{var t=prompt("Please paste the HTML content here:");if(t){var e=window.open("","_blank","width=800,height=600");e.document.open(),e.document.write(t),e.document.close()}else alert("No content was pasted. Please try again.")}catch(t){console.error("An error occurred:",t),alert("An error occurred while trying to open the new window with the clipboard content.")}})();

Here's the unminified version. for clarity

javascript:(function(){
  try {
    var clipboardText = prompt("Please paste the HTML content here:");
    if (clipboardText) {
      var newWindow = window.open("", "_blank", "width=800,height=600");
      newWindow.document.open();
      newWindow.document.write(clipboardText);
      newWindow.document.close();
    } else {
      alert("No content was pasted. Please try again.");
    }
  } catch (e) {
    console.error("An error occurred:", e);
    alert("An error occurred while trying to open the new window with the clipboard content.");
  }
})();

Give that a try and lemme know how it goes!

Good luck!

Nice suggestion @rmtbb, it works!

And I prefer this version, with a prompt. I can see what's inputed, and I don't need to enable insecure preferences. You should put it in the first comment.

Nice suggestion @rmtbb, it works!

And I prefer this version, with a prompt. I can see what's inputed, and I don't need to enable insecure preferences. You should put it in the first comment.

Happy to hear it!
I have updated the original comment to include it (and shouted you out for requesting it).
Thanks for the idea, keep hacking!

Just found this bookmarklet. Awesome work on this, @rmtbb!

For those interested, you can find rmtbb's minified version of this bookmarklet here.

Recently, there have been a few updates to bookmarkl.ink that may be helpful for projects like this one e.g., TypeScript support, minification via esbuild, injected variables, bundling external deps, etc. You can also edit the bookmarklet source directly.

Here's a version that checks navigator.clipboard compatibility before falling back to prompt(). Alternatively, this behaviour can be forced using the PROMPT boolean variable. It contains the non-minified code as minification is done by bookmarkl.ink's bundler.

Great work @ashtonmeuser !!