Output Formats

Set format to choose the encoder for render(). It returns the encoded bytes.

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 ignore it.

Raw framesCopy Anchor Link

format: "raw" skips encoding and returns the RGBA buffer. Feed it to ffmpeg or another encoder. The keyframe 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. With width: 1200 and height: 630 at ratio 2, the image stays 1200 × 630 and the layout gets only 600 × 315 CSS pixels.

DitheringCopy Anchor Link

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

• 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 Keyframe 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 the raster options do not apply: format, quality, lossless, dithering, drawDebugBorder, and 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.

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, 
  });
}

The signal also cancels image fetches that are still running.