Takumi
Integrate Takumi for framework agnostic and fast metadata image generation.
Installation
npm install takumi-jsMetadata Image
Add a function that returns the image URL of a page, and reference the image in the metadata of docs pages:
import { createGetUrl } from 'fumadocs-core/source';
const getImageUrl = createGetUrl('/og/docs');
export function getPageImageUrl(page: { slugs: string[]; locale?: string }) {
const segments = [...page.slugs, 'image.webp'];
return { segments, url: getImageUrl(segments, page.locale) };
}The image of /docs/my-page is at /og/docs/my-page/image.webp, since WebP images are smaller than PNG ones. To generate PNG, use image.png and format: 'png' instead.
Then create a route to generate the images:
import { createFileRoute } from '@tanstack/react-router';
import { generateOGImage } from 'fumadocs-ui/og/takumi';
import { source } from '@/lib/source';
export const Route = createFileRoute('/og/docs/$')({
server: {
handlers: {
GET: ({ params }) => {
const slugs = (params._splat?.split('/') ?? []).filter((v) => v.length > 0).slice(0, -1);
const page = source.getPage(slugs);
if (!page) return new Response(undefined, { status: 404 });
return generateOGImage({
title: page.data.title,
description: page.data.description,
site: 'My App',
format: 'webp',
});
},
},
},
});Takumi bundles the full-axis (100-900) Geist and Geist Mono fonts, so no font setup is needed.
See Takumi's Documentation for advanced usage.
Other Templates
See Takumi Templates for the available templates.
How is this guide?
Last updated on
General Translation
Ferry Health
assistant-ui
Inkeep