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,
  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: Style::default(),
    }),
  ]),
  style: Style::default(),
});

// 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"));

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

// Render the layout to an `RgbaImage`
let image = render(viewport, &context, node).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.