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 Integrations 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`
      tw: None, // Tailwind properties
    }),
  ]),
  style: None,
  tw: None, // Tailwind properties
});

// Create a context for storing resources, font caches.
// You should reuse the context to speed up the rendering.
let mut global = 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.
global.font_context.load_and_store(include_bytes!("../../assets/fonts/geist/Geist[wght].woff2"), None, None);

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

// Create render options
let options = RenderOptionsBuilder::default()
  .viewport(viewport)
  .node(node)
  .global(&global)
  .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.
• 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.