Render Reactcomponents intoimages, animations.

From JSX to images, animations, and video frames at native speed. Supports rich CSS layout, WOFF2 fonts, and complex text scripts.

Get Started Open Playground

Bring Existing Code

JSX in. Pixels out.

Images, animations, video frames all in one engine.

route.tsx

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

export async function GET() {
  return new ImageResponse(
    <div
      style={{
        display: "flex",
        background: "linear-gradient(135deg, #0a0a0a, #1a0a0a)",
        color: "white",
        padding: 48,
        width: "100%",
        height: "100%",
        fontFamily: "Geist",
      }}
    >
      <h1 style={{ fontSize: 64 }}>
        Hello, Takumi ✌️
      </h1>
    </div>,
  );
}