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'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!