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

Everything starts with a ImageRenderer instance, it takes Node tree as input then calculate the layout.

You can then draw the layout to an RgbaImage.

Example

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

// Create a node tree with `ContainerNode` and `TextNode`
let mut node = ContainerNode {
  children: Some(vec![
    TextNode {
      text: "Hello, world!".to_string(),
      style: Style::default(),
    }.into(),
  ]),
  style: Style::default(),
};

// Inherit styles for children
node.inherit_style_for_children();

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

// Load fonts
context.font_context.load_and_store(include_bytes!("../../assets/fonts/noto-sans/google-sans-code-v11-latin-regular.woff2").to_vec());

// Create a renderer with a viewport
// You should create a new renderer for each render.
let mut renderer: ImageRenderer<NodeKind> = ImageRenderer::new(Viewport::new(1200, 630));

// Construct the taffy tree, this will calculate the layout and store the result in the renderer.
renderer.construct_taffy_tree(node.into(), &context);

// Draw the layout to an `RgbaImage`
let image = renderer.draw(&context).unwrap();

Credits

• taffy for the layout system.
• image for the image processing.
• cosmic-text for the text rendering.
• woff2-patched for the font processing.
• ts-rs for the type-safe serialization.
• resvg for SVG parsing and rendering.