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

Instant HTML Preview Bookmarklet

Why This Bookmarklet Is Useful

ChatGPT has recently released its canvas capability, which is great for generating and viewing structured content. However, it currently lacks the ability to generate direct previews of HTML or SVG code. This bookmarklet fills that gap by allowing you to quickly preview HTML content directly in your browser. Instead of copying your code into an IDE, saving the file, and refreshing a page, you can skip all those steps and jump straight to seeing your content live. Simply use the 'copy to clipboard' button on the ChatGPT or Claude interface, then click this bookmarklet to immediately see the content rendered as a full HTML page. It also works for SVG graphics, making it versatile for web development and design tasks.

Bookmarklet Code

Minified (Use this for the bookmarklet)

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

Nonminified for clarity

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

Alternative Method For Older Browsers

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 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.");
  }
})();

How to Save the Bookmarklet

1. Copy the minified bookmarklet code above.
2. Open your bookmarks bar in Chrome (or another browser).
3. Right-click the bookmarks bar and select "Add page..." or "Add bookmark".
4. In the URL field, paste the bookmarklet code (make sure it starts with javascript:).
5. Give your bookmark a name (e.g., "HTML Previewer") and click "Save".

How to Use

• Make sure you have HTML content copied to your clipboard.
• Simply click the HTML Previewer bookmark in your bookmarks bar.
• A new tab will open, rendering the HTML content instantly.

Benefits

• Save time by skipping the process of opening an IDE, saving files, and refreshing your browser.
• Instantly preview changes to your HTML without needing any additional tools

Updates

10.9.24 - Added functionality for older browsers thanks to a request from tkapias
10.9.24 - Honored to get mentioned for this concept helping to inspire yungztrunks's sweet project. Keep up the great work, yungztrunks!
10.7.24 - Added bookmarkl.ink functionality per request from etewiah
10.6.24 - Added normal code to the description instead of just the minified version per request from mkoryak and also kinda hm-nah

With this bookmarklet, you can streamline your development process and get quick feedback on your HTML content. Enjoy seamless, on-the-fly previews in just a single click!

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!