Better OG

TanStack Start

Use better-og with TanStack Start for server-side OG image rendering.

Import

import { createOgRouteHandler } from "@better-og/tanstack-start";

Usage

The TanStack Start adapter uses Takumi on Node and supports both route params and localeFromRequest.

import { loadGoogleFonts, resolveFontSetup } from "@better-og/core";
import { createOgRouteHandler } from "@better-og/tanstack-start";

const fontSetup = await resolveFontSetup({
  baseFonts: await loadGoogleFonts({
    family: "Inter",
    weights: [400, 700],
  }),
});

export const handler = createOgRouteHandler({
  component: (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: fontSetup.families.base,
      }}
    >
      TanStack Start OG
    </div>
  ),
  baseFonts: fontSetup.fonts,
});
Edit on GitHub

Last updated on

On this page

ImportUsage