9 ms·

Show HN: Instant HTML Preview Bookmarklet

130 points by somefries 2y ago

Hey HN, 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.

deleted 2y ago
[deleted]
codemax98 2y ago
This is a great example of a simple tool that makes a big difference by streamlining a common task. Not every tool has to be complex, just effective .. Thanks for sharing!
- somefries 2y ago
  Thank you! Happy you dig it
hm-nah 2y ago
I’d rename this “Show HN: The ChapGPT Canvas missing functionality in 10mi new of JavaScript”
atlaspod 2y ago
Thanks, will come to use :)
mkoryak 2y ago
It would be nice if you had the non minified version there. I can't easily see the code on mobile, and that's all I care about
- somefries 2y ago
  Done! Just updated the description thanks for the suggestion! Also added comments to the non-minified version
mg 2y ago
Another approach is to paste it into an online HTML editor with preview. Here is one that I made: https://no-gravity.github.io/html_editor/ 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" :)
- nox101 2y ago
  or codepen, jsfiddle, jsbin, jsgist, etc...
  - mg 2y ago
    I have various problems with these. That's why I made my own. 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.
  - googledocsftw 2y ago
    https://play.tailwindcss.com https://play.tailwindcss.com is good because there is likely going to be no enshittification to chase dollars. The make money from courses and frameworks.
- turblety 2y ago
  I really like flems [1] as there's no login, signup, payment, paywall, popups, marketplace, guides, bs. 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. 1. https://flems.io/ https://flems.io/
  - NitpickLawyer 2y ago
TOMDM 2y ago
My assumption was that the reason this wasn't already implemented was due to security concerns, that via prompt injection, elements of the chat could be leaked by any feature that causes the LLM to even by side effect cause a network request to be fired. 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?
iambacktomyword 2y ago
<!doctype html> <html> <body> <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> </html> Check your mistakes
sltkr 2y ago
A very simple alternative is to type "data:text/html," in the URL bar, and then just paste your HTML content after it, generating a URL that looks like this: data:text/html,<!DOCTYPE html><html><body>Hello, world!</body></html> Most browsers don't preserve newlines when pasting (Chrome replaces them with spaces, Firefox seems to remove them) so this occasionally breaks stuff that depends on exact whitespace formatting (like <pre>-blocks or Javascript code without semicolons), but 99% of the time it works just fine. 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>
- Timwi 2y ago
  Unfortunately, the # character puts a spanner in the works. The browser interprets it as a fragment and thus ignores everything after it. Since # is very common in SVG (color codes, id references), they break more often than I'd like.
- myfonj 2y ago
  I found typing DataURIs in the location bar to be the "primitive technology" meditation analogue of crafting stuff from flint. 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/c8ce74bf549e19600026ce9022388df8 https://gist.github.com/myfonj/c8ce74bf549e19600026ce9022388...
- MarioMan 2y ago
  I've wanted to abuse this to support a static site "hosted" entirely from a QR code, but I haven't found any QR scanners that interpret the data URI as something to open in the browser. And without wide support, that project is hardly worth bothering with.
gabrielsroka 2y ago
this seems to work almost as well (except for error handling, etc) javascript:navigator.clipboard.readText().then(t => open().document.write(t)) also, when writing a bookmarklet, you can add /* block comments */ and still copy/paste or drag/drop, eg: javascript:/* show the sum */alert(2+2) but // comments don't work javascript://this won't work;alert(2+2)
aloisdg 2y ago
You can do that in livepreview directly in vscode
G_o_D 2y ago
And chatgpt wrote that code right?? Based on how comments wriiten one can say not human written
hnrodey 2y ago
Doesn't claud.ai do this natively, render the html/js it's also producing? Feel like that's been around for at least several months, surprising there are still primitive workarounds required for ChatGPT.
- NotMichaelBay 2y ago
  That was my first thought too; I just tested and Claude Artifacts do show both the preview & code.
mrkramer 2y ago
I wanted this feature....something like ChatGPT + CodePen.
etewiah 2y ago
This would make a great addition to https://bookmarkl.ink/ https://bookmarkl.ink/
- somefries 2y ago
  Done :-) Thank you. Also updated it to work with the bookmarklet title. Thanks!
  - madacol 2y ago
    Added to getbookmarklets.com https://getbookmarklets.com/scripts#https://gist.githubusercontent.com/rmtbb/e42d870a59a7f98091e734674831072b/raw/969070d210c72cb58b63b4ccb60949e75339a4bc/ChatGPT%20Canvas%20HTML%20Renderer%20from%20Clipboard.url https://getbookmarklets.com/scripts#https://gist.githubuserc...

