@takumi-rs/image-response

A universal ImageResponse implementation for Takumi in Next.js and other environments.

Checkout the migration guide From Next.js ImageResponse for more details.

Installation

npm install @takumi-rs/image-response @takumi-rs/core @takumi-rs/helpers

Usage

import ImageResponse from "@takumi-rs/image-response";

export function GET(request: Request) {
  return new ImageResponse(<OgImage />, {
    width: 1200,
    height: 630,
    format: "webp",
    headers: {
      "Cache-Control": "public, immutable, max-age=31536000",
    },
  });
}

Fonts

Takumi comes with full axis Geist and Geist Mono by default.

We have global fonts cache to avoid loading the same fonts multiple times.

If your environment supports top-level await, you can load the fonts in global scope and reuse the fonts array.

const fonts = [
  {
    name: "Inter",
    data: await fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
    style: "normal",
    weight: 400,
  },
];

new ImageResponse(<OgImage />, { fonts });

If your environment doesn't support top-level await, or just want the fonts to get garbage collected after initialization, you can load the fonts like this.

let isFontsLoaded = false;

export function GET(request: Request) {
  const fonts = [];

  if (!isFontsLoaded) {
    isFontsLoaded = true;
    fonts = [
      {
        name: "Inter",
        data: await fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
        style: "normal",
        weight: 400,
      },
    ];
  }

  return new ImageResponse(<OgImage />, { fonts });
}

Bring-Your-Own-Renderer (BYOR)

If you want to use your own renderer instance, you can pass it to the ImageResponse constructor.

import { Renderer } from "@takumi-rs/core";

const renderer = new Renderer();

new ImageResponse(<OgImage />, { renderer });

JSX Options

You can pass the JSX options to the ImageResponse constructor.

new ImageResponse(<OgImage />, { 
  jsx: { 
    defaultStyles: false,
  } 
});

WASM Usage

If you want to use this package in browser environment/cloudflare, you can import from the wasm entry point.

Make sure you have the @takumi-rs/wasm package installed as well.

Check the additional bundler setup section for more setup details.

import { describe, expect, test } from "bun:test";
import { ImageResponse } from "@takumi-rs/image-response/wasm";
import module from "@takumi-rs/wasm/next";

export default {
  fetch() {
    return new ImageResponse(<div>Hello</div>, {
      module,
    });
  }
}