Architecture

Data Structure

Format

Takumi uses JSON format as its the most universal format that can be easily serialized and deserialized.

Node

HTML is complex, it defines a lot of elements that are used to build the web. But since we are building static images, only three types of nodes are required: an image, a text, or a container.

The details are described in the Reference section.

fromJsx helper

To bridge the gap between JSX and nodes, we provide a fromJsx helper function that helps mapping elements to nodes, and handle React specific features like Server Components and Fragments.

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

• React (Server) Components are resolved to their final values before processing.
• <img> and <svg> elements become an Image node with style applied.
• All other React elements become a Container node with style and style presets applied.
• Rest of the primitive types (string/number) are automatically converted to Text node.
• props.style is passed on to the container node as is.

Styling

Takumi uses Taffy to layout the positions, and Parley to layout the text, so it mostly depends on the features that these two libraries support.

CSS

The syntax parser is inspired by lightningcss, check Reference to get the full list of supported properties.

Tailwind

Originally twrnc was used, but it was removed in favor of our own implementation.

Arbitrary values would just be passed to the CSS parser mentioned above.

Distribution

As Rust Crate

If you want to build a port of Takumi to your own language or just embed in Rust application, install takumi as a dependency.

[dependencies]
takumi = "*" # replace with the latest version

The documentation is available on docs.rs.

For Node.js Runtime

In order to utilize the power of multithreading and non-blocking, instead of building for wasm, we target napi-rs to build the native binary for Node.js.

The package is published as @takumi-rs/core on npm.

For Edge Runtime / Browser

This is relatively rare, but if you are using a Edge runtime or browser, you can use the @takumi-rs/wasm package.

And to keep the wasm file small, woff font loading is not supported and theres no bundled fonts (so font needs to be loaded to render text).