Show HN: Instant HTML Preview Bookmarklet

sltkr

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>

mg

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

TOMDM

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?

gabrielsroka

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)

hm-nah

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

iambacktomyword

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

mkoryak

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

codemax98

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!

atlaspod

Thanks, will come to use :)