Takumi

Takumi is a library with different parts to render UI component trees to images. This crate contains the core logic for layout and rendering.

Checkout the Quick Start if you are looking for napi-rs / WASM bindings.

Example

use takumi::{
  layout::{
    node::Node,
    Viewport,
    style::{Length::Px, Style, StyleDeclaration},
  },
  resources::font::FontResource,
  rendering::{render, RenderOptions},
  GlobalContext,
};

// Create a node tree with `Node::container` and `Node::text`
let node = Node::container([Node::text("Hello, world!").with_style(
  Style::default().with(StyleDeclaration::font_size(Px(32.0).into())),
)]);

// 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(
  FontResource::new(include_bytes!("../../assets/fonts/geist/Geist[wght].woff2"))
);

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

// Create render options
let options = RenderOptions::builder()
  .viewport(viewport)
  .node(node)
  .global(&global)
  .build();

// 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.
• skrifa for glyph loading.
• wuff for woff/woff2 decompression.
• resvg for SVG parsing & rasterization.