Helpers
Look up the helpers that build node trees, convert JSX and HTML, prepare images, and load fonts.
takumi-js/helpers builds node trees and prepares fonts and images for render.
import { , } from "takumi-js/helpers";
const = ({
: { : 32, : "white" },
: [("Hello Takumi", { : 48 })],
});takumi-js/helpers re-exports @takumi-rs/helpers. Use it when you want 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 Image loading & emoji. |
extractEmojis(node, emojiType) | takumi-js/helpers/emoji | Replace emoji with CDN <img> nodes. See Emoji. |
emojiType takes the CDN values of the emoji option listed in Image loading & emoji. It does not take from-font, which fetches nothing.
Last updated on