Output Formats

Choose PNG, JPEG, WebP, ICO, raw pixels, or SVG output and configure image quality and resolution.

render() returns encoded image bytes. The format option picks the encoder.

Picking a format

format defaults to png. quality and lossless apply only where the table marks a Yes, and are ignored elsewhere. quality runs 0–100 (default 75).

Choose an image encoder

import {  } from "takumi-js";

const  = < ="w-full h-full grid place-items-center bg-white">Hello Takumi</>;

const  = await (, { : 1200, : 630, : "png" });
const  = await (, { : 1200, : 630, : "jpeg", : 80 });
const  = await (, { : 1200, : 630, : "webp", : true });

Format	Alpha	Honors `quality`	Honors `lossless`	Notes
`png` (default)	Yes	No	No	Lossless. Use for transparency or exact pixels.
`jpeg`	No	Yes	No	Lossy. Alpha is flattened. Best for photos.
`webp`	Yes	Yes	Yes	Lossy with `quality`; `lossless: true` wins.
`ico`	Yes	No	No	Favicon container, PNG-encoded inside.
`raw`	Yes	No	No	Uncompressed RGBA bytes, `width × height × 4`.

On @takumi-rs/wasm, WebP is always lossless and the lossless knob is absent from the types. quality still exists there and applies to JPEG.

Raw frames

format: "raw" skips encoding and hands back the RGBA buffer directly. Feed it to ffmpeg or any encoder you already run. The keyframe animation page streams raw frames into ffmpeg for video output.

Device pixel ratio

devicePixelRatio scales the output resolution without touching the layout. A 1200 × 630 render at devicePixelRatio: 2 produces a 2400 × 1260 image whose elements keep their CSS sizes.

Render at twice the resolution

import {  } from "takumi-js";

const  = await (<>Hello Takumi</>, {
  : 1200,
  : 630,
  : 2, 
});

Dithering

dithering adds ordered Bayer noise to gradient fills before they quantize to 8-bit, removing visible banding. It applies to static image exports and raw buffers.

none (default)
ordered-bayer

Reduce gradient banding

import {  } from "takumi-js";

const  = await (< ="w-full h-full bg-linear-to-r from-slate-900 to-slate-700" />, {
  : 1200,
  : 630,
  : "ordered-bayer", 
});

Animated output

renderAnimation() encodes a sequence as WebP, APNG, or GIF. See Keyframe Animation.

renderSvg() is the second output backend. It returns an <svg> document string instead of a raster bitmap. The output is real <rect>, <path>, gradients, glyph outlines, and embedded images, drawn from the same layout.

Render PNG and SVG

import { ,  } from "takumi-js";

const  = <>Hello Takumi</>;

const  = await (, { : 1200, : 630 });
const  = await (, { : 1200, : 630 });

SVG is a vector format, so the raster-only knobs do not apply: format, quality, lossless, dithering, drawDebugBorder, devicePixelRatio.

Cancellation

Every render takes an optional AbortSignal. Pass signal to abort a render that is still fetching fonts or images; an already-aborted signal throws before any work starts.

Cancel with the request

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

export function (: ) {
  return new (<>Hello Takumi</>, {
    : 1200,
    : 630,
    : ., 
  });
}