Images & emoji

External Images

Takumi fetches external images in src attributes and CSS background-image / mask-image.

Add a caching layer by passing resourcesOptions.cache to render.

import { render } from "takumi-js";

const element = <img src="https://example.com/image.png" />;

const cache = new Map<string, ArrayBuffer>();

const image = await render(element, {
  resourcesOptions: {
    cache,
  },
});

Pre-fetched Images

Provide images by key so the renderer doesn't have to fetch them itself. Each key can be used in any src field or in the background-image / mask-image CSS properties.

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

export function GET() {
  return new ImageResponse(<OgImage />, {
    images: [
      {
        src: "my-logo",
        data: () => fetch("/logo.png").then((res) => res.arrayBuffer()),
      },
      {
        src: "background",
        data: () => fetch("/background.png").then((res) => res.arrayBuffer()),
      },
    ],
  });
}

function OgImage() {
  return (
    <div
      style={{
        backgroundImage: "url(background)",
      }}
    >
      <img src="my-logo" />
    </div>
  );
}

Decode caching

Takumi caches each decoded image so a repeated src is decoded once. Two independent layers exist:

The per-image cache mode takes two values:

• auto (default): cache the decoded image; the entry is evictable.
• none: skip the cache. Use it for a one-off image you won't render again, to avoid holding its pixels in memory.

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

export function GET() {
  return new ImageResponse(<div />, {
    images: [
      {
        src: "banner",
        data: () => fetch("/banner.png").then((res) => res.arrayBuffer()),
        cache: "none", 
      },
    ],
  });
}

Emoji

Dynamic fetching

ImageResponse accepts a satori-compatible emoji option. The providers are twemoji, blobmoji, noto, openmoji, fluent, and fluentFlat.

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

export function GET() {
  return new ImageResponse(<div tw="flex justify-center items-center text-3xl">Hello 👋😁</div>, {
    emoji: "twemoji", 
  });
}

Manual extraction

ImageResponse calls the extractEmojis helper for you. The helper splits emoji from text into image nodes pointing at a CDN. Run the steps yourself to fetch emoji bytes alongside other resources.

import { extractEmojis } from "takumi-js/helpers/emoji";
import { fromJsx } from "takumi-js/helpers/jsx";
import { extractResourceUrls, fetchResources } from "takumi-js/helpers";
import { Renderer } from "takumi-js/node";

let { node } = await fromJsx(<div tw="flex justify-center items-center text-3xl">Hello 👋😁</div>);
node = extractEmojis(node, "twemoji");

const resourceUrls = extractResourceUrls(node);
const images = await fetchResources(resourceUrls);

const renderer = new Renderer();

const image = await renderer.render(node, {
  images,
});

COLR / bitmap fonts

Takumi renders COLR (Color Layer) fonts, the format behind packs like Twemoji-COLR. A COLR file is much smaller than a bitmap emoji font like Noto Color Emoji. The renderer draws emoji from the loaded glyphs, with no network request.

Two steps:

• Register the font through fonts.
• Set emoji: "from-font".