Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Show HN: Instant HTML Preview Bookmarklet (gist.github.com)
130 points by somefries on Oct 7, 2024 | hide | past | favorite | 38 comments
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.



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>


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.


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/c8ce74bf549e19600026ce9022388...


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.


Yes, the sad part of this otherwise brilliant feature is how it got butchered "for the sake of security". Reportedly crooks abused dataURIs as hosting for malware and self-hack schemes. Understandable: it sounds "better" to embed the whole phishing page in link inside e-mail, than to operate some ephemeral server serving the phishing page, that could be blocked on firewall, DNS, or whatever.

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."

[1] http://tinyurl.com/selfcontained-editable-datauri


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/

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" :)


> It also has the function to render the HTML into an image (Via the "Render" button).

Firefox has that built in: right click, “Take Screenshot”. It lets you choose between screenshotting just the visible viewport or the whole page.


It's way worse than the OS screenshot method. It adds DRM into screenshotting which to me isn't a screenshot. A screenshot is pointing my phone camera at the screen to avoid anyone changing what I take an image of.


What DRM is added into Firefox screenshots? This is the first I've heard of this.


Any cross-origin / cors images don't appear in the screenshot. I only know because I accidentally used the Firefox hotkey instead of my OS's screenshot hotkey and it broke my screenshot.


How is that digital rights management? Sounds more like a limitation of how FF renders the screenshots (which is possibly in JS)


I wouldn't call that "adding DRM," but certainly a challenge with using FF for screenshots.


Here is my fork of this editor, with an added vertical layout, etc:

http://aavi.xyz/proj/editor/


Nice one!

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!


It is a fork of an older version, I will update it sometime soon and send a PR upstream for the vert switcher, although I'm afraid it might not be implemented in the neatest way possible. :)


https://mrdoob.com/projects/htmleditor/ very similar


or codepen, jsfiddle, jsbin, jsgist, etc...


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.


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.


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/


Thanks for this. I had the same issue with many of the proposed alternatives above, all of them require some form of registration. I see the point, but I also think it's totally unnecessary for quick stuff. Flems seems to be what I was looking for.


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.


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


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?


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


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


This would make a great addition to

https://bookmarkl.ink/


Done :-) Thank you. Also updated it to work with the bookmarklet title. Thanks!


Added to getbookmarklets.com https://getbookmarklets.com/scripts#https://gist.githubuserc...


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


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!


Thank you! Happy you dig it


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)


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


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


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


You can do that in livepreview directly in vscode


Thanks, will come to use :)




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: