Quickstart

Install takumi-js, render a node tree, write the bytes. No browser. No native setup.

Install

npm i takumi-js@beta

On Node.js this installs the native renderer (@takumi-rs/core). For the edge or browser, see Runtimes.

Render an image

render takes JSX and returns image bytes. Geist is built in, so text works without loading a font.

import { render } from "takumi-js";
import { writeFile } from "node:fs/promises";

const png = await render(
  <div
    style={{
      width: "100%",
      height: "100%",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: 72,
      background: "linear-gradient(to bottom right, #fff7ed, #fecaca)",
    }}
  >
    Hello Takumi
  </div>,
  { width: 1200, height: 630 },
);

await writeFile("hello.png", png);

Run it and open hello.png. The root is 100%, so it fills the 1200 × 630 canvas.

Serve it over HTTP

For an OG image endpoint, return an ImageResponse. It extends the web Response. Any runtime with Request and Response can return it.

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

export function GET() {
  return new ImageResponse(<div style={{ width: "100%", height: "100%" }}>Hello Takumi</div>, {
    width: 1200,
    height: 630,
  });
}

Next steps

• Wire it into your framework: Integrations.
• Run it on the edge or in the browser: Runtimes.
• Build the design: Layout Engine, Tailwind, Fonts & text.