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:
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:
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" :)
show comments
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?
hm-nah
I’d rename this “Show HN: The ChapGPT Canvas missing functionality in 10mi new of JavaScript”
G_o_D
And chatgpt wrote that code right?? Based on how comments wriiten one can say not human written
gabrielsroka
this seems to work almost as well (except for error handling, etc)
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
You can do that in livepreview directly in vscode
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
show comments
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!
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:
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:
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" :)
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”
And chatgpt wrote that code right?? Based on how comments wriiten one can say not human written
this seems to work almost as well (except for error handling, etc)
also, when writing a bookmarklet, you can add /* block comments */ and still copy/paste or drag/drop, eg: but // comments don't workYou can do that in livepreview directly in vscode
<!doctype html> <html> <body>
</html>Check your mistakes
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
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!
Thanks, will come to use :)