feat: builtin minimal JSX runtime

[sanman1k98]

JSX without installing React

Now we can write JSX for Satori without having to install React as a dependency. Just add a @jsxImportSource pragma directive at the top of your files.

/** @jsxRuntime automatic */
/** @jsxImportSource satori/jsx */

import satori from 'satori';

function MyComponent() {
  return <h1 style={{ fontSize: 16 }}>Hello from My Component</h1>
}

const svg = await satori(
  <div
    style={{
      backgroundColor: '#ff0',
      width: '100%',
      height: '100%',
      display: 'flex',
    }}
  >
    <MyComponent />
  </div>,
  {
    width: 100,
    height: 100,
    fonts,
  },
)

Types

The types are adapted from @types/react and include a JSX.IntrinsicElements interface for autocompleting HTML and SVG. Which means that it can be modified to only have the subset of elements and CSS properties supported by Satori for some beautiful autocomplete (but at that point I guess it wouldn't be a "minimal runtime" anymore).

Testing

pnpm run test --config='vitest.jsx-runtime.config.ts'

TODO

• modify build script to add entrypoints for JSX submodules
• add exports for satori/jsx, satori/jsx/jsx-runtime, and satori/jsx/jsx-dev-runtime
• custom subset of JSX.IntrinsicElements (if ya wanna do that)
• update the README and other documentation

I've been sitting on this for a while so I'll update when I remember more stuff...

Thank you for maintaining this awesome project and checking out my PR!

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
satori-playground	Ready	Preview, Comment, Open in v0	Mar 13, 2026 3:55pm

[sanman1k98]

I figured that creating a custom subset of HTML/SVG/CSS types sounds like a lot of work and that it should probably be in a separate PR haha

I’d love to hear what you think about this feature, and please let me know if there’s anything else I can help with!

[shuding]

Can you give some example use cases for this?