Output formats

format on RenderOptions picks the static encoder; format on RenderAnimationOptions / EncodeFramesOptions picks the animated encoder. The two sets are disjoint — use render for static, renderAnimation / encodeFrames for animated.

Format	Kind	Lossless	Quality knob	Use it for
`png`	Static	Yes	—	Default for OG cards, screenshots, transparency.
`jpeg`	Static	No	`quality` (0–100)	Photo-heavy renders where file size matters more than crisp edges.
`webp` (static)	Static	Optional	`quality` (0–100)	Smaller than PNG at the same visual quality. Best general-purpose.
`ico`	Static	Yes	—	Favicons. Multi-resolution packing happens automatically.
`raw`	Static	n/a	—	RGBA8 bytes, no encoding. Pipe to ffmpeg, a canvas, or your own encoder.
`gif`	Animated	No (palette-quant)	`dithering`	Universal compatibility, but capped at 256 colors per frame.
`apng`	Animated	Yes	—	Lossless animation, broad browser support, larger files than WebP.
`webp` (anim)	Animated	Optional	`quality` (0–100)	Best compression for animated output. Use this unless you need APNG's lossless guarantee or GIF compatibility.

Static

import {  } from "takumi-js";

const  = await (< ="bg-white">hi</>, { : 400, : 200, : "png" });
const  = await (< ="bg-white">hi</>, {
  : 400,
  : 200,
  : "jpeg",
  : 85,
});
const  = await (< ="bg-white">hi</>, {
  : 400,
  : 200,
  : "webp",
  : 90,
});
const  = await (< ="bg-white">hi</>, { : 64, : 64, : "ico" });
const  = await (< ="bg-white">hi</>, { : 400, : 200, : "raw" });

raw returns width × height × 4 bytes in RGBA order. No header, no padding — feed it straight into a frame pipeline.

Animated

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

const  = new ();

// Scene timeline sampled at fps
await .({
  : 600,
  : 600,
  : 30,
  : "webp",
  : 80,
  : [
    { : { : "text" as , : "0s" }, : 1000 },
    { : { : "text" as , : "1s" }, : 1000 },
  ],
});

// Precomputed frames (each frame is its own node tree)
await .(
  [
    { : { : "text" as , : "frame 1" }, : 100 },
    { : { : "text" as , : "frame 2" }, : 100 },
  ],
  { : 200, : 100, : "apng" },
);

renderAnimation re-renders the scene at each 1000 / fps-ms tick — best when you have a CSS-driven scene and want a clean timeline. encodeFrames skips re-rendering and just encodes the frames you hand it — use it when frames come from disparate sources or a frame-by-frame simulation.

For frame-by-frame video pipelines (mp4, h.264/h.265, audio mux) render to raw in a loop and pipe to ffmpeg. See the Video guide.

Output formats

Static

Animated

On this page