vercel/satori

Satori is a library from Vercel that converts HTML and CSS into SVG images entirely in code, without a browser. You describe what you want using the same syntax developers use when building React web pages, and Satori produces a scalable image file as a result. The most common use case is generating social sharing images, such as the preview cards that appear when you paste a link into Twitter or Slack. The library accepts a limited but practical subset of HTML elements and CSS styling. Layout is handled using the same Flexbox engine that React Native uses, so most standard positioning and sizing rules work as expected. It does not support interactive elements, animations, or external scripts since the goal is to produce a static image, not a full web page. Fonts must be provided explicitly because there is no browser to load them automatically. You write the content as JSX, which is the tag-based notation used in React development. If your project does not use React, Satori can also accept plain JavaScript objects that describe the same structure. The result is an SVG string that you can save, serve, or convert to PNG using a separate image-processing tool. Satori runs in edge environments and Node.js, which means it can be used inside serverless functions that generate images on demand. Vercel's own Open Graph image generation service is built on top of it, and there is a Next.js template specifically for that workflow. The project is open source and available as an npm package. The README includes a detailed table of supported CSS properties, code examples, and links to a live playground where you can experiment with the output.