130 points by somefries 2y ago

deleted 2y ago

[deleted]

codemax98 2y ago

This is a great example of a simple tool that makes a big difference by streamlining a common task. Not every tool has to be complex, just effective .. Thanks for sharing!

somefries 2y ago
Thank you! Happy you dig it

hm-nah 2y ago

I’d rename this “Show HN: The ChapGPT Canvas missing functionality in 10mi new of JavaScript”

atlaspod 2y ago

Thanks, will come to use :)

mkoryak 2y ago

It would be nice if you had the non minified version there. I can't easily see the code on mobile, and that's all I care about

somefries 2y ago
Done! Just updated the description thanks for the suggestion! Also added comments to the non-minified version

mg 2y ago

Another approach is to paste it into an online HTML editor with preview. Here is one that I made: https://no-gravity.github.io/html_editor/ 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" :)

nox101 2y ago
or codepen, jsfiddle, jsbin, jsgist, etc...
- mg 2y ago
  I have various problems with these. That's why I made my own. 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.
- googledocsftw 2y ago
  https://play.tailwindcss.com https://play.tailwindcss.com is good because there is likely going to be no enshittification to chase dollars. The make money from courses and frameworks.
turblety 2y ago
I really like flems [1] as there's no login, signup, payment, paywall, popups, marketplace, guides, bs. 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. 1. https://flems.io/ https://flems.io/
- NitpickLawyer 2y ago

TOMDM 2y ago

My assumption was that the reason this wasn't already implemented was due to security concerns, that via prompt injection, elements of the chat could be leaked by any feature that causes the LLM to even by side effect cause a network request to be fired. 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?

iambacktomyword 2y ago

<!doctype html> <html> <body> <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> </html> Check your mistakes

sltkr 2y ago

A very simple alternative is to type "data:text/html," in the URL bar, and then just paste your HTML content after it, generating a URL that looks like this: data:text/html,<!DOCTYPE html><html><body>Hello, world!</body></html> Most browsers don't preserve newlines when pasting (Chrome replaces them with spaces, Firefox seems to remove them) so this occasionally breaks stuff that depends on exact whitespace formatting (like <pre>-blocks or Javascript code without semicolons), but 99% of the time it works just fine. 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>

Timwi 2y ago
Unfortunately, the # character puts a spanner in the works. The browser interprets it as a fragment and thus ignores everything after it. Since # is very common in SVG (color codes, id references), they break more often than I'd like.
myfonj 2y ago
I found typing DataURIs in the location bar to be the "primitive technology" meditation analogue of crafting stuff from flint. 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/c8ce74bf549e19600026ce9022388df8 https://gist.github.com/myfonj/c8ce74bf549e19600026ce9022388...
MarioMan 2y ago
I've wanted to abuse this to support a static site "hosted" entirely from a QR code, but I haven't found any QR scanners that interpret the data URI as something to open in the browser. And without wide support, that project is hardly worth bothering with.

gabrielsroka 2y ago

this seems to work almost as well (except for error handling, etc) javascript:navigator.clipboard.readText().then(t => open().document.write(t)) also, when writing a bookmarklet, you can add /* block comments */ and still copy/paste or drag/drop, eg: javascript:/* show the sum */alert(2+2) but // comments don't work javascript://this won't work;alert(2+2)

aloisdg 2y ago

You can do that in livepreview directly in vscode

G_o_D 2y ago

And chatgpt wrote that code right?? Based on how comments wriiten one can say not human written

hnrodey 2y ago

Doesn't claud.ai do this natively, render the html/js it's also producing? Feel like that's been around for at least several months, surprising there are still primitive workarounds required for ChatGPT.

NotMichaelBay 2y ago
That was my first thought too; I just tested and Claude Artifacts do show both the preview & code.

mrkramer 2y ago

I wanted this feature....something like ChatGPT + CodePen.

etewiah 2y ago

This would make a great addition to https://bookmarkl.ink/ https://bookmarkl.ink/

somefries 2y ago
Done :-) Thank you. Also updated it to work with the bookmarklet title. Thanks!
- madacol 2y ago
  Added to getbookmarklets.com https://getbookmarklets.com/scripts#https://gist.githubusercontent.com/rmtbb/e42d870a59a7f98091e734674831072b/raw/969070d210c72cb58b63b4ccb60949e75339a4bc/ChatGPT%20Canvas%20HTML%20Renderer%20from%20Clipboard.url https://getbookmarklets.com/scripts#https://gist.githubuserc...