satori

You could use https://github.com/vercel/satori which supports Node 16+.

I've used satori [0] on the backend with TypeScript/Deno to render React JSX + tailwind CSS as an SVG (which is then rendered to a PNG). Of course you could use another flavor of JSX (or even plain HTML) or omit tailwind, but it's really cool that you can use the same stack as a typical frontend and render it as an image. Satori is meant for rendering Open Graph images (e.g. the little images that come up when you post a link on Twitter/Slack/Facebook), but I found that it works well for rendering arbitrary images. Satori has no native dependencies, so it kinda "just works" on the backend. It supports a subset of modern CSS, including flexbox. My use case is posting match reports for League of Legends into a Discord text channel, e.g. person X just played a match, here are their stats. It's quite nice because there are almost zero server-

Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything. This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Legends [1] [0]: https://github.com/vercel/satori [1]: https://github.com/shepherdjerred/glitter-boys

This is a really interesting top down approach, starting with Chromium and pairing a minimal bit out of it. https://github.com/vercel/satori is another interesting recent project that goes bottoms up to achieve something similar. Def a lot smaller aimed at edge rendering, but at the tradeoff of significantly more random compatibility / rendering issues. Both approaches have their tradeoffs.

Vercel put out https://github.com/vercel/satori which does similar things (albeit with JSX and a slightly different use case).

JSX here is just a way to represent the HTML information because you can't write HTML in JavaScript. It is NOT required. But with the JSX representation, the lib doesn't have to parse it again, and it's using it as JSON, check the "Use without JSX" section in the docs: https://github.com/vercel/satori#use-without-jsx

The claim is correct, it supports a subset of HTML and CSS[0]. You can even check the demo page[1], it has examples with HTML and inline styles. [0]: https://github.com/vercel/satori#html-elements [1]: https://og-playground.vercel.app

Interesting. I was thinking that this was going to be a crazy amount of layout engine work, but now I look a little closer it appears the layout work is farmed out to yoga [0] (not trying to take away anything from the effort here). So this project is almost a wrapper around running yoga as a renderer and using SVG as a form of backend target? I say "appears" because the yoga landing page doesn't do a great job of explaining what it does. EDIT Just looking at some of the information about the font side of things and the naming is a little confusing. You set embedFont=false to use text instead of converting the text to paths. embedFont=true sounds a lot like it will embed the _font_ required to render the _text_ - but it kinda does the opposite. https://github.com/vercel/satori#font-embedding [0] https://github.com/facebook/yoga

this is a gamechanger! also https://github.com/vercel/satori is such a good name!