Helpers

takumi-js/helpers re-exports @takumi-rs/helpers — small functions for building node trees by hand, expressing units, and prefetching resources outside the renderer. Use them when you want a node tree without writing JSX, or when you're streaming many renders and want to control the fetch budget yourself.

Node builders

Each builder returns the matching node discriminant. Style and metadata fields stay optional.

import { , , , , ,  } from "takumi-js/helpers";

const  = ({
  : { : (100), : (100), : (0, 0, 0) },
  : [
    ("Hello", { : "white", : 96 }),
    ({ : "https://example.com/logo.png", : 200, : 200 }),
  ],
});

`container`

Returns a ContainerNode. Accepts every metadata field plus children.

`text`

Two overloads: text(string, style?) for the common case, or text({ text, style, tw, ... }) for full metadata.

`image`

Requires src (URL, data URL, Uint8Array, or ArrayBuffer). width / height override intrinsic dimensions.

Unit helpers

Type-safe wrappers that return CSS strings with the right suffix — useful inside type-checked style objects where string is too loose.

Helper	Returns	Use
`vw(n)`	`${n}vw`	Viewport width.
`vh(n)`	`${n}vh`	Viewport height.
`em(n)`	`${n}em`	Relative to local font size.
`rem(n)`	`${n}rem`	Relative to root font size.
`fr(n)`	`${n}fr`	Grid track fraction.
`percentage(n)`	`${n}%`	Percentage of parent.

Color

`rgba`

import {  } from "takumi-js/helpers";

const  = (0, 0, 0, 0.5); // "rgb(0 0 0 / 0.5)"

Emits the modern space-separated rgb() syntax with the slash alpha. Pass any numeric channels; a defaults to 1.

Resources

`extractResourceUrls`

Walks a node tree and returns every external image URL found in src, backgroundImage, or maskImage. Use this when you want to prefetch outside the renderer to share a cache across requests.

`fetchResources`

Prop

Type

Description

timeout?number

Timeout in milliseconds.

fetch?function

Custom fetch function.

throwOnError?union

Whether to throw on any fetch failure. If false, returns only successful fetches.

cache?Pick<object, union>

Cache for fetched resources. Custom features (like LRU, TTL, etc.) can be implemented by providing an extended Map<string, ArrayBuffer>.

import { ,  } from "takumi-js/helpers";
import {  } from "takumi-js";

const  = {
  : "container" as ,
  : [{ : "image" as , : "https://example.com/avatar.png" }],
};
const  = await ((), { : 3000 });
await (, { : 800, : 200,  });

Returns Array<{ src: string; data: ArrayBuffer }>. Deduplicates URLs, validates HTTP status, supports a custom fetch and an optional cache shaped like Map<string, ArrayBuffer>.

HTML

`fromHtml`

fromHtml lives in the takumi-js/helpers/html subpath — kept off the top-level export to avoid pulling the HTML parser into bundles that don't need it.

import {  } from "takumi-js/helpers/html";

const { ,  } = ("<div class='card'><h1>Hi</h1></div>");

Parses a static HTML string into a node tree plus the inline stylesheets that came with it. Pass stylesheets along to render or to the underlying Renderer to apply class-based styling.

Style identity

`style`

import {  } from "takumi-js/helpers";

const  = ({ : "flex", : 24, : 12 });

Identity function typed as CSSProperties. Use it for type-checking standalone style objects without committing them to a node.

On this page