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

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