I recently found myself needing a quick way to preview HTML and SVG code without having to copy it into an IDE, save it, and then open it in a browser. ChatGPT's new canvas feature is great for generating code, but it doesn't provide a way to preview HTML directly.
To solve this, I made a small bookmarklet that allows you to instantly preview HTML from your clipboard in a new tab. Just copy your HTML, click the bookmarklet, and it will render immediately.
It's a simple tool, but it’s saved me a lot of repetitive steps, and I figured it might help others too.
The bookmarklet code and instructions for saving it are included in the post.
Happy to hear any thoughts or suggestions!
Thanks, and I hope it saves you some time.
data:text/html,<!DOCTYPE html><html><body>Hello, world!</body></html>
Rendering SVG can be done exactly the same way, using "data:image/svg+xml," as the prefix. For example:
data:image/svg+xml,<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg"> <circle r="45" cx="50" cy="50" fill="red" /> </svg>In the spirit of "craftsmen should make their own tools," I've started making an "HTML sandbox" editor with live preview [1] this way, to avoid having to type everything in the URL. It has been fun, and I use it literally daily. It has limited features (no syntax highlighting, for example), but it's super fun to craft that tool in itself.
I dare to bet it has the fastest startup among similar tools. When launched through a keyword "search" bookmark to "seed" the initial content into it, it probably has the fastest "from idea to looking at the outcome" user story of them all. For example, if I have a whim to see whether my browser still can do <blink>, I (alt+)enter "s <blink>foo" into the URL bar and bam, have it loaded, displayed, and can continue editing it in a multiline editor (well, simply a textarea).
[1] https://gist.github.com/myfonj/c8ce74bf549e19600026ce9022388...
So in effect, currently no evergreen browser lets us for example do a top-level navigation to dataURI document. The only way you can get top-level dataURI in your browser is either to type it or open from bookmark. Firefox for example has super cool feature to open "Open this frame to a new tab", what only produces new tab with the dataURI in the url bar, but we have to finish the navigation by pressing Enter or in there.
URL shorteners also do not like dataURIs. Also understandable, since they probably do not want to be "hosting". I have one ancient tinyurl link back from days top-level dataURI navigation worked and tinyurl supported it [1]. This document was able to modify itself :]
Ah, days of yore. I would really like to have a pref in browser's options give me (and other power-users) these "dangerous features" back, like "I know what I am doing and I will always check the URL of all pages, now give me unrestricted dataURIs."
https://no-gravity.github.io/html_editor/
This has the benefit that you can also edit the html afterwards.
It also has the function to render the HTML into an image (Via the "Render" button). I wonder if one could feed that image back to ChatGPT to provide visual feedback on what it coded? Maybe it would reply with "Oh, now that I see it, let's make the margins on the header a bit smaller and the background a bit more colorful" :)
Firefox has that built in: right click, “Take Screenshot”. It lets you choose between screenshotting just the visible viewport or the whole page.
Some observations:
This fork throws errors in my console. It seems you added a Cloudflare statistics script that does not work in my browser.
This is also a fork of an old version. Where for example "let x=7" in a script block will error out on the second run.
If you find the time to make a pull request for the vert switcher, we can join forces!
Some of the problems are:
You can't edit the raw HTML because the site injects additional stuff into the HTML you write.
Editing is sluggish because of the heavy processing the site does on every keystroke.
The console gets flooded with stuff not related to the code you write.
It saves the content into the url so you can bookmark and share, without it ever getting saved to their servers. In fact, since it's stored as a bookmark it should never hit their servers at all.
Much like the Slack issue of smuggling chat secrets out via query parameters.
Has that been considered at all here, or is it on the user to vet the models suggestions?
<style>
body {
padding: 50px;
}
span {
display: inline-block;
background: #a0ffa0;
padding: 20px;
}
</style>
<span>
Edit the page on top, see
the result on the bottom.
</span>
</body>Check your mistakes
javascript:navigator.clipboard.readText().then(t => open().document.write(t))
javascript:/* show the sum */alert(2+2)
javascript://this won't work;alert(2+2)