Satori is a great tool for developers looking to convert their HTML and CSS to SVG. One of the best features of Satori is that it supports the JSX syntax, which makes it very simple and straightforward to use. Not only that, but it also takes care of many important tasks under the hood such as layout calculation, font, typography, and more to generate an SVG that matches the exact same HTML and CSS in a browser.
It's important to note that Satori only accepts JSX elements that are pure and stateless. While you can use a subset of HTML elements (see section below) or custom React components, React APIs such as
dangerouslySetInnerHTML are not supported by Satori.
If you don't have JSX transpiler enabled, you can simply pass React-elements-like objects that have
props.style (and other properties too) directly to Satori.
While Satori supports a limited subset of HTML and CSS features due to its special use cases, it generally only implements static and visible elements and properties. For example, the
<input> HTML element and the
cursor CSS property are not considered by Satori. Additionally, you can't use
<style> tags or external resources via
It's also essential to keep in mind that Satori does not guarantee that the SVG output will 100% match the browser-rendered HTML output since Satori implements its own layout engine based on the SVG 1.1 spec. Nonetheless, Satori is a powerful tool that can greatly simplify the process of converting HTML and CSS to SVG and is definitely worth checking out for developers looking for an efficient way to do so.
- MPL-2.0 License.