Accept HTML input, instead of just JSX

[jasongitmail]

Feature Request

Allow Satori or @vercel/og to accept HTML input for the template, instead of JSX, to support non-React frameworks like SvelteKit.

Description

Now that Vercel supports SvelteKit and has hired SvelteKit devs like Rich et al (which is awesome!), would Vercel consider enabling Satori and @vercel/og to better support non-JSX based projects like SvelteKit? It'd be very useful for the SvelteKit ecosystem.

Suggestion: A Svelte component could be SSR'd into HTML, could then be given as input to Satori. Ideally this would still support TailwindCSS classes & other existing features.

p.s. I couldn't find where the @vercel/og repo lives on Github, since it's not linked on npm, so hopefully this is an OK place to start the conversation.

[shuding]

To make this supported, we need a HTML parser in front of Satori (which takes some extra spaces), so maybe we need a separate package or a separate export of the project. I don't think that will happen any time soon but it sounds like something I'm open to accept a PR. Another choice is to pass a JSON object: https://github.com/vercel/satori#use-without-jsx.

There's also a community project https://github.com/natemoo-re/satori-html that does exactly this.

[jasongitmail]

but it sounds like something I'm open to accept a PR

Great to hear! It'd be useful.

I'm not sure I'm the right person for this one, but it looks like @kvnang has accomplished what you described of converting HTML to a JSON object https://github.com/kvnang/workers-og I wonder if he might be be interested to PR a version of his code or similar.

CC @ethercorps who has been working on a similar goal with a different approach.

[kvnang]

Yes I'm also of the opinion that this should not belong to the core package itself.

HTML parsing is tricky, and with image generation you're in the business of making it as fast as possible.

This would mean that you choose the fastest parser for the environment where you want to use Satori.

My project actually is geared towards Cloudflare Workers, and thus uses CF's own HTMLRewriter, which I thought would be fastest there. This won't just work on many other environments.

Again, maybe it's worth integrating HTML parsing to the core package, but just feel that there's still not a parser that's unequivocally the fastest in all environments.

[jasongitmail]

or a separate export of the project

+1. There is value in having it as part of @vercel/og or Satori to gain reassurance it will be maintained and to provide a place for the community to center efforts around, instead of yet another 3rd-party library that may or may not be maintained.

and with image generation you're in the business of making it as fast as possible.

But keep in mind, these images will have Cache-Control headers set on them. I'm as performance obsessed as the next, and it's why I use Svelte, but I don't find it a persuasive argument to favor fragmentation of the community here, given Cache Control headers will be used for these images.

[jdgamble555]

Vercel needs this for SvelteKit... it is crazy to me that a SSR picked JSX over HTML strings!

J