Takumi

Takumi is a library with different parts to render your React components to images. This crate contains the core logic for layout, rendering.

Checkout the Getting Started page if you are looking for Node.js / WASM bindings.

Walkthrough

Create a GlobalContext to store image resources, font caches, the instance should be reused to speed up the rendering.

Then call render with Node and Viewport to get RgbaImage.

Theres a helper function write_image to write the image to a destination implements Write and Seek.

Example

use takumi::{
  layout::{
    node::{ContainerNode, TextNode, NodeKind, Node},
    Viewport,
    style::Style,
  },
  rendering::{render, RenderOptionsBuilder},
  GlobalContext,
};

// Create a node tree with `ContainerNode` and `TextNode`
let mut node = NodeKind::Container(ContainerNode {
  children: Some(vec![
    NodeKind::Text(TextNode {
      text: "Hello, world!".to_string(),
      style: None, // Construct with `StyleBuilder`
    }),
  ]),
  style: None,
});

// Create a context for storing resources, font caches.
// You should reuse the context to speed up the rendering.
let context = GlobalContext::default();

// Load fonts
// pass an optional [`FontInfoOverride`](parley::FontInfoOverride) to override the font's metadata,
// and an optional [`GenericFamily`](parley::GenericFamily) to specify the generic family of the font.
context.font_context.load_and_store(include_bytes!("../../assets/fonts/geist/Geist[wght].woff2"), None, None);

// Create a viewport
let viewport = Viewport::new(1200, 630);

// Create render options
let options = RenderOptionsBuilder::default()
  .viewport(viewport)
  .node(node)
  .global(&context)
  .build()
  .unwrap();

// Render the layout to an `RgbaImage`
let image = render(options).unwrap();

Feature Flags

• woff2: Enable WOFF2 font support.
• woff: Enable WOFF font support.
• image_data_uri: Enable image data URI support.
• svg: Enable SVG support.
• rayon: Enable rayon support.
• avif: Enable AVIF support.

Credits

• taffy for the layout system.
• image for the image processing.
• parley for the text layout.
• wuff for woff/woff2 decompression.
• ts-rs for the type-safe serialization.
• resvg for SVG parsing and rendering.