Reference

ImageResponse

The ImageResponse class is a high-level API for generating images from JSX. It extends the standard Response object.

Options

The options object for ImageResponse combines standard ResponseInit properties with Takumi-specific rendering options.

Common Options

Prop

Type

Description

width?number

The width of the image. If not provided, it will be calculated based on the content.

height?number

The height of the image. If not provided, it will be calculated based on the content.

format?'webp' | 'png' | 'jpeg' | 'raw'

The output image format.

quality?number

The quality of the image (0-100). Only applicable for `webp` and `jpeg` formats.

emoji?EmojiType | 'from-font'

Strategy for rendering emojis. Use 'from-font' to rely on system fonts, or specify a provider for SVG emojis.

fonts?Font[]

Custom fonts to load for this response.

devicePixelRatio?number

The device pixel ratio used for rendering.

dithering?'None' | 'ordered-bayer' | 'floyd-steinberg'

The dithering algorithm to use for the output image.

drawDebugBorder?boolean

Whether to draw debug borders around layout elements.

stylesheets?string[]

Additional CSS stylesheets to apply.

keyframes?Keyframes

Structured keyframes to register alongside stylesheets.

jsx?FromJsxOptions

Options for converting JSX to Takumi nodes.

headers?HeadersInit

Custom HTTP headers for the response.

status?number

HTTP status code.

statusText?string

HTTP status text.

Node.js Specific

Prop

Type

Description

renderer?Renderer

An existing Renderer instance to use. Useful for optimizing repeated renders.

signal?AbortSignal

An AbortSignal to cancel the rendering process.

WebAssembly Specific

Prop

Type

Description

moduleInitInput | Promise<InitInput>

The WebAssembly module to use for the renderer. Required if no renderer is provided.

renderer?Renderer

An existing Renderer instance to use.

EmojiType

Supported emoji providers for SVG-based rendering.

Prop

Type

Description

provider?'twemoji' | 'blobmoji' | 'noto' | 'openmoji'

The emoji provider to use for fetching SVG assets.

FromJsxOptions

Options for the JSX to Takumi node conversion.

Prop

Type

Description

defaultStyles?StylePresets | false

Override or disable the default Chromium-like style presets.

tailwindClassesProperty?string

The prop name used to pass Tailwind CSS classes.

Common Types

Font

Prop

Type

Description

name?string

The name of the font. If not provided, it will be extracted from the font data.

dataUint8Array | ArrayBuffer

The raw font content.

weight?number

The font weight.

style?'normal' | 'italic' | 'oblique'

The font style.

ImageSource

Prop

Type

Description

srcstring

The source URL of the image.

dataUint8Array | ArrayBuffer

The raw image data.

Node Types

Container

A container node is used to group other nodes and arrange them in a layout.

Prop

Type

Description

tagName?string

Element tag name used for HTML preset and selector matching

className?string

Element class name used for selector matching

id?string

Element id used for selector matching

children?Node[]

Children nodes

preset?Style

Default HTML element styles (lowest priority)

style?Style

Inline styling properties (highest priority)

tw?string

Tailwind classes (medium priority, overrides preset)

Text

A text node displays text.

Prop

Type

Description

tagName?string

Element tag name used for HTML preset and selector matching

className?string

Element class name used for selector matching

id?string

Element id used for selector matching

textstring

Text content to be displayed

preset?Style

Default HTML element styles (lowest priority)

style?Style

Inline styling properties (highest priority)

tw?string

Tailwind classes (medium priority, overrides preset)

Image

An image node displays rasterized or svg images.

Prop

Type

Description

tagName?string

Element tag name used for HTML preset and selector matching

className?string

Element class name used for selector matching

id?string

Element id used for selector matching

srcstring

The source URL / persistent image key to the image

width?number

Overwrite the intrinsic width of the image

height?number

Overwrite the intrinsic height of the image

preset?Style

Default HTML element styles (lowest priority)

style?Style

Inline styling properties (highest priority)

tw?string

Tailwind classes (medium priority, overrides preset)

Style Properties

Property	Property Expanded	Supported Values
`display`		`flex`, `grid`, `block`, `inline`
`position`		`relative`, `absolute`
`width`		Supported
`height`		Supported
`maxWidth`		Supported
`maxHeight`		Supported
`minWidth`		Supported
`minHeight`		Supported
`aspectRatio`		Supported
`animation`	`animationName`	Supported
	`animationDuration`	Supported
	`animationDelay`	Supported
	`animationTimingFunction`	`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`, `steps()`, `cubic-bezier()`
	`animationIterationCount`	Supported
	`animationDirection`	Supported
	`animationFillMode`	Supported
	`animationPlayState`	Supported
