Response
Web Response subclass and factory for serving images from API routes.
takumi-js/response wraps render() in a Response-compatible object: stream the image directly back to the client, set headers once, drop into any handler that returns a Response. The class is a drop-in for next/og's ImageResponse.
Classes
ImageResponse
A Response subclass that begins rendering on construction and resolves through the ready promise.
import { } from "takumi-js/response";
export function () {
return new (
< ="flex h-full w-full items-center justify-center bg-white text-6xl">Hello</>,
{ : 1200, : 630 },
);
}Functions
createImageResponse
Returns a factory pre-bound to shared options — fonts, stylesheets, cache headers — so individual routes only supply per-request overrides.
import { } from "takumi-js/response";
const = ({
: 1200,
: 630,
: { "Cache-Control": "public, max-age=31536000, immutable" },
});
export function () {
return (< ="flex h-full w-full bg-black text-white">OG</>);
}Options
Prop
Type
Description
width?numberThe width of the image. If not provided, the width will be automatically calculated based on the content.
height?numberThe height of the image. If not provided, the height will be automatically calculated based on the content.
format?unionThe format of the image.
quality?numberThe quality of JPEG format (0-100).
drawDebugBorder?unionWhether to draw debug borders.
fetchedResources?unionThe fetched resources to use.
The resources fetched externally. You should collect the fetch tasks first using extractResourceUrls and then pass the resources here.
stylesheets?arrayCSS stylesheets to apply before rendering.
keyframes?unionStructured keyframes to register alongside stylesheets.
devicePixelRatio?numberThe device pixel ratio. Defines the ratio resolution of the image to the physical pixels.
timeMs?numberThe animation timeline time in milliseconds.
dithering?unionThe output dithering algorithm.
signal?objectjsx?objectresourcesOptions?FetchResourcesOptionsemoji?unionheaders?unionstatus?numberstatusText?stringonError?functionResult
Prop
Type
Description
headersobjectThe headers read-only property of the Response interface contains the Headers object associated with the response.
okunionThe ok read-only property of the Response interface contains a Boolean stating whether the response was successful (status in the range 200-299) or not.
redirectedunionThe redirected read-only property of the Response interface indicates whether or not the response is the result of a request you made which was redirected.
statusnumberThe status read-only property of the Response interface contains the HTTP status codes of the response.
statusTextstringThe statusText read-only property of the Response interface contains the status message corresponding to the HTTP status code in Response.status.
typeResponseTypeThe type read-only property of the Response interface contains the type of the response. The type determines whether scripts are able to access the response body and headers.
urlstringThe url read-only property of the Response interface contains the URL of the response. The value of the url property will be the final URL obtained after any redirects.
clonefunctionThe clone() method of the Response interface creates a clone of a response object, identical in every way, but stored in a different variable.
bodyunionbodyUsedunionarrayBufferfunctionblobfunctionbytesfunctionformDatafunctionjsonfunctiontextfunctionreadyobjectFactory
Prop
Type
Description
ImageResponseOptions extends RenderOptions and ResponseInit, plus onError for catching render failures without crashing the stream. The default Content-Type is derived from format (png → image/png, etc.).
Last updated on