Core

The runtime-detecting render() function and the types every other entrypoint inherits.

The root takumi-js import auto-detects your runtime (native binding on Node, WASM elsewhere), creates a shared Renderer on first call, and gives you one async function: render(). Reach for this unless you need to manage the renderer yourself.

Functions

`render`

Prop

Type

Description

width?number

The width of the image. If not provided, the width will be automatically calculated based on the content.

height?number

The height of the image. If not provided, the height will be automatically calculated based on the content.

format?union

The format of the image.

quality?number

The quality of JPEG format (0-100).

drawDebugBorder?union

Whether to draw debug borders.

fetchedResources?union

The fetched resources to use. The resources fetched externally. You should collect the fetch tasks first using extractResourceUrls and then pass the resources here.

stylesheets?array

CSS stylesheets to apply before rendering.

keyframes?union

Structured keyframes to register alongside stylesheets.

devicePixelRatio?number

The device pixel ratio. Defines the ratio resolution of the image to the physical pixels.

timeMs?number

The animation timeline time in milliseconds.

dithering?union

The output dithering algorithm.

signal?object

jsx?object

resourcesOptions?FetchResourcesOptions

emoji?union

import {  } from "takumi-js";

const  = await (
  < ="flex h-full w-full items-center justify-center bg-blue-500 text-6xl text-white">
    Hello
  </>,
  { : 1200, : 630 },
);

Re-exported types

takumi-js re-exports the runtime-agnostic types so you don't need to import from @takumi-rs/core, @takumi-rs/helpers, or the WASM package directly.

From @takumi-rs/helpers: Node, ContainerNode, TextNode, ImageNode, NodeAttributes, NodeMetadata, ReactElementLike, FetchResourcesOptions.

From @takumi-rs/core: Font, FontDetails, OutputFormat, AnimationOutputFormat, AnimationFrameSource, AnimationSceneSource, ConstructRendererOptions, DitheringAlgorithm, EncodeFramesOptions, ImageSource, Keyframes, KeyframesMap, KeyframesRuleList, MeasuredNode, MeasuredTextRun, RenderAnimationOptions.

See Nodes, Output formats, and the per-runtime Node / WASM pages for usage.

Functions

render

Re-exported types

On this page

`render`