> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ogify.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Emoji Loader

> Rendering emojis in your Open Graph images

OGify supports rendering emojis in your images by downloading vector or image assets from open-source emoji providers.

## Configuration

Specify `emojiProvider` when defining a template. It is set per template during template definition.

```tsx theme={null}
import { defineTemplate } from "@ogify/core";

const template = defineTemplate({
  fonts: [{ name: "Inter", weight: 400 }],
  emojiProvider: "twemoji",
  renderer: ({ params }) => (
    <div tw="flex w-full h-full items-center justify-center text-[48px]">
      {params.title}
    </div>
  ),
});
```

## Supported Providers

<CardGroup cols={2}>
  <Card title="Twemoji" icon="twitter">
    Twitter Emojis - Colorful, rounded style
  </Card>

  <Card title="Fluent" icon="microsoft">
    Microsoft Fluent Emojis - 3D style with color
  </Card>

  <Card title="Fluent Flat" icon="microsoft">
    Microsoft Fluent Emojis - Flat 2D variant
  </Card>

  <Card title="Noto" icon="google">
    Google Noto Emojis - Current standard (default)
  </Card>

  <Card title="Blobmoji" icon="google">
    Blobmojis - Google's blob-style emoji
  </Card>

  <Card title="OpenMoji" icon="palette">
    OpenMoji - Open-source with outlined style
  </Card>
</CardGroup>

## Usage

Include emoji characters directly in JSX text content. Satori detects them and replaces them with the corresponding image asset during rendering.

```tsx theme={null}
renderer: ({ params }) => (
  <div tw="flex flex-col w-full h-full items-center justify-center">
    <div tw="text-[64px] font-bold">{params.title}</div>
    <div tw="text-[32px] mt-4">🎉 🚀 ✨</div>
  </div>
);
```

You can also override the emoji provider per render call:

```typescript theme={null}
await renderer.renderToImage(
  "myTemplate",
  { title: "Hello 👋" },
  { emojiProvider: "fluent" }
);
```

<Tip>
  Emoji assets are automatically cached by the renderer's cache system to avoid
  repeated network requests and improve performance.
</Tip>