`padding`	`paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingInline`, `paddingBlock`	Supported
`margin`	`marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginInline`, `marginBlock`	Supported
`inset`	`top`, `right`, `bottom`, `left`, `insetInline`, `insetBlock`	Supported
`border`	`borderWidth` (`borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, `borderInlineWidth`, `borderBlockWidth`)
	`borderStyle`	`solid`, `none`
	`borderColor`	Supported
`borderRadius`	`borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius`	Supported
`outline`	`outlineWidth`	Supported
	`outlineStyle`	`solid`, `none`
	`outlineColor`	Supported
	`outlineOffset`	Supported
`flex`	`flexBasis`	Supported
	`flexGrow`	Supported
	`flexShrink`	Supported
Flexbox	`flexDirection`	Supported
	`justifyContent`	Supported
	`justifySelf`	Supported
	`alignContent`	Supported
	`justifyItems`	Supported
	`alignItems`	Supported
	`alignSelf`	Supported
	`justifySelf`	Supported
	`flexWrap`	`nowrap`, `wrap`, `wrap-reverse`
	`gap` (`columnGap`, `rowGap`)	Supported
`objectFit`		Supported
`objectPosition`		Supported
`overflow`	`overflowX`, `overflowY`	`visible`, `hidden`
`background`	`backgroundImage`	`linear-gradient()`, `radial-gradient()`, `conic-gradient()`, `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()`, `url()`
	`backgroundPosition`	Supported
	`backgroundSize`	Supported
	`backgroundRepeat`	Supported
	`backgroundColor`	Supported
	`backgroundClip`	Supported
	`backgroundBlendMode`	Supported
`boxShadow`		Supported
Clip	`clipPath`	`<basic-shape>`
Clip	`clipRule`	Supported
`mask`	`maskImage`	Supported
	`maskSize`	Supported
	`maskPosition`	Supported
	`maskRepeat`	Supported
`transform`	`translate` (`translateX`, `translateY`)	Only 2D is supported
	`rotate`
	`scale` (`scaleX`, `scaleY`)
`transformOrigin`		Supported
Grid	`gridAutoColumns`	Supported
	`gridAutoRows`	Supported
	`gridAutoFlow`	Supported
	`gridColumn`	Supported
	`gridRow`	Supported
	`gridTemplateColumns`	Supported
	`gridTemplateRows`	Supported
	`gridTemplateAreas`	Supported
Typography	`textOverflow`	`ellipsis`, `clip`, custom character
	`textTransform`	`none`, `uppercase`, `lowercase`, `capitalize`
	`fontStyle`	Supported
	`color`	Supported
	`textShadow`	Supported
	`fontSize`	Supported
	`fontFamily`	Font fallback supported
	`lineHeight`	Supported
	`verticalAlign`	Supported
	`fontWeight`	Supported
	`fontStretch`	Supported
	`fontVariationSettings`	Supported
	`fontFeatureSettings`	Supported
	`fontSynthesis`	`weight`, `style`
	`fontSynthesisWeight`	`auto`, `none`
	`fontSynthesisStyle`	`auto`, `none`
	`lineClamp`	number, `1 "ellipsis character"`
	`textAlign`	Supported
	`letterSpacing`	Supported
	`wordSpacing`	Supported
	`overflowWrap`	Supported
	`wordBreak`	`normal`, `break-all`, `keep-all`, `break-word`
	`whiteSpace`	`normal`, `pre`, `pre-wrap`, `pre-line`, `<text-wrap-mode> <white-space-collapse>`
	`whiteSpaceCollapse`	`preserve`, `collapse`, `preserve-spaces`, `preserve-breaks`
`textWrap`	`textWrapMode`	`wrap`, `nowrap`
`textWrap`	`textWrapStyle`	`auto`, `balance`, `pretty`
`boxSizing`		Supported
`opacity`		Supported
`imageRendering`		`auto`, `smooth`, `pixelated`
`filter`		`<filter-function>`
`backdropFilter`		`<filter-function>`
`WebkitTextStroke`	`WebkitTextStrokeWidth`, `WebkitTextStrokeColor`, `WebkitTextFillColor`	Supported
`strokeLinejoin`		`miter`, `round`, `bevel`
`textDecoration`	`textDecorationLine`	`underline`, `line-through`, `overline`
	`textDecorationColor`	Supported
	`textDecorationThickness`	Supported
`textDecorationSkipInk`		`auto`, `none`
`isolation`		Supported
`mixBlendMode`		Supported
`visibility`		`visible`, `hidden`

On this page