Output formats

render() returns encoded bytes, and the format option chooses the encoder.

Picking a formatCopy Anchor Link

import { render } from "takumi-js";

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

const png = await render(card, { width: 1200, height: 630, format: "png" });
const jpeg = await render(card, { width: 1200, height: 630, format: "jpeg", quality: 80 });
const webp = await render(card, { width: 1200, height: 630, format: "webp", quality: 80 });

quality runs from 0 to 100 and defaults to 75. Formats marked No in the quality column ignore it.

Raw framesCopy Anchor Link

format: "raw" skips encoding and returns the RGBA buffer, which you can feed to ffmpeg or another encoder. The Animation page streams raw frames into ffmpeg to make a video.

Device pixel ratioCopy Anchor Link

devicePixelRatio sets how many image pixels each CSS pixel takes. width and height stay the image size in pixels. To render a 1200 × 630 design at twice the resolution, double the size and set the ratio to 2:

import { render } from "takumi-js";

const image = await render(<div tw="w-full h-full text-6xl">Hello Takumi</div>, {
  width: 2400,
  height: 1260,
  devicePixelRatio: 2, 
});

The result is a 2400 × 1260 image. Every CSS length draws twice as large, so the layout matches a 1200 × 630 render at ratio 1.

DitheringCopy Anchor Link

dithering adds ordered Bayer noise to gradient fills before they drop to 8-bit color, which removes visible banding. It applies to render(), including raw output. It accepts these values:

• none (default)
• ordered-bayer

import { render } from "takumi-js";

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

Animated outputCopy Anchor Link

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

Vector SVGCopy Anchor Link

renderSvg() returns an SVG document string instead of a bitmap. It draws real <rect>, <path>, gradients, glyph outlines, and embedded images from the same layout.

import { render, renderSvg } from "takumi-js";

const card = <div>Hello Takumi</div>;

const png = await render(card, { width: 1200, height: 630 });
const svg = await renderSvg(card, { width: 1200, height: 630 }); 

SVG is a vector format, so these raster options do not apply to it:

• format
• quality
• lossless
• dithering
• drawDebugBorder
• devicePixelRatio

CancellationCopy Anchor Link

Pass an AbortSignal as signal to cancel a render. Takumi checks it before work starts and again after fonts and images load. An aborted signal stops the render with the signal's reason, and it also cancels image fetches that are still running.

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

export function GET(request: Request) {
  return new ImageResponse(<div>Hello Takumi</div>, {
    width: 1200,
    height: 630,
    signal: request.signal, 
  });
}