The fromJsx function

This function lowers the barrier for people coming from a similar project like vercel/satori to adopt Takumi.

Quick Example

import { fromJsx } from "@takumi-rs/helpers/jsx";

function SayHello({ name }: { name: string }) {
  return (
    <div style={{ color: "#0000ff", fontSize: "20px" }}>
      Hello, {name}!
    </div>
  );
}

// await is required to handle async components
const node = await fromJsx(<SayHello name="Takumi" />);

// You can then pass the node as a "root node" to render function

How components are processed

The rules for this function are simple, you can just look at the implementation to understand it.

1. React (Server) Components are resolved to their final values before processing.
2. <img> and <svg> elements become an Image node with style applied.
3. All other React elements become a Container node with style and style presets applied.
4. Rest of the primitive types (string/number) are automatically converted to Text node.

props.style is passed on to the container node as is.

CSS Styling

Styling Presets for Common Elements

Browsers like Chromium have default stylesheets used to render HTML.

In order to maintain consistency across web and Takumi rendered images, we take reference from vercel/satori Pre-defined styles for elements and then made our own maintained presets.

Style Parsing Compatibility

Takumi aims to support a wide range of CSS properties, but some advanced features may not be fully supported yet.

So you should always test your styles to ensure they render as expected.

Checkout Stylesheets for more details.