WASM

takumi-js/wasm re-exports @takumi-rs/wasm plus its /auto bundler-detecting variant. Use it whenever the native binding can't load — Workers, edge runtimes, browser bundles, deno deploy.

The WASM build runs the same renderer as Node, just compiled to wasm32 and instantiated through the host's WebAssembly API. The only thing you have to do that the Node entrypoint hides is decide how the .wasm bytes reach the runtime.

Initialization

The WASM module has to be instantiated before the first Renderer. takumi-js/wasm re-exports both init (async) and initSync from @takumi-rs/wasm. The default export uses @takumi-rs/wasm/auto, which picks a bundler-specific strategy via package exports conditions.

Environment	Recommended import path	Why
Cloudflare Workers, Vite, generic edge	`takumi-js/wasm`	The `/auto` default re-export resolves to the correct bundler shim.
Next.js (edge runtime, `unwasm` plugin)	`@takumi-rs/wasm/next`	Returns the `WebAssembly.Module` for `await init({ module_or_path })`.
Node.js (force WASM, no native)	`@takumi-rs/wasm/node`	Loads the `.wasm` file from disk via `fs`.
Bring your own bytes	`@takumi-rs/wasm` + `initSync`	Pass `BufferSource` or `WebAssembly.Module` directly.

// Vite / Cloudflare Workers / most edge runtimes
import , {  } from "@takumi-rs/wasm";

await ();
const  = new ();
const  = .(
  { : "container", : [{ : "text" as , : "edge!" }] },
  { : 600, : 200, : "png" },
);

// Bring your own module (e.g. compiled in at build time)
import { ,  } from "@takumi-rs/wasm";
import  from "@takumi-rs/wasm/next";

({ :  });
const  = new ();

The WASM Renderer API is synchronous — render, measure, renderAnimation, encodeFrames all return immediately. There's no separate worker thread, so a long render will block the event loop. Hoist the renderer outside your request handler so the cold-start cost is paid once per isolate.

Classes

`Renderer`

Prop

Type

Description

freefunction

clearImageStorefunction

Clears the renderer's internal image store.

encodeFramesfunction

Encodes a precomputed frame sequence into an animated image buffer.

loadFontfunction

Loads a font into the renderer.

measurefunction

Measures a node tree and returns layout information.

putPersistentImagefunction

Puts a persistent image into the renderer's internal store.

renderfunction

Renders a node tree into an image buffer.

renderAnimationfunction

Renders a sequential animation timeline into a buffer.

renderAsDataUrlfunction

Renders a node tree into a data URL.

raw format is not supported for data URL.

__@dispose@36function

The WASM build adds renderAsDataUrl(node, options) — convenient for inline browser previews; raw format is not supported. There's no loadFontSync. loadFont, loadFonts, and putPersistentImage accept either bytes or a () => Promise<ByteBuf> loader — they return void when bytes are passed directly and Promise<void> when the loader is async, so await accordingly.

Options

`ConstructRendererOptions`

Prop

Type

Description

persistentImages?array

The images that needs to be preloaded into the renderer.

fonts?array

The fonts being used.

loadDefaultFonts?union

Whether to load the default fonts. If fonts are provided, this will be false by default.

`RenderOptions`

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).

fetchedResources?array

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.

drawDebugBorder?union

Whether to draw debug borders.

devicePixelRatio?number

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.

`RenderAnimationOptions`

Prop

Type

Description

scenesarray

widthnumber

heightnumber

format?union

quality?number

The quality of WebP format (0-100). Ignored for APNG and GIF.

fetchedResources?array

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

drawDebugBorder?union

stylesheets?array

CSS stylesheets to apply before rendering.

devicePixelRatio?number

Defines the ratio resolution of the image to the physical pixels.

fpsnumber

Frames per second for timeline sampling.

`EncodeFramesOptions`

Prop

Type

Description

widthnumber

heightnumber

format?union

quality?number

The quality of WebP format (0-100). Ignored for APNG and GIF.

fetchedResources?array

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

drawDebugBorder?union

stylesheets?array

CSS stylesheets to apply before rendering.

devicePixelRatio?number

Defines the ratio resolution of the image to the physical pixels.

Supporting types

`Font` / `FontDetails`

Prop

Type

Description

name?string

dataByteBuf

weight?number

style?union

`ImageSource`

Prop

Type

Description

srcstring

dataByteBuf

`MeasuredNode`

Prop

Type

Description

widthnumber

heightnumber

transformtuple

childrenarray

runsarray

`InitInput` / `SyncInitInput`

On this page