HN Explorer

28 comments

[ 3.3 ms ] story [ 52.9 ms ] thread
eastoeast
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!
xiaohanyu
Maybe webp is a better target than png?
RyanShook
Nice! It definitely makes you wonder when is MCP actually needed vs just giving the LLM API calls to work with.
chevman
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?
geooff_
Very cool. Is there an option to self-host? This seems like it could be a cool agent skill.
Retr0id
What differentiates production-ready images from regular images?
tbrownaw
Playwright behind a web server?
oefrha
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
jihchi
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
reassess_blind
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.
agentifysh
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 ?

jumploops
Love the simplicity and “Not MCP” callout (:

Not that it matters, but curious what percentage of this service was “vibe-coded”?

WilcoKruijer
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!
me_bx
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%.

rognjen
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.
randoments
What is the use case for requiring this?
albert_e
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)

[deleted]
(comment deleted)
onion2k
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.
thatgerhard
This must be the hardest way to create an image online ever invented.
[deleted]
(comment deleted)
xnx
Sharing in case anyone isn't familiar with this built-in capability:

google-chrome --headless --screenshot=my_screenshot.png https://www.example.com

donohoe
“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.

Yash16
What’s the purpose of creating this?
scosman
Looks great for opengraph images.