Helpers
Build inputs and load images without the renderer.
import { , } from "takumi-js/helpers";
const = ({
: { : 32, : "white" },
: [("Hello Takumi", { : 48 })],
});takumi-js/helpers re-exports @takumi-rs/helpers. Use these functions to build nodes or prepare resources yourself. With JSX or HTML, render and ImageResponse handle conversion and resource loading.
Fonts
| Helper | Use |
|---|---|
googleFonts(options) | Load Google Fonts families in one request; render keeps the subsets used. See Fonts & text. |
fontFromUrl(url, options?) | Turn a font URL into a lazy fonts entry. options takes the fetch limits. |
subsetFonts({ fonts, source }) | Trim font subsets to the codepoints source renders (what render does internally). |
googleFonts, fontFromUrl, and prepareImages share fetch limits and retry behavior.
Building nodes
| Helper | Returns |
|---|---|
container(props) | A container node. |
text(text, style?) / text(props) | A text node. |
image(props) | An image node. |
style(css) | The same style object, typed. |
The props argument holds the node's own fields. Node types lists them.
Styles, presets, and stylesheet rules share the Declarations type. Custom properties such as "--accent": "red" accept strings or numbers, including in React's style prop.
Length and color shorthands return CSS strings. vw/vh are viewport width/height, em/rem are font-relative sizes, fr is a grid fraction. See the MDN CSS values reference.
rem resolves against the viewport, not the outermost node. Units covers what each font-relative unit follows.
| Helper | Output |
|---|---|
percentage(50) | 50% |
vw(100) / vh(100) | 100vw / 100vh |
em(1.5) / rem(1.5) | 1.5em / 1.5rem |
fr(1) | 1fr |
rgba(0, 0, 0, 0.5) | rgb(0 0 0 / 0.5) |
Parsing templates
| Helper | Import | Use |
|---|---|---|
fromJsx(element, options?) | takumi-js/helpers/jsx | Convert JSX or a React element to { node, css }. |
fromHtml(html) | takumi-js/helpers/html | Convert an HTML string to { node, css }. |
fromJsx resolves hooks and context itself: components using useState, useContext, or use() render with server semantics (initial state, no effects), without loading react-dom. Preact trees render too, as long as no component calls a Preact hook: those live on Preact's mangled internals, which no dispatcher can stand in for.
Images & emoji
| Helper | Import | Use |
|---|---|---|
prepareImages(options) | takumi-js/helpers | Fetch a node tree's remote images into images entries. See Images & emoji. |
extractEmojis(node, emojiType) | takumi-js/helpers/emoji | Replace emoji with CDN <img> nodes. See Emoji. |
emojiType selects the CDN provider: twemoji, blobmoji, noto, openmoji, fluent, or fluentFlat.
Last updated on