---
title: "Hono"
description: "Generate dynamic OG images and on-demand graphics in Hono with the Imejis.io API. A secure, edge-friendly route that keeps your API key server-side and returns a cached image."
url: "https://www.imejis.io/apis/hono"
published: "2026-07-27"
---
# Hono
## Hono
Generate a unique OG image for every page, or any on-demand graphic, from a single Imejis template. The pattern below uses a Hono **route** as a thin proxy: your API key stays on the server, and the browser (and social crawlers) only ever see your own URL. It runs anywhere Hono does, including edge runtimes.
Set two environment variables first: `IMEJIS_API_KEY` (from your dashboard) and `IMEJIS_DESIGN_ID` (any design's ID).
```bash title=".env"
IMEJIS_API_KEY=your_api_key
IMEJIS_DESIGN_ID=your_design_id
```
### 1. A route that renders the image
This route takes a `title` query param, POSTs it to Imejis as a `component.property` override, and returns the finished image. Because the key is sent server-side, it never reaches the client.
```typescript showLineNumbers title="src/index.ts"
import { Hono } from "hono"
const app = new Hono()
app.get("/og", async (c) => {
const title = c.req.query("title") ?? "Untitled"
const res = await fetch(
`https://render.imejis.io/v1/${process.env.IMEJIS_DESIGN_ID}`,
{
method: "POST",
headers: {
"dma-api-key": process.env.IMEJIS_API_KEY as string,
"Content-Type": "application/json",
},
body: JSON.stringify({ "headline.text": title }),
}
)
return c.body(res.body, 200, {
"Content-Type": "image/jpeg",
// Renders are deterministic, so cache aggressively at the edge/CDN.
"Cache-Control": "public, immutable, no-transform, max-age=31536000",
})
})
export default app
```
### 2. Point your metadata at it
Reference the route from your HTML ``, passing each page's real data. Social platforms fetch `/og?title=…` from your own domain, no key exposed.
```html showLineNumbers title="Page head"
```
**Override any field.** Each dynamic component exposes keys like `headline.text`, `title.color`, or `image.image`. Send only the ones you want to change. A design's overridable fields are listed in its Share / API panel.