Crate 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 Quick Start if you are looking for napi-rs / WASM bindings.

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(Box::from([
    NodeKind::Text(TextNode {
      text: "Hello, world!".to_string(),
      style: None, // Construct with `StyleBuilder`
      tw: None, // Tailwind properties
      preset: None,
    }),
  ])),
  preset: None,
  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
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.

Credits

Takumi wouldn’t be possible without the following works:

• taffy for the flex & grid layout.
• image for the image processing.
• parley for text layout.
• swash for font shaping.
• wuff for woff/woff2 decompression.
• resvg for SVG parsing & rasterization.

Re-exports

pub use error::Result;

pub use error::TakumiError as Error;

pub use image;

pub use parley;

pub use taffy;

Modules

error

Error handling types and utilities.

layout

Layout related modules, including the node tree, style parsing, and layout calculation.

rendering

Rendering related modules, including the image renderer, canvas operations.

resources

External resource management (fonts, images)

Structs

GlobalContext

The main context for image rendering.