Custom Templates

import { defineTemplate, clsx } from "@ogify/core";

export type MyTemplateParams = {
  title: string;
  description: string;
};

const myTemplate = defineTemplate<MyTemplateParams>({
  // 1. Define Fonts
  fonts: [
    { name: "Inter", weight: 400 },
    { name: "Inter", weight: 700 },
  ],

  // 2. Define Renderer — return JSX (recommended)
  renderer: ({ params, isRTL, width, height }) => (
    <div
      tw={clsx("flex flex-col w-full h-full bg-white p-16")}
      style={{ width, height }}
    >
      <div tw="text-[64px] font-bold">{params.title}</div>
      <div tw="text-[28px] mt-4 opacity-80">{params.description}</div>
    </div>
  ),

  // 3. (Optional) Emoji provider
  emojiProvider: "twemoji",
});

import { clsx } from "@ogify/core";

<div tw={clsx(
  "flex flex-col items-center justify-center w-full h-full bg-slate-900 text-white",
  isRTL && "items-end"
)}>
  ...
</div>

<div style={{ backgroundColor: params.color, width, height }}>
  ...
</div>

{htmlSnippet('<span class="font-bold">Featured</span> article', { fontSize: 28 })}

renderer: ({ params, width, height }) => `
  <div class="flex w-full h-full" style="width: ${width}px; height: ${height}px;">
    <h1 class="text-[64px] font-bold">${params.title}</h1>
  </div>
`,

renderer: ({ params }) => (
  <div tw="flex w-full h-full">
    {params.showBadge ? <div tw="text-sm bg-white/20 px-4 py-2 rounded">{params.badge}</div> : null}
    <div tw="text-[48px] font-bold">{params.title}</div>
  </div>
),