- Sharing in case anyone isn't familiar with this built-in capability:
google-chrome --headless --screenshot=my_screenshot.png https://www.example.com
- Congrats on launching, beautiful design.
I'm not sure of what "production ready" is supposed to mean here, but the demo image is not optimized, `optipng` command decreases its size by 53.21%.
- What differentiates production-ready images from regular images?
- I’m afraid out of all the waiting strategies available in Puppeteer/Playwright, waiting a fixed period is the worst possible. Maybe consider exposing the proper waiting strategies, load/domcontentloaded/networkidle, maybe even the more fine-grained ones https://playwright.dev/docs/actionability
- It's nice looking for sure but much more complex than using `wkhtmltox` with `pngquant`, `optipng` and/or ImageMagick `convert` locally - esp. since the learning curve seems to be about equivalent.
by reassess_blind
2 subcomments
- I thought this was satire. Usually you want to go from image to HTML, not the other way around. I suppose it does have its uses, though.
by thatgerhard
1 subcomments
- This must be the hardest way to create an image online ever invented.
by randoments
1 subcomments
- What is the use case for requiring this?
- This looks interesting though niche -- am yet to think of a compelling use case.
I am sure @simonw has some ideas :) -- he recently blogged about HTML tools which is also one or my favorite use cases for LLMs.
Maybe similar to SVG generation, this could be a more powerful / flexible way to generate complex images / screen mockups and the like on-the-fly.
PS: How do the economics work -- how is this free to use?
PS2: The live HTML editor seems buggy. Cursor is off by one position and messes up editing. (chrome on windows)
- microlink's cards [1] I discovered years ago has similar functionality, and microlink itself [2] is much more sophisticated on leveraging a headless chrome.
[1]: https://github.com/microlinkhq/cards
[2]: https://microlink.io/
- Very cool. Is there an option to self-host? This seems like it could be a cool agent skill.
- This is cool! One use case is generating a Mermaid diagram as an image. For example, you can use the following HTML[^1]:
<!doctype html>
<html lang="en">
<body>
<pre class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>
</body>
</html>
Then html2png.dev will serve you: https://html2png.dev/api/blob/oTVGhhCc6rDZYQFDIE3EGkcKs-KO6J9-_DHs-jO2OJc-d23fb4f2.png
[^1]: https://mermaid.js.org/config/usage.html#simple-full-example
- Playwright behind a web server?
- What’s the purpose of creating this?
by agentifysh
0 subcomment
- that "Not MCP" is so refreshing it makes me laugh out loud
it's literally waht i've been saying all along when I came across mcp "why can't i just give agent a prompt and it will run the rest api calls for me"
there's still some MCPs which makes sense but we have it for literally everything when just a prompt will do the job!
now on the topic of html2png i do wonder is this like the self-hostable version on github https://github.com/maranemil/HTML2Png where they use canvas? or is this something else ?
- Why HTML? Why not SVG?
I created an svg to png API to generate open graph images a while back. It works pretty well and can be hosted on Cloudflare Workers for free.
https://github.com/dom96/svg-renderer
- “Free”?
What’s the catch, or how I can I be sure it will still be around in 3 months?
No snark, genuinely curious as I would use this if I could count on it.
- this is very handy, thanks!
by WilcoKruijer
0 subcomment
- I’ve been doing this manually by having a static development-only route on my website and taking a “node screenshot” using the Chrome developer tools. This is definitely a better way, well done!
- This is a great idea. I can’t believe I didn’t think of this, given I generate and screenshot so many “poster images” in html just like this. Haven’t played around a ton but seems intuitive. Nice work!
- Alternatively, open devtools, press ctrl+shift+p (or cmd+shift+p on a mac) to open the command palette, search for 'screenshot' and choose 'Capture full size screenshot' to do the same thing on your browser. There's 'area screenshot' for selecting an area, 'screenshot' for the viewport', and even 'node screenshot' for capturing the selected DOM node.
- Nice! It definitely makes you wonder when is MCP actually needed vs just giving the LLM API calls to work with.
- Looks great for opengraph images.
by xiaohanyu
2 subcomments
- Maybe webp is a better target than png?
- Love the simplicity and “Not MCP” callout (:
Not that it matters, but curious what percentage of this service was “vibe-coded”?
- Any similar AI based services/agents that can take images/creative assets (eg Figma, Sketch, Adobe PS, etc files) and create production-ready emails and landing pages in HTML?
Hacker News