Helpers
Convert JSX and HTML to Takumi node trees, prepare images, and load fonts with reusable helpers.
import { , } from "takumi-js/helpers";
const = ({
: { : 32, : "white" },
: [("Hello Takumi", { : 48 })],
});takumi-js/helpers re-exports @takumi-rs/helpers. Use it to build node trees or prepare fonts and images yourself. For JSX or HTML input, render and ImageResponse already convert the input and load its resources.
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 }) | Keep the font subsets that cover the codepoints in source. render does this for you. |
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 and vh are viewport units, em and rem are font-relative, and fr is a grid fraction. See the MDN CSS values reference.
rem resolves against the viewport's font size, 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 React hooks and context without react-dom. Components that call useState, useContext, or use() render with server semantics: initial state, no effects. Preact trees work only when their components call no Preact hooks.